fix(payment): fix coupon code error

src/components/CheckoutForm/CheckoutForm.tsx

@@ -24,7 +24,7 @@ type Props = {
   onRedeemCouponButtonClick: () => void;
   onCloseCouponFormClick: () => void;
   couponFormOpen: boolean;
-  couponFormError?: boolean;
+  couponFormError?: string;
   couponFormApplied?: boolean;
   couponFormSubmitting?: boolean;
   couponInputValue: string;
@@ -99,8 +99,8 @@ const CheckoutForm: React.FC<Props> = ({
               />
               <Button variant="outlined" label="Apply" type="submit" disabled={couponFormSubmitting} />
             </div>
-            {couponFormError ? <FormFeedback variant="error">Coupon code error! :-(</FormFeedback> : null}
-            {couponFormApplied ? <FormFeedback variant="success">Coupon code applied!</FormFeedback> : null}
+            {couponFormError ? <FormFeedback variant="error">{couponFormError}</FormFeedback> : null}
+            {couponFormApplied ? <FormFeedback variant="success">{t('checkout.coupon_applied')}</FormFeedback> : null}
           </form>
         ) : (
           <Button variant="outlined" label={t('checkout.redeem_coupon')} onClick={onRedeemCouponButtonClick} />

src/containers/AccountModal/forms/Checkout.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { useHistory } from 'react-router';
+import { useTranslation } from 'react-i18next';
 
 import CheckoutForm from '../../../components/CheckoutForm/CheckoutForm';
 import {
@@ -20,6 +21,7 @@ import NoPaymentRequired from '../../../components/NoPaymentRequired/NoPaymentRe
 import { addQueryParams } from '../../../utils/formatting';
 
 const Checkout = () => {
+  const { t } = useTranslation('account');
   const history = useHistory();
   const [paymentError, setPaymentError] = useState<string | undefined>(undefined);
   const [updatingOrder, setUpdatingOrder] = useState(false);
@@ -38,7 +40,13 @@ const Checkout = () => {
         await updateOrder(order.id, paymentMethodId, values.couponCode);
         setCouponCodeApplied(true);
       } catch (error: unknown) {
-        setErrors({ couponCode: 'Something went wrong!' });
+        if (error instanceof Error) {
+          if (error.message.includes(`Order with id ${order.id} not found`)) {
+            history.replace(addQueryParam(history, 'u', 'choose-offer'));
+          } else {
+            setErrors({ couponCode: t('checkout.coupon_not_valid') });
+          }
+        }
       }
     }
 
@@ -187,7 +195,7 @@ const Checkout = () => {
       couponFormOpen={couponFormOpen}
       couponFormApplied={couponCodeApplied}
       couponFormSubmitting={couponCodeForm.submitting}
-      couponFormError={!!couponCodeForm.errors.couponCode}
+      couponFormError={couponCodeForm.errors.couponCode}
       renderPaymentMethod={renderPaymentMethod}
       submitting={updatingOrder}
     />

src/i18n/locales/en_US/account.json

@@ -10,7 +10,9 @@
     "applicable_tax": "Applicable tax ({{taxRate}}%)",
     "close": "Close",
     "continue": "Continue",
+    "coupon_applied": "Your coupon code has been applied",
     "coupon_discount": "Coupon discount",
+    "coupon_not_valid": "Coupon is not valid, please try again",
     "credit_card": "Credit Card",
     "discount_period": "For the first {{period}}",
     "discount_period_plural": "For {{count}} {{period}}",

src/i18n/locales/nl_NL/account.json

@@ -10,7 +10,9 @@
     "applicable_tax": "",
     "close": "",
     "continue": "",
+    "coupon_applied": "",
     "coupon_discount": "",
+    "coupon_not_valid": "",
     "credit_card": "",
     "discount_period": "",
     "discount_period_plural": "",

src/stores/CheckoutStore.ts

@@ -74,9 +74,12 @@ export const updateOrder = async (orderId: number, paymentMethodId?: number, cou
   const response = await checkoutService.updateOrder(updateOrderPayload, cleengSandbox, auth.jwt);
 
   if (response.errors.length > 0) {
-    CheckoutStore.update((s) => {
-      s.order = null;
-    });
+    // clear the order when the order doesn't exist on the server
+    if (response.errors[0].includes(`Order with ${orderId} not found`)) {
+      CheckoutStore.update((s) => {
+        s.order = null;
+      });
+    }
 
     throw new Error(response.errors[0]);
   }