allow adding discounts in cart

app/home/(user)/_components/cart/discount-code.tsx

@@ -1,6 +1,7 @@
 "use client"
 
-import { Badge, Heading, Text } from "@medusajs/ui"
+import { Badge, Text } from "@medusajs/ui"
+import { toast } from '@kit/ui/sonner';
 import React, { useActionState } from "react";
 
 import { applyPromotions, submitPromotionForm } from "@lib/data/cart"
@@ -31,11 +32,19 @@ export default function DiscountCode({ cart }: {
 
   const removePromotionCode = async (code: string) => {
     const validPromotions = promotions.filter(
-      (promotion) => promotion.code !== code
+      (promotion) => promotion.code !== code,
     )
 
     await applyPromotions(
-      validPromotions.filter((p) => p.code === undefined).map((p) => p.code!)
+      validPromotions.filter((p) => p.code === undefined).map((p) => p.code!),
+      {
+        onSuccess: () => {
+          toast.success(t('cart:discountCode.removeSuccess'));
+        },
+        onError: () => {
+          toast.error(t('cart:discountCode.removeError'));
+        },
+      }
     )
   }
 
@@ -45,7 +54,14 @@ export default function DiscountCode({ cart }: {
       .map((p) => p.code!)
     codes.push(code.toString())
 
-    await applyPromotions(codes)
+    await applyPromotions(codes, {
+      onSuccess: () => {
+        toast.success(t('cart:discountCode.addSuccess'));
+      },
+      onError: () => {
+        toast.error(t('cart:discountCode.addError'));
+      },
+    });
 
     form.reset()
   }
@@ -64,7 +80,7 @@ export default function DiscountCode({ cart }: {
       <Form {...form}>
         <form
           onSubmit={form.handleSubmit((data) => addPromotionCode(data.code))}
-          className="w-full mb-2 flex gap-x-2"
+          className="w-full mb-2 flex gap-x-2 sm:flex-row flex-col gap-y-2"
         >
           <FormField
             name={'code'}
@@ -87,16 +103,12 @@ export default function DiscountCode({ cart }: {
         </form>
       </Form>
 
-      <p className="text-sm text-muted-foreground">
-        <Trans i18nKey={'cart:discountCode.subtitle'} />
-      </p>
-
-      {promotions.length > 0 && (
-        <div className="w-full flex items-center">
-          <div className="flex flex-col w-full">
-            <Heading className="txt-medium mb-2">
-              Promotion(s) applied:
-            </Heading>
+      {promotions.length > 0 ? (
+        <div className="w-full flex items-center mt-4">
+          <div className="flex flex-col w-full gap-y-2">
+            <p>
+              <Trans i18nKey={'cart:discountCode.appliedCodes'} />
+            </p>
 
             {promotions.map((promotion) => {
               return (
@@ -110,6 +122,7 @@ export default function DiscountCode({ cart }: {
                       <Badge
                         color={promotion.is_automatic ? "green" : "grey"}
                         size="small"
+                        className="px-4"
                       >
                         {promotion.code}
                       </Badge>{" "}
@@ -151,7 +164,7 @@ export default function DiscountCode({ cart }: {
                     >
                       <Trash size={14} />
                       <span className="sr-only">
-                        Remove discount code from order
+                        <Trans i18nKey={'cart:discountCode.remove'} />
                       </span>
                     </button>
                   )}
@@ -160,6 +173,10 @@ export default function DiscountCode({ cart }: {
             })}
           </div>
         </div>
+      ) : (
+        <p className="text-sm text-muted-foreground">
+          <Trans i18nKey={'cart:discountCode.subtitle'} />
+        </p>
       )}
     </div>
   )