@lmnto/h-mall-shared 1.0.4 → 1.0.6

package/package.json

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

package/shared/components/payments/PaymentCountdown.tsx

@@ -0,0 +1,83 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+type PaymentCountdownProps = {
+  /** ISO date string from API (e.g. expiration_estimate_date) */
+  expiresAtIso: string | null | undefined;
+  label: string;
+  onExpire?: () => void;
+  className?: string;
+  /** `inline` = compact pill for header row; `block` = full-width bar (default) */
+  variant?: "block" | "inline";
+};
+
+export default function PaymentCountdown({
+  expiresAtIso,
+  label,
+  onExpire,
+  className = "",
+  variant = "block",
+}: PaymentCountdownProps) {
+  const [secondsLeft, setSecondsLeft] = useState<number | null>(null);
+
+  useEffect(() => {
+    if (!expiresAtIso) {
+      setSecondsLeft(null);
+      return;
+    }
+    const end = new Date(expiresAtIso).getTime();
+    if (!Number.isFinite(end)) {
+      setSecondsLeft(null);
+      return;
+    }
+
+    let expiredNotified = false;
+    const tick = () => {
+      const s = Math.max(0, Math.floor((end - Date.now()) / 1000));
+      setSecondsLeft(s);
+      if (s <= 0 && !expiredNotified) {
+        expiredNotified = true;
+        onExpire?.();
+      }
+    };
+
+    tick();
+    const id = setInterval(tick, 1000);
+    return () => clearInterval(id);
+  }, [expiresAtIso, onExpire]);
+
+  if (secondsLeft == null) return null;
+
+  const mm = Math.floor(secondsLeft / 60);
+  const ss = secondsLeft % 60;
+  const display = `${String(mm).padStart(2, "0")}:${String(ss).padStart(2, "0")}`;
+
+  if (variant === "inline") {
+    return (
+      <div
+        className={`inline-flex shrink-0 items-center gap-3 rounded-full border border-amber-200/80 bg-amber-50 px-4 py-2 text-xs font-medium text-amber-950 ${className}`}
+      >
+        <span className="text-slate-600">{label}</span>
+        <span className="min-w-[3.25rem] font-semibold tabular-nums text-slate-900">
+          {display}
+        </span>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={`rounded-xl border border-slate-200 bg-slate-50/90 px-4 py-3 ${className}`}
+    >
+      <div className="flex flex-wrap items-center gap-x-3 gap-y-1">
+        <span className="text-sm font-medium leading-5 text-slate-600">
+          {label}
+        </span>
+        <span className="text-sm font-semibold tabular-nums text-slate-900">
+          {display}
+        </span>
+      </div>
+    </div>
+  );
+}

package/shared/components/payments/RequestProcessingDialog.tsx

@@ -19,6 +19,8 @@ type RequestProcessingDialogProps = {
   paymentProcessFailed: boolean;
   onRetry?: () => void;
   setOpen: (value: boolean) => void;
+  /** When set (e.g. NOWPayments deposit instructions), replaces the loading state in the same modal. */
+  paymentDetails?: React.ReactNode;
 };
 
 export function RequestProcessingDialog({
@@ -27,13 +29,20 @@ export function RequestProcessingDialog({
   orderId,
   paymentProcessFailed,
   onRetry,
+  paymentDetails,
 }: RequestProcessingDialogProps) {
   //
   const scopeT = _useScopedI18n("payment.requestProcessingDialog");
+  const hasPaymentDetails = Boolean(paymentDetails);
 
   return (
     <>
-      <Dialog open={open} size="xs" handler={() => {}} className="p-2 md:p-5">
+      <Dialog
+        open={open}
+        size={hasPaymentDetails ? "md" : "xs"}
+        handler={() => {}}
+        className={`p-2 md:p-4 ${hasPaymentDetails ? "max-w-md w-[calc(100vw-1.5rem)]" : ""}`}
+      >
         <DialogHeader className="p-0">
           <div className="text-right size-full">
             <IconButton
@@ -61,31 +70,37 @@ export function RequestProcessingDialog({
             </IconButton>
           </div>
         </DialogHeader>
-        <DialogBody className="flex flex-col items-center gap-8 text-center">
-          <>
-            <LoadingIconComponent />
-            <div>
-              {/* <AppLoadingComponent /> */}
-              <Typography variant="h3" className="text-xl text-black-500">
-                {scopeT("title")}...
-              </Typography>
-            </div>
+        <DialogBody
+          className={
+            hasPaymentDetails
+              ? "flex max-h-[80vh] flex-col gap-3 overflow-y-auto px-1 text-left sm:px-2"
+              : "flex flex-col items-center gap-8 text-center"
+          }
+        >
+          {hasPaymentDetails ? (
+            <>
+              <div className="w-full space-y-1 text-center">
+                <Typography
+                  variant="h3"
+                  className="text-xl font-semibold text-slate-900"
+                >
+                  {scopeT("completePaymentTitle")}
+                </Typography>
+                <p className="text-sm text-slate-500">
+                  {scopeT("orderId")}{" "}
+                  <span className="font-mono font-medium text-slate-700">
+                    {orderId}
+                  </span>
+                </p>
+              </div>
 
-            <div className="bg-gray-50 py-4 px-9 border border-slate-100 rounded-lg">
-              <Typography
-                variant="h6"
-                className="text-xs leading-5 font-medium text-black-500"
-              >
-                {scopeT("orderId")} : {orderId}
-              </Typography>
-            </div>
+              {paymentDetails}
 
-            <div>
               {paymentProcessFailed ? (
-                <>
+                <div className="text-center">
                   <Typography
                     variant="lead"
-                    className="text-sm font-medium text-slate-500 mb-3"
+                    className="mb-3 text-sm font-medium text-slate-500"
                   >
                     {scopeT("errorMsg")}
                   </Typography>
@@ -96,26 +111,65 @@ export function RequestProcessingDialog({
                   >
                     {scopeT("retryBtn")}
                   </ButtonCustom>
-                </>
-              ) : (
-                <>
-                  <Typography
-                    variant="lead"
-                    className="text-sm font-medium text-slate-500 mb-3"
-                  >
-                    {scopeT("subTitle")}
-                  </Typography>
+                </div>
+              ) : null}
+            </>
+          ) : (
+            <>
+              <LoadingIconComponent />
+              <div>
+                {/* <AppLoadingComponent /> */}
+                <Typography variant="h3" className="text-xl text-black-500">
+                  {scopeT("title")}...
+                </Typography>
+              </div>
 
-                  <Typography
-                    variant="lead"
-                    className="text-sm font-medium text-slate-500"
-                  >
-                    {scopeT("message")}
-                  </Typography>
-                </>
-              )}
-            </div>
-          </>
+              <div className="rounded-lg border border-slate-100 bg-gray-50 px-9 py-4">
+                <Typography
+                  variant="h6"
+                  className="text-xs font-medium leading-5 text-black-500"
+                >
+                  {scopeT("orderId")} : {orderId}
+                </Typography>
+              </div>
+
+              <div>
+                {paymentProcessFailed ? (
+                  <>
+                    <Typography
+                      variant="lead"
+                      className="mb-3 text-sm font-medium text-slate-500"
+                    >
+                      {scopeT("errorMsg")}
+                    </Typography>
+
+                    <ButtonCustom
+                      icon={<IoRefresh className="size-4" />}
+                      onClick={onRetry}
+                    >
+                      {scopeT("retryBtn")}
+                    </ButtonCustom>
+                  </>
+                ) : (
+                  <>
+                    <Typography
+                      variant="lead"
+                      className="mb-3 text-sm font-medium text-slate-500"
+                    >
+                      {scopeT("subTitle")}
+                    </Typography>
+
+                    <Typography
+                      variant="lead"
+                      className="text-sm font-medium text-slate-500"
+                    >
+                      {scopeT("message")}
+                    </Typography>
+                  </>
+                )}
+              </div>
+            </>
+          )}
         </DialogBody>
       </Dialog>
     </>

package/shared/constants/app.ts

@@ -36,7 +36,11 @@ export const METHOD_TO_PAY = {
   card: "card",
   wallet: "wallet",
   aleta: "aleta",
-};
+  nowpayments: "nowpayments",
+  gift: "gift",
+} as const;
+
+export type MethodToPayCode = (typeof METHOD_TO_PAY)[keyof typeof METHOD_TO_PAY];
 
 export const ORDER_STATUS = {
   PENDING: "pending",

package/shared/constants/feature-flags.ts

@@ -7,6 +7,7 @@ export const FeatureCodes = {
   DOWNLOAD_SHIPPING_ORDER_INVOICE: "download-shipping-order-invoice",
   SMART_PAY_PLAN: "smart-plan-pay",
   ALETA_PAYMENT: "aleta",
+  NOWPAYMENTS_PAYMENT: "nowpayments-payment",
   AI_CATEGORY: "ai-category",
   GEN_3_EXTENSION_HOME_DIALOG: "gen2-to-gen3-migration",
   ORDER_V2_API: "order-v2-api",

package/shared/contexts/WebSocketContext.tsx

@@ -112,7 +112,10 @@ export function WebSocketWrapper({ children }: WebSocketWrapperProps) {
   }, 50);
 
   const sendEventMessage = useCallback(
-    (event: string, msg: string | number) => {
+    (
+      event: string,
+      msg: string | number | { orderId: string | number; payCurrency?: string },
+    ) => {
       if (!socket.current) return;
 
       setPaymentProcessFailed(false);
@@ -150,6 +153,9 @@ export type WebSocketWrapperContextDto = {
   paymentProcessResponse: any;
   isPaymentCompleted: boolean;
   initConnection: (...args: any) => void;
-  sendEventMessage: (event: string, msg: string | number) => void;
+  sendEventMessage: (
+    event: string,
+    msg: string | number | { orderId: string | number; payCurrency?: string },
+  ) => void;
   disconnectSocket: () => void;
 };

package/shared/hooks/useCart.ts

@@ -103,20 +103,26 @@ export function useCart() {
 
   const updatePaymentMethod = useMutation({
     mutationKey: [QueryKeys.cart.UPDATE_PAYMENT_METHOD],
-    mutationFn: ({
-      paymentMethodId,
-      paymentOptionId,
-      fromAssetSelectedPercentage,
-    }: {
+    mutationFn: (params: {
       paymentMethodId: number;
       paymentOptionId: number;
       fromAssetSelectedPercentage: number;
-    }) =>
-      CartsService.cartsControllerUpdatePaymentMethod({
-        paymentMethodId: paymentMethodId,
-        paymentOptionId: paymentOptionId,
-        fromAssetSelectedPercentage: fromAssetSelectedPercentage,
-      }),
+      optionAssetSymbol?: string;
+      optionAssetName?: string;
+      payCurrencyCode?: string;
+      nowpaymentsCurrencyId?: number;
+    }) => {
+      if (
+        process.env.NODE_ENV === "development" ||
+        process.env.NEXT_PUBLIC_DEBUG_PAYMENT_FLOW === "1"
+      ) {
+        console.info(
+          "[H-Mall Payment][useCart.updatePaymentMethod] request",
+          params,
+        );
+      }
+      return CartsService.cartsControllerUpdatePaymentMethod(params);
+    },
     onMutate: () => setLoading(true),
     onSuccess: () => revalidateCart(),
     onError: () => setLoading(false),

package/shared/i18n/locales/en.ts

@@ -181,6 +181,8 @@ export default {
       loading: "Loading...",
       grandTotal: "Grand Total",
       continueShoppingBtn: "Continue Shopping",
+      totalsUpdateHint:
+        "Estimated — totals update when you confirm this payment method.",
     },
     shippingOrderSummaryComponent: {
       title: "Shipping Summary",
@@ -337,6 +339,7 @@ export default {
     },
     requestProcessingDialog: {
       title: "Processing Your Request",
+      completePaymentTitle: "Complete your payment",
       subTitle: "Hang tight! while we process your order.",
       message:
         "Just a moment! Please do not refresh while we complete your order.",
@@ -348,6 +351,23 @@ export default {
       insufficientBalanceMsg: "Insufficient wallet balance. Please recharge.",
       avlBalance: "Avl Balance",
     },
+    nowpayments: {
+      cryptoLabel: "Pay with cryptocurrency",
+      loadingCurrencies: "Loading currencies…",
+      depositAddress: "Deposit address",
+      copyAddress: "Copy",
+      copied: "Copied",
+      expectedAmount: "Amount to send",
+      qrLabel: "Scan QR code",
+      timeRemaining: "Time remaining",
+      openWidget: "Open payment widget",
+      waitingConfirmation:
+        "We will confirm your payment automatically. You can leave this page open.",
+      expiredMessage:
+        "This payment request has expired or is no longer valid. You can generate a new address without losing your order.",
+      regenerateBtn: "Generate new payment",
+      regenerateLoading: "Generating…",
+    },
     disclaimerAlertDialog: {
       header: "Disclaimer Alert",
       acceptCheckboxPrivacy: "I have read and accept membership",

package/shared/i18n/locales/it.ts

@@ -171,6 +171,8 @@ export default {
       loading: "Caricamento...",
       grandTotal: "Totale generale",
       continueShoppingBtn: "Continua lo shopping",
+      totalsUpdateHint:
+        "Stima — i totali si aggiornano quando confermi questo metodo di pagamento.",
     },
     shippingOrderSummaryComponent: {
       title: "Riepilogo della Spedizione",
@@ -326,6 +328,7 @@ export default {
     },
     requestProcessingDialog: {
       title: "Elaborazione della tua richiesta",
+      completePaymentTitle: "Completa il pagamento",
       subTitle: "Attendi! mentre elaboriamo il tuo ordine.",
       message:
         "Un momento! Si prega di non aggiornare la pagina mentre completiamo il tuo ordine.",
@@ -338,6 +341,23 @@ export default {
         "Saldo del portafoglio insufficiente. Si prega di ricaricare.",
       avlBalance: "Saldo disponibile",
     },
+    nowpayments: {
+      cryptoLabel: "Paga in criptovaluta",
+      loadingCurrencies: "Caricamento valute…",
+      depositAddress: "Indirizzo di deposito",
+      copyAddress: "Copia",
+      copied: "Copiato",
+      expectedAmount: "Importo da inviare",
+      qrLabel: "Scansiona il codice QR",
+      timeRemaining: "Tempo rimanente",
+      openWidget: "Apri il widget di pagamento",
+      waitingConfirmation:
+        "Confermeremo automaticamente il pagamento. Puoi lasciare aperta questa pagina.",
+      expiredMessage:
+        "Questa richiesta di pagamento è scaduta o non è più valida. Puoi generare un nuovo indirizzo senza perdere l'ordine.",
+      regenerateBtn: "Genera nuovo pagamento",
+      regenerateLoading: "Generazione…",
+    },
     disclaimerAlertDialog: {
       header: "Avviso di esclusione di responsabilità",
       acceptCheckboxPrivacy: "Ho letto e accetto l'adesione",

package/shared/services/api/models/UpdateCartPaymentMethodDto.ts

@@ -6,4 +6,12 @@ export type UpdateCartPaymentMethodDto = {
   paymentMethodId: number;
   paymentOptionId: number;
   fromAssetSelectedPercentage: number;
+  /** Same cart_asset keys as other providers: pay-instrument symbol (e.g. crypto ticker). */
+  optionAssetSymbol?: string;
+  /** Same cart_asset keys: display label (e.g. name + network). */
+  optionAssetName?: string;
+  /** Persisted on `cart_assets.asset_option` JSON: pay ticker (e.g. NOWPayments). */
+  payCurrencyCode?: string;
+  /** NOWPayments full-currencies id, stored on `cart_assets.asset_option` JSON. */
+  nowpaymentsCurrencyId?: number;
 };

package/shared/services/api/services/OrderCallbackService.ts

@@ -64,4 +64,23 @@ export class OrderCallbackService {
       mediaType: "application/json",
     });
   }
+
+  /**
+   * NOWPayments IPN (server-to-server). Requires valid x-nowpayments-sig.
+   * @param xNowpaymentsSig HMAC-SHA512 hex of sorted JSON body
+   */
+  public static orderCallbackControllerHandleNowpaymentsIpn(
+    requestBody: Record<string, unknown>,
+    xNowpaymentsSig: string,
+  ): CancelablePromise<any> {
+    return __request(OpenAPI, {
+      method: "POST",
+      url: "/v1/order-webhooks/nowpayments",
+      body: requestBody,
+      mediaType: "application/json",
+      headers: {
+        "x-nowpayments-sig": xNowpaymentsSig,
+      },
+    });
+  }
 }

package/shared/services/api/services/OrdersService.ts

@@ -39,6 +39,25 @@ export class OrdersService {
     });
   }
 
+  /**
+   * Start payment for an order (HTTP equivalent of socket `order-payment-process`).
+   * Returns payment processor payload immediately (e.g. NOWPayments deposit details).
+   */
+  public static ordersControllerProcessOrderPayment(
+    orderId: string,
+    requestBody?: { payCurrency?: string },
+  ): CancelablePromise<any> {
+    return __request(OpenAPI, {
+      method: "POST",
+      url: "/v1/orders/{orderId}/payments/process",
+      path: {
+        orderId: orderId,
+      },
+      body: requestBody,
+      mediaType: "application/json",
+    });
+  }
+
   /**
    * @param page
    * @param limit
@@ -69,6 +88,46 @@ export class OrdersService {
     });
   }
 
+  /**
+   * Owner-only proxy for NOWPayments GET /v1/payment/{id} (rate-limited server-side).
+   * @param paymentId NOWPayments payment_id
+   * @returns any
+   * @throws ApiError
+   */
+  public static ordersControllerPollNowpaymentsPayment(
+    paymentId: string,
+  ): CancelablePromise<any> {
+    return __request(OpenAPI, {
+      method: "GET",
+      url: "/v1/orders/payments/nowpayments/{paymentId}",
+      path: {
+        paymentId: paymentId,
+      },
+      isServerAction: true,
+    });
+  }
+
+  /**
+   * Replace an expired or failed NOWPayments invoice (order must still be unpaid).
+   * @param orderId Public order id
+   * @param requestBody Optional payCurrency
+   */
+  public static ordersControllerRecreateNowpaymentsPayment(
+    orderId: string,
+    requestBody?: { payCurrency?: string },
+  ): CancelablePromise<any> {
+    return __request(OpenAPI, {
+      method: "POST",
+      url: "/v1/orders/{orderId}/payments/nowpayments/recreate",
+      path: {
+        orderId: orderId,
+      },
+      body: requestBody,
+      mediaType: "application/json",
+      isServerAction: true,
+    });
+  }
+
   /**
    * @param requestBody
    * @returns any

package/shared/services/api/services/PaymentsService.ts

@@ -6,6 +6,30 @@ import type { CancelablePromise } from "../core/CancelablePromise";
 import { OpenAPI } from "../core/OpenAPI";
 import { request as __request } from "../core/request";
 export class PaymentsService {
+  /**
+   * Cached NOWPayments currency list (~1h) for pay-currency picker.
+   * @returns any
+   * @throws ApiError
+   */
+  public static paymentsControllerGetNowpaymentsCurrencies(): CancelablePromise<any> {
+    return __request(OpenAPI, {
+      method: "GET",
+      url: "/v1/payments/nowpayments/currencies",
+    });
+  }
+
+  /**
+   * NOWPayments fiat currencies (JWT-backed, cached ~1h) for pay-currency picker.
+   * @returns any
+   * @throws ApiError
+   */
+  public static paymentsControllerGetNowpaymentsFiatCurrencies(): CancelablePromise<any> {
+    return __request(OpenAPI, {
+      method: "GET",
+      url: "/v1/payments/nowpayments/fiat-currencies",
+    });
+  }
+
   /**
    * @param shipping
    * @param upgrade