@greatapps/common 1.1.275 → 1.1.277

package/src/components/modals/cards/CardFormFields.tsx

@@ -0,0 +1,158 @@
+'use client';
+
+import { UseFormReturn } from 'react-hook-form';
+import { FormField } from '../../ui/form/FormField';
+import { SelectField } from '../../ui/form/SelectField';
+import { formatCPF, formatPostalCode } from '../../../utils/format/masks';
+import z from 'zod';
+import { CardCvcElement, CardExpiryElement, CardNumberElement } from '@stripe/react-stripe-js';
+
+const stripeElementOptions = {
+  style: {
+    base: {
+      fontSize: '16px',
+      color: '#030712',
+      fontFamily: 'Inter, sans-serif',
+      '::placeholder': {
+        color: '#9ca3af',
+      },
+    },
+  },
+};
+
+export const cardFormSchema = z.object({
+  name: z.string().min(1, 'Nome é obrigatório'),
+  number: z.string().min(1, 'Número do cartão é obrigatório'),
+  expiry: z.string().min(1, 'Data de validade é obrigatória'),
+  cvv: z.string().min(1, 'Código de segurança é obrigatório'),
+  country: z.string().min(1, 'País é obrigatório'),
+  postalCode: z.string().optional(),
+  cpf: z.string().min(14, 'CPF é obrigatório'),
+});
+
+export type CardFormData = z.infer<typeof cardFormSchema>;
+
+type CardFormFieldsProps = {
+  readonly form: UseFormReturn<CardFormData>;
+};
+
+export function CardFormFields({ form }: CardFormFieldsProps) {
+  const {
+    register,
+    watch,
+    setValue,
+    formState: { errors },
+  } = form;
+
+  return (
+    <div className="flex flex-col gap-5">
+      <FormField
+        label="Nome impresso no cartão"
+        placeholder="Digite aqui"
+        {...register('name')}
+        error={!!errors.name}
+        errorMessage={errors.name?.message}
+      />
+
+      <div className="flex flex-col gap-1.5">
+        <label className="paragraph-xsmall-semibold text-zinc-600">
+          Número do cartão
+        </label>
+        <div className="h-10 px-3 flex items-center w-full border border-zinc-200 rounded-lg bg-white transition-colors focus-within:border-zinc-400 relative">
+          <div className="w-full">
+            <CardNumberElement
+              options={{ ...stripeElementOptions, showIcon: true }}
+              onChange={(e) =>
+                setValue('number', e.complete ? 'complete' : '', { shouldValidate: true })
+              }
+            />
+          </div>
+        </div>
+        {errors.number && (
+          <p className="paragraph-xsmall-semibold text-red-600">{errors.number.message}</p>
+        )}
+      </div>
+
+      <div className="flex gap-4">
+        <div className="flex-1 flex flex-col gap-1.5">
+          <label className="paragraph-xsmall-semibold text-zinc-600">
+            Data de validade
+          </label>
+          <div className="h-10 px-3 flex items-center w-full border border-zinc-200 rounded-lg bg-white transition-colors focus-within:border-zinc-400">
+            <div className="w-full">
+              <CardExpiryElement
+                options={stripeElementOptions}
+                onChange={(e) =>
+                  setValue('expiry', e.complete ? 'complete' : '', { shouldValidate: true })
+                }
+              />
+            </div>
+          </div>
+          {errors.expiry && (
+            <p className="paragraph-xsmall-semibold text-red-600">{errors.expiry.message}</p>
+          )}
+        </div>
+
+        <div className="flex-1 flex flex-col gap-1.5">
+          <label className="paragraph-xsmall-semibold text-zinc-600">
+            CVC
+          </label>
+          <div className="h-10 px-3 flex items-center w-full border border-zinc-200 rounded-lg bg-white transition-colors focus-within:border-zinc-400">
+            <div className="w-full">
+              <CardCvcElement
+                options={stripeElementOptions}
+                onChange={(e) =>
+                  setValue('cvv', e.complete ? 'complete' : '', { shouldValidate: true })
+                }
+              />
+            </div>
+          </div>
+          {errors.cvv && (
+            <p className="paragraph-xsmall-semibold text-red-600">{errors.cvv.message}</p>
+          )}
+        </div>
+      </div>
+
+      <div className="flex gap-4">
+        <SelectField
+          label="País"
+          placeholder="Selecione"
+          value={watch('country')}
+          onChange={(value) => setValue('country', value as string)}
+          options={[
+            { value: 'BR', label: 'Brasil' },
+            { value: 'ES', label: 'Espanha' },
+            { value: 'US', label: 'Estados Unidos' },
+          ]}
+          containerClassName="flex-1"
+        />
+        <div className="flex-1">
+          <FormField
+            label="Código postal"
+            optional
+            placeholder=""
+            {...register('postalCode', {
+              onChange: (e) => {
+                setValue('postalCode', formatPostalCode(e.target.value));
+              },
+            })}
+            error={!!errors.postalCode}
+            errorMessage={errors.postalCode?.message}
+          />
+        </div>
+      </div>
+
+      <FormField
+        label="CPF"
+        placeholder="___.___.___-__"
+        {...register('cpf', {
+          onChange: (e) => {
+            setValue('cpf', formatCPF(e.target.value));
+          },
+        })}
+        error={!!errors.cpf}
+        errorMessage={errors.cpf?.message}
+      />
+    </div>
+  );
+}

package/src/index.ts

@@ -44,6 +44,7 @@ export { useHasPlanAddon } from "./modules/plans/hooks/use-has-plan-addon.hook";
 export { useCalculateSubscription } from "./modules/subscriptions/hooks/calculate-subscription.hook";
 export { useUpdateSubscriptionPlan } from "./modules/subscriptions/hooks/update-subscription-plan.hook";
 export { useCards, CARDS_QUERY_KEY } from "./modules/cards/hooks/cards.hook";
+export { useCreateCard } from "./modules/cards/hooks/create-card.hook";
 export { useIaCredits } from "./modules/ia-credits/hooks/ia-credits.hook";
 export type {
   IaCreditsSummary,
@@ -68,12 +69,15 @@ export type {
   CalculateSubscriptionResponse,
   UpdateSubscriptionPlanRequest,
 } from "./modules/subscriptions/types/calculate-subscription.type";
-export type { Card as PaymentCard } from "./modules/cards/types";
-export { CardSchema as PaymentCardSchema } from "./modules/cards/types";
+export type { Card as PaymentCard, CreateCardRequest } from "./modules/cards/types";
+export { CardSchema as PaymentCardSchema, CreateCardRequestSchema } from "./modules/cards/types";
 export { buildPlanExtras } from "./modules/subscriptions/utils/build-plan-extras";
 export { getPriceFromCalculatedData, periodicityToBillingPeriod } from "./modules/subscriptions/utils/periodicity";
 export { useBuyCreditsModal } from "./store/useBuyCreditsModal";
 export { default as BuyCreditsModal } from "./components/modals/BuyCreditsModal";
+export { default as AddCardModal } from "./components/modals/cards/AddCardModal";
+export { CardFormFields, cardFormSchema } from "./components/modals/cards/CardFormFields";
+export type { CardFormData } from "./components/modals/cards/CardFormFields";
 export { Skeleton } from "./components/ui/feedback/Skeleton";
 export { PaymentInfoCard } from "./components/ui/data-display/PaymentInfoCard";
 export { CardBrandIcon } from "./components/ui/data-display/CardBrandIcons";

package/src/modules/cards/actions/create-card.action.ts

@@ -0,0 +1,9 @@
+'use server';
+
+import { safeServerAction } from '../../../utils/safeServerAction';
+import { cardsService } from '../services/cards.service';
+import { CreateCardRequest } from '../types';
+
+export async function createCardAction(data: CreateCardRequest) {
+  return safeServerAction(() => cardsService.createCard(data));
+}

package/src/modules/cards/hooks/create-card.hook.ts

@@ -0,0 +1,18 @@
+'use client';
+
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { withAction } from '../../../utils/withAction';
+import { createCardAction } from '../actions/create-card.action';
+import { CreateCardRequest } from '../types';
+import { CARDS_QUERY_KEY } from './cards.hook';
+
+export function useCreateCard() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (data: CreateCardRequest) => withAction(createCardAction)(data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: CARDS_QUERY_KEY });
+    },
+  });
+}

package/src/modules/cards/services/cards.service.ts

@@ -1,10 +1,10 @@
 import 'server-only';
 
 import { api } from '../../../infra/api/client';
-import { ApiError, ApiPaginatedActionResult, PaginatedSuccessResult } from '../../../infra/api/types';
+import { ApiError, ApiPaginatedActionResult, PaginatedSuccessResult, SuccessResult } from '../../../infra/api/types';
 import { buildQueryParams } from '../../../infra/utils/params';
 import { getUserContext } from '../../auth/utils/get-user-context';
-import { Card, CardSchema } from '../types';
+import { Card, CardSchema, CreateCardRequest } from '../types';
 
 class CardsService {
   async listCards(): Promise<PaginatedSuccessResult<Card>> {
@@ -27,6 +27,25 @@ class CardsService {
 
     return { data, total: response.total, success: true };
   }
+  async createCard(data: CreateCardRequest): Promise<SuccessResult<Card>> {
+    const { id_account } = await getUserContext();
+
+    const response = await api.apps.post<ApiPaginatedActionResult<Card>>(
+      `/accounts/${id_account}/cards`,
+      data
+    );
+
+    if (response.status === 0) {
+      throw new ApiError(response.message || 'Erro ao criar cartão', 'CREATE_CARD_FAILED', 400);
+    }
+
+    const cardData = CardSchema.parse(response.data[0]);
+
+    return {
+      success: true,
+      data: cardData,
+    } satisfies SuccessResult<Card>;
+  }
 }
 
 export const cardsService = new CardsService();

package/src/modules/whitelabel/services/whitelabel.service.ts

@@ -1,6 +1,7 @@
 import greatCache from "@greatapps/cache";
 import { ApiError } from "../../../infra/api/types";
 import { WhitelabelTokenApiResponse, WhitelabelTokenData } from "../schema";
+import { normalizeHostname } from "../utils/normalize-hostname";
 
 class WhitelabelService {
   private getApiUrl(): string {
@@ -75,7 +76,7 @@ class WhitelabelService {
   }
 
   async getTokenByDomain(hostname: string): Promise<WhitelabelTokenData> {
-    hostname = process.env.WHITELABEL_DOMAIN || hostname;
+    hostname = normalizeHostname(process.env.WHITELABEL_DOMAIN || hostname);
 
     const cache = this.createCache();
     const cacheKey = this.getCacheKey(hostname);
@@ -136,7 +137,7 @@ class WhitelabelService {
   }
 
   async revalidateByDomain(hostname: string): Promise<WhitelabelTokenData> {
-    hostname = process.env.WHITELABEL_DOMAIN || hostname;
+    hostname = normalizeHostname(process.env.WHITELABEL_DOMAIN || hostname);
 
     const cache = this.createCache();
     const cacheKey = this.getCacheKey(hostname);

package/src/modules/whitelabel/utils/normalize-hostname.ts

@@ -0,0 +1,26 @@
+const CATEGORY_PREFIXES = new Set([
+  "com", "dev", "net", "org", "edu", "gov",
+  "mil", "co", "art", "inf", "blog", "wiki", "app",
+]);
+
+const SIMPLE_TLDS = new Set(["online"]);
+
+export function normalizeHostname(hostname: string): string {
+  const parts = hostname.split(".");
+  if (parts.length <= 2) return hostname;
+
+  const last = parts[parts.length - 1];
+  const secondLast = parts[parts.length - 2];
+
+  const isCompoundTld =
+    last.length <= 3 && CATEGORY_PREFIXES.has(secondLast);
+
+  const rootParts = isCompoundTld ? 3 : 2;
+
+  if (SIMPLE_TLDS.has(last) || !isCompoundTld) {
+    return parts.slice(-2).join(".");
+  }
+
+  if (parts.length <= rootParts) return hostname;
+  return parts.slice(-rootParts).join(".");
+}

package/src/server.ts

@@ -22,6 +22,7 @@ export { findPlanByIdAction } from './modules/plans/actions/find-plan-by-id.acti
 export { calculateSubscriptionAction } from './modules/subscriptions/actions/calculate-subscription.action';
 export { updateSubscriptionPlanAction } from './modules/subscriptions/actions/update-subscription-plan.action';
 export { listCardsAction } from './modules/cards/actions/list-cards.action';
+export { createCardAction } from './modules/cards/actions/create-card.action';
 export { resolvePlanExtrasPrices } from './modules/subscriptions/utils/resolve-plan-extras-prices';
 export { listIaCreditsAction } from './modules/ia-credits/actions/list-ia-credits.action';