@greatapps/common 1.1.294 → 1.1.295

package/dist/components/modals/cards/CardFormFields.mjs

@@ -203,7 +203,7 @@ function BillingFormFields({ form }) {
       }
     ),
     /* @__PURE__ */ jsxs("div", { className: "flex gap-4", children: [
-      /* @__PURE__ */ jsx("div", { className: "flex-[2]", children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx("div", { className: "flex-[4]", children: /* @__PURE__ */ jsx(
         FormField,
         {
           label: "Endere\xE7o",
@@ -213,7 +213,7 @@ function BillingFormFields({ form }) {
           errorMessage: errors.street?.message
         }
       ) }),
-      /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx("div", { className: "flex-[1]", children: /* @__PURE__ */ jsx(
         FormField,
         {
           label: "N\xFAmero",

package/dist/components/modals/cards/CardFormFields.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/modals/cards/CardFormFields.tsx"],"sourcesContent":["'use client';\n\nimport { UseFormReturn } from 'react-hook-form';\nimport { useViaCep } from '../../../modules/accounts/hooks/useViaCep';\nimport { FormField } from '../../ui/form/FormField';\nimport { SelectField } from '../../ui/form/SelectField';\nimport { formatCPF, formatCNPJ, formatPostalCode } from '../../../utils/format/masks';\nimport z from 'zod';\nimport { CardCvcElement, CardExpiryElement, CardNumberElement } from '@stripe/react-stripe-js';\n\nconst stripeElementOptions = {\n  style: {\n    base: {\n      fontSize: '16px',\n      color: '#030712',\n      fontFamily: 'Inter, sans-serif',\n      '::placeholder': {\n        color: '#9ca3af',\n      },\n    },\n  },\n};\n\nexport const cardFormSchema = z\n  .object({\n    name: z.string().min(1, 'Nome é obrigatório'),\n    country: z.string().min(1, 'País é obrigatório'),\n    personType: z.enum(['pf', 'pj']),\n    cpf: z.string().optional(),\n    cnpj: z.string().optional(),\n    fullName: z.string().min(1, 'Nome completo é obrigatório'),\n    cep: z.string().min(9, 'CEP é obrigatório'),\n    street: z.string().min(1, 'Endereço é obrigatório'),\n    streetNumber: z.string().min(1, 'Número é obrigatório'),\n    city: z.string().min(1, 'Cidade é obrigatória'),\n    state: z.string().min(1, 'UF é obrigatório'),\n    complement: z.string().optional(),\n  })\n  .refine(\n    (data) => {\n      if (data.personType === 'pf') return !!data.cpf && data.cpf.length >= 14;\n      return !!data.cnpj && data.cnpj.length >= 18;\n    },\n    {\n      message: 'Documento é obrigatório',\n      path: ['cpf'],\n    }\n  );\n\nexport type CardFormData = z.infer<typeof cardFormSchema>;\n\nexport type StripeElementsStatus = {\n  cardNumber: boolean;\n  cardExpiry: boolean;\n  cardCvc: boolean;\n};\n\nexport const STEP1_FIELDS = ['name', 'country', 'personType', 'cpf', 'cnpj'] as const;\n\ntype CardFormFieldsProps = {\n  readonly form: UseFormReturn<CardFormData>;\n  readonly onStripeChange: (field: keyof StripeElementsStatus, complete: boolean) => void;\n  readonly stripeErrors: { cardNumber?: string; cardExpiry?: string; cardCvc?: string };\n};\n\nexport function CardFormFields({ form, onStripeChange, stripeErrors }: CardFormFieldsProps) {\n  const {\n    register,\n    watch,\n    setValue,\n    formState: { errors },\n  } = form;\n\n  const personType = watch('personType');\n\n  return (\n    <div className=\"flex flex-col gap-5\">\n      <FormField\n        label=\"Nome impresso no cartão\"\n        placeholder=\"Digite aqui\"\n        {...register('name')}\n        error={!!errors.name}\n        errorMessage={errors.name?.message}\n      />\n\n      <div className=\"flex flex-col gap-1.5\">\n        <label className=\"paragraph-xsmall-semibold text-zinc-600\">Número do cartão</label>\n        <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\">\n          <div className=\"w-full\">\n            <CardNumberElement\n              options={{ ...stripeElementOptions, showIcon: true }}\n              onChange={(e: { complete: boolean }) => onStripeChange('cardNumber', e.complete)}\n            />\n          </div>\n        </div>\n        {stripeErrors.cardNumber && (\n          <p className=\"paragraph-xsmall-semibold text-red-600\">{stripeErrors.cardNumber}</p>\n        )}\n      </div>\n\n      <div className=\"flex gap-4\">\n        <div className=\"flex-1 flex flex-col gap-1.5\">\n          <label className=\"paragraph-xsmall-semibold text-zinc-600\">Data de validade</label>\n          <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\">\n            <div className=\"w-full\">\n              <CardExpiryElement\n                options={stripeElementOptions}\n                onChange={(e: { complete: boolean }) => onStripeChange('cardExpiry', e.complete)}\n              />\n            </div>\n          </div>\n          {stripeErrors.cardExpiry && (\n            <p className=\"paragraph-xsmall-semibold text-red-600\">{stripeErrors.cardExpiry}</p>\n          )}\n        </div>\n\n        <div className=\"flex-1 flex flex-col gap-1.5\">\n          <label className=\"paragraph-xsmall-semibold text-zinc-600\">CVC</label>\n          <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\">\n            <div className=\"w-full\">\n              <CardCvcElement\n                options={stripeElementOptions}\n                onChange={(e: { complete: boolean }) => onStripeChange('cardCvc', e.complete)}\n              />\n            </div>\n          </div>\n          {stripeErrors.cardCvc && (\n            <p className=\"paragraph-xsmall-semibold text-red-600\">{stripeErrors.cardCvc}</p>\n          )}\n        </div>\n      </div>\n\n      <SelectField\n        label=\"País\"\n        placeholder=\"Selecione\"\n        value={watch('country')}\n        onChange={(value) => setValue('country', value as string)}\n        options={[\n          { value: 'BR', label: 'Brasil' },\n          { value: 'ES', label: 'Espanha' },\n          { value: 'US', label: 'Estados Unidos' },\n        ]}\n      />\n\n      <div className=\"flex gap-4\">\n        <SelectField\n          label=\"Tipo de pessoa\"\n          placeholder=\"Selecione\"\n          value={personType}\n          onChange={(value) => {\n            setValue('personType', value as 'pf' | 'pj');\n            setValue('cpf', '');\n            setValue('cnpj', '');\n          }}\n          options={[\n            { value: 'pf', label: 'Pessoa física' },\n            { value: 'pj', label: 'Pessoa jurídica' },\n          ]}\n          containerClassName=\"flex-1\"\n        />\n        <div className=\"flex-1\">\n          {personType === 'pj' ? (\n            <FormField\n              label=\"CNPJ\"\n              placeholder=\"__.___.___/____-__\"\n              {...register('cnpj', {\n                onChange: (e) => {\n                  setValue('cnpj', formatCNPJ(e.target.value));\n                },\n              })}\n              error={!!errors.cpf}\n              errorMessage={errors.cpf?.message}\n            />\n          ) : (\n            <FormField\n              label=\"CPF\"\n              placeholder=\"___.___.___-__\"\n              {...register('cpf', {\n                onChange: (e) => {\n                  setValue('cpf', formatCPF(e.target.value));\n                },\n              })}\n              error={!!errors.cpf}\n              errorMessage={errors.cpf?.message}\n            />\n          )}\n        </div>\n      </div>\n    </div>\n  );\n}\n\ntype BillingFormFieldsProps = {\n  readonly form: UseFormReturn<CardFormData>;\n};\n\nexport function BillingFormFields({ form }: BillingFormFieldsProps) {\n  const {\n    register,\n    setValue,\n    formState: { errors },\n  } = form;\n\n  const { mutateAsync: lookupCep } = useViaCep();\n\n  const handleCepChange = (rawValue: string) => {\n    const masked = formatPostalCode(rawValue);\n    setValue('cep', masked);\n\n    const digits = rawValue.replace(/\\D/g, '');\n    if (digits.length === 8) {\n      lookupCep(digits).then((data) => {\n        setValue('street', data.logradouro, { shouldValidate: true });\n        setValue('city', data.localidade, { shouldValidate: true });\n        setValue('state', data.uf, { shouldValidate: true });\n      }).catch(() => {\n        // silently ignore — user can fill manually\n      });\n    }\n  };\n\n  return (\n    <div className=\"flex flex-col gap-5\">\n      <FormField\n        label=\"Nome completo\"\n        placeholder=\"Digite aqui\"\n        {...register('fullName')}\n        error={!!errors.fullName}\n        errorMessage={errors.fullName?.message}\n      />\n\n      <FormField\n        label=\"CEP\"\n        placeholder=\"_____-___\"\n        {...register('cep', {\n          onChange: (e) => handleCepChange(e.target.value),\n        })}\n        error={!!errors.cep}\n        errorMessage={errors.cep?.message}\n      />\n\n      <div className=\"flex gap-4\">\n        <div className=\"flex-[2]\">\n          <FormField\n            label=\"Endereço\"\n            placeholder=\"\"\n            {...register('street')}\n            error={!!errors.street}\n            errorMessage={errors.street?.message}\n          />\n        </div>\n        <div className=\"flex-1\">\n          <FormField\n            label=\"Número\"\n            placeholder=\"\"\n            {...register('streetNumber')}\n            error={!!errors.streetNumber}\n            errorMessage={errors.streetNumber?.message}\n          />\n        </div>\n      </div>\n\n      <div className=\"flex gap-4\">\n        <div className=\"flex-1\">\n          <FormField\n            label=\"Cidade\"\n            placeholder=\"\"\n            {...register('city')}\n            error={!!errors.city}\n            errorMessage={errors.city?.message}\n          />\n        </div>\n        <div className=\"flex-1\">\n          <FormField\n            label=\"UF\"\n            placeholder=\"\"\n            {...register('state')}\n            error={!!errors.state}\n            errorMessage={errors.state?.message}\n          />\n        </div>\n      </div>\n\n      <FormField\n        label=\"Complemento\"\n        optional\n        placeholder=\"\"\n        {...register('complement')}\n        error={!!errors.complement}\n        errorMessage={errors.complement?.message}\n      />\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../../src/components/modals/cards/CardFormFields.tsx"],"sourcesContent":["'use client';\n\nimport { UseFormReturn } from 'react-hook-form';\nimport { useViaCep } from '../../../modules/accounts/hooks/useViaCep';\nimport { FormField } from '../../ui/form/FormField';\nimport { SelectField } from '../../ui/form/SelectField';\nimport { formatCPF, formatCNPJ, formatPostalCode } from '../../../utils/format/masks';\nimport z from 'zod';\nimport { CardCvcElement, CardExpiryElement, CardNumberElement } from '@stripe/react-stripe-js';\n\nconst stripeElementOptions = {\n  style: {\n    base: {\n      fontSize: '16px',\n      color: '#030712',\n      fontFamily: 'Inter, sans-serif',\n      '::placeholder': {\n        color: '#9ca3af',\n      },\n    },\n  },\n};\n\nexport const cardFormSchema = z\n  .object({\n    name: z.string().min(1, 'Nome é obrigatório'),\n    country: z.string().min(1, 'País é obrigatório'),\n    personType: z.enum(['pf', 'pj']),\n    cpf: z.string().optional(),\n    cnpj: z.string().optional(),\n    fullName: z.string().min(1, 'Nome completo é obrigatório'),\n    cep: z.string().min(9, 'CEP é obrigatório'),\n    street: z.string().min(1, 'Endereço é obrigatório'),\n    streetNumber: z.string().min(1, 'Número é obrigatório'),\n    city: z.string().min(1, 'Cidade é obrigatória'),\n    state: z.string().min(1, 'UF é obrigatório'),\n    complement: z.string().optional(),\n  })\n  .refine(\n    (data) => {\n      if (data.personType === 'pf') return !!data.cpf && data.cpf.length >= 14;\n      return !!data.cnpj && data.cnpj.length >= 18;\n    },\n    {\n      message: 'Documento é obrigatório',\n      path: ['cpf'],\n    }\n  );\n\nexport type CardFormData = z.infer<typeof cardFormSchema>;\n\nexport type StripeElementsStatus = {\n  cardNumber: boolean;\n  cardExpiry: boolean;\n  cardCvc: boolean;\n};\n\nexport const STEP1_FIELDS = ['name', 'country', 'personType', 'cpf', 'cnpj'] as const;\n\ntype CardFormFieldsProps = {\n  readonly form: UseFormReturn<CardFormData>;\n  readonly onStripeChange: (field: keyof StripeElementsStatus, complete: boolean) => void;\n  readonly stripeErrors: { cardNumber?: string; cardExpiry?: string; cardCvc?: string };\n};\n\nexport function CardFormFields({ form, onStripeChange, stripeErrors }: CardFormFieldsProps) {\n  const {\n    register,\n    watch,\n    setValue,\n    formState: { errors },\n  } = form;\n\n  const personType = watch('personType');\n\n  return (\n    <div className=\"flex flex-col gap-5\">\n      <FormField\n        label=\"Nome impresso no cartão\"\n        placeholder=\"Digite aqui\"\n        {...register('name')}\n        error={!!errors.name}\n        errorMessage={errors.name?.message}\n      />\n\n      <div className=\"flex flex-col gap-1.5\">\n        <label className=\"paragraph-xsmall-semibold text-zinc-600\">Número do cartão</label>\n        <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\">\n          <div className=\"w-full\">\n            <CardNumberElement\n              options={{ ...stripeElementOptions, showIcon: true }}\n              onChange={(e: { complete: boolean }) => onStripeChange('cardNumber', e.complete)}\n            />\n          </div>\n        </div>\n        {stripeErrors.cardNumber && (\n          <p className=\"paragraph-xsmall-semibold text-red-600\">{stripeErrors.cardNumber}</p>\n        )}\n      </div>\n\n      <div className=\"flex gap-4\">\n        <div className=\"flex-1 flex flex-col gap-1.5\">\n          <label className=\"paragraph-xsmall-semibold text-zinc-600\">Data de validade</label>\n          <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\">\n            <div className=\"w-full\">\n              <CardExpiryElement\n                options={stripeElementOptions}\n                onChange={(e: { complete: boolean }) => onStripeChange('cardExpiry', e.complete)}\n              />\n            </div>\n          </div>\n          {stripeErrors.cardExpiry && (\n            <p className=\"paragraph-xsmall-semibold text-red-600\">{stripeErrors.cardExpiry}</p>\n          )}\n        </div>\n\n        <div className=\"flex-1 flex flex-col gap-1.5\">\n          <label className=\"paragraph-xsmall-semibold text-zinc-600\">CVC</label>\n          <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\">\n            <div className=\"w-full\">\n              <CardCvcElement\n                options={stripeElementOptions}\n                onChange={(e: { complete: boolean }) => onStripeChange('cardCvc', e.complete)}\n              />\n            </div>\n          </div>\n          {stripeErrors.cardCvc && (\n            <p className=\"paragraph-xsmall-semibold text-red-600\">{stripeErrors.cardCvc}</p>\n          )}\n        </div>\n      </div>\n\n      <SelectField\n        label=\"País\"\n        placeholder=\"Selecione\"\n        value={watch('country')}\n        onChange={(value) => setValue('country', value as string)}\n        options={[\n          { value: 'BR', label: 'Brasil' },\n          { value: 'ES', label: 'Espanha' },\n          { value: 'US', label: 'Estados Unidos' },\n        ]}\n      />\n\n      <div className=\"flex gap-4\">\n        <SelectField\n          label=\"Tipo de pessoa\"\n          placeholder=\"Selecione\"\n          value={personType}\n          onChange={(value) => {\n            setValue('personType', value as 'pf' | 'pj');\n            setValue('cpf', '');\n            setValue('cnpj', '');\n          }}\n          options={[\n            { value: 'pf', label: 'Pessoa física' },\n            { value: 'pj', label: 'Pessoa jurídica' },\n          ]}\n          containerClassName=\"flex-1\"\n        />\n        <div className=\"flex-1\">\n          {personType === 'pj' ? (\n            <FormField\n              label=\"CNPJ\"\n              placeholder=\"__.___.___/____-__\"\n              {...register('cnpj', {\n                onChange: (e) => {\n                  setValue('cnpj', formatCNPJ(e.target.value));\n                },\n              })}\n              error={!!errors.cpf}\n              errorMessage={errors.cpf?.message}\n            />\n          ) : (\n            <FormField\n              label=\"CPF\"\n              placeholder=\"___.___.___-__\"\n              {...register('cpf', {\n                onChange: (e) => {\n                  setValue('cpf', formatCPF(e.target.value));\n                },\n              })}\n              error={!!errors.cpf}\n              errorMessage={errors.cpf?.message}\n            />\n          )}\n        </div>\n      </div>\n    </div>\n  );\n}\n\ntype BillingFormFieldsProps = {\n  readonly form: UseFormReturn<CardFormData>;\n};\n\nexport function BillingFormFields({ form }: BillingFormFieldsProps) {\n  const {\n    register,\n    setValue,\n    formState: { errors },\n  } = form;\n\n  const { mutateAsync: lookupCep } = useViaCep();\n\n  const handleCepChange = (rawValue: string) => {\n    const masked = formatPostalCode(rawValue);\n    setValue('cep', masked);\n\n    const digits = rawValue.replace(/\\D/g, '');\n    if (digits.length === 8) {\n      lookupCep(digits).then((data) => {\n        setValue('street', data.logradouro, { shouldValidate: true });\n        setValue('city', data.localidade, { shouldValidate: true });\n        setValue('state', data.uf, { shouldValidate: true });\n      }).catch(() => {\n        // silently ignore — user can fill manually\n      });\n    }\n  };\n\n  return (\n    <div className=\"flex flex-col gap-5\">\n      <FormField\n        label=\"Nome completo\"\n        placeholder=\"Digite aqui\"\n        {...register('fullName')}\n        error={!!errors.fullName}\n        errorMessage={errors.fullName?.message}\n      />\n\n      <FormField\n        label=\"CEP\"\n        placeholder=\"_____-___\"\n        {...register('cep', {\n          onChange: (e) => handleCepChange(e.target.value),\n        })}\n        error={!!errors.cep}\n        errorMessage={errors.cep?.message}\n      />\n\n      <div className=\"flex gap-4\">\n        <div className=\"flex-[4]\">\n          <FormField\n            label=\"Endereço\"\n            placeholder=\"\"\n            {...register('street')}\n            error={!!errors.street}\n            errorMessage={errors.street?.message}\n          />\n        </div>\n        <div className=\"flex-[1]\">\n          <FormField\n            label=\"Número\"\n            placeholder=\"\"\n            {...register('streetNumber')}\n            error={!!errors.streetNumber}\n            errorMessage={errors.streetNumber?.message}\n          />\n        </div>\n      </div>\n\n      <div className=\"flex gap-4\">\n        <div className=\"flex-1\">\n          <FormField\n            label=\"Cidade\"\n            placeholder=\"\"\n            {...register('city')}\n            error={!!errors.city}\n            errorMessage={errors.city?.message}\n          />\n        </div>\n        <div className=\"flex-1\">\n          <FormField\n            label=\"UF\"\n            placeholder=\"\"\n            {...register('state')}\n            error={!!errors.state}\n            errorMessage={errors.state?.message}\n          />\n        </div>\n      </div>\n\n      <FormField\n        label=\"Complemento\"\n        optional\n        placeholder=\"\"\n        {...register('complement')}\n        error={!!errors.complement}\n        errorMessage={errors.complement?.message}\n      />\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@greatapps/common",
-  "version": "1.1.294",
+  "version": "1.1.295",
   "description": "Shared library for GreatApps frontend applications",
   "main": "./dist/index.mjs",
   "types": "./src/index.ts",

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

@@ -240,7 +240,7 @@ export function BillingFormFields({ form }: BillingFormFieldsProps) {
       />
 
       <div className="flex gap-4">
-        <div className="flex-[2]">
+        <div className="flex-[4]">
           <FormField
             label="Endereço"
             placeholder=""
@@ -249,7 +249,7 @@ export function BillingFormFields({ form }: BillingFormFieldsProps) {
             errorMessage={errors.street?.message}
           />
         </div>
-        <div className="flex-1">
+        <div className="flex-[1]">
           <FormField
             label="Número"
             placeholder=""