@greatapps/common 1.1.789 → 1.1.791

package/src/components/account/sections/subscription/AiCreditsUsage.tsx

@@ -0,0 +1,152 @@
+'use client';
+
+import { IconAlertCircle, IconFileText, IconSparkles } from '@tabler/icons-react';
+import { useTranslations } from 'next-intl';
+import { Button } from '../../../ui/buttons/Button';
+import { Progress } from '../../../ui/feedback/Progress';
+import { Skeleton } from '../../../ui/feedback/Skeleton';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../../../ui/overlay/Tooltip';
+import { useIaCredits } from '../../../../modules/ia-credits/hooks/ia-credits.hook';
+import { useBuyCreditsModal } from '../../../../store/useBuyCreditsModal';
+import { cn } from '../../../../infra/utils/clsx';
+import { IconBox } from '../shared/IconBox';
+
+export function AiCreditsPromo({ isMainWhitelabel }: { isMainWhitelabel: boolean }) {
+  const translate = useTranslations();
+
+  return (
+    <div className="px-2 pb-2 mt-auto">
+      <div
+        className={cn('flex items-center gap-4 p-6 rounded-lg', isMainWhitelabel ? 'bg-cyan-50' : 'bg-zinc-50')}
+      >
+        <IconBox icon={IconSparkles} />
+        <div className="flex flex-col gap-1">
+          <span className="paragraph-medium-semibold text-zinc-950">
+            {translate('common.account.workspace.subscription.planCard.aiCreditsPromoTitle')}
+          </span>
+          <span className="paragraph-small-regular text-zinc-950">
+            {translate('common.account.workspace.subscription.planCard.aiCreditsPromoDescription')}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+type AiCreditsUsageProps = {
+  canManage: boolean;
+  isApiPlan: boolean;
+  cancelled: boolean;
+  onViewUsageReport: () => void;
+};
+
+export function AiCreditsUsage({ canManage, isApiPlan, cancelled, onViewUsageReport }: AiCreditsUsageProps) {
+  const translate = useTranslations();
+  const { summary, isLoading } = useIaCredits();
+  const { openModal: openBuyCreditsModal } = useBuyCreditsModal();
+
+  const totalCredits = summary.totalCredits;
+  // usado = total - saldo corrente (availableCredits), porque usedCredits do calculateSummary
+  // zera quando o consumo foi atribuído a um lote já expirado.
+  const usedCredits = Math.max(0, totalCredits - summary.availableCredits);
+  const nextExpiringCredits = summary.nextExpiringCredits;
+  const nextCycleInDays = summary.nextExpirationInDays;
+
+  const creditsTotalLabel = totalCredits.toLocaleString('pt-BR');
+  const creditsUsedLabel = usedCredits.toLocaleString('pt-BR');
+
+  const creditsPercentage = totalCredits > 0 ? Math.min(100, (usedCredits / totalCredits) * 100) : 0;
+
+  const nextCycleLabel =
+    nextCycleInDays == null || nextExpiringCredits == null
+      ? translate('common.account.workspace.subscription.planCard.noActiveCredits')
+      : nextCycleInDays === 1
+        ? translate('common.account.workspace.subscription.planCard.creditsExpireInOneDay', {
+            credits: nextExpiringCredits.toLocaleString('pt-BR'),
+          })
+        : translate('common.account.workspace.subscription.planCard.creditsExpireInDays', {
+            credits: nextExpiringCredits.toLocaleString('pt-BR'),
+            days: String(nextCycleInDays),
+          });
+
+  return (
+    <div className="flex flex-col gap-6 p-5 lg:p-6">
+      <div className="flex flex-col gap-4">
+        <div className="flex items-center justify-between">
+          {isLoading ? (
+            <>
+              <Skeleton className="h-4 w-40 rounded" />
+              <Skeleton className="h-4 w-24 rounded" />
+            </>
+          ) : (
+            <>
+              <span className="text-zinc-950 paragraph-small-semibold">
+                {translate('common.account.workspace.subscription.planCard.aiCreditsTotal', {
+                  total: creditsTotalLabel,
+                })}{' '}
+                <span className="font-normal">✨</span>
+              </span>
+              <span className="text-zinc-500 paragraph-xsmall-semibold">
+                {creditsUsedLabel} / {creditsTotalLabel}
+              </span>
+            </>
+          )}
+        </div>
+        {isLoading ? (
+          <Skeleton className="h-2 w-full rounded-full" />
+        ) : (
+          <Progress value={creditsPercentage} indicatorColor="bg-zinc-950" className="bg-zinc-200" />
+        )}
+      </div>
+      {!cancelled && (
+        <div className="flex flex-col md:flex-row md:items-center justify-between gap-3">
+          {isLoading ? (
+            <Skeleton className="h-4 w-36 rounded" />
+          ) : (
+            <div className="flex items-center gap-1.5">
+              <span className="paragraph-small-medium text-zinc-500">{nextCycleLabel}</span>
+              {nextCycleInDays != null && nextExpiringCredits != null && (
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <button
+                      type="button"
+                      className="size-5 flex items-center justify-center rounded-full text-zinc-400 hover:text-zinc-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-zinc-400 focus-visible:ring-offset-1"
+                      aria-label={translate('common.account.workspace.subscription.planCard.creditsExpireAriaLabel')}
+                    >
+                      <IconAlertCircle size={16} strokeWidth={2} />
+                    </button>
+                  </TooltipTrigger>
+                  <TooltipContent side="bottom" className="max-w-62.5 text-center">
+                    {translate('common.account.workspace.subscription.planCard.creditsExpireTooltip')}
+                  </TooltipContent>
+                </Tooltip>
+              )}
+            </div>
+          )}
+          <div className="flex items-center gap-2">
+            {canManage && !isApiPlan && (
+              <Button variant="secondary" className="w-full md:w-fit h-10!" onClick={() => openBuyCreditsModal()}>
+                {translate('common.account.workspace.subscription.planCard.buyCredits')}
+              </Button>
+            )}
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  variant="ghost"
+                  className="size-10! p-0 hidden md:flex hover:bg-zinc-100"
+                  aria-label={translate('common.account.workspace.subscription.planCard.usageReport')}
+                  onClick={onViewUsageReport}
+                >
+                  <IconFileText size={20} className="text-zinc-950" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                {translate('common.account.workspace.subscription.planCard.usageReport')}
+              </TooltipContent>
+            </Tooltip>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/account/sections/subscription/BillingAddressSheet.tsx

@@ -0,0 +1,460 @@
+'use client';
+
+import { useEffect, useMemo } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useTranslations } from 'next-intl';
+import { toast } from 'sonner';
+import { z } from 'zod';
+import { Button } from '../../../ui/buttons/Button';
+import { Toast } from '../../../ui/feedback/Toast';
+import { FormField } from '../../../ui/form/FormField';
+import { SelectField } from '../../../ui/form/SelectField';
+import { Sheet, SheetContent, SheetFooter, SheetHeader, SheetTitle } from '../../../ui/overlay/Sheet';
+import { useCurrentAccount } from '../../../../modules/accounts/hooks/current-account.hook';
+import { useUpdateBillingData } from '../../../../modules/accounts/hooks/useAccountManagement';
+import { useViaCep } from '../../../../modules/accounts/hooks/useViaCep';
+import { useAuth } from '../../../../providers/auth.provider';
+import { BR_STATE_OPTIONS } from '../../../../utils/constants/br-states';
+import { COUNTRIES } from '../../../../utils/countries';
+import { formatCNPJ, formatCPF } from '../../../../utils/format/masks';
+import { isValidCNPJ, isValidCPF } from '../../../../utils/validators/common';
+import useIsMobile from '../../../../hooks/useIsMobile';
+import { cn } from '../../../../infra/utils/clsx';
+import { useSubscriptionFlows } from '../../../../store/useSubscriptionFlows';
+
+type BillingAddressFormData = {
+  personType: 'cnpj' | 'cpf';
+  document: string;
+  companyName: string;
+  financialEmail: string;
+  cep: string;
+  street: string;
+  number: string;
+  complement?: string;
+  neighborhood: string;
+  city: string;
+  state: string;
+  country: string;
+};
+
+type BillingAddressMessages = {
+  required: string;
+  invalidEmail: string;
+  invalidCep: string;
+  invalidCnpj: string;
+  invalidCpf: string;
+  invalidCnpjChecksum: string;
+  invalidCpfChecksum: string;
+};
+
+function buildBillingAddressSchema(messages: BillingAddressMessages) {
+  const requiredText = z.string().trim().min(1, messages.required);
+
+  return z
+    .object({
+      personType: z.enum(['cnpj', 'cpf']),
+      document: requiredText,
+      companyName: requiredText,
+      financialEmail: z.string().trim().email(messages.invalidEmail).min(1, messages.required),
+      cep: z.string().trim().length(9, messages.invalidCep),
+      street: requiredText,
+      number: requiredText,
+      complement: z.string().optional(),
+      neighborhood: requiredText,
+      city: requiredText,
+      state: z.string().trim().length(2, messages.required),
+      country: requiredText,
+    })
+    .superRefine((data, ctx) => {
+      const digits = data.document.replace(/\D/g, '');
+      const expectedLength = data.personType === 'cnpj' ? 14 : 11;
+
+      if (digits.length !== expectedLength) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          path: ['document'],
+          message: data.personType === 'cnpj' ? messages.invalidCnpj : messages.invalidCpf,
+        });
+        return;
+      }
+
+      const isValid = data.personType === 'cnpj' ? isValidCNPJ(digits) : isValidCPF(digits);
+      if (!isValid) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          path: ['document'],
+          message:
+            data.personType === 'cnpj' ? messages.invalidCnpjChecksum : messages.invalidCpfChecksum,
+        });
+      }
+    });
+}
+
+function formatFinancialDocument(document: string | null | undefined, personType: 'cpf' | 'cnpj') {
+  if (!document) return '';
+  return personType === 'cnpj' ? formatCNPJ(document) : formatCPF(document);
+}
+
+/** Cadastro fiscal e endereço de cobrança da conta. */
+export function BillingAddressSheet() {
+  const translate = useTranslations();
+  const translateSheet = useTranslations('common.account.workspace.subscription.billingAddress');
+  const isMobile = useIsMobile();
+  const { user } = useAuth();
+
+  const isOpen = useSubscriptionFlows((state) => state.isBillingAddressOpen);
+  const close = useSubscriptionFlows((state) => state.closeBillingAddress);
+
+  const { data: account } = useCurrentAccount();
+  const { mutateAsync: updateBillingData } = useUpdateBillingData();
+  const { mutateAsync: lookupCep } = useViaCep();
+
+  const schema = useMemo(
+    () =>
+      buildBillingAddressSchema({
+        required: translateSheet('requiredField'),
+        invalidEmail: translateSheet('invalidEmail'),
+        invalidCep: translateSheet('invalidCep'),
+        invalidCnpj: translateSheet('invalidCnpj'),
+        invalidCpf: translateSheet('invalidCpf'),
+        invalidCnpjChecksum: translateSheet('invalidCnpjChecksum'),
+        invalidCpfChecksum: translateSheet('invalidCpfChecksum'),
+      }),
+    [translateSheet]
+  );
+
+  const form = useForm<BillingAddressFormData>({
+    resolver: zodResolver(schema),
+    mode: 'onChange',
+    defaultValues: {
+      personType: 'cnpj',
+      document: '',
+      companyName: '',
+      financialEmail: '',
+      cep: '',
+      street: '',
+      number: '',
+      complement: '',
+      neighborhood: '',
+      city: '',
+      state: '',
+      country: 'BR',
+    },
+  });
+
+  const {
+    register,
+    handleSubmit,
+    control,
+    watch,
+    reset,
+    setValue,
+    trigger,
+    formState: { errors, isSubmitting, isValid },
+  } = form;
+  const personType = watch('personType');
+
+  useEffect(() => {
+    if (!isOpen || !account) return;
+
+    const accountPersonType = account.financial_document_type === 1 ? 'cpf' : 'cnpj';
+    reset({
+      personType: accountPersonType,
+      document: formatFinancialDocument(account.financial_document, accountPersonType),
+      companyName: account.financial_name ?? '',
+      financialEmail: account.financial_email || user?.email || '',
+      cep: account.zipcode ?? '',
+      street: account.address ?? '',
+      number: account.address_number ?? '',
+      complement: account.address_complement ?? '',
+      neighborhood: account.neighborhood ?? '',
+      city: account.city ?? '',
+      state: account.state ?? '',
+      country: account.country || 'BR',
+    });
+
+    // Cadastro já preenchido valida na abertura, para o botão de salvar não nascer desabilitado.
+    if (account.financial_document || account.zipcode || account.address) {
+      setTimeout(() => trigger(), 0);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isOpen, account, reset, trigger]);
+
+  const handleClose = () => {
+    reset();
+    close();
+  };
+
+  const handlePersonTypeChange = (type: 'cpf' | 'cnpj', onChange: (value: string) => void) => {
+    if (type === personType) return;
+    onChange(type);
+    setValue('document', '');
+    setValue('companyName', '');
+  };
+
+  const onSubmit = async (data: BillingAddressFormData) => {
+    try {
+      await updateBillingData({
+        financial_document_type: data.personType === 'cpf' ? 1 : 2,
+        financial_document: data.document,
+        financial_name: data.companyName,
+        financial_email: data.financialEmail,
+        zipcode: data.cep,
+        address: data.street,
+        address_number: data.number,
+        address_complement: data.complement,
+        neighborhood: data.neighborhood,
+        city: data.city,
+        state: data.state,
+        country: data.country,
+      });
+      close();
+      toast.custom((toastId) => (
+        <Toast variant="success" message={translateSheet('successToast')} toastId={toastId} />
+      ));
+    } catch (error) {
+      const message = error instanceof Error ? error.message : translateSheet('errorToast');
+      toast.custom((toastId) => <Toast variant="error" message={message} toastId={toastId} />);
+    }
+  };
+
+  const onError = () => {
+    toast.custom((toastId) => (
+      <Toast variant="error" message={translateSheet('requiredFields')} toastId={toastId} />
+    ));
+  };
+
+  const handleCepChange = (value: string, onChange: (next: string) => void) => {
+    const digits = value.replace(/\D/g, '').slice(0, 8);
+    onChange(digits.length > 5 ? `${digits.slice(0, 5)}-${digits.slice(5)}` : digits);
+
+    if (digits.length !== 8) return;
+
+    lookupCep(digits)
+      .then((data) => {
+        setValue('street', data.logradouro, { shouldValidate: true });
+        setValue('neighborhood', data.bairro, { shouldValidate: true });
+        setValue('city', data.localidade, { shouldValidate: true });
+        setValue('state', data.uf, { shouldValidate: true });
+      })
+      .catch((error) => {
+        toast.custom((toastId) => (
+          <Toast
+            variant="error"
+            message={error instanceof Error ? error.message : translateSheet('cepNotFound')}
+            toastId={toastId}
+          />
+        ));
+      });
+  };
+
+  return (
+    <Sheet open={isOpen} onOpenChange={(nextOpen) => !nextOpen && handleClose()}>
+      <SheetContent
+        side={isMobile ? 'bottom' : 'right'}
+        onOpenAutoFocus={(event) => event.preventDefault()}
+        className={cn(
+          isMobile
+            ? 'h-dvh w-full max-w-full rounded-none pt-[env(safe-area-inset-top)] pb-[env(safe-area-inset-bottom)]'
+            : 'h-screen max-w-120! w-120!',
+          'data-[state=open]:max-h-none data-[state=open]:h-dvh'
+        )}
+      >
+        <SheetHeader className="border-b border-zinc-200">
+          <SheetTitle className="text-zinc-950 paragraph-medium-semibold">
+            {translateSheet('title')}
+          </SheetTitle>
+        </SheetHeader>
+
+        <form onSubmit={handleSubmit(onSubmit, onError)} className="flex flex-col flex-1 overflow-hidden">
+          <div className="flex flex-col gap-6 px-5 py-5 overflow-y-auto [scrollbar-width:auto] [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-zinc-300 flex-1">
+            <div className="flex flex-col gap-5">
+              <Controller
+                name="personType"
+                control={control}
+                render={({ field }) => (
+                  <SelectField
+                    label={translateSheet('personTypeLabel')}
+                    placeholder={translateSheet('personTypeLabel')}
+                    options={[
+                      { label: translateSheet('personTypePf'), value: 'cpf' },
+                      { label: translateSheet('personTypePj'), value: 'cnpj' },
+                    ]}
+                    value={field.value}
+                    onChange={(value) => handlePersonTypeChange(value as 'cpf' | 'cnpj', field.onChange)}
+                  />
+                )}
+              />
+
+              <Controller
+                name="document"
+                control={control}
+                render={({ field }) => (
+                  <FormField
+                    label={personType === 'cnpj' ? 'CNPJ' : 'CPF'}
+                    placeholder={personType === 'cnpj' ? '00.000.000/0000-00' : '000.000.000-00'}
+                    error={!!errors.document}
+                    errorMessage={errors.document?.message}
+                    value={field.value}
+                    onChange={(event) =>
+                      field.onChange(
+                        personType === 'cnpj'
+                          ? formatCNPJ(event.target.value)
+                          : formatCPF(event.target.value)
+                      )
+                    }
+                  />
+                )}
+              />
+
+              <FormField
+                label={personType === 'cnpj' ? translateSheet('fantasyName') : translateSheet('fullName')}
+                placeholder={
+                  personType === 'cnpj'
+                    ? translateSheet('fantasyNamePlaceholder')
+                    : translateSheet('fullNamePlaceholder')
+                }
+                error={!!errors.companyName}
+                errorMessage={errors.companyName?.message}
+                {...register('companyName')}
+              />
+
+              <FormField
+                label={translateSheet('financialEmail')}
+                placeholder={translateSheet('financialEmailPlaceholder')}
+                type="email"
+                error={!!errors.financialEmail}
+                errorMessage={errors.financialEmail?.message}
+                {...register('financialEmail')}
+              />
+            </div>
+
+            <div className="h-px bg-zinc-200" />
+
+            <div className="flex flex-col gap-1">
+              <span className="paragraph-medium-semibold text-zinc-950">
+                {translateSheet('locationTitle')}
+              </span>
+              <span className="paragraph-small-regular text-zinc-500">
+                {translateSheet('locationDescription')}
+              </span>
+            </div>
+
+            <div className="flex flex-col gap-5">
+              <Controller
+                name="cep"
+                control={control}
+                render={({ field }) => (
+                  <FormField
+                    label="CEP"
+                    placeholder="00000-000"
+                    error={!!errors.cep}
+                    errorMessage={errors.cep?.message}
+                    value={field.value}
+                    onChange={(event) => handleCepChange(event.target.value, field.onChange)}
+                  />
+                )}
+              />
+
+              <div className="flex gap-4">
+                <div className="flex-1">
+                  <FormField
+                    label={translateSheet('addressLabel')}
+                    placeholder={translateSheet('addressPlaceholder')}
+                    error={!!errors.street}
+                    errorMessage={errors.street?.message}
+                    {...register('street')}
+                  />
+                </div>
+                <div className="flex-1">
+                  <FormField
+                    label={translateSheet('numberLabel')}
+                    placeholder={translateSheet('numberPlaceholder')}
+                    error={!!errors.number}
+                    errorMessage={errors.number?.message}
+                    {...register('number')}
+                  />
+                </div>
+              </div>
+
+              <FormField
+                label={translateSheet('complementLabel')}
+                optional
+                placeholder={translateSheet('complementPlaceholder')}
+                {...register('complement')}
+              />
+
+              <FormField
+                label={translateSheet('neighborhoodLabel')}
+                placeholder={translateSheet('neighborhoodPlaceholder')}
+                error={!!errors.neighborhood}
+                errorMessage={errors.neighborhood?.message}
+                {...register('neighborhood')}
+              />
+
+              <div className="flex gap-4">
+                <div className="flex-1">
+                  <FormField
+                    label={translateSheet('cityLabel')}
+                    placeholder={translateSheet('cityPlaceholder')}
+                    error={!!errors.city}
+                    errorMessage={errors.city?.message}
+                    {...register('city')}
+                  />
+                </div>
+                <div className="flex-1">
+                  <Controller
+                    name="state"
+                    control={control}
+                    render={({ field }) => (
+                      <SelectField
+                        label={translateSheet('stateLabel')}
+                        placeholder={translateSheet('statePlaceholder')}
+                        options={BR_STATE_OPTIONS}
+                        value={field.value}
+                        onChange={(value) => field.onChange(value as string)}
+                        error={!!errors.state}
+                        errorMessage={errors.state?.message}
+                      />
+                    )}
+                  />
+                </div>
+              </div>
+
+              <Controller
+                name="country"
+                control={control}
+                render={({ field }) => (
+                  <SelectField
+                    label={translateSheet('countryLabel')}
+                    placeholder={translateSheet('countryPlaceholder')}
+                    options={COUNTRIES.map((country) => ({ value: country.iso, label: country.name }))}
+                    value={field.value}
+                    onChange={(value) => field.onChange(value as string)}
+                    error={!!errors.country}
+                    errorMessage={errors.country?.message}
+                  />
+                )}
+              />
+            </div>
+          </div>
+
+          <SheetFooter className="flex-row items-center justify-between border-t border-zinc-200 shrink-0">
+            <Button variant="secondary" className="h-10!" type="button" onClick={handleClose}>
+              {translate('common.actions.cancel')}
+            </Button>
+            <Button
+              className="h-10!"
+              type="submit"
+              disabled={!isValid && !isSubmitting}
+              loading={isSubmitting}
+            >
+              {isSubmitting ? translate('common.actions.saving') : translate('common.actions.saveChanges')}
+            </Button>
+          </SheetFooter>
+        </form>
+      </SheetContent>
+    </Sheet>
+  );
+}