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

'use client';

import React from 'react';

import { zodResolver } from '@hookform/resolvers/zod';
import { convertToLocale } from '@lib/util/money';
import { StoreCart, StorePromotion } from '@medusajs/types';
import { Badge, Text } from '@medusajs/ui';
import Trash from '@modules/common/icons/trash';
import { useForm } from 'react-hook-form';
import { useTranslation } from 'react-i18next';
import { z } from 'zod';

import { Button } from '@kit/ui/button';
import { Form, FormControl, FormField, FormItem } from '@kit/ui/form';
import { Input } from '@kit/ui/input';
import { toast } from '@kit/ui/sonner';
import { Trans } from '@kit/ui/trans';

import {
  addPromotionCodeAction,
  removePromotionCodeAction,
} from './discount-code-actions';

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 appliedCodes = promotions
      .filter((p) => p.code !== undefined)
      .map((p) => p.code!);

    const loading = toast.loading(t('cart:discountCode.removeLoading'));

    const result = await removePromotionCodeAction(code, appliedCodes);

    toast.dismiss(loading);
    if (result.success) {
      toast.success(t('cart:discountCode.removeSuccess'));
    } else {
      toast.error(t('cart:discountCode.removeError'));
    }
  };

  const addPromotionCode = async (code: string) => {
    const loading = toast.loading(t('cart:discountCode.addLoading'));
    const result = await addPromotionCodeAction(code);

    toast.dismiss(loading);
    if (result.success) {
      toast.success(t('cart:discountCode.addSuccess'));
      form.reset();
    } else {
      toast.error(t('cart:discountCode.addError'));
    }
  };

  const form = useForm<z.infer<typeof DiscountCodeSchema>>({
    defaultValues: {
      code: '',
    },
    resolver: zodResolver(DiscountCodeSchema),
  });

  return (
    <div className="txt-medium flex h-full w-full flex-col gap-y-4 bg-white">
      <p className="text-muted-foreground text-sm">
        <Trans i18nKey={'cart:discountCode.subtitle'} />
      </p>

      <Form {...form}>
        <form
          onSubmit={form.handleSubmit((data) => addPromotionCode(data.code))}
          className="mb-2 flex w-full flex-1 flex-col gap-x-2 gap-y-2 sm:flex-row"
        >
          <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-min">
            <Trans i18nKey={'cart:discountCode.apply'} />
          </Button>
        </form>
      </Form>

      {promotions.length > 0 && (
        <div className="mt-4 flex w-full items-center">
          <div className="flex w-full flex-col gap-y-2">
            <p>
              <Trans i18nKey={'cart:discountCode.appliedCodes'} />
            </p>

            {promotions.map((promotion) => {
              return (
                <div
                  key={promotion.id}
                  className="mb-2 flex w-full max-w-full items-center justify-between"
                  data-testid="discount-row"
                >
                  <Text className="flex w-4/5 items-baseline gap-x-1 pr-1 text-sm">
                    <span className="truncate" data-testid="discount-code">
                      <Badge
                        color={promotion.is_automatic ? 'green' : 'grey'}
                        size="small"
                        className="px-4 text-sm"
                      >
                        {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: Number(
                                    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">
                        <Trans i18nKey={'cart:discountCode.remove'} />
                      </span>
                    </button>
                  )}
                </div>
              );
            })}
          </div>
        </div>
      )}
    </div>
  );
}