@greatapps/common 1.1.274 → 1.1.276

package/dist/components/layouts/WhitelabelCodes.mjs

@@ -10,7 +10,7 @@ function WhitelabelCodes() {
   const { whitelabel } = useWhitelabel();
   useEffect(() => {
     const codes = whitelabel?.codes;
-    const rawCodes = typeof codes === "string" ? codes.trim() : "";
+    const rawCodes = codes ? codes.trim() : "";
     if (!rawCodes) {
       return;
     }

package/dist/components/layouts/WhitelabelCodes.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/layouts/WhitelabelCodes.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect } from 'react';\nimport { useWhitelabel } from '../../providers/whitelabel.provider';\n\nfunction copyAttributes(source: Element, target: HTMLElement) {\n  Array.from(source.attributes).forEach((attribute) => {\n    target.setAttribute(attribute.name, attribute.value);\n  });\n}\n\nexport default function WhitelabelCodes() {\n  const { whitelabel } = useWhitelabel();\n\n  useEffect(() => {\n    const codes = whitelabel?.codes;\n    const rawCodes = typeof codes === 'string' ? codes.trim() : '';\n\n    if (!rawCodes) {\n      return;\n    }\n\n    const template = document.createElement('template');\n    template.innerHTML = rawCodes;\n\n    const appendedNodes: HTMLElement[] = [];\n\n    Array.from(template.content.children).forEach((node) => {\n      const tagName = node.tagName.toLowerCase();\n\n      if (tagName !== 'style' && tagName !== 'script') {\n        return;\n      }\n\n      if (tagName === 'style') {\n        const style = document.createElement('style');\n        copyAttributes(node, style);\n        style.textContent = node.textContent;\n        style.dataset.whitelabelCodes = 'true';\n        document.head.appendChild(style);\n        appendedNodes.push(style);\n        return;\n      }\n\n      const script = document.createElement('script');\n      copyAttributes(node, script);\n      script.textContent = node.textContent;\n      script.dataset.whitelabelCodes = 'true';\n      document.head.appendChild(script);\n      appendedNodes.push(script);\n    });\n\n    return () => {\n      appendedNodes.forEach((node) => node.remove());\n    };\n  }, [whitelabel?.codes]);\n\n  return null;\n}\n"],"mappings":";AAEA,SAAS,iBAAiB;AAC1B,SAAS,qBAAqB;AAE9B,SAAS,eAAe,QAAiB,QAAqB;AAC5D,QAAM,KAAK,OAAO,UAAU,EAAE,QAAQ,CAAC,cAAc;AACnD,WAAO,aAAa,UAAU,MAAM,UAAU,KAAK;AAAA,EACrD,CAAC;AACH;AAEe,SAAR,kBAAmC;AACxC,QAAM,EAAE,WAAW,IAAI,cAAc;AAErC,YAAU,MAAM;AACd,UAAM,QAAQ,YAAY;AAC1B,UAAM,WAAW,OAAO,UAAU,WAAW,MAAM,KAAK,IAAI;AAE5D,QAAI,CAAC,UAAU;AACb;AAAA,IACF;AAEA,UAAM,WAAW,SAAS,cAAc,UAAU;AAClD,aAAS,YAAY;AAErB,UAAM,gBAA+B,CAAC;AAEtC,UAAM,KAAK,SAAS,QAAQ,QAAQ,EAAE,QAAQ,CAAC,SAAS;AACtD,YAAM,UAAU,KAAK,QAAQ,YAAY;AAEzC,UAAI,YAAY,WAAW,YAAY,UAAU;AAC/C;AAAA,MACF;AAEA,UAAI,YAAY,SAAS;AACvB,cAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,uBAAe,MAAM,KAAK;AAC1B,cAAM,cAAc,KAAK;AACzB,cAAM,QAAQ,kBAAkB;AAChC,iBAAS,KAAK,YAAY,KAAK;AAC/B,sBAAc,KAAK,KAAK;AACxB;AAAA,MACF;AAEA,YAAM,SAAS,SAAS,cAAc,QAAQ;AAC9C,qBAAe,MAAM,MAAM;AAC3B,aAAO,cAAc,KAAK;AAC1B,aAAO,QAAQ,kBAAkB;AACjC,eAAS,KAAK,YAAY,MAAM;AAChC,oBAAc,KAAK,MAAM;AAAA,IAC3B,CAAC;AAED,WAAO,MAAM;AACX,oBAAc,QAAQ,CAAC,SAAS,KAAK,OAAO,CAAC;AAAA,IAC/C;AAAA,EACF,GAAG,CAAC,YAAY,KAAK,CAAC;AAEtB,SAAO;AACT;","names":[]}
+{"version":3,"sources":["../../../src/components/layouts/WhitelabelCodes.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect } from \"react\";\nimport { useWhitelabel } from \"../../providers/whitelabel.provider\";\n\nfunction copyAttributes(source: Element, target: HTMLElement) {\n  Array.from(source.attributes).forEach((attribute) => {\n    target.setAttribute(attribute.name, attribute.value);\n  });\n}\n\nexport default function WhitelabelCodes() {\n  const { whitelabel } = useWhitelabel();\n\n  useEffect(() => {\n    const codes = whitelabel?.codes;\n    const rawCodes = codes ? codes.trim() : \"\";\n\n    if (!rawCodes) {\n      return;\n    }\n\n    const template = document.createElement(\"template\");\n    template.innerHTML = rawCodes;\n\n    const appendedNodes: HTMLElement[] = [];\n\n    Array.from(template.content.children).forEach((node) => {\n      const tagName = node.tagName.toLowerCase();\n\n      if (tagName !== \"style\" && tagName !== \"script\") {\n        return;\n      }\n\n      if (tagName === \"style\") {\n        const style = document.createElement(\"style\");\n        copyAttributes(node, style);\n        style.textContent = node.textContent;\n        style.dataset.whitelabelCodes = \"true\";\n        document.head.appendChild(style);\n        appendedNodes.push(style);\n        return;\n      }\n\n      const script = document.createElement(\"script\");\n      copyAttributes(node, script);\n      script.textContent = node.textContent;\n      script.dataset.whitelabelCodes = \"true\";\n      document.head.appendChild(script);\n      appendedNodes.push(script);\n    });\n\n    return () => {\n      appendedNodes.forEach((node) => node.remove());\n    };\n  }, [whitelabel?.codes]);\n\n  return null;\n}\n"],"mappings":";AAEA,SAAS,iBAAiB;AAC1B,SAAS,qBAAqB;AAE9B,SAAS,eAAe,QAAiB,QAAqB;AAC5D,QAAM,KAAK,OAAO,UAAU,EAAE,QAAQ,CAAC,cAAc;AACnD,WAAO,aAAa,UAAU,MAAM,UAAU,KAAK;AAAA,EACrD,CAAC;AACH;AAEe,SAAR,kBAAmC;AACxC,QAAM,EAAE,WAAW,IAAI,cAAc;AAErC,YAAU,MAAM;AACd,UAAM,QAAQ,YAAY;AAC1B,UAAM,WAAW,QAAQ,MAAM,KAAK,IAAI;AAExC,QAAI,CAAC,UAAU;AACb;AAAA,IACF;AAEA,UAAM,WAAW,SAAS,cAAc,UAAU;AAClD,aAAS,YAAY;AAErB,UAAM,gBAA+B,CAAC;AAEtC,UAAM,KAAK,SAAS,QAAQ,QAAQ,EAAE,QAAQ,CAAC,SAAS;AACtD,YAAM,UAAU,KAAK,QAAQ,YAAY;AAEzC,UAAI,YAAY,WAAW,YAAY,UAAU;AAC/C;AAAA,MACF;AAEA,UAAI,YAAY,SAAS;AACvB,cAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,uBAAe,MAAM,KAAK;AAC1B,cAAM,cAAc,KAAK;AACzB,cAAM,QAAQ,kBAAkB;AAChC,iBAAS,KAAK,YAAY,KAAK;AAC/B,sBAAc,KAAK,KAAK;AACxB;AAAA,MACF;AAEA,YAAM,SAAS,SAAS,cAAc,QAAQ;AAC9C,qBAAe,MAAM,MAAM;AAC3B,aAAO,cAAc,KAAK;AAC1B,aAAO,QAAQ,kBAAkB;AACjC,eAAS,KAAK,YAAY,MAAM;AAChC,oBAAc,KAAK,MAAM;AAAA,IAC3B,CAAC;AAED,WAAO,MAAM;AACX,oBAAc,QAAQ,CAAC,SAAS,KAAK,OAAO,CAAC;AAAA,IAC/C;AAAA,EACF,GAAG,CAAC,YAAY,KAAK,CAAC;AAEtB,SAAO;AACT;","names":[]}

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

@@ -0,0 +1,133 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../../ui/overlay/Dialog";
+import { Button } from "../../ui/buttons/Button";
+import { Toast } from "../../ui/feedback/Toast";
+import { useModalManager } from "../../../store/useModalManager";
+import { useCreateCard } from "../../../modules/cards/hooks/create-card.hook";
+import { CardFormFields, cardFormSchema } from "./CardFormFields";
+import { IconX } from "@tabler/icons-react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { CardNumberElement, useElements, useStripe } from "@stripe/react-stripe-js";
+import { toast } from "sonner";
+function AddCardModal() {
+  const { activeModal, modalData, closeModal } = useModalManager();
+  const isOpen = activeModal === "addCardModal";
+  const onCardAdded = modalData.onCardAdded;
+  const createCardMutation = useCreateCard();
+  const elements = useElements();
+  const stripe = useStripe();
+  const form = useForm({
+    resolver: zodResolver(cardFormSchema),
+    mode: "onSubmit",
+    reValidateMode: "onChange",
+    defaultValues: {
+      country: "BR"
+    }
+  });
+  const handleClose = useCallback(() => {
+    form.reset();
+    closeModal();
+  }, [form, closeModal]);
+  async function handleSubmit(data) {
+    if (!stripe || !elements) return;
+    const cardElement = elements.getElement(CardNumberElement);
+    if (!cardElement) return;
+    const { error, paymentMethod } = await stripe.createPaymentMethod({
+      type: "card",
+      card: cardElement,
+      billing_details: {
+        name: data.name,
+        address: {
+          country: data.country,
+          postal_code: data.postalCode
+        }
+      }
+    });
+    if (error) {
+      toast.custom(
+        (t) => /* @__PURE__ */ jsx(
+          Toast,
+          {
+            variant: "error",
+            message: "N\xE3o foi poss\xEDvel adicionar o cart\xE3o na Stripe, tente novamente.",
+            toastId: t
+          }
+        ),
+        { duration: 5e3 }
+      );
+      return;
+    }
+    const result = await createCardMutation.mutateAsync(
+      { payment_method_id: paymentMethod.id },
+      {
+        onError: () => {
+          handleClose();
+          toast.custom(
+            (t) => /* @__PURE__ */ jsx(
+              Toast,
+              {
+                variant: "error",
+                message: "N\xE3o foi poss\xEDvel salvar o seu novo cart\xE3o, tente novamente.",
+                toastId: t
+              }
+            ),
+            { duration: 5e3 }
+          );
+        }
+      }
+    );
+    if (result.success && result.data?.id != null) {
+      onCardAdded?.(result.data.id.toString());
+    }
+    toast.custom(
+      (t) => /* @__PURE__ */ jsx(Toast, { variant: "success", message: "Cart\xE3o adicionado com sucesso.", toastId: t }),
+      { duration: 5e3 }
+    );
+    handleClose();
+  }
+  const isSubmitting = createCardMutation.isPending || form.formState.isSubmitting;
+  const isValid = form.formState.isValid;
+  return /* @__PURE__ */ jsx(Dialog, { open: isOpen, onOpenChange: handleClose, children: /* @__PURE__ */ jsxs(
+    DialogContent,
+    {
+      showCloseButton: false,
+      className: "flex flex-col p-0 gap-0 max-w-full sm:max-w-full border-0 rounded-t-2xl rounded-b-none h-dvh top-0 bottom-0 left-0 right-0 translate-x-0 translate-y-0 lg:max-w-[470px] lg:h-auto lg:max-h-[90vh] lg:rounded-lg lg:border lg:top-[50%] lg:left-[50%] lg:right-auto lg:bottom-auto lg:translate-x-[-50%] lg:translate-y-[-50%] overflow-y-auto",
+      children: [
+        /* @__PURE__ */ jsx(DialogHeader, { className: "p-0", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center px-4 py-3 relative border-b border-zinc-200 lg:border-b-0", children: [
+          /* @__PURE__ */ jsx(DialogTitle, { className: "paragraph-medium-semibold text-zinc-950 text-center", children: "Adicionar cart\xE3o" }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "ghost",
+              className: "size-8! p-0 absolute right-4",
+              onClick: handleClose,
+              children: /* @__PURE__ */ jsx(IconX, { size: 18 })
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ jsxs(
+          "form",
+          {
+            onSubmit: form.handleSubmit(handleSubmit),
+            className: "flex flex-col flex-1 lg:flex-none",
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-6 lg:gap-8 p-4 lg:p-5 flex-1 lg:flex-none", children: /* @__PURE__ */ jsx(CardFormFields, { form }) }),
+              /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center p-4 lg:p-5 border-t border-zinc-200 gap-2 mt-auto lg:mt-0", children: [
+                /* @__PURE__ */ jsx(Button, { variant: "secondary", type: "button", onClick: handleClose, className: "h-10!", children: "Cancelar" }),
+                /* @__PURE__ */ jsx(Button, { type: "submit", className: "h-10!", disabled: isSubmitting || !isValid, children: isSubmitting ? "Adicionando cart\xE3o..." : "Adicionar cart\xE3o" })
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  ) });
+}
+export {
+  AddCardModal as default
+};
+//# sourceMappingURL=AddCardModal.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/modals/cards/AddCardModal.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback } from 'react';\nimport { Dialog, DialogContent, DialogHeader, DialogTitle } from '../../ui/overlay/Dialog';\nimport { Button } from '../../ui/buttons/Button';\nimport { Toast } from '../../ui/feedback/Toast';\nimport { useModalManager } from '../../../store/useModalManager';\nimport { useCreateCard } from '../../../modules/cards/hooks/create-card.hook';\nimport { CardFormFields, cardFormSchema } from './CardFormFields';\nimport type { CardFormData } from './CardFormFields';\nimport { IconX } from '@tabler/icons-react';\nimport { useForm } from 'react-hook-form';\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport { CardNumberElement, useElements, useStripe } from '@stripe/react-stripe-js';\nimport { toast } from 'sonner';\n\nexport default function AddCardModal() {\n  const { activeModal, modalData, closeModal } = useModalManager();\n  const isOpen = activeModal === 'addCardModal';\n\n  const onCardAdded = modalData.onCardAdded as ((cardId: string) => void) | undefined;\n\n  const createCardMutation = useCreateCard();\n  const elements = useElements();\n  const stripe = useStripe();\n\n  const form = useForm<CardFormData>({\n    resolver: zodResolver(cardFormSchema),\n    mode: 'onSubmit',\n    reValidateMode: 'onChange',\n    defaultValues: {\n      country: 'BR',\n    },\n  });\n\n  const handleClose = useCallback(() => {\n    form.reset();\n    closeModal();\n  }, [form, closeModal]);\n\n  async function handleSubmit(data: CardFormData) {\n    if (!stripe || !elements) return;\n\n    const cardElement = elements.getElement(CardNumberElement);\n    if (!cardElement) return;\n\n    const { error, paymentMethod } = await stripe.createPaymentMethod({\n      type: 'card',\n      card: cardElement,\n      billing_details: {\n        name: data.name,\n        address: {\n          country: data.country,\n          postal_code: data.postalCode,\n        },\n      },\n    });\n\n    if (error) {\n      toast.custom(\n        (t) => (\n          <Toast\n            variant=\"error\"\n            message=\"Não foi possível adicionar o cartão na Stripe, tente novamente.\"\n            toastId={t}\n          />\n        ),\n        { duration: 5000 }\n      );\n      return;\n    }\n\n    const result = await createCardMutation.mutateAsync(\n      { payment_method_id: paymentMethod.id },\n      {\n        onError: () => {\n          handleClose();\n          toast.custom(\n            (t) => (\n              <Toast\n                variant=\"error\"\n                message=\"Não foi possível salvar o seu novo cartão, tente novamente.\"\n                toastId={t}\n              />\n            ),\n            { duration: 5000 }\n          );\n        },\n      }\n    );\n\n    if (result.success && result.data?.id != null) {\n      onCardAdded?.(result.data.id.toString());\n    }\n\n    toast.custom(\n      (t) => <Toast variant=\"success\" message=\"Cartão adicionado com sucesso.\" toastId={t} />,\n      { duration: 5000 }\n    );\n    handleClose();\n  }\n\n  const isSubmitting = createCardMutation.isPending || form.formState.isSubmitting;\n  const isValid = form.formState.isValid;\n\n  return (\n    <Dialog open={isOpen} onOpenChange={handleClose}>\n      <DialogContent\n        showCloseButton={false}\n        className=\"flex flex-col p-0 gap-0 max-w-full sm:max-w-full border-0 rounded-t-2xl rounded-b-none h-dvh top-0 bottom-0 left-0 right-0 translate-x-0 translate-y-0 lg:max-w-[470px] lg:h-auto lg:max-h-[90vh] lg:rounded-lg lg:border lg:top-[50%] lg:left-[50%] lg:right-auto lg:bottom-auto lg:translate-x-[-50%] lg:translate-y-[-50%] overflow-y-auto\"\n      >\n        <DialogHeader className=\"p-0\">\n          <div className=\"flex items-center justify-center px-4 py-3 relative border-b border-zinc-200 lg:border-b-0\">\n            <DialogTitle className=\"paragraph-medium-semibold text-zinc-950 text-center\">\n              Adicionar cartão\n            </DialogTitle>\n            <Button\n              type=\"button\"\n              variant=\"ghost\"\n              className=\"size-8! p-0 absolute right-4\"\n              onClick={handleClose}\n            >\n              <IconX size={18} />\n            </Button>\n          </div>\n        </DialogHeader>\n\n        <form\n          onSubmit={form.handleSubmit(handleSubmit)}\n          className=\"flex flex-col flex-1 lg:flex-none\"\n        >\n          <div className=\"flex flex-col gap-6 lg:gap-8 p-4 lg:p-5 flex-1 lg:flex-none\">\n            <CardFormFields form={form} />\n          </div>\n\n          <div className=\"flex justify-between items-center p-4 lg:p-5 border-t border-zinc-200 gap-2 mt-auto lg:mt-0\">\n            <Button variant=\"secondary\" type=\"button\" onClick={handleClose} className=\"h-10!\">\n              Cancelar\n            </Button>\n            <Button type=\"submit\" className=\"h-10!\" disabled={isSubmitting || !isValid}>\n              {isSubmitting ? 'Adicionando cartão...' : 'Adicionar cartão'}\n            </Button>\n          </div>\n        </form>\n      </DialogContent>\n    </Dialog>\n  );\n}\n"],"mappings":"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","names":[]}

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

@@ -0,0 +1,134 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+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"
+      }
+    }
+  }
+};
+const cardFormSchema = z.object({
+  name: z.string().min(1, "Nome \xE9 obrigat\xF3rio"),
+  number: z.string().min(1, "N\xFAmero do cart\xE3o \xE9 obrigat\xF3rio"),
+  expiry: z.string().min(1, "Data de validade \xE9 obrigat\xF3ria"),
+  cvv: z.string().min(1, "C\xF3digo de seguran\xE7a \xE9 obrigat\xF3rio"),
+  country: z.string().min(1, "Pa\xEDs \xE9 obrigat\xF3rio"),
+  postalCode: z.string().optional(),
+  cpf: z.string().min(14, "CPF \xE9 obrigat\xF3rio")
+});
+function CardFormFields({ form }) {
+  const {
+    register,
+    watch,
+    setValue,
+    formState: { errors }
+  } = form;
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-5", children: [
+    /* @__PURE__ */ jsx(
+      FormField,
+      {
+        label: "Nome impresso no cart\xE3o",
+        placeholder: "Digite aqui",
+        ...register("name"),
+        error: !!errors.name,
+        errorMessage: errors.name?.message
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+      /* @__PURE__ */ jsx("label", { className: "paragraph-xsmall-semibold text-zinc-600", children: "N\xFAmero do cart\xE3o" }),
+      /* @__PURE__ */ jsx("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", children: /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsx(
+        CardNumberElement,
+        {
+          options: { ...stripeElementOptions, showIcon: true },
+          onChange: (e) => setValue("number", e.complete ? "complete" : "", { shouldValidate: true })
+        }
+      ) }) }),
+      errors.number && /* @__PURE__ */ jsx("p", { className: "paragraph-xsmall-semibold text-red-600", children: errors.number.message })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex gap-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col gap-1.5", children: [
+        /* @__PURE__ */ jsx("label", { className: "paragraph-xsmall-semibold text-zinc-600", children: "Data de validade" }),
+        /* @__PURE__ */ jsx("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", children: /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsx(
+          CardExpiryElement,
+          {
+            options: stripeElementOptions,
+            onChange: (e) => setValue("expiry", e.complete ? "complete" : "", { shouldValidate: true })
+          }
+        ) }) }),
+        errors.expiry && /* @__PURE__ */ jsx("p", { className: "paragraph-xsmall-semibold text-red-600", children: errors.expiry.message })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col gap-1.5", children: [
+        /* @__PURE__ */ jsx("label", { className: "paragraph-xsmall-semibold text-zinc-600", children: "CVC" }),
+        /* @__PURE__ */ jsx("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", children: /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsx(
+          CardCvcElement,
+          {
+            options: stripeElementOptions,
+            onChange: (e) => setValue("cvv", e.complete ? "complete" : "", { shouldValidate: true })
+          }
+        ) }) }),
+        errors.cvv && /* @__PURE__ */ jsx("p", { className: "paragraph-xsmall-semibold text-red-600", children: errors.cvv.message })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex gap-4", children: [
+      /* @__PURE__ */ jsx(
+        SelectField,
+        {
+          label: "Pa\xEDs",
+          placeholder: "Selecione",
+          value: watch("country"),
+          onChange: (value) => setValue("country", value),
+          options: [
+            { value: "BR", label: "Brasil" },
+            { value: "ES", label: "Espanha" },
+            { value: "US", label: "Estados Unidos" }
+          ],
+          containerClassName: "flex-1"
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(
+        FormField,
+        {
+          label: "C\xF3digo postal",
+          optional: true,
+          placeholder: "",
+          ...register("postalCode", {
+            onChange: (e) => {
+              setValue("postalCode", formatPostalCode(e.target.value));
+            }
+          }),
+          error: !!errors.postalCode,
+          errorMessage: errors.postalCode?.message
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsx(
+      FormField,
+      {
+        label: "CPF",
+        placeholder: "___.___.___-__",
+        ...register("cpf", {
+          onChange: (e) => {
+            setValue("cpf", formatCPF(e.target.value));
+          }
+        }),
+        error: !!errors.cpf,
+        errorMessage: errors.cpf?.message
+      }
+    )
+  ] });
+}
+export {
+  CardFormFields,
+  cardFormSchema
+};
+//# sourceMappingURL=CardFormFields.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/modals/cards/CardFormFields.tsx"],"sourcesContent":["'use client';\n\nimport { UseFormReturn } from 'react-hook-form';\nimport { FormField } from '../../ui/form/FormField';\nimport { SelectField } from '../../ui/form/SelectField';\nimport { formatCPF, 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.object({\n  name: z.string().min(1, 'Nome é obrigatório'),\n  number: z.string().min(1, 'Número do cartão é obrigatório'),\n  expiry: z.string().min(1, 'Data de validade é obrigatória'),\n  cvv: z.string().min(1, 'Código de segurança é obrigatório'),\n  country: z.string().min(1, 'País é obrigatório'),\n  postalCode: z.string().optional(),\n  cpf: z.string().min(14, 'CPF é obrigatório'),\n});\n\nexport type CardFormData = z.infer<typeof cardFormSchema>;\n\ntype CardFormFieldsProps = {\n  readonly form: UseFormReturn<CardFormData>;\n};\n\nexport function CardFormFields({ form }: CardFormFieldsProps) {\n  const {\n    register,\n    watch,\n    setValue,\n    formState: { errors },\n  } = form;\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          Número do cartão\n        </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) =>\n                setValue('number', e.complete ? 'complete' : '', { shouldValidate: true })\n              }\n            />\n          </div>\n        </div>\n        {errors.number && (\n          <p className=\"paragraph-xsmall-semibold text-red-600\">{errors.number.message}</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\">\n            Data de validade\n          </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) =>\n                  setValue('expiry', e.complete ? 'complete' : '', { shouldValidate: true })\n                }\n              />\n            </div>\n          </div>\n          {errors.expiry && (\n            <p className=\"paragraph-xsmall-semibold text-red-600\">{errors.expiry.message}</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\">\n            CVC\n          </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) =>\n                  setValue('cvv', e.complete ? 'complete' : '', { shouldValidate: true })\n                }\n              />\n            </div>\n          </div>\n          {errors.cvv && (\n            <p className=\"paragraph-xsmall-semibold text-red-600\">{errors.cvv.message}</p>\n          )}\n        </div>\n      </div>\n\n      <div className=\"flex gap-4\">\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          containerClassName=\"flex-1\"\n        />\n        <div className=\"flex-1\">\n          <FormField\n            label=\"Código postal\"\n            optional\n            placeholder=\"\"\n            {...register('postalCode', {\n              onChange: (e) => {\n                setValue('postalCode', formatPostalCode(e.target.value));\n              },\n            })}\n            error={!!errors.postalCode}\n            errorMessage={errors.postalCode?.message}\n          />\n        </div>\n      </div>\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    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/index.mjs

@@ -31,6 +31,7 @@ import { useHasPlanAddon } from "./modules/plans/hooks/use-has-plan-addon.hook";
 import { useCalculateSubscription } from "./modules/subscriptions/hooks/calculate-subscription.hook";
 import { useUpdateSubscriptionPlan } from "./modules/subscriptions/hooks/update-subscription-plan.hook";
 import { useCards, CARDS_QUERY_KEY } from "./modules/cards/hooks/cards.hook";
+import { useCreateCard } from "./modules/cards/hooks/create-card.hook";
 import { useIaCredits } from "./modules/ia-credits/hooks/ia-credits.hook";
 import {
   SubscriptionSchema,
@@ -38,11 +39,13 @@ import {
 } from "./modules/subscriptions/types/subscription.type";
 import { ADDON_IDS, AI_CREDIT_OPTIONS, AI_CREDIT_VALUES } from "./modules/subscriptions/constants/addons.constants";
 import { PlanSchema, PlanItemSchema } from "./modules/plans/types/plan.type";
-import { CardSchema } from "./modules/cards/types";
+import { CardSchema, CreateCardRequestSchema } from "./modules/cards/types";
 import { buildPlanExtras } from "./modules/subscriptions/utils/build-plan-extras";
 import { getPriceFromCalculatedData, periodicityToBillingPeriod } from "./modules/subscriptions/utils/periodicity";
 import { useBuyCreditsModal } from "./store/useBuyCreditsModal";
 import { default as default2 } from "./components/modals/BuyCreditsModal";
+import { default as default3 } from "./components/modals/cards/AddCardModal";
+import { CardFormFields, cardFormSchema } from "./components/modals/cards/CardFormFields";
 import { Skeleton } from "./components/ui/feedback/Skeleton";
 import { PaymentInfoCard } from "./components/ui/data-display/PaymentInfoCard";
 import { CardBrandIcon } from "./components/ui/data-display/CardBrandIcons";
@@ -66,20 +69,20 @@ import { AppNavBar } from "./components/layouts/AppNavBar";
 import { AppMobileNavBar } from "./components/layouts/AppMobileNavBar";
 import { SideBarNavigation } from "./components/layouts/SideBarNavigation";
 import { MdSideBarNavigation } from "./components/layouts/MdSideBarNavigation";
-import { default as default3 } from "./components/widgets/notifications/NotificationCard";
+import { default as default4 } from "./components/widgets/notifications/NotificationCard";
 import { NotificationsPopover } from "./components/layouts/NotificationsPopover";
 import { NotificationPageContent } from "./components/pages/notifications/Notifications";
 import { UsersSelectorPopover } from "./components/layouts/UsersSelectorPopover";
 import { ProfilePopover } from "./components/layouts/ProfilePopover";
-import { default as default4 } from "./components/layouts/WhitelabelCodes";
+import { default as default5 } from "./components/layouts/WhitelabelCodes";
 import { NavBarItem } from "./components/layouts/NavBarItem";
 import { AppNavigation } from "./components/navigation/AppNavigation";
 import { CancelledSubscriptionBanner } from "./components/navigation/CancelledSubscriptionBanner";
 import { useMobileNavbarSheet } from "./store/useMobileNavbarSheet";
-import { default as default5 } from "./hooks/copy-to-clipboard.hook";
+import { default as default6 } from "./hooks/copy-to-clipboard.hook";
 import { Button, buttonVariants } from "./components/ui/buttons/Button";
 import { CopyButton } from "./components/ui/buttons/CopyButton";
-import { default as default6 } from "./components/ui/buttons/CancelButton";
+import { default as default7 } from "./components/ui/buttons/CancelButton";
 import {
   Accordion,
   AccordionItem,
@@ -124,8 +127,8 @@ import {
   TabsContent
 } from "./components/ui/data-display/Tabs";
 import { UserAvatar } from "./components/ui/data-display/UserAvatar";
-import { default as default7 } from "./components/ui/feedback/CircularProgress";
-import { default as default8 } from "./components/ui/feedback/DefaultCircularProgress";
+import { default as default8 } from "./components/ui/feedback/CircularProgress";
+import { default as default9 } from "./components/ui/feedback/DefaultCircularProgress";
 import { Progress } from "./components/ui/feedback/Progress";
 import { LoadingOverlay } from "./components/ui/feedback/LoadingOverlay";
 import {
@@ -209,9 +212,9 @@ import { CrispEmbed, openCrispHelpdesk, hideCrisp, showCrisp } from "./component
 import { useMdSidebarStore } from "./store/useMdSidebarStore";
 import { useModalManager } from "./store/useModalManager";
 import { AccountSectionType } from "./enums/AccountSectionType";
-import { default as default9 } from "./hooks/usePasswordVisibility";
-import { default as default10 } from "./hooks/useCountdownTimer";
-import { default as default11 } from "./hooks/useIsMobile";
+import { default as default10 } from "./hooks/usePasswordVisibility";
+import { default as default11 } from "./hooks/useCountdownTimer";
+import { default as default12 } from "./hooks/useIsMobile";
 import { useDebounce } from "./hooks/useDebounce";
 import { useDebouncedEffect } from "./hooks/useDebouncedEffect";
 import { useDebounceState } from "./hooks/useDebounceState";
@@ -230,8 +233,8 @@ import { copyToClipboard, readFromClipboard } from "./utils/browser/clipboard";
 import { FormField } from "./components/ui/form/FormField";
 import { SelectField } from "./components/ui/form/SelectField";
 import { ComboboxField } from "./components/ui/form/ComboboxField";
-import { default as default12 } from "./components/ui/form/PhoneInput";
-import { default as default13 } from "./components/ui/form/SwitchOptionFieldWithIcon";
+import { default as default13 } from "./components/ui/form/PhoneInput";
+import { default as default14 } from "./components/ui/form/SwitchOptionFieldWithIcon";
 import { TextAreaField } from "./components/ui/form/TextAreaField";
 import {
   useCurrentAccount,
@@ -244,13 +247,13 @@ import {
   useDeleteAccountUser,
   useDeleteAccount
 } from "./modules/accounts/hooks/useAccountManagement";
-import { default as default14 } from "./components/account/AccountModals";
+import { default as default15 } from "./components/account/AccountModals";
 import { useAccountModals } from "./store/useAccountModals";
 import { ModalManager } from "./components/modals/ModalManager";
 import { Modals } from "./components/modals/Modals";
-import { default as default15 } from "./components/account/TwoFactorAuthModal";
-import { default as default16 } from "./components/account/DisableTwoFactorAuthModal";
-import { default as default17 } from "./components/account/ConfirmGlobalPreferencesModal";
+import { default as default16 } from "./components/account/TwoFactorAuthModal";
+import { default as default17 } from "./components/account/DisableTwoFactorAuthModal";
+import { default as default18 } from "./components/account/ConfirmGlobalPreferencesModal";
 import { MyProfileSection } from "./components/account/sections/MyProfileSection";
 import { PreferencesSection } from "./components/account/sections/PreferencesSection";
 import { SecuritySection } from "./components/account/sections/SecuritySection";
@@ -273,8 +276,9 @@ export {
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
-  default14 as AccountModals,
+  default15 as AccountModals,
   AccountSectionType,
+  default3 as AddCardModal,
   AppMobileNavBar,
   AppNavBar,
   AppNavigation,
@@ -285,7 +289,7 @@ export {
   CURRENCY_OPTIONS,
   Calendar,
   CalendarDayButton,
-  default6 as CancelButton,
+  default7 as CancelButton,
   CancelledSubscriptionBanner,
   Card,
   CardAction,
@@ -293,6 +297,7 @@ export {
   CardContent,
   CardDescription,
   CardFooter,
+  CardFormFields,
   CardHeader,
   CardItem,
   CardTitle,
@@ -300,7 +305,7 @@ export {
   ChangePasswordSection,
   ChangePhoneModal,
   Checkbox,
-  default7 as CircularProgress,
+  default8 as CircularProgress,
   ComboboxField,
   Command,
   CommandDialog,
@@ -311,12 +316,13 @@ export {
   CommandList,
   CommandSeparator,
   CommandShortcut,
-  default17 as ConfirmGlobalPreferencesModal,
+  default18 as ConfirmGlobalPreferencesModal,
   CopyButton,
+  CreateCardRequestSchema,
   CrispEmbed,
   DatePicker,
   DateRangePicker,
-  default8 as DefaultCircularProgress,
+  default9 as DefaultCircularProgress,
   Dialog,
   DialogClose,
   DialogContent,
@@ -327,7 +333,7 @@ export {
   DialogPortal,
   DialogTitle,
   DialogTrigger,
-  default16 as DisableTwoFactorAuthModal,
+  default17 as DisableTwoFactorAuthModal,
   FormField,
   FrillEmbed,
   GENDER_OPTIONS,
@@ -354,7 +360,7 @@ export {
   NOTIFICATION_TYPES,
   NavBar,
   NavBarItem,
-  default3 as NotificationCard,
+  default4 as NotificationCard,
   NotificationPageContent,
   NotificationsPopover,
   Pagination,
@@ -366,7 +372,7 @@ export {
   PaginationPrevious,
   CardSchema as PaymentCardSchema,
   PaymentInfoCard,
-  default12 as PhoneInput,
+  default13 as PhoneInput,
   PlanItemSchema,
   PlanSchema,
   Popover,
@@ -408,7 +414,7 @@ export {
   SubscriptionItemSchema,
   SubscriptionSchema,
   Switch,
-  default13 as SwitchOptionFieldWithIcon,
+  default14 as SwitchOptionFieldWithIcon,
   TIME_FORMAT_OPTIONS,
   Table,
   TableBody,
@@ -429,16 +435,17 @@ export {
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
-  default15 as TwoFactorAuthModal,
+  default16 as TwoFactorAuthModal,
   USER_QUERY_KEY,
   UserAvatar,
   UsersSelectorPopover,
-  default4 as WhitelabelCodes,
+  default5 as WhitelabelCodes,
   badgeVariants,
   buildLocaleOptions,
   buildPlanExtras,
   buildQueryParams,
   buttonVariants,
+  cardFormSchema,
   cn,
   continueChain,
   copyToClipboard,
@@ -465,8 +472,9 @@ export {
   useBuyCreditsModal,
   useCalculateSubscription,
   useCards,
-  default5 as useCopyToClipboard,
-  default10 as useCountdownTimer,
+  default6 as useCopyToClipboard,
+  default11 as useCountdownTimer,
+  useCreateCard,
   useCurrentAccount,
   useDebounce,
   useDebounceState,
@@ -476,13 +484,13 @@ export {
   useHasPlanAddon,
   useIaCredits,
   useInvalidateUser,
-  default11 as useIsMobile,
+  default12 as useIsMobile,
   useListAvailableUsers,
   useListProjectUsers,
   useMdSidebarStore,
   useMobileNavbarSheet,
   useModalManager,
-  default9 as usePasswordVisibility,
+  default10 as usePasswordVisibility,
   usePlanById,
   useSetUserData,
   useSubscriptions,