fix: Show the Stripe payment error message and change the status to 400 for charge card issues (#22463)

* fix: show stripe payment error message

* Update PaymentService.ts

* Update chargeCard.handler.ts

* Update chargeCard.handler.ts

* Update PaymentService.ts

* update

* update

apps/web/components/dialog/ChargeCardDialog.tsx

@@ -21,15 +21,17 @@ export const ChargeCardDialog = (props: IRescheduleDialog) => {
   const { t } = useLocale();
   const utils = trpc.useUtils();
   const { isOpenDialog, setIsOpenDialog, bookingId } = props;
-  const [chargeError, setChargeError] = useState(false);
+  const [chargeError, setChargeError] = useState<string | null>(null);
+
   const chargeCardMutation = trpc.viewer.payments.chargeCard.useMutation({
     onSuccess: () => {
       utils.viewer.bookings.invalidate();
       setIsOpenDialog(false);
+      setChargeError(null);
       showToast("Charge successful", "success");
     },
-    onError: () => {
-      setChargeError(true);
+    onError: (error) => {
+      setChargeError(error.message || t("error_charging_card"));
     },
   });
 
@@ -52,7 +54,7 @@ export const ChargeCardDialog = (props: IRescheduleDialog) => {
             {chargeError && (
               <div className="mt-4 flex text-red-500">
                 <Icon name="triangle-alert" className="mr-2 h-5 w-5 " aria-hidden="true" />
-                <p className="text-sm">{t("error_charging_card")}</p>
+                <p className="text-sm">{chargeError}</p>
               </div>
             )}
 
@@ -60,12 +62,13 @@ export const ChargeCardDialog = (props: IRescheduleDialog) => {
               <DialogClose />
               <Button
                 data-testid="send_request"
-                disabled={chargeCardMutation.isPending || chargeError}
-                onClick={() =>
+                disabled={chargeCardMutation.isPending}
+                onClick={() => {
+                  setChargeError(null);
                   chargeCardMutation.mutate({
                     bookingId,
-                  })
-                }>
+                  });
+                }}>
                 {t("charge_attendee", currencyStringParams)}
               </Button>
             </DialogFooter>

apps/web/public/static/locales/en/common.json

@@ -2196,6 +2196,10 @@
   "error_charging_card": "Something went wrong charging the no-show fee. Please try again later.",
   "collect_no_show_fee": "Collect no-show fee",
   "no_show_fee_charged": "No-show fee charged",
+  "your_card_was_declined": "Payment declined. Please try a different card or contact your bank for assistance.",
+  "your_card_does_not_support_this_type_of_purchase": "This card type isn't supported for this purchase. Please use a different payment method.",
+  "amount_must_convert_to_at_least": "Minimum payment amount is $0.50 USD. Please increase your payment amount.",
+  "could_not_charge_card": "Could not charge card for payment.",
   "insights": "Insights",
   "routing_forms": "Routing Forms",
   "testing_workflow_info_message": "When testing this workflow, be aware that Emails and SMS can only be scheduled at least 1 hour in advance",