feat(MED-100): update cart checkout flow and views

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

@@ -0,0 +1,166 @@
+"use client"
+
+import { Badge, Heading, Text } from "@medusajs/ui"
+import React, { useActionState } from "react";
+
+import { applyPromotions, submitPromotionForm } from "@lib/data/cart"
+import { convertToLocale } from "@lib/util/money"
+import { StoreCart, StorePromotion } from "@medusajs/types"
+import Trash from "@modules/common/icons/trash"
+import { Button } from '@kit/ui/button';
+import { Form, FormControl, FormField, FormItem } from "@kit/ui/form";
+import { Trans } from '@kit/ui/trans';
+import { Input } from "@kit/ui/input";
+import { useTranslation } from "react-i18next";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+
+const DiscountCodeSchema = z.object({
+  code: z.string().min(1),
+})
+
+export default function DiscountCode({ cart }: {
+  cart: StoreCart & {
+    promotions: StorePromotion[]
+  }
+}) {
+  const { t } = useTranslation('cart');
+
+  const { promotions = [] } = cart;
+
+  const removePromotionCode = async (code: string) => {
+    const validPromotions = promotions.filter(
+      (promotion) => promotion.code !== code
+    )
+
+    await applyPromotions(
+      validPromotions.filter((p) => p.code === undefined).map((p) => p.code!)
+    )
+  }
+
+  const addPromotionCode = async (code: string) => {
+    const codes = promotions
+      .filter((p) => p.code === undefined)
+      .map((p) => p.code!)
+    codes.push(code.toString())
+
+    await applyPromotions(codes)
+
+    form.reset()
+  }
+
+  const [message, formAction] = useActionState(submitPromotionForm, null)
+
+  const form = useForm<z.infer<typeof DiscountCodeSchema>>({
+    defaultValues: {
+      code: '',
+    },
+    resolver: zodResolver(DiscountCodeSchema),
+  });
+
+  return (
+    <div className="w-full bg-white flex flex-col txt-medium">
+      <Form {...form}>
+        <form
+          onSubmit={form.handleSubmit((data) => addPromotionCode(data.code))}
+          className="w-full mb-2 flex gap-x-2"
+        >
+          <FormField
+            name={'code'}
+            render={({ field }) => (
+              <FormItem className="flex-1">
+                <FormControl>
+                  <Input required type="text" {...field} placeholder={t('cart:discountCode.placeholder')} />
+                </FormControl>
+              </FormItem>
+            )}
+          />
+
+          <Button
+            type="submit"
+            variant="secondary"
+            className="h-full"
+          >
+            <Trans i18nKey={'cart:discountCode.apply'} />
+          </Button>
+        </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.map((promotion) => {
+              return (
+                <div
+                  key={promotion.id}
+                  className="flex items-center justify-between w-full max-w-full mb-2"
+                  data-testid="discount-row"
+                >
+                  <Text className="flex gap-x-1 items-baseline txt-small-plus w-4/5 pr-1">
+                    <span className="truncate" data-testid="discount-code">
+                      <Badge
+                        color={promotion.is_automatic ? "green" : "grey"}
+                        size="small"
+                      >
+                        {promotion.code}
+                      </Badge>{" "}
+                      (
+                      {promotion.application_method?.value !== undefined &&
+                        promotion.application_method.currency_code !==
+                        undefined && (
+                          <>
+                            {promotion.application_method.type ===
+                              "percentage"
+                              ? `${promotion.application_method.value}%`
+                              : convertToLocale({
+                                amount: promotion.application_method.value,
+                                currency_code:
+                                  promotion.application_method
+                                    .currency_code,
+                              })}
+                          </>
+                        )}
+                      )
+                      {/* {promotion.is_automatic && (
+                          <Tooltip content="This promotion is automatically applied">
+                            <InformationCircleSolid className="inline text-zinc-400" />
+                          </Tooltip>
+                        )} */}
+                    </span>
+                  </Text>
+                  {!promotion.is_automatic && (
+                    <button
+                      className="flex items-center"
+                      onClick={() => {
+                        if (!promotion.code) {
+                          return
+                        }
+
+                        removePromotionCode(promotion.code)
+                      }}
+                      data-testid="remove-discount-button"
+                    >
+                      <Trash size={14} />
+                      <span className="sr-only">
+                        Remove discount code from order
+                      </span>
+                    </button>
+                  )}
+                </div>
+              )
+            })}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}