From b6bed010921837991a886bdb1600497cbd68ba7b Mon Sep 17 00:00:00 2001
From: Kimmo Puputti <git@kimmo.kpuputti.fi>
Date: Thu, 5 Oct 2017 15:13:09 +0300
Subject: [PATCH] Handle upload-over-limit error for profile image

---
 .../ProfileSettingsForm/ProfileSettingsForm.js | 18 +++++++++++++++---
 src/translations/en.json                       |  3 ++-
 src/util/errors.js                             |  8 +++++++-
 3 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/src/containers/ProfileSettingsForm/ProfileSettingsForm.js b/src/containers/ProfileSettingsForm/ProfileSettingsForm.js
index 591a13cf..471fdd9e 100644
--- a/src/containers/ProfileSettingsForm/ProfileSettingsForm.js
+++ b/src/containers/ProfileSettingsForm/ProfileSettingsForm.js
@@ -5,6 +5,7 @@ import { Field, reduxForm, propTypes as formPropTypes } from 'redux-form';
 import classNames from 'classnames';
 import { ensureCurrentUser } from '../../util/data';
 import * as validators from '../../util/validators';
+import { isUploadProfileImageOverLimitError } from '../../util/errors';
 import { Form, Avatar, Button, ImageFromFile, IconSpinner, TextInputField } from '../../components';
 
 import css from './ProfileSettingsForm.css';
@@ -15,11 +16,22 @@ const UPLOAD_CHANGE_DELAY = 2000; // Show spinner so that browser has time to lo
 const RenderAvatar = props => {
   const { accept, id, input, label, type, disabled, uploadImageError } = props;
   const { name, onChange } = input;
-  const error = uploadImageError
-    ? <div className={css.error}>
+
+  let error = null;
+
+  if (isUploadProfileImageOverLimitError(uploadImageError)) {
+    error = (
+      <div className={css.error}>
+        <FormattedMessage id="ProfileSettingsForm.imageUploadFailedFileTooLarge" />
+      </div>
+    );
+  } else if (uploadImageError) {
+    error = (
+      <div className={css.error}>
         <FormattedMessage id="ProfileSettingsForm.imageUploadFailed" />
       </div>
-    : null;
+    );
+  }
 
   return (
     <div className={css.uploadAvatarWrapper}>
diff --git a/src/translations/en.json b/src/translations/en.json
index bccb087e..3bd4f990 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -22,10 +22,10 @@
   "BookingBreakdown.commission": "Saunatime fee",
   "BookingBreakdown.nightCount": "{count, number} {count, plural, one {night} other {nights}}",
   "BookingBreakdown.pricePerNight": "Price per night",
+  "BookingBreakdown.providerTotalCanceled": "Total price",
   "BookingBreakdown.providerTotalDefault": "You'll make",
   "BookingBreakdown.providerTotalDelivered": "You made",
   "BookingBreakdown.providerTotalRejected": "You would have made",
-  "BookingBreakdown.providerTotalCanceled": "Total price",
   "BookingBreakdown.subTotal": "Subtotal",
   "BookingBreakdown.total": "Total price",
   "BookingDatesForm.bookingEndTitle": "End date",
@@ -367,6 +367,7 @@
   "ProfileSettingsForm.firstNamePlaceholder": "John",
   "ProfileSettingsForm.firstNameRequired": "This field is required",
   "ProfileSettingsForm.imageUploadFailed": "Whoopsie, something went wrong - please try again.",
+  "ProfileSettingsForm.imageUploadFailedFileTooLarge": "Image was too big. Maximum size is 10 MB.",
   "ProfileSettingsForm.lastNameLabel": "Last name",
   "ProfileSettingsForm.lastNamePlaceholder": "Doe",
   "ProfileSettingsForm.lastNameRequired": "This field is required",
diff --git a/src/util/errors.js b/src/util/errors.js
index 7ece69da..1bcd82f1 100644
--- a/src/util/errors.js
+++ b/src/util/errors.js
@@ -59,7 +59,13 @@ export const isTooManyEmailVerificationRequestsError = apiError =>
 export const isUploadListingImageOverLimitError = apiError =>
   hasErrorWithCode(apiError, ERROR_CODE_UPLOAD_OVER_LIMIT);
 
-// TODO: avatar upload over limit
+/**
+ * Check if the given API error (from
+ * `sdk.images.uploadProfileImage()`) is due to the image being over
+ * the size limit.
+ */
+export const isUploadProfileImageOverLimitError = apiError =>
+  hasErrorWithCode(apiError, ERROR_CODE_UPLOAD_OVER_LIMIT);
 
 /**
  * Check if the given API error (from `sdk.passwordReset.request()`)