feat: add voucher validation

Author: dhairyadwivedi

shared/application/translations/en.json

@@ -53,7 +53,8 @@
         "immutable": "You have initiated, finalized or cancelled a payment, this version of your cart is therefore locked.",
         "clone": "Clone previous cart",
         "voucherCode": "Voucher code",
-        "useVoucher": "Use voucher"
+        "useVoucher": "Use voucher",
+        "voucherApplied": "Voucher applied"
     },
     "dimensions": "Dimensions",
     "specifications": "Manuals and specifications",

shared/application/translations/fr.json

@@ -53,7 +53,8 @@
         "immutable": "Vous avez initié, finalisé ou annulé un paiement, cette version de votre caddie est donc bloquée.",
         "clone": "Cloner le caddie précédent",
         "voucherCode": "Bon de réduction",
-        "useVoucher": "Utiliser bon de réduction"
+        "useVoucher": "Utiliser bon de réduction",
+        "voucherApplied": "Bon de réduction appliqué"
     },
     "dimensions": "Dimensions",
     "specifications": "Manuels et caractéristiques",

shared/application/translations/no.json

@@ -53,7 +53,8 @@
         "immutable": "Du har igangsatt, avsluttet eller kansellert en betaling, denne versjonen av handlekurven din er derfor låst.",
         "clone": "Klone forrige handlekurv",
         "voucherCode": "Rabatt code",
-        "useVoucher": "Bruk rabatt"
+        "useVoucher": "Bruk rabatt",
+        "voucherApplied": "Rabatt brukt"
     },
     "dimensions": "Dimensjoner",
     "specifications": "Manualer og spesifikasjoner",

shared/application/ui/components/voucher.tsx

@@ -9,8 +9,11 @@ import { Input } from './input';
 
 export const VoucherForm: React.FC = () => {
     const { cart: localCart, setVoucher } = useLocalCart();
-    const { loading } = useRemoteCart();
+    const { loading, remoteCart } = useRemoteCart();
     const [voucherValue, setVoucherValue] = useState(localCart?.extra?.voucher ?? '');
+
+    const isVoucherValid = remoteCart?.context?.price?.voucherCode ? true : false;
+
     const { _t } = useAppContext();
 
     return (
@@ -50,6 +53,7 @@ export const VoucherForm: React.FC = () => {
                         </button>
                     )}
                 </div>
+                {isVoucherValid ? <div className="text-sm my-2 text-green2">{_t('cart.voucherApplied')}</div> : null}
             </div>
         </ClientOnly>
     );

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

@@ -1,5 +1,6 @@
 import { ClientInterface } from '@crystallize/js-api-client';
 import { hydrateCart } from '../crystallize/write/editCart';
+import { validateVoucher } from '../crystallize/read/validateVoucher.server';
 
 type Deps = {
     apiClient: ClientInterface;
@@ -13,14 +14,23 @@ export default async (body: any, { apiClient }: Deps, markets?: string[]) => {
         quantity: item.quantity,
     }));
 
-    const voucher = body.extra?.voucher?.toUpperCase() || '';
+    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);
+        }
+    }
 
     try {
-        return await hydrateCart(localCartItems, { apiClient }, cartId, markets, voucher);
+        return await hydrateCart(localCartItems, { apiClient }, cartId, markets, validVoucher ? 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, voucher);
+            return await hydrateCart(localCartItems, { apiClient }, undefined, markets, validVoucher ? voucher : '');
         }
         throw error;
     }

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

@@ -15,6 +15,16 @@ export type Cart = {
         discounts: number[];
         currency: string;
     };
+    context: {
+        price: {
+            markets?: string[];
+            decimals: number;
+            selectedVariantIdentifier: string;
+            fallbackVariantIdentifiers: string[];
+            compareAtVariantIdentifier: string;
+            voucherCode?: string;
+        };
+    };
     state: 'cart' | 'placed' | 'ordered';
     orderId?: string;
 };

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

@@ -14,6 +14,7 @@ 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/read/validateVoucher.server.ts

@@ -0,0 +1,29 @@
+import type { ClientInterface } from '@crystallize/js-api-client';
+import { jsonToGraphQLQuery } from 'json-to-graphql-query';
+
+type Deps = {
+    apiClient: ClientInterface;
+};
+
+export const validateVoucher = async (voucher: string, { apiClient }: Deps) => {
+    const query = {
+        validateVoucher: {
+            __args: {
+                voucher,
+            },
+            isValid: true,
+        },
+    };
+
+    const rawQuery = jsonToGraphQLQuery({ query });
+
+    try {
+        const response = await apiClient.shopCartApi(rawQuery);
+        return response.validateVoucher.isValid;
+    } catch (exception: any) {
+        console.error('Failed to fetch cart', exception.message);
+        return {
+            valid: false,
+        };
+    }
+};

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

@@ -8,9 +8,10 @@ type Deps = {
 
 type Input = {
     items: Array<{ sku: string; quantity: number }>;
-    context: Record<string, unknown>;
+    context: Cart['context'];
     id?: string;
 };
+
 export const hydrateCart = async (
     items: Array<{ sku: string; quantity: number }>,
     { apiClient }: Deps,
@@ -27,11 +28,14 @@ export const hydrateCart = async (
                 selectedVariantIdentifier: 'sales',
                 fallbackVariantIdentifiers: ['default'],
                 compareAtVariantIdentifier: 'default',
-                voucherCode,
             },
         },
     };
 
+    if (voucherCode) {
+        input.context.price.voucherCode = voucherCode;
+    }
+
     if (cartId) {
         input.id = cartId;
     }
@@ -44,6 +48,7 @@ export const hydrateCart = async (
                 },
                 id: true,
                 state: true,
+                context: true,
                 items: {
                     quantity: true,
                     variant: {