fix(payments-ui): Do not display stale coupon error message before actual error

This pull request:
- Updates to pass in the correct/latest error message managed in `errorMessage` into CouponError component, instead of error (not the source of truth)

Closes:
- PAY-3419

Author: xlisachan

libs/payments/ui/src/lib/actions/applyCoupon.ts

@@ -44,7 +44,7 @@ export const applyCouponAction = async (
       case 'CouponErrorLimitReached':
         response = CouponErrorMessageType.LimitReached;
         break;
-      case 'CouponErrorInvalid':
+      case 'CouponErrorInvalidCode':
       default:
         response = CouponErrorMessageType.Invalid;
     }

libs/payments/ui/src/lib/client/components/CouponForm/index.tsx

@@ -118,7 +118,7 @@ const CouponInput = forwardRef<HTMLInputElement, CouponInputProps>(
   }
 );
 
-const CouponError = ({ error }: { error: string | null }) => {
+const CouponError = ({ error }: { error: CouponErrorMessageType | null }) => {
   const { pending } = useFormStatus();
 
   if (!error || pending) {
@@ -157,7 +157,7 @@ const WithoutCoupon = ({
     return result;
   }
   const routeCoupon = useSearchParams().get('coupon') || undefined;
-  const [error, formAction] = useFormState(applyCoupon, null);
+  const [, formAction] = useFormState(applyCoupon, null);
   useEffect(() => {
     if (routeCoupon) {
       const formData = new FormData();
@@ -206,7 +206,7 @@ const WithoutCoupon = ({
             </Form.Submit>
           </div>
 
-          {errorMessage && error && <CouponError error={error} />}
+          {errorMessage && <CouponError error={errorMessage} />}
         </Form.Field>
       </Form.Root>
     </section>