@lmnto/h-mall-shared 1.0.12 → 1.0.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lmnto/h-mall-shared",
-  "version": "1.0.12",
+  "version": "1.0.14",
   "private": false,
   "sideEffects": false,
   "scripts": {

package/shared/components/payments/RequestProcessingWithCancelConfirm.tsx

@@ -26,6 +26,8 @@ export type RequestProcessingWithCancelConfirmProps = {
   confirmBeforeClose?: boolean;
   /** Called when the user confirms leaving the payment flow (e.g. navigate home). */
   onConfirmLeavePayment?: () => void;
+  /** Optional copy variant for cancel confirmation dialog. Defaults to nowpayments wording. */
+  cancelConfirmVariant?: "nowpayments" | "stripe";
 };
 
 /**
@@ -41,9 +43,11 @@ export function RequestProcessingWithCancelConfirm({
   paymentDetails,
   confirmBeforeClose,
   onConfirmLeavePayment,
+  cancelConfirmVariant = "nowpayments",
 }: RequestProcessingWithCancelConfirmProps) {
   const scopeT = _useScopedI18n("payment.requestProcessingDialog");
   const cancelT = _useScopedI18n("payment.cancelPaymentConfirm");
+  const stripeCancelT = _useScopedI18n("payment.cancelPaymentConfirmStripe");
   const hasPaymentDetails = Boolean(paymentDetails);
   const [cancelConfirmOpen, setCancelConfirmOpen] = useState(false);
 
@@ -69,6 +73,8 @@ export function RequestProcessingWithCancelConfirm({
     setCancelConfirmOpen(false);
   }, []);
 
+  const isStripeVariant = cancelConfirmVariant === "stripe";
+
   return (
     <>
       <Dialog
@@ -200,21 +206,31 @@ export function RequestProcessingWithCancelConfirm({
             variant="h4"
             className="text-base md:text-xl font-semibold text-black-500"
           >
-            {cancelT("title")}
+            {isStripeVariant ? stripeCancelT("title") : cancelT("title")}
           </Typography>
           <ul className="list-disc space-y-3 pl-5 text-sm leading-relaxed text-slate-600 marker:text-slate-500">
-            <li>{cancelT("completedItem")}</li>
-            <li>
-              <span className="block">{cancelT("notSentIntro")}</span>
-              <ul className="mt-2 list-[circle] space-y-2 pl-5 marker:text-slate-400">
-                <li>{cancelT("notSentSub1")}</li>
-                <li>{cancelT("notSentSub2")}</li>
-                <li>{cancelT("notSentSub3")}</li>
-              </ul>
-            </li>
+            {isStripeVariant ? (
+              <>
+                <li>{stripeCancelT("item1")}</li>
+                <li>{stripeCancelT("item2")}</li>
+                <li>{stripeCancelT("item3")}</li>
+              </>
+            ) : (
+              <>
+                <li>{cancelT("completedItem")}</li>
+                <li>
+                  <span className="block">{cancelT("notSentIntro")}</span>
+                  <ul className="mt-2 list-[circle] space-y-2 pl-5 marker:text-slate-400">
+                    <li>{cancelT("notSentSub1")}</li>
+                    <li>{cancelT("notSentSub2")}</li>
+                    <li>{cancelT("notSentSub3")}</li>
+                  </ul>
+                </li>
+              </>
+            )}
           </ul>
           <Typography className="text-sm leading-relaxed text-slate-600">
-            {cancelT("closing")}
+            {isStripeVariant ? stripeCancelT("closing") : cancelT("closing")}
           </Typography>
         </DialogBody>
         <DialogFooter className="flex flex-col-reverse gap-2 p-0 pt-2 sm:flex-row sm:justify-end">
@@ -224,10 +240,10 @@ export function RequestProcessingWithCancelConfirm({
             className="normal-case rounded-xl border-slate-300 px-4 py-2.5 text-sm font-semibold text-slate-700 shadow-sm hover:border-slate-400 hover:bg-slate-50"
             onClick={handleStayOnPayment}
           >
-            {cancelT("stayBtn")}
+            {isStripeVariant ? stripeCancelT("stayBtn") : cancelT("stayBtn")}
           </Button>
           <ButtonCustom icon={undefined} onClick={handleConfirmLeave}>
-            {cancelT("leaveBtn")}
+            {isStripeVariant ? stripeCancelT("leaveBtn") : cancelT("leaveBtn")}
           </ButtonCustom>
         </DialogFooter>
       </Dialog>

package/shared/constants/environment.ts

@@ -20,4 +20,5 @@ export const Environments = {
     },
   },
   TEST_AUTH_URL: process.env.TEST_AUTH_URL,
+  STRIPE_PUBLISHABLE_KEY: process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY,
 };

package/shared/i18n/locales/en.ts

@@ -364,6 +364,19 @@ export default {
       stayBtn: "Stay and pay",
       leaveBtn: "Leave without paying",
     },
+    cancelPaymentConfirmStripe: {
+      title: "Leave card payment?",
+      item1:
+        "If your card was declined, no funds were captured and you can retry with another card.",
+      item2:
+        "If authentication is still pending (e.g. 3D Secure), leaving now may interrupt payment completion.",
+      item3:
+        "You can return to checkout anytime to complete payment for this order.",
+      closing:
+        "If you are unsure whether payment went through, check your order status before trying again.",
+      stayBtn: "Stay and complete payment",
+      leaveBtn: "Leave checkout",
+    },
     paybyWalletItemComponent: {
       insufficientBalanceMsg: "Insufficient wallet balance. Please recharge.",
       avlBalance: "Avl Balance",

package/shared/i18n/locales/it.ts

@@ -353,6 +353,19 @@ export default {
       stayBtn: "Resta e paga",
       leaveBtn: "Esci senza pagare",
     },
+    cancelPaymentConfirmStripe: {
+      title: "Vuoi uscire dal pagamento con carta?",
+      item1:
+        "Se la carta è stata rifiutata, non è stato addebitato alcun importo e puoi riprovare con un'altra carta.",
+      item2:
+        "Se l'autenticazione è ancora in corso (es. 3D Secure), uscire ora può interrompere il completamento del pagamento.",
+      item3:
+        "Puoi tornare al checkout in qualsiasi momento per completare il pagamento di questo ordine.",
+      closing:
+        "Se non sei sicuro che il pagamento sia andato a buon fine, controlla lo stato dell'ordine prima di riprovare.",
+      stayBtn: "Resta e completa il pagamento",
+      leaveBtn: "Esci dal checkout",
+    },
     paybyWalletItemComponent: {
       insufficientBalanceMsg:
         "Saldo del portafoglio insufficiente. Si prega di ricaricare.",