@hook-sdk/template 0.21.0 → 0.22.1

package/dist/index.cjs

@@ -390,7 +390,7 @@ function usePaywallState() {
   const defaultMethod = (configDefault && methods.includes(configDefault) ? configDefault : null) ?? methods[0] ?? declaredMethods[0] ?? "card";
   const [selectedMethodRaw, setSelectedMethod] = (0, import_react6.useState)(defaultMethod);
   const selectedMethod = methods.includes(selectedMethodRaw) ? selectedMethodRaw : methods[0] ?? selectedMethodRaw;
-  const initialCycle = isFree ? "MONTHLY" : paywall.cycles[0] ?? "MONTHLY";
+  const initialCycle = isFree ? "MONTHLY" : paywall.cycles.includes("YEARLY") ? "YEARLY" : paywall.cycles[0] ?? "MONTHLY";
   const [cycle, setCycle] = (0, import_react6.useState)(initialCycle);
   const cpfRequired = !isFree && paywall.requiresCpf;
   const [cpf, setCpf] = (0, import_react6.useState)("");
@@ -3443,30 +3443,38 @@ function PaywallCyclePicker({
   anchorClassName
 }) {
   if (cycles.length < 2) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { role: "radiogroup", "aria-label": "Ciclo de cobran\xE7a", className, children: cycles.map((c) => {
-    const active = c === selected;
-    const label = c === "YEARLY" ? labels.annualLabel : labels.monthlyLabel;
-    const suffix = c === "YEARLY" ? labels.annualSuffix : labels.monthlySuffix;
-    const mainCents = c === "YEARLY" ? monthlyEquivByCycle[c] : priceCentsByCycle[c];
-    const anchorCents = anchorCentsByCycle[c];
-    return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
-      "button",
-      {
-        type: "button",
-        role: "radio",
-        "aria-checked": active,
-        onClick: () => onSelect(c),
-        className: [cardClassName, active ? cardSelectedClassName : ""].filter(Boolean).join(" "),
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("strong", { children: formatBRL(mainCents) }),
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { children: suffix }),
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { children: label }),
-          anchorCents != null && anchorCents > mainCents ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: anchorClassName, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("s", { children: formatBRL(anchorCents) }) }) : null
-        ]
-      },
-      c
-    );
-  }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    "div",
+    {
+      role: "radiogroup",
+      "aria-label": "Ciclo de cobran\xE7a",
+      className: ["flex flex-row gap-2", className].filter(Boolean).join(" "),
+      children: cycles.map((c) => {
+        const active = c === selected;
+        const label = c === "YEARLY" ? labels.annualLabel : labels.monthlyLabel;
+        const suffix = c === "YEARLY" ? labels.annualSuffix : labels.monthlySuffix;
+        const mainCents = c === "YEARLY" ? monthlyEquivByCycle[c] : priceCentsByCycle[c];
+        const anchorCents = anchorCentsByCycle[c];
+        return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+          "button",
+          {
+            type: "button",
+            role: "radio",
+            "aria-checked": active,
+            onClick: () => onSelect(c),
+            className: ["flex flex-col items-center gap-0.5", cardClassName, active ? cardSelectedClassName : ""].filter(Boolean).join(" "),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "font-bold text-base leading-tight", children: formatBRL(mainCents) }),
+              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-xs opacity-70 leading-tight", children: suffix }),
+              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-xs opacity-60 leading-tight", children: label }),
+              anchorCents != null && anchorCents > mainCents ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: anchorClassName ?? "text-xs opacity-50", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("s", { children: formatBRL(anchorCents) }) }) : null
+            ]
+          },
+          c
+        );
+      })
+    }
+  );
 }
 
 // src/components/paywall/PaywallCta.tsx
@@ -3634,7 +3642,7 @@ function Paywall({
         switchHint,
         trustLine: copy.trustLine,
         onClick: handleCta,
-        disabled: !s.initialLoadComplete,
+        disabled: s.submitting,
         loading: s.submitting,
         buttonClassName: ctaTheme,
         switchHintClassName: themeClasses.switchHint,