@hook-sdk/template 0.4.2 → 0.6.0

package/dist/index.d.cts

@@ -2,7 +2,8 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode, ComponentType, Component } from 'react';
 import { z } from 'zod';
 import * as _hook_sdk_sdk from '@hook-sdk/sdk';
-import { ReminderSlot } from '@hook-sdk/sdk';
+import { PlanState, ReminderSlot } from '@hook-sdk/sdk';
+export { PlanInfo, PlanState } from '@hook-sdk/sdk';
 
 declare const AppConfigSchema: z.ZodObject<{
     $schema: z.ZodOptional<z.ZodString>;
@@ -278,6 +279,7 @@ type SubscriptionStatus = 'active' | 'trialing' | 'expired' | 'canceled' | 'past
 declare function usePaywallState(): {
     status: SubscriptionStatus;
     daysLeftInTrial: number | null;
+    initialLoadComplete: boolean;
     checkout: (args: {
         cpf: string;
         cycle?: "MONTHLY" | "YEARLY";
@@ -287,6 +289,66 @@ declare function usePaywallState(): {
     error: Error | null;
 };
 
+/**
+ * Thin wrapper sobre `useHook().plan`. Existe pra apps importarem "tudo
+ * que precisam" via `@hook-sdk/template` sem mudar de package pra cada
+ * primitive, e pra manter espaço pra evoluir a API (ex: expor campos
+ * derivados como `monthlyEquivalent()`) sem mexer no SDK.
+ *
+ * Retorna o PlanState bruto. Use junto com helpers de `@hook-sdk/template`:
+ *
+ *   const { data, initialLoadComplete } = usePlan();
+ *   if (!initialLoadComplete) return <Skeleton />;
+ *   if (!data) return null;
+ *   return <span>{formatBRL(data.priceCents)}</span>;
+ */
+declare function usePlan(): PlanState;
+
+/**
+ * Helpers de formatação de preço pro Hook.
+ *
+ * Preço vive no banco em CENTAVOS (int), sempre. Apps que renderizam preço
+ * leem do hook `usePlan()` e passam por `formatBRL(cents)` — nunca formatam
+ * inline. Isso evita os dois patterns errados que já vimos em conversões
+ * Lovable→Hook: (a) strings hardcoded "R$ 19,90" no JSX, (b) divisões ad-hoc
+ * por 100 + `toFixed(2)` que ignoram locale.
+ *
+ * Ver G72 em .claude/skills/lovable-to-hook/catalog/known-gotchas.md.
+ */
+/**
+ * Formata centavos como BRL no locale pt-BR. Aceita null pra conveniência
+ * (callers que lidam com `yearlyPriceCents: number | null`).
+ *
+ * Examples:
+ *   formatBRL(1990)    → "R$ 19,90"
+ *   formatBRL(4999)    → "R$ 49,99"
+ *   formatBRL(23988)   → "R$ 239,88"
+ *   formatBRL(0)       → "R$ 0,00"
+ *   formatBRL(null)    → ""
+ */
+declare function formatBRL(cents: number | null | undefined): string;
+/**
+ * Deriva "preço mensal" a partir do preço anual (em centavos). Round half-up
+ * pra evitar R$ 19,899... → R$ 19,89 quando o usuário esperava R$ 19,90.
+ *
+ * Não assume que o creator configurou yearlyPriceCents "redondo": se ele
+ * setou 23988 (= R$ 239,88), 23988/12 = 1999 (= R$ 19,99). Se setou 23880
+ * (= R$ 238,80), 23880/12 = 1990 (= R$ 19,90).
+ *
+ * Example (papomaterno):
+ *   monthlyFromYearly(23988) = 1999 → formatBRL = "R$ 19,99"
+ *   monthlyFromYearly(23880) = 1990 → formatBRL = "R$ 19,90"
+ */
+declare function monthlyFromYearly(yearlyCents: number | null | undefined): number;
+/**
+ * Deriva "preço por dia" (365 dias) a partir do anual, em centavos. Útil
+ * pra copy tipo "apenas R$ 0,66 por dia, menos que um café".
+ *
+ * Example:
+ *   dailyFromYearly(23988) = 66 → formatBRL = "R$ 0,66"
+ */
+declare function dailyFromYearly(yearlyCents: number | null | undefined): number;
+
 /**
  * Escape hatch pra screens FORA do fluxo de auth (ex: settings/trocar-senha).
  * Pra LoginScreen/SignupScreen/ForgotScreen custom, use useLoginForm/useSignupForm/useForgotForm.
@@ -492,4 +554,4 @@ declare function shouldBlockInstall(state: InstallState, now?: number): boolean;
  */
 declare function shouldShowPermanentOption(state: InstallState): boolean;
 
-export { type AndroidBrowser, AppRoot, type AppRootProps, type AuthFormError, type AuthFormErrorCode, type AuthScreen, type AuthScreenProps, DefaultForgotScreen, DefaultLoginScreen, DefaultPaywall, DefaultResetScreen, DefaultSignupScreen, EmptyState, ErrorBoundary, type IOSBrowser, type InAppApp, type InstallActions, InstallGate, InstallSplash, type InstallState, type InstallVariant, LoadingState, type Platform, PushPrompt, type PushPromptProps, type PushPromptTexts, type PushUiState, type SubscriptionStatus, type ToastItem, type UseLoginFormResult, type UseResetFormResult, detectAndroidBrowser, detectIOSBrowser, detectInAppApp, detectPlatform, detectStandalone, shouldBlockInstall, shouldShowPermanentOption, useAuth, useAuthPrimitives, useForgotForm, useInstallPrompt, useLoginForm, usePaywallState, usePush, useReminders, useResetForm, useSignupForm, useSubscription, useToast };
+export { type AndroidBrowser, AppRoot, type AppRootProps, type AuthFormError, type AuthFormErrorCode, type AuthScreen, type AuthScreenProps, DefaultForgotScreen, DefaultLoginScreen, DefaultPaywall, DefaultResetScreen, DefaultSignupScreen, EmptyState, ErrorBoundary, type IOSBrowser, type InAppApp, type InstallActions, InstallGate, InstallSplash, type InstallState, type InstallVariant, LoadingState, type Platform, PushPrompt, type PushPromptProps, type PushPromptTexts, type PushUiState, type SubscriptionStatus, type ToastItem, type UseLoginFormResult, type UseResetFormResult, dailyFromYearly, detectAndroidBrowser, detectIOSBrowser, detectInAppApp, detectPlatform, detectStandalone, formatBRL, monthlyFromYearly, shouldBlockInstall, shouldShowPermanentOption, useAuth, useAuthPrimitives, useForgotForm, useInstallPrompt, useLoginForm, usePaywallState, usePlan, usePush, useReminders, useResetForm, useSignupForm, useSubscription, useToast };

package/dist/index.d.ts

@@ -2,7 +2,8 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode, ComponentType, Component } from 'react';
 import { z } from 'zod';
 import * as _hook_sdk_sdk from '@hook-sdk/sdk';
-import { ReminderSlot } from '@hook-sdk/sdk';
+import { PlanState, ReminderSlot } from '@hook-sdk/sdk';
+export { PlanInfo, PlanState } from '@hook-sdk/sdk';
 
 declare const AppConfigSchema: z.ZodObject<{
     $schema: z.ZodOptional<z.ZodString>;
@@ -278,6 +279,7 @@ type SubscriptionStatus = 'active' | 'trialing' | 'expired' | 'canceled' | 'past
 declare function usePaywallState(): {
     status: SubscriptionStatus;
     daysLeftInTrial: number | null;
+    initialLoadComplete: boolean;
     checkout: (args: {
         cpf: string;
         cycle?: "MONTHLY" | "YEARLY";
@@ -287,6 +289,66 @@ declare function usePaywallState(): {
     error: Error | null;
 };
 
+/**
+ * Thin wrapper sobre `useHook().plan`. Existe pra apps importarem "tudo
+ * que precisam" via `@hook-sdk/template` sem mudar de package pra cada
+ * primitive, e pra manter espaço pra evoluir a API (ex: expor campos
+ * derivados como `monthlyEquivalent()`) sem mexer no SDK.
+ *
+ * Retorna o PlanState bruto. Use junto com helpers de `@hook-sdk/template`:
+ *
+ *   const { data, initialLoadComplete } = usePlan();
+ *   if (!initialLoadComplete) return <Skeleton />;
+ *   if (!data) return null;
+ *   return <span>{formatBRL(data.priceCents)}</span>;
+ */
+declare function usePlan(): PlanState;
+
+/**
+ * Helpers de formatação de preço pro Hook.
+ *
+ * Preço vive no banco em CENTAVOS (int), sempre. Apps que renderizam preço
+ * leem do hook `usePlan()` e passam por `formatBRL(cents)` — nunca formatam
+ * inline. Isso evita os dois patterns errados que já vimos em conversões
+ * Lovable→Hook: (a) strings hardcoded "R$ 19,90" no JSX, (b) divisões ad-hoc
+ * por 100 + `toFixed(2)` que ignoram locale.
+ *
+ * Ver G72 em .claude/skills/lovable-to-hook/catalog/known-gotchas.md.
+ */
+/**
+ * Formata centavos como BRL no locale pt-BR. Aceita null pra conveniência
+ * (callers que lidam com `yearlyPriceCents: number | null`).
+ *
+ * Examples:
+ *   formatBRL(1990)    → "R$ 19,90"
+ *   formatBRL(4999)    → "R$ 49,99"
+ *   formatBRL(23988)   → "R$ 239,88"
+ *   formatBRL(0)       → "R$ 0,00"
+ *   formatBRL(null)    → ""
+ */
+declare function formatBRL(cents: number | null | undefined): string;
+/**
+ * Deriva "preço mensal" a partir do preço anual (em centavos). Round half-up
+ * pra evitar R$ 19,899... → R$ 19,89 quando o usuário esperava R$ 19,90.
+ *
+ * Não assume que o creator configurou yearlyPriceCents "redondo": se ele
+ * setou 23988 (= R$ 239,88), 23988/12 = 1999 (= R$ 19,99). Se setou 23880
+ * (= R$ 238,80), 23880/12 = 1990 (= R$ 19,90).
+ *
+ * Example (papomaterno):
+ *   monthlyFromYearly(23988) = 1999 → formatBRL = "R$ 19,99"
+ *   monthlyFromYearly(23880) = 1990 → formatBRL = "R$ 19,90"
+ */
+declare function monthlyFromYearly(yearlyCents: number | null | undefined): number;
+/**
+ * Deriva "preço por dia" (365 dias) a partir do anual, em centavos. Útil
+ * pra copy tipo "apenas R$ 0,66 por dia, menos que um café".
+ *
+ * Example:
+ *   dailyFromYearly(23988) = 66 → formatBRL = "R$ 0,66"
+ */
+declare function dailyFromYearly(yearlyCents: number | null | undefined): number;
+
 /**
  * Escape hatch pra screens FORA do fluxo de auth (ex: settings/trocar-senha).
  * Pra LoginScreen/SignupScreen/ForgotScreen custom, use useLoginForm/useSignupForm/useForgotForm.
@@ -492,4 +554,4 @@ declare function shouldBlockInstall(state: InstallState, now?: number): boolean;
  */
 declare function shouldShowPermanentOption(state: InstallState): boolean;
 
-export { type AndroidBrowser, AppRoot, type AppRootProps, type AuthFormError, type AuthFormErrorCode, type AuthScreen, type AuthScreenProps, DefaultForgotScreen, DefaultLoginScreen, DefaultPaywall, DefaultResetScreen, DefaultSignupScreen, EmptyState, ErrorBoundary, type IOSBrowser, type InAppApp, type InstallActions, InstallGate, InstallSplash, type InstallState, type InstallVariant, LoadingState, type Platform, PushPrompt, type PushPromptProps, type PushPromptTexts, type PushUiState, type SubscriptionStatus, type ToastItem, type UseLoginFormResult, type UseResetFormResult, detectAndroidBrowser, detectIOSBrowser, detectInAppApp, detectPlatform, detectStandalone, shouldBlockInstall, shouldShowPermanentOption, useAuth, useAuthPrimitives, useForgotForm, useInstallPrompt, useLoginForm, usePaywallState, usePush, useReminders, useResetForm, useSignupForm, useSubscription, useToast };
+export { type AndroidBrowser, AppRoot, type AppRootProps, type AuthFormError, type AuthFormErrorCode, type AuthScreen, type AuthScreenProps, DefaultForgotScreen, DefaultLoginScreen, DefaultPaywall, DefaultResetScreen, DefaultSignupScreen, EmptyState, ErrorBoundary, type IOSBrowser, type InAppApp, type InstallActions, InstallGate, InstallSplash, type InstallState, type InstallVariant, LoadingState, type Platform, PushPrompt, type PushPromptProps, type PushPromptTexts, type PushUiState, type SubscriptionStatus, type ToastItem, type UseLoginFormResult, type UseResetFormResult, dailyFromYearly, detectAndroidBrowser, detectIOSBrowser, detectInAppApp, detectPlatform, detectStandalone, formatBRL, monthlyFromYearly, shouldBlockInstall, shouldShowPermanentOption, useAuth, useAuthPrimitives, useForgotForm, useInstallPrompt, useLoginForm, usePaywallState, usePlan, usePush, useReminders, useResetForm, useSignupForm, useSubscription, useToast };

package/dist/index.js

@@ -100,6 +100,7 @@ function usePaywallState() {
   const [error, setError] = useState2(null);
   const status = subscription.status();
   const daysLeftInTrial = subscription.daysLeftInTrial();
+  const initialLoadComplete = subscription.initialLoadComplete;
   const checkout = useCallback(
     async (args) => {
       setOpening(true);
@@ -125,7 +126,7 @@ function usePaywallState() {
       setError(err);
     }
   }, [subscription]);
-  return { status, daysLeftInTrial, checkout, cancel, opening, error };
+  return { status, daysLeftInTrial, initialLoadComplete, checkout, cancel, opening, error };
 }
 
 // src/internal/SubscriptionGate.tsx
@@ -138,8 +139,9 @@ var BLOCKING = /* @__PURE__ */ new Set([
 ]);
 function SubscriptionGate({ Paywall, children }) {
   const { mode } = useTemplateConfig();
-  const { status } = usePaywallState();
+  const { status, initialLoadComplete } = usePaywallState();
   if (mode === "free") return /* @__PURE__ */ jsx5(Fragment2, { children });
+  if (!initialLoadComplete && status === "none") return null;
   if (BLOCKING.has(status)) return /* @__PURE__ */ jsx5(Paywall, {});
   return /* @__PURE__ */ jsx5(Fragment2, { children });
 }
@@ -2325,12 +2327,37 @@ function EmptyState({ title, description, action }) {
   ] });
 }
 
+// src/hooks/usePlan.ts
+import { useHook as useHook10 } from "@hook-sdk/sdk";
+function usePlan() {
+  const { plan } = useHook10();
+  return plan;
+}
+
+// src/utils/price.ts
+function formatBRL(cents) {
+  if (cents === null || cents === void 0) return "";
+  const reais = cents / 100;
+  return new Intl.NumberFormat("pt-BR", {
+    style: "currency",
+    currency: "BRL"
+  }).format(reais);
+}
+function monthlyFromYearly(yearlyCents) {
+  if (yearlyCents === null || yearlyCents === void 0) return 0;
+  return Math.round(yearlyCents / 12);
+}
+function dailyFromYearly(yearlyCents) {
+  if (yearlyCents === null || yearlyCents === void 0) return 0;
+  return Math.round(yearlyCents / 365);
+}
+
 // src/hooks/useAuthPrimitives.ts
 import { useEffect as useEffect9 } from "react";
-import { useHook as useHook10 } from "@hook-sdk/sdk";
+import { useHook as useHook11 } from "@hook-sdk/sdk";
 var warned = false;
 function useAuthPrimitives() {
-  const { auth } = useHook10();
+  const { auth } = useHook11();
   useEffect9(() => {
     if (!warned && process.env.NODE_ENV !== "production") {
       warned = true;
@@ -2353,9 +2380,9 @@ function useAuthPrimitives() {
 }
 
 // src/hooks/useSubscription.ts
-import { useHook as useHook11 } from "@hook-sdk/sdk";
+import { useHook as useHook12 } from "@hook-sdk/sdk";
 function useSubscription() {
-  const { subscription } = useHook11();
+  const { subscription } = useHook12();
   return {
     status: subscription.status()
   };
@@ -2363,9 +2390,9 @@ function useSubscription() {
 
 // src/hooks/useReminders.ts
 import { useCallback as useCallback9, useEffect as useEffect10, useState as useState13 } from "react";
-import { useHook as useHook12 } from "@hook-sdk/sdk";
+import { useHook as useHook13 } from "@hook-sdk/sdk";
 function useReminders() {
-  const { push } = useHook12();
+  const { push } = useHook13();
   const r = push.reminders;
   const [reminders, setReminders] = useState13([]);
   const [loading, setLoading] = useState13(true);
@@ -2427,11 +2454,14 @@ export {
   InstallSplash,
   LoadingState,
   PushPrompt2 as PushPrompt,
+  dailyFromYearly,
   detectAndroidBrowser,
   detectIOSBrowser,
   detectInAppApp,
   detectPlatform,
   detectStandalone,
+  formatBRL,
+  monthlyFromYearly,
   shouldBlockInstall,
   shouldShowPermanentOption,
   useAuth,
@@ -2440,6 +2470,7 @@ export {
   useInstallPrompt,
   useLoginForm,
   usePaywallState,
+  usePlan,
   usePush,
   useReminders,
   useResetForm,