feat: validate voucher

Author: dhairyadwivedi

frameworks/remix-run/application/src/routes/$langstore.api.cart.voucher.tsx

@@ -0,0 +1,19 @@
+import { ActionFunction, ActionFunctionArgs } from '@remix-run/node';
+import { getStoreFront } from '~/use-cases/storefront.server';
+import { privateJson } from '~/core/bridge/privateJson.server';
+import { getContext } from '~/use-cases/http/utils';
+import { validateVoucher } from '~/use-cases/crystallize/read/validateVoucher.server';
+
+export const action: ActionFunction = async ({ request }: ActionFunctionArgs) => {
+    const requestContext = getContext(request);
+    const { secret: storefront } = await getStoreFront(requestContext.host);
+    const body = await request.json();
+
+    const checkVoucher = await validateVoucher(body.voucher, {
+        apiClient: storefront.apiClient,
+    });
+
+    return privateJson({
+        isValid: checkVoucher,
+    });
+};

shared/application/translations/en.json

@@ -54,7 +54,8 @@
         "clone": "Clone previous cart",
         "voucherCode": "Voucher code",
         "useVoucher": "Use voucher",
-        "voucherApplied": "Voucher applied"
+        "voucherApplied": "Voucher applied.",
+        "voucherInvalid": "Voucher is invalid."
     },
     "dimensions": "Dimensions",
     "specifications": "Manuals and specifications",

shared/application/translations/fr.json

@@ -54,7 +54,8 @@
         "clone": "Cloner le caddie précédent",
         "voucherCode": "Bon de réduction",
         "useVoucher": "Utiliser bon de réduction",
-        "voucherApplied": "Bon de réduction appliqué"
+        "voucherApplied": "Bon de réduction appliqué.",
+        "voucherInvalid": "Le bon de réduction est invalide."
     },
     "dimensions": "Dimensions",
     "specifications": "Manuels et caractéristiques",

shared/application/translations/no.json

@@ -54,7 +54,8 @@
         "clone": "Klone forrige handlekurv",
         "voucherCode": "Rabatt code",
         "useVoucher": "Bruk rabatt",
-        "voucherApplied": "Rabatt brukt"
+        "voucherApplied": "Rabatt brukt.",
+        "voucherInvalid": "Rabattkoden er ugyldig."
     },
     "dimensions": "Dimensjoner",
     "specifications": "Manualer og spesifikasjoner",

shared/application/ui/components/voucher.tsx

@@ -8,14 +8,21 @@ import { useRemoteCart } from '../hooks/useRemoteCart';
 import { Input } from './input';
 
 export const VoucherForm: React.FC = () => {
-    const { cart: localCart, setVoucher } = useLocalCart();
-    const { loading, remoteCart } = useRemoteCart();
+    const { cart: localCart, setVoucher, validateVoucher } = useLocalCart();
+    const { loading } = useRemoteCart();
     const [voucherValue, setVoucherValue] = useState(localCart?.extra?.voucher ?? '');
-
-    const isVoucherValid = remoteCart?.context?.price?.voucherCode ? true : false;
+    const [showMessage, setShowMessage] = useState('');
 
     const { _t } = useAppContext();
 
+    const checkVoucher = async (voucher: string) => {
+        if (!voucher) return;
+        const checkVoucher = await validateVoucher(voucher);
+        return checkVoucher.isValid
+            ? setShowMessage(_t('cart.voucherApplied'))
+            : setShowMessage(_t('cart.voucherInvalid'));
+    };
+
     return (
         <ClientOnly>
             <div className="flex flex-col w-full">
@@ -36,6 +43,7 @@ export const VoucherForm: React.FC = () => {
                         className="bg-[#000] text-[#fff] px-2 py-1 rounded mt-5 text-center h-10"
                         onClick={() => {
                             setVoucher(voucherValue);
+                            checkVoucher(voucherValue);
                         }}
                     >
                         {loading && localCart?.extra?.voucher ? _t('loading') : _t('cart.useVoucher')}
@@ -47,13 +55,14 @@ export const VoucherForm: React.FC = () => {
                             onClick={() => {
                                 setVoucherValue('');
                                 setVoucher('');
+                                setShowMessage('');
                             }}
                         >
                             {_t('delete')}
                         </button>
                     )}
                 </div>
-                {isVoucherValid ? <div className="text-sm my-2 text-green2">{_t('cart.voucherApplied')}</div> : null}
+                {showMessage && <p className="text-sm mt-2 text-[#666]">{showMessage}</p>}
             </div>
         </ClientOnly>
     );

shared/application/ui/hooks/useLocalCart.ts

@@ -1,6 +1,8 @@
 'use client';
 import { useLocalStorage, writeStorage } from '@rehooks/local-storage';
 import { LocalCart } from '~/use-cases/contracts/LocalCart';
+import { ServiceAPI } from '~/use-cases/service-api';
+import { useAppContext } from '../app-context/provider';
 
 const InitializeEmptyLocalCart = (): LocalCart => {
     return {
@@ -18,6 +20,7 @@ export function useLocalCart() {
             ...cart,
         });
     };
+    const { state: appContextState } = useAppContext();
 
     const isImmutable = () => {
         return cart.state === 'placed';
@@ -106,5 +109,13 @@ export function useLocalCart() {
                 },
             });
         },
+        validateVoucher: async (voucher: string) => {
+            const api = ServiceAPI({
+                language: appContextState.language,
+                serviceApiUrl: appContextState.serviceApiUrl,
+            });
+
+            return await api.validateVoucher(voucher);
+        },
     };
 }

shared/application/use-cases/checkout/handleSaveCart.ts

@@ -1,6 +1,5 @@
 import { ClientInterface } from '@crystallize/js-api-client';
 import { hydrateCart } from '../crystallize/write/editCart';
-import { validateVoucher } from '../crystallize/read/validateVoucher.server';
 
 type Deps = {
     apiClient: ClientInterface;
@@ -14,23 +13,14 @@ export default async (body: any, { apiClient }: Deps, markets?: string[]) => {
         quantity: item.quantity,
     }));
 
-    const voucher = body.extra?.voucher?.toUpperCase();
-    let validVoucher = null;
-
-    if (voucher) {
-        try {
-            validVoucher = await validateVoucher(voucher, { apiClient });
-        } catch (error) {
-            console.error('Voucher validation failed:', error);
-        }
-    }
+    const voucher = body.extra?.voucher?.toUpperCase() || '';
 
     try {
-        return await hydrateCart(localCartItems, { apiClient }, cartId, markets, validVoucher ? voucher : '');
+        return await hydrateCart(localCartItems, { apiClient }, cartId, markets, voucher);
     } catch (error: any) {
         if (error.message.includes('placed')) {
             console.log('Cart has been placed, creating a new one');
-            return await hydrateCart(localCartItems, { apiClient }, undefined, markets, validVoucher ? voucher : '');
+            return await hydrateCart(localCartItems, { apiClient }, undefined, markets, voucher);
         }
         throw error;
     }

shared/application/use-cases/contracts/RemoteCart.ts

@@ -15,7 +15,9 @@ export type Cart = {
         discounts: number[];
         currency: string;
     };
-    context: {
+    state: 'cart' | 'placed' | 'ordered';
+    orderId?: string;
+    context?: {
         price: {
             markets?: string[];
             decimals: number;
@@ -25,6 +27,4 @@ export type Cart = {
             voucherCode?: string;
         };
     };
-    state: 'cart' | 'placed' | 'ordered';
-    orderId?: string;
 };

shared/application/use-cases/crystallize/read/fetchCart.ts

@@ -14,7 +14,6 @@ export const fetchCart = async (cartId: string, { apiClient }: Deps): Promise<Ca
             },
             id: true,
             state: true,
-            context: true,
             orderId: true,
             customer: {
                 isGuest: true,

shared/application/use-cases/crystallize/write/editCart.ts

@@ -28,14 +28,11 @@ export const hydrateCart = async (
                 selectedVariantIdentifier: 'sales',
                 fallbackVariantIdentifiers: ['default'],
                 compareAtVariantIdentifier: 'default',
+                voucherCode,
             },
         },
     };
 
-    if (voucherCode) {
-        input.context.price.voucherCode = voucherCode;
-    }
-
     if (cartId) {
         input.id = cartId;
     }
@@ -48,7 +45,6 @@ export const hydrateCart = async (
                 },
                 id: true,
                 state: true,
-                context: true,
                 items: {
                     quantity: true,
                     variant: {