feat(project): add loadingoverlay to all forms

jwplayer · Aug 2, 2021 · 3ba922a · 3ba922a
1 parent 6d28b91
commit 3ba922a
Show file tree

Hide file tree

Showing 12 changed files with 97 additions and 57 deletions.
diff --git a/src/components/CancelSubscriptionForm/CancelSubscriptionForm.tsx b/src/components/CancelSubscriptionForm/CancelSubscriptionForm.tsx
@@ -10,9 +10,10 @@ type Props = {
   onConfirm: () => void;
   onCancel: () => void;
   error: string | null;
+  submitting: boolean;
 };
 
-const CancelSubscriptionForm: React.FC<Props> = ({ onConfirm, onCancel, error }: Props) => {
+const CancelSubscriptionForm: React.FC<Props> = ({ onConfirm, onCancel, error, submitting }: Props) => {
   const { t } = useTranslation('account');
 
   return (
@@ -27,6 +28,7 @@ const CancelSubscriptionForm: React.FC<Props> = ({ onConfirm, onCancel, error }:
         variant="contained"
         onClick={onConfirm}
         fullWidth
+        disabled={submitting}
       />
       <Button label={t('cancel_subscription.no_thanks')} variant="outlined" onClick={onCancel} fullWidth />
     </div>

diff --git a/src/components/CheckoutForm/CheckoutForm.tsx b/src/components/CheckoutForm/CheckoutForm.tsx
@@ -10,6 +10,7 @@ import Close from '../../icons/Close';
 import DialogBackButton from '../DialogBackButton/DialogBackButton';
 import PayPal from '../../icons/PayPal';
 import CreditCard from '../../icons/CreditCard';
+import LoadingOverlay from '../LoadingOverlay/LoadingOverlay';
 
 import styles from './CheckoutForm.module.scss';
 
@@ -30,6 +31,7 @@ type Props = {
   order: Order;
   offer: Offer;
   renderPaymentMethod?: () => JSX.Element | null;
+  submitting: boolean;
 };
 
 const CheckoutForm: React.FC<Props> = ({
@@ -49,6 +51,7 @@ const CheckoutForm: React.FC<Props> = ({
   onCouponFormSubmit,
   onRedeemCouponButtonClick,
   renderPaymentMethod,
+  submitting,
 }) => {
   const { t } = useTranslation('account');
 
@@ -178,6 +181,7 @@ const CheckoutForm: React.FC<Props> = ({
         </div>
       ) : null}
       <div className={styles.paymentDetails}>{renderPaymentMethod ? renderPaymentMethod() : null}</div>
+      {submitting && <LoadingOverlay transparentBackground inline />}
     </div>
   );
 };

diff --git a/src/components/ChooseOfferForm/ChooseOfferForm.tsx b/src/components/ChooseOfferForm/ChooseOfferForm.tsx
@@ -10,6 +10,7 @@ import FormFeedback from '../FormFeedback/FormFeedback';
 import { getOfferPrice } from '../../utils/subscription';
 import DialogBackButton from '../DialogBackButton/DialogBackButton';
 import type { FormErrors } from '../../../types/form';
+import LoadingOverlay from '../LoadingOverlay/LoadingOverlay';
 
 import styles from './ChooseOfferForm.module.scss';
 
@@ -129,6 +130,7 @@ const ChooseOfferForm: React.FC<Props> = ({
           </div>
         ) : null}
       </div>
+      {submitting && <LoadingOverlay transparentBackground inline />}
       <Button label={t('choose_offer.continue')} disabled={submitting} variant="contained" color="primary" type="submit" fullWidth />
     </form>
   );

diff --git a/src/components/EditPasswordForm/EditPasswordForm.tsx b/src/components/EditPasswordForm/EditPasswordForm.tsx
@@ -11,6 +11,7 @@ import Visibility from '../../icons/Visibility';
 import VisibilityOff from '../../icons/VisibilityOff';
 import useToggle from '../../hooks/useToggle';
 import PasswordStrength from '../PasswordStrength/PasswordStrength';
+import LoadingOverlay from '../LoadingOverlay/LoadingOverlay';
 
 import styles from './EditPasswordForm.module.scss';
 
@@ -49,6 +50,7 @@ const EditPasswordForm: React.FC<Props> = ({ onSubmit, onChange, value, errors,
       />
       <PasswordStrength password={value.password} />
       <Button type="submit" className={styles.button} fullWidth color="primary" disabled={submitting} label={t('reset.confirm')} />
+      {submitting && <LoadingOverlay transparentBackground inline />}
     </form>
   );
 };

diff --git a/src/components/PersonalDetailsForm/PersonalDetailsForm.tsx b/src/components/PersonalDetailsForm/PersonalDetailsForm.tsx
@@ -9,6 +9,7 @@ import Dropdown from '../Dropdown/Dropdown';
 import Checkbox from '../Checkbox/Checkbox';
 import Radio from '../Radio/Radio';
 import DateField from '../DateField/DateField';
+import LoadingOverlay from '../LoadingOverlay/LoadingOverlay';
 
 import styles from './PersonalDetailsForm.module.scss';
 
@@ -172,7 +173,7 @@ const PersonalDetailsForm: React.FC<Props> = ({
       {fields.birthDate?.enabled ? (
         <DateField
           value={values.birthDate}
-          onChange={value => setValue('birthDate', value)}
+          onChange={(value) => setValue('birthDate', value)}
           label={t('personal_details.birth_date')}
           placeholder={t('personal_details.birth_date')}
           error={!!errors.birthDate || !!errors.form}
@@ -192,6 +193,7 @@ const PersonalDetailsForm: React.FC<Props> = ({
         disabled={submitting}
         fullWidth
       />
+      {submitting && <LoadingOverlay transparentBackground inline />}
     </form>
   );
 };

diff --git a/src/components/RegistrationForm/RegistrationForm.tsx b/src/components/RegistrationForm/RegistrationForm.tsx
@@ -14,6 +14,7 @@ import VisibilityOff from '../../icons/VisibilityOff';
 import PasswordStrength from '../PasswordStrength/PasswordStrength';
 import Checkbox from '../Checkbox/Checkbox';
 import Spinner from '../Spinner/Spinner';
+import LoadingOverlay from '../LoadingOverlay/LoadingOverlay';
 
 import styles from './RegistrationForm.module.scss';
 
@@ -133,6 +134,7 @@ const RegistrationForm: React.FC<Props> = ({
           {t('login.sign_in')}
         </button>
       </div>
+      {submitting && <LoadingOverlay transparentBackground inline />}
     </form>
   );
 };

diff --git a/src/components/RenewSubscriptionForm/RenewSubscriptionForm.tsx b/src/components/RenewSubscriptionForm/RenewSubscriptionForm.tsx
@@ -13,11 +13,12 @@ type Props = {
   subscription: Subscription;
   customer: Customer;
   error: string | null;
+  submitting: boolean;
   onConfirm: () => void;
   onClose: () => void;
 };
 
-const RenewSubscriptionForm: React.FC<Props> = ({ subscription, customer, error, onConfirm, onClose }: Props) => {
+const RenewSubscriptionForm: React.FC<Props> = ({ subscription, customer, error, submitting, onConfirm, onClose }: Props) => {
   const { t } = useTranslation('account');
 
   return (
@@ -42,6 +43,7 @@ const RenewSubscriptionForm: React.FC<Props> = ({ subscription, customer, error,
         label={t('renew_subscription.renew_subscription')}
         onClick={onConfirm}
         fullWidth
+        disabled={submitting}
       />
       <Button label={t('renew_subscription.no_thanks')} onClick={onClose} fullWidth />
     </div>

diff --git a/src/components/ResetPasswordForm/ResetPasswordForm.tsx b/src/components/ResetPasswordForm/ResetPasswordForm.tsx
@@ -8,15 +8,16 @@ import styles from './ResetPasswordForm.module.scss';
 type Props = {
   onCancel: () => void;
   onReset: () => void;
+  submitting: boolean;
 };
 
-const ResetPasswordForm: React.FC<Props> = ({ onCancel, onReset }: Props) => {
+const ResetPasswordForm: React.FC<Props> = ({ onCancel, onReset, submitting }: Props) => {
   const { t } = useTranslation('account');
   return (
     <div className={styles.resetPassword}>
       <h5 className={styles.title}>{t('reset.reset_password')}</h5>
       <p className={styles.text}>{t('reset.text')}</p>
-      <Button onClick={onReset} className={styles.button} fullWidth color="primary" label={t('reset.yes')} />
+      <Button onClick={onReset} className={styles.button} fullWidth color="primary" label={t('reset.yes')} disabled={submitting} />
       <Button onClick={onCancel} fullWidth label={t('reset.no')} />
     </div>
   );

diff --git a/src/containers/AccountModal/forms/CancelSubscription.tsx b/src/containers/AccountModal/forms/CancelSubscription.tsx
@@ -14,11 +14,11 @@ const CancelSubscription = () => {
   const history = useHistory();
   const subscription = AccountStore.useState((s) => s.subscription);
   const [cancelled, setCancelled] = useState(false);
-  const [loading, setLoading] = useState(false);
+  const [submitting, setSubmitting] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
   const cancelSubscriptionConfirmHandler = async () => {
-    setLoading(true);
+    setSubmitting(true);
     setError(null);
 
     try {
@@ -28,7 +28,7 @@ const CancelSubscription = () => {
       setError(t('cancel_subscription.unknown_error_occurred'));
     }
 
-    setLoading(false);
+    setSubmitting(false);
   };
 
   const closeHandler = () => {
@@ -42,9 +42,9 @@ const CancelSubscription = () => {
       {cancelled ? (
         <SubscriptionCancelled expiresDate={formatDate(subscription.expiresAt)} onClose={closeHandler} />
       ) : (
-        <CancelSubscriptionForm onConfirm={cancelSubscriptionConfirmHandler} onCancel={closeHandler} error={error} />
+        <CancelSubscriptionForm onConfirm={cancelSubscriptionConfirmHandler} onCancel={closeHandler} submitting={submitting} error={error} />
       )}
-      {loading ? <LoadingOverlay inline /> : null}
+      {submitting ? <LoadingOverlay transparentBackground inline /> : null}
     </React.Fragment>
   );
 };

diff --git a/src/containers/AccountModal/forms/Checkout.tsx b/src/containers/AccountModal/forms/Checkout.tsx
@@ -2,7 +2,15 @@ import React, { useCallback, useEffect, useState } from 'react';
 import { useHistory } from 'react-router';
 
 import CheckoutForm from '../../../components/CheckoutForm/CheckoutForm';
-import { CheckoutStore, createOrder, updateOrder, getPaymentMethods, paymentWithoutDetails, adyenPayment, paypalPayment } from '../../../stores/CheckoutStore';
+import {
+  CheckoutStore,
+  createOrder,
+  updateOrder,
+  getPaymentMethods,
+  paymentWithoutDetails,
+  adyenPayment,
+  paypalPayment,
+} from '../../../stores/CheckoutStore';
 import { addQueryParam } from '../../../utils/history';
 import useForm from '../../../hooks/useForm';
 import LoadingOverlay from '../../../components/LoadingOverlay/LoadingOverlay';
@@ -13,7 +21,7 @@ import { addQueryParams } from '../../../utils/formatting';
 
 const Checkout = () => {
   const history = useHistory();
-  const [paymentError, setPaymentError] = useState<string|undefined>(undefined);
+  const [paymentError, setPaymentError] = useState<string | undefined>(undefined);
   const [updatingOrder, setUpdatingOrder] = useState(false);
   const [couponFormOpen, setCouponFormOpen] = useState(false);
   const [couponCodeApplied, setCouponCodeApplied] = useState(false);
@@ -86,7 +94,7 @@ const Checkout = () => {
       setUpdatingOrder(true);
       setPaymentError(undefined);
       await paymentWithoutDetails();
-      history.replace(addQueryParam(history, 'u', 'welcome'))
+      history.replace(addQueryParam(history, 'u', 'welcome'));
     } catch (error: unknown) {
       if (error instanceof Error) {
         setPaymentError(error.message);
@@ -100,9 +108,9 @@ const Checkout = () => {
     try {
       setPaymentError(undefined);
       setUpdatingOrder(true);
-      const successUrl = addQueryParams(window.location.href, { 'u': 'welcome' });
-      const cancelUrl = addQueryParams(window.location.href, { 'u': 'paypal-cancelled' });
-      const errorUrl = addQueryParams(window.location.href, { 'u': 'paypal-error' });
+      const successUrl = addQueryParams(window.location.href, { u: 'welcome' });
+      const cancelUrl = addQueryParams(window.location.href, { u: 'paypal-cancelled' });
+      const errorUrl = addQueryParams(window.location.href, { u: 'paypal-error' });
       const response = await paypalPayment(successUrl, cancelUrl, errorUrl);
 
       if (response.redirectUrl) {
@@ -116,22 +124,25 @@ const Checkout = () => {
     setUpdatingOrder(false);
   };
 
-  const handleAdyenSubmit = useCallback(async (data: AdyenEventData) => {
-    if (!data.isValid) return;
+  const handleAdyenSubmit = useCallback(
+    async (data: AdyenEventData) => {
+      if (!data.isValid) return;
 
-    try {
-      setUpdatingOrder(true);
-      setPaymentError(undefined);
-      await adyenPayment(data.data.paymentMethod);
-      history.replace(addQueryParam(history, 'u', 'welcome'))
-    } catch (error: unknown) {
-      if (error instanceof Error) {
-        setPaymentError(error.message);
+      try {
+        setUpdatingOrder(true);
+        setPaymentError(undefined);
+        await adyenPayment(data.data.paymentMethod);
+        history.replace(addQueryParam(history, 'u', 'welcome'));
+      } catch (error: unknown) {
+        if (error instanceof Error) {
+          setPaymentError(error.message);
+        }
       }
-    }
 
-    setUpdatingOrder(false);
-  }, [history]);
+      setUpdatingOrder(false);
+    },
+    [history],
+  );
 
   const renderPaymentMethod = () => {
     const paymentMethod = paymentMethods?.find((method) => method.id === paymentMethodId);
@@ -161,27 +172,25 @@ const Checkout = () => {
   }
 
   return (
-    <React.Fragment>
-      <CheckoutForm
-        order={order}
-        offer={offer}
-        onBackButtonClick={backButtonClickHandler}
-        paymentMethods={paymentMethods}
-        paymentMethodId={paymentMethodId}
-        onPaymentMethodChange={handlePaymentMethodChange}
-        onCouponFormSubmit={couponCodeForm.handleSubmit}
-        onCouponInputChange={couponCodeForm.handleChange}
-        onRedeemCouponButtonClick={() => setCouponFormOpen(true)}
-        onCloseCouponFormClick={() => setCouponFormOpen(false)}
-        couponInputValue={couponCodeForm.values.couponCode}
-        couponFormOpen={couponFormOpen}
-        couponFormApplied={couponCodeApplied}
-        couponFormSubmitting={couponCodeForm.submitting}
-        couponFormError={!!couponCodeForm.errors.couponCode}
-        renderPaymentMethod={renderPaymentMethod}
-      />
-      {updatingOrder ? <LoadingOverlay inline /> : null}
-    </React.Fragment>
+    <CheckoutForm
+      order={order}
+      offer={offer}
+      onBackButtonClick={backButtonClickHandler}
+      paymentMethods={paymentMethods}
+      paymentMethodId={paymentMethodId}
+      onPaymentMethodChange={handlePaymentMethodChange}
+      onCouponFormSubmit={couponCodeForm.handleSubmit}
+      onCouponInputChange={couponCodeForm.handleChange}
+      onRedeemCouponButtonClick={() => setCouponFormOpen(true)}
+      onCloseCouponFormClick={() => setCouponFormOpen(false)}
+      couponInputValue={couponCodeForm.values.couponCode}
+      couponFormOpen={couponFormOpen}
+      couponFormApplied={couponCodeApplied}
+      couponFormSubmitting={couponCodeForm.submitting}
+      couponFormError={!!couponCodeForm.errors.couponCode}
+      renderPaymentMethod={renderPaymentMethod}
+      submitting={updatingOrder}
+    />
   );
 };
 

diff --git a/src/containers/AccountModal/forms/RenewSubscription.tsx b/src/containers/AccountModal/forms/RenewSubscription.tsx
@@ -13,11 +13,11 @@ const RenewSubscription = () => {
   const history = useHistory();
   const { subscription, user } = AccountStore.useState((s) => s);
   const [renewed, setRenewed] = useState(false);
-  const [loading, setLoading] = useState(false);
+  const [submitting, setSubmitting] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
   const renewSubscriptionConfirmHandler = async () => {
-    setLoading(true);
+    setSubmitting(true);
     setError(null);
 
     try {
@@ -27,7 +27,7 @@ const RenewSubscription = () => {
       setError(t('renew_subscription.unknown_error_occurred'));
     }
 
-    setLoading(false);
+    setSubmitting(false);
   };
 
   const closeHandler = () => {
@@ -41,9 +41,16 @@ const RenewSubscription = () => {
       {renewed ? (
         <SubscriptionRenewed onClose={closeHandler} subscription={subscription} customer={user} />
       ) : (
-        <RenewSubscriptionForm subscription={subscription} customer={user} error={error} onConfirm={renewSubscriptionConfirmHandler} onClose={closeHandler} />
+        <RenewSubscriptionForm
+          subscription={subscription}
+          customer={user}
+          error={error}
+          onConfirm={renewSubscriptionConfirmHandler}
+          onClose={closeHandler}
+          submitting={submitting}
+        />
       )}
-      {loading ? <LoadingOverlay inline /> : null}
+      {submitting ? <LoadingOverlay inline /> : null}
     </React.Fragment>
   );
 };