@hook-sdk/template 0.28.6 → 0.28.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.cjs +208 -178
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.js +208 -178
  4. package/dist/index.js.map +1 -1
  5. package/package.json +1 -1
package/dist/index.cjs CHANGED
@@ -2819,6 +2819,29 @@ function PushPrompt2({ texts, onSubscribed, onDeclined, onInstallRequested, clas
2819
2819
  }
2820
2820
  if (state.kind === "ios_needs_install") {
2821
2821
  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className, role: "region", "aria-label": texts.iosInstallTitle, children: [
2822
+ onDeclined && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
2823
+ "button",
2824
+ {
2825
+ type: "button",
2826
+ onClick: onDeclined,
2827
+ "aria-label": "Fechar",
2828
+ className: "push-prompt-close",
2829
+ style: {
2830
+ position: "absolute",
2831
+ top: 8,
2832
+ right: 8,
2833
+ width: 32,
2834
+ height: 32,
2835
+ border: "none",
2836
+ background: "transparent",
2837
+ fontSize: 20,
2838
+ lineHeight: 1,
2839
+ cursor: "pointer",
2840
+ color: "inherit"
2841
+ },
2842
+ children: "\xD7"
2843
+ }
2844
+ ),
2822
2845
  /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("h3", { children: texts.iosInstallTitle }),
2823
2846
  /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { children: texts.iosInstallBody }),
2824
2847
  onInstallRequested && texts.iosInstallCta && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("button", { onClick: onInstallRequested, children: texts.iosInstallCta })
@@ -4006,17 +4029,17 @@ function CheckoutPageDefault() {
4006
4029
  navigate(result.redirect.replace(/^.*\/app\/[^/]+/, ""));
4007
4030
  return;
4008
4031
  }
4009
- navigate(result.redirect.replace(/^.*\/app\/[^/]+/, "") || "/");
4032
+ navigate("/paywall/pronta");
4010
4033
  }
4011
4034
  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "flex-1 flex flex-col bg-background min-h-0", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("form", { onSubmit, className: "flex-1 flex flex-col min-h-0", children: [
4012
- /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex-1 overflow-y-auto pb-4", children: [
4013
- form.emailTaken ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "px-5 pt-4", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { role: "alert", className: "rounded-2xl bg-destructive/10 p-4 text-sm text-destructive border border-destructive/20", children: [
4035
+ /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex-1 overflow-y-auto px-5 pt-5 pb-6 space-y-6", children: [
4036
+ form.emailTaken ? /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { role: "alert", className: "rounded-2xl bg-destructive/10 p-4 text-sm text-destructive border border-destructive/20", children: [
4014
4037
  "Esse e-mail j\xE1 tem conta nesse app.",
4015
4038
  " ",
4016
4039
  /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("a", { href: form.loginUrl ?? "/signin", className: "underline font-semibold", children: "Entrar agora" })
4017
- ] }) }) : null,
4018
- form.error ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "px-5 pt-4", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { role: "alert", className: "rounded-2xl bg-destructive/10 p-4 text-sm text-destructive border border-destructive/20", children: form.error.message || "N\xE3o foi poss\xEDvel concluir o pagamento. Tente novamente." }) }) : null,
4019
- /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "px-5 pt-4", children: form.method === "card" ? /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "rounded-2xl bg-card border-[1.5px] border-foreground p-3.5", children: [
4040
+ ] }) : null,
4041
+ form.error ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { role: "alert", className: "rounded-2xl bg-destructive/10 p-4 text-sm text-destructive border border-destructive/20", children: form.error.message || "N\xE3o foi poss\xEDvel concluir o pagamento. Tente novamente." }) : null,
4042
+ form.method === "card" ? /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "rounded-2xl bg-card border-[1.5px] border-foreground p-4", children: [
4020
4043
  /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex items-center gap-2 mb-2", children: [
4021
4044
  /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ShieldIcon, { className: "w-4 h-4" }),
4022
4045
  /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "text-sm font-bold", children: "Voc\xEA N\xC3O ser\xE1 cobrada hoje" })
@@ -4035,7 +4058,7 @@ function CheckoutPageDefault() {
4035
4058
  /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(BellIcon, { className: "w-2.5 h-2.5" }),
4036
4059
  "Avisamos por email 2 dias antes da primeira cobran\xE7a"
4037
4060
  ] })
4038
- ] }) : /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "rounded-2xl p-3.5 bg-emerald-50 border-[1.5px] border-emerald-600/60", children: [
4061
+ ] }) : /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "rounded-2xl p-4 bg-emerald-50 border-[1.5px] border-emerald-600/60", children: [
4039
4062
  /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex items-center gap-2 mb-2 text-emerald-900", children: [
4040
4063
  /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ShieldIcon, { className: "w-4 h-4" }),
4041
4064
  /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "text-sm font-bold", children: [
@@ -4053,180 +4076,189 @@ function CheckoutPageDefault() {
4053
4076
  /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("b", { children: "100%" }),
4054
4077
  " sem perguntas \u2014 direto pelo app."
4055
4078
  ] })
4056
- ] }) }),
4057
- /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("section", { className: "px-5 pt-5", children: [
4058
- /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("h2", { className: "font-display text-2xl mb-3.5 leading-tight text-foreground", children: "Quase l\xE1." }),
4059
- /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(FieldLabel, { children: "Email" }),
4060
- /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
4061
- FieldInput,
4062
- {
4063
- type: "email",
4064
- inputMode: "email",
4065
- autoComplete: "email",
4066
- autoCapitalize: "none",
4067
- autoCorrect: "off",
4068
- spellCheck: false,
4069
- placeholder: "seu@email.com",
4070
- value: form.email,
4071
- onChange: form.setEmail,
4072
- onBlur: form.markEmailTouched,
4073
- error: form.emailError,
4074
- valid: form.emailStatus === "available"
4075
- }
4076
- ),
4077
- !form.emailError && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(FieldHint, { children: form.emailStatus === "checking" ? "Verificando\u2026" : form.emailStatus === "available" ? "\u2713 Dispon\xEDvel" : "Voc\xEA vai usar este email para entrar no app" }),
4078
- /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "h-3" }),
4079
- /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(FieldLabel, { children: "Nome completo" }),
4080
- /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
4081
- FieldInput,
4082
- {
4083
- type: "text",
4084
- autoComplete: "name",
4085
- placeholder: "como est\xE1 no documento",
4086
- value: form.name,
4087
- onChange: form.setName,
4088
- onBlur: form.markNameTouched,
4089
- error: form.nameError,
4090
- valid: !!form.name && !form.nameError
4091
- }
4092
- ),
4093
- /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "h-3" }),
4094
- /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(FieldLabel, { children: "CPF" }),
4095
- /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
4096
- FieldInput,
4097
- {
4098
- type: "text",
4099
- inputMode: "numeric",
4100
- placeholder: "000.000.000-00",
4101
- value: form.cpf,
4102
- onChange: (v) => form.setCpf(formatCpf(v)),
4103
- onBlur: form.markCpfTouched,
4104
- error: form.cpfError,
4105
- valid: !!form.cpf && !form.cpfError
4106
- }
4107
- ),
4108
- form.method === "card" ? /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_jsx_runtime48.Fragment, { children: [
4109
- /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "h-3" }),
4110
- /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(FieldLabel, { children: "Telefone" }),
4111
- /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
4112
- FieldInput,
4113
- {
4114
- type: "tel",
4115
- inputMode: "tel",
4116
- autoComplete: "tel",
4117
- placeholder: "(11) 99999-9999",
4118
- value: form.phone,
4119
- onChange: form.setPhone,
4120
- onBlur: form.markPhoneTouched,
4121
- error: form.phoneError,
4122
- valid: !!form.phone && !form.phoneError
4123
- }
4124
- ),
4125
- !form.phoneError && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(FieldHint, { children: "Usado pra confirmar pagamento e tratar disputas." })
4126
- ] }) : null
4127
- ] }),
4128
- /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("section", { className: "px-5 pt-5", children: [
4129
- /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(FieldLabel, { children: "Forma de pagamento" }),
4130
- /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { role: "tablist", className: "flex gap-1.5 bg-muted p-1 rounded-xl", children: [
4131
- /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
4132
- TabButton,
4133
- {
4134
- active: form.method === "card",
4135
- onClick: () => form.setMethod("card"),
4136
- icon: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(CardIcon, { className: "w-3.5 h-3.5" }),
4137
- label: "Cart\xE3o",
4138
- subtitle: trialDays > 0 ? `${trialDays} dias gr\xE1tis` : "pague hoje",
4139
- subtitleActiveClass: "text-emerald-700"
4140
- }
4141
- ),
4142
- /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
4143
- TabButton,
4144
- {
4145
- active: form.method === "pix-auto",
4146
- onClick: () => form.setMethod("pix-auto"),
4147
- icon: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(PixIcon, { className: "w-3.5 h-3.5" }),
4148
- label: "Pix",
4149
- subtitle: `pague hoje \xB7 garantia ${trialDays}d`,
4150
- subtitleActiveClass: "text-foreground/70"
4151
- }
4152
- )
4153
- ] })
4154
4079
  ] }),
4155
- form.method === "card" ? /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("section", { className: "px-5 pt-3.5", children: [
4156
- /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(FieldLabel, { children: "N\xFAmero do cart\xE3o" }),
4157
- /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "relative", children: [
4158
- /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
4159
- FieldInput,
4160
- {
4161
- type: "text",
4162
- inputMode: "numeric",
4163
- autoComplete: "cc-number",
4164
- placeholder: "0000 0000 0000 0000",
4165
- value: form.card.number,
4166
- onChange: (v) => form.setCard({ number: formatCardNumber(v) }),
4167
- style: cardBrand ? { paddingRight: "4.5rem" } : void 0
4168
- }
4169
- ),
4170
- cardBrand && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "absolute right-3 top-1/2 -translate-y-1/2 text-[10px] font-bold tracking-wide px-1.5 py-0.5 rounded bg-muted text-muted-foreground", children: cardBrand })
4171
- ] }),
4172
- /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "h-3" }),
4173
- /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex gap-2.5", children: [
4174
- /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex-1", children: [
4175
- /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(FieldLabel, { children: "Validade" }),
4080
+ /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("section", { children: [
4081
+ /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("h2", { className: "font-display text-2xl mb-4 leading-tight text-foreground", children: "Quase l\xE1." }),
4082
+ /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "space-y-4", children: [
4083
+ /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { children: [
4084
+ /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(FieldLabel, { children: "Email" }),
4085
+ /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
4086
+ FieldInput,
4087
+ {
4088
+ type: "email",
4089
+ inputMode: "email",
4090
+ autoComplete: "email",
4091
+ autoCapitalize: "none",
4092
+ autoCorrect: "off",
4093
+ spellCheck: false,
4094
+ placeholder: "seu@email.com",
4095
+ value: form.email,
4096
+ onChange: form.setEmail,
4097
+ onBlur: form.markEmailTouched,
4098
+ error: form.emailError,
4099
+ valid: form.emailStatus === "available"
4100
+ }
4101
+ ),
4102
+ !form.emailError && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(FieldHint, { children: form.emailStatus === "checking" ? "Verificando\u2026" : form.emailStatus === "available" ? "\u2713 Dispon\xEDvel" : "Voc\xEA vai usar este email para entrar no app" })
4103
+ ] }),
4104
+ /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { children: [
4105
+ /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(FieldLabel, { children: "Nome completo" }),
4176
4106
  /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
4177
4107
  FieldInput,
4178
4108
  {
4179
4109
  type: "text",
4180
- inputMode: "numeric",
4181
- autoComplete: "cc-exp",
4182
- placeholder: "MM/AA",
4183
- value: expiryMmAa,
4184
- onChange: (v) => setExpiryMmAa(formatExpiryMmAa(v))
4110
+ autoComplete: "name",
4111
+ placeholder: "como est\xE1 no documento",
4112
+ value: form.name,
4113
+ onChange: form.setName,
4114
+ onBlur: form.markNameTouched,
4115
+ error: form.nameError,
4116
+ valid: !!form.name && !form.nameError
4185
4117
  }
4186
4118
  )
4187
4119
  ] }),
4188
- /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex-1", children: [
4189
- /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(FieldLabel, { children: "CVV" }),
4120
+ /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { children: [
4121
+ /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(FieldLabel, { children: "CPF" }),
4190
4122
  /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
4191
4123
  FieldInput,
4192
4124
  {
4193
4125
  type: "text",
4194
4126
  inputMode: "numeric",
4195
- autoComplete: "cc-csc",
4196
- placeholder: "3 d\xEDgitos",
4197
- value: form.card.ccv,
4198
- onChange: (v) => form.setCard({ ccv: v.replace(/\D/g, "").slice(0, 4) })
4127
+ placeholder: "000.000.000-00",
4128
+ value: form.cpf,
4129
+ onChange: (v) => form.setCpf(formatCpf(v)),
4130
+ onBlur: form.markCpfTouched,
4131
+ error: form.cpfError,
4132
+ valid: !!form.cpf && !form.cpfError
4133
+ }
4134
+ )
4135
+ ] }),
4136
+ form.method === "card" ? /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { children: [
4137
+ /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(FieldLabel, { children: "Telefone" }),
4138
+ /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
4139
+ FieldInput,
4140
+ {
4141
+ type: "tel",
4142
+ inputMode: "tel",
4143
+ autoComplete: "tel",
4144
+ placeholder: "(11) 99999-9999",
4145
+ value: form.phone,
4146
+ onChange: form.setPhone,
4147
+ onBlur: form.markPhoneTouched,
4148
+ error: form.phoneError,
4149
+ valid: !!form.phone && !form.phoneError
4150
+ }
4151
+ ),
4152
+ !form.phoneError && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(FieldHint, { children: "Usado pra confirmar pagamento e tratar disputas." })
4153
+ ] }) : null
4154
+ ] })
4155
+ ] }),
4156
+ /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("section", { className: "space-y-4", children: [
4157
+ /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { children: [
4158
+ /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(FieldLabel, { children: "Forma de pagamento" }),
4159
+ /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { role: "tablist", className: "flex gap-1.5 bg-muted p-1 rounded-xl", children: [
4160
+ /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
4161
+ TabButton,
4162
+ {
4163
+ active: form.method === "card",
4164
+ onClick: () => form.setMethod("card"),
4165
+ icon: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(CardIcon, { className: "w-3.5 h-3.5" }),
4166
+ label: "Cart\xE3o",
4167
+ subtitle: trialDays > 0 ? `${trialDays} dias gr\xE1tis` : "pague hoje",
4168
+ subtitleActiveClass: "text-emerald-700"
4169
+ }
4170
+ ),
4171
+ /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
4172
+ TabButton,
4173
+ {
4174
+ active: form.method === "pix-auto",
4175
+ onClick: () => form.setMethod("pix-auto"),
4176
+ icon: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(PixIcon, { className: "w-3.5 h-3.5" }),
4177
+ label: "Pix",
4178
+ subtitle: `pague hoje \xB7 garantia ${trialDays}d`,
4179
+ subtitleActiveClass: "text-foreground/70"
4199
4180
  }
4200
4181
  )
4201
4182
  ] })
4202
4183
  ] }),
4203
- /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "h-3" }),
4204
- /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(FieldLabel, { children: "Nome no cart\xE3o" }),
4205
- /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
4206
- FieldInput,
4207
- {
4208
- type: "text",
4209
- autoComplete: "cc-name",
4210
- placeholder: "como est\xE1 no cart\xE3o",
4211
- value: form.card.holderName,
4212
- onChange: (v) => form.setCard({ holderName: v })
4213
- }
4214
- )
4215
- ] }) : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("section", { className: "px-5 pt-3.5", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "rounded-2xl bg-card border border-border p-3.5 flex gap-3.5 items-center", children: [
4216
- /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "w-[72px] h-[72px] rounded-xl shrink-0 border-2 border-foreground relative overflow-hidden bg-muted", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-[22px] h-[22px] bg-background flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(PixIcon, { className: "w-3.5 h-3.5 text-foreground" }) }) }),
4217
- /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex-1", children: [
4218
- /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "text-xs font-bold uppercase tracking-wider text-muted-foreground", children: "pagamento em segundos" }),
4219
- /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "text-sm text-foreground mt-1 leading-snug", children: [
4220
- "Geramos seu ",
4221
- /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("b", { children: "QR Pix" }),
4222
- " no pr\xF3ximo passo. Pague pelo app do banco e seu acesso libera ",
4223
- /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("b", { children: "imediatamente" }),
4224
- "."
4184
+ form.method === "card" ? /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "space-y-4", children: [
4185
+ /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { children: [
4186
+ /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(FieldLabel, { children: "N\xFAmero do cart\xE3o" }),
4187
+ /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "relative", children: [
4188
+ /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
4189
+ FieldInput,
4190
+ {
4191
+ type: "text",
4192
+ inputMode: "numeric",
4193
+ autoComplete: "cc-number",
4194
+ placeholder: "0000 0000 0000 0000",
4195
+ value: form.card.number,
4196
+ onChange: (v) => form.setCard({ number: formatCardNumber(v) }),
4197
+ style: cardBrand ? { paddingRight: "4.5rem" } : void 0
4198
+ }
4199
+ ),
4200
+ cardBrand && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "absolute right-3 top-1/2 -translate-y-1/2 text-[10px] font-bold tracking-wide px-1.5 py-0.5 rounded bg-muted text-muted-foreground", children: cardBrand })
4201
+ ] })
4202
+ ] }),
4203
+ /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex gap-3", children: [
4204
+ /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex-1", children: [
4205
+ /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(FieldLabel, { children: "Validade" }),
4206
+ /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
4207
+ FieldInput,
4208
+ {
4209
+ type: "text",
4210
+ inputMode: "numeric",
4211
+ autoComplete: "cc-exp",
4212
+ placeholder: "MM/AA",
4213
+ value: expiryMmAa,
4214
+ onChange: (v) => setExpiryMmAa(formatExpiryMmAa(v))
4215
+ }
4216
+ )
4217
+ ] }),
4218
+ /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex-1", children: [
4219
+ /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(FieldLabel, { children: "CVV" }),
4220
+ /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
4221
+ FieldInput,
4222
+ {
4223
+ type: "text",
4224
+ inputMode: "numeric",
4225
+ autoComplete: "cc-csc",
4226
+ placeholder: "3 d\xEDgitos",
4227
+ value: form.card.ccv,
4228
+ onChange: (v) => form.setCard({ ccv: v.replace(/\D/g, "").slice(0, 4) })
4229
+ }
4230
+ )
4231
+ ] })
4232
+ ] }),
4233
+ /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { children: [
4234
+ /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(FieldLabel, { children: "Nome no cart\xE3o" }),
4235
+ /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
4236
+ FieldInput,
4237
+ {
4238
+ type: "text",
4239
+ autoComplete: "cc-name",
4240
+ placeholder: "como est\xE1 no cart\xE3o",
4241
+ value: form.card.holderName,
4242
+ onChange: (v) => form.setCard({ holderName: v })
4243
+ }
4244
+ )
4245
+ ] })
4246
+ ] }) : /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "rounded-2xl bg-card border border-border p-4 flex gap-3.5 items-center", children: [
4247
+ /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "w-[72px] h-[72px] rounded-xl shrink-0 border-2 border-foreground relative overflow-hidden bg-muted", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-[22px] h-[22px] bg-background flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(PixIcon, { className: "w-3.5 h-3.5 text-foreground" }) }) }),
4248
+ /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex-1", children: [
4249
+ /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "text-xs font-bold uppercase tracking-wider text-muted-foreground", children: "pagamento em segundos" }),
4250
+ /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "text-sm text-foreground mt-1 leading-snug", children: [
4251
+ "Geramos seu ",
4252
+ /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("b", { children: "QR Pix" }),
4253
+ " no pr\xF3ximo passo. Pague pelo app do banco e seu acesso libera ",
4254
+ /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("b", { children: "imediatamente" }),
4255
+ "."
4256
+ ] })
4225
4257
  ] })
4226
4258
  ] })
4227
- ] }) }),
4228
- /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("section", { className: "px-5 pt-5", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "bg-muted rounded-2xl p-4", children: [
4229
- /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex justify-between mb-2.5", children: [
4259
+ ] }),
4260
+ /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "bg-muted rounded-2xl p-4", children: [
4261
+ /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex justify-between gap-3", children: [
4230
4262
  /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { children: [
4231
4263
  /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "text-sm font-semibold text-foreground", children: annual ? "Plano Anual" : "Plano Mensal" }),
4232
4264
  /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "text-[11px] text-muted-foreground", children: "Coach" })
@@ -4244,23 +4276,21 @@ function CheckoutPageDefault() {
4244
4276
  ] })
4245
4277
  ] }),
4246
4278
  /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "h-px bg-border my-3" }),
4247
- /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex justify-between items-baseline", children: [
4248
- /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { children: [
4249
- /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "text-sm font-bold text-foreground", children: "Voc\xEA paga hoje" }),
4250
- form.method === "card" && trialDays > 0 && /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "text-[11px] text-muted-foreground mt-0.5", children: [
4251
- "cobran\xE7a inicia no dia ",
4252
- trialDays
4253
- ] }),
4254
- form.method === "pix-auto" && /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "text-[11px] text-emerald-700 mt-0.5 font-semibold", children: [
4255
- "reembolso garantido at\xE9 o dia ",
4256
- trialDays
4257
- ] })
4258
- ] }),
4279
+ /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex justify-between items-baseline gap-3", children: [
4280
+ /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "text-sm font-bold text-foreground", children: "Voc\xEA paga hoje" }),
4259
4281
  /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "text-2xl font-bold font-display tracking-tight text-foreground", children: todayAmount })
4282
+ ] }),
4283
+ form.method === "card" && trialDays > 0 && /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "mt-1.5 text-[11px] text-muted-foreground", children: [
4284
+ "cobran\xE7a inicia no dia ",
4285
+ trialDays
4286
+ ] }),
4287
+ form.method === "pix-auto" && /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "mt-1.5 text-[11px] text-emerald-700 font-semibold", children: [
4288
+ "reembolso garantido at\xE9 o dia ",
4289
+ trialDays
4260
4290
  ] })
4261
4291
  ] }) })
4262
4292
  ] }),
4263
- /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(PaywallStickyFooter, { className: "px-5 pt-3.5 pb-5 border-t border-border", children: [
4293
+ /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(PaywallStickyFooter, { className: "px-5 pt-5 pb-6 border-t border-border", children: [
4264
4294
  /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
4265
4295
  "button",
4266
4296
  {
@@ -4280,12 +4310,12 @@ function CheckoutPageDefault() {
4280
4310
  ] })
4281
4311
  }
4282
4312
  ),
4283
- /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "text-center mt-2.5 text-xs text-muted-foreground", children: [
4313
+ /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "text-center mt-3 text-xs text-muted-foreground", children: [
4284
4314
  "Ao continuar, voc\xEA concorda com nossos ",
4285
4315
  /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("u", { children: "Termos" }),
4286
4316
  ". Pagamento seguro Asaas."
4287
4317
  ] }),
4288
- /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "mt-3 flex items-center justify-center gap-3.5 text-[11px] text-muted-foreground", children: [
4318
+ /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "mt-3 flex items-center justify-center gap-4 text-[11px] text-muted-foreground", children: [
4289
4319
  /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("span", { className: "inline-flex items-center gap-1", children: [
4290
4320
  /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(LockIcon, { className: "w-2.5 h-2.5 opacity-60" }),
4291
4321
  " SSL 256-bit"
@@ -4303,7 +4333,7 @@ function CheckoutPageDefault() {
4303
4333
  ] }) });
4304
4334
  }
4305
4335
  function FieldLabel({ children }) {
4306
- return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground mb-1.5", children });
4336
+ return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground mb-2", children });
4307
4337
  }
4308
4338
  function FieldInput(props) {
4309
4339
  const baseClass = "w-full px-4 rounded-xl bg-card text-base text-foreground outline-none border-[1.5px] transition-colors";