@umituz/web-payment 0.0.0-stage → 1.0.0

package/src/presentation/hooks/useCancelSubscription.ts

@@ -0,0 +1,47 @@
+
+import { useCallback, useState } from 'react';
+import type { CancellationReason, CancelResult } from '../../domain/entities/cancellation.entity';
+import { useBilling } from '../context/billing-context';
+
+export interface UseCancelSubscriptionOptions {
+  onError?: (error: Error) => void;
+  onSuccess?: (result: CancelResult) => void;
+}
+
+export interface UseCancelSubscriptionResult {
+  cancel: (reason?: CancellationReason) => Promise<CancelResult | null>;
+  loading: boolean;
+  error: Error | null;
+}
+
+export function useCancelSubscription(
+  options: UseCancelSubscriptionOptions = {},
+): UseCancelSubscriptionResult {
+  const { cancelSubscription } = useBilling();
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  const { onSuccess, onError } = options;
+
+  const cancel = useCallback(
+    async (reason?: CancellationReason): Promise<CancelResult | null> => {
+      setLoading(true);
+      setError(null);
+      try {
+        const result = await cancelSubscription(reason);
+        onSuccess?.(result);
+        return result;
+      } catch (err) {
+        const normalized = err instanceof Error ? err : new Error(String(err));
+        setError(normalized);
+        onError?.(normalized);
+        return null;
+      } finally {
+        setLoading(false);
+      }
+    },
+    [cancelSubscription, onSuccess, onError],
+  );
+
+  return { cancel, loading, error };
+}

package/src/presentation/hooks/useCheckoutButton.ts

@@ -0,0 +1,49 @@
+
+import { useCallback, useState } from 'react';
+import type { CheckoutParams } from '../../domain/entities/checkout.entity';
+import { useBilling } from '../context/billing-context';
+
+export interface UseCheckoutButtonOptions {
+  productId: string;
+  billingCycle?: CheckoutParams['billingCycle'];
+  successUrl?: string;
+  planKey?: string;
+  onError?: (error: Error) => void;
+}
+
+export interface UseCheckoutButtonResult {
+  start: () => Promise<void>;
+  loading: boolean;
+  error: Error | null;
+}
+
+export function useCheckoutButton(
+  options: UseCheckoutButtonOptions,
+): UseCheckoutButtonResult {
+  const { startCheckout } = useBilling();
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  const { productId, billingCycle, successUrl, planKey, onError } = options;
+
+  const start = useCallback(async (): Promise<void> => {
+    setLoading(true);
+    setError(null);
+    try {
+      await startCheckout({
+        productId,
+        billingCycle,
+        successUrl,
+        planKey,
+      });
+    } catch (err) {
+      const normalized = err instanceof Error ? err : new Error(String(err));
+      setError(normalized);
+      onError?.(normalized);
+    } finally {
+      setLoading(false);
+    }
+  }, [startCheckout, productId, billingCycle, successUrl, planKey, onError]);
+
+  return { start, loading, error };
+}

package/src/presentation/hooks/useProducts.ts

@@ -0,0 +1,76 @@
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { getAllProducts } from '../../infrastructure/services/product.repository';
+import type { Product, ProductListParams } from '../../domain/entities/product.entity';
+
+export interface UseProductsOptions {
+  apiToken: string;
+  organizationId?: string;
+  isRecurring?: boolean;
+  enabled?: boolean;
+}
+
+export interface UseProductsResult {
+  products: Product[];
+  loading: boolean;
+  error: Error | null;
+  refetch: () => Promise<void>;
+}
+
+export function useProducts(options: UseProductsOptions): UseProductsResult {
+  const { apiToken, organizationId, isRecurring = true, enabled = true } = options;
+
+  const [products, setProducts] = useState<Product[]>([]);
+  const [loading, setLoading] = useState(enabled);
+  const [error, setError] = useState<Error | null>(null);
+
+  const optionsRef = useRef({ apiToken, organizationId, isRecurring, enabled });
+  optionsRef.current = { apiToken, organizationId, isRecurring, enabled };
+
+  const abortRef = useRef<AbortController | null>(null);
+
+  const fetchProducts = useCallback(async (): Promise<void> => {
+    const { apiToken: token, organizationId: org, isRecurring: recurring, enabled: isEnabled } =
+      optionsRef.current;
+
+    abortRef.current?.abort();
+
+    if (!isEnabled) {
+      setLoading(false);
+      return;
+    }
+
+    const controller = new AbortController();
+    abortRef.current = controller;
+    setLoading(true);
+    setError(null);
+
+    try {
+      const params: ProductListParams = { isRecurring: recurring };
+      if (org) params.organizationId = org;
+
+      const data = await getAllProducts({ apiToken: token }, params, {
+        signal: controller.signal,
+      });
+
+      if (controller.signal.aborted) return;
+      setProducts(data);
+    } catch (err) {
+      if (controller.signal.aborted) return;
+      setError(err instanceof Error ? err : new Error('Failed to fetch products'));
+    } finally {
+      if (!controller.signal.aborted) {
+        setLoading(false);
+      }
+    }
+  }, []);
+
+  useEffect(() => {
+    void fetchProducts();
+    return () => {
+      abortRef.current?.abort();
+    };
+  }, [apiToken, organizationId, isRecurring, enabled, fetchProducts]);
+
+  return { products, loading, error, refetch: fetchProducts };
+}

package/src/presentation/navigation/navigation.strategy.ts

@@ -0,0 +1,16 @@
+
+export interface NavigationStrategy {
+  redirect(url: string): void;
+}
+
+export class WindowNavigationStrategy implements NavigationStrategy {
+  redirect(url: string): void {
+    window.location.href = url;
+  }
+}
+
+export class NoopNavigationStrategy implements NavigationStrategy {
+  redirect(_url: string): void {
+    /* intentionally no-op */
+  }
+}

package/src/presentation/portal/TurnkeyBillingPage.tsx

@@ -0,0 +1,144 @@
+
+import { useEffect, useMemo, useState } from 'react';
+import type { BillingAdapter } from '../../domain/interfaces';
+import type { BillingCycle } from '../../domain/entities';
+import type { Product } from '../../domain/entities';
+import { NoopNavigationStrategy } from '../navigation/navigation.strategy';
+import type { NavigationStrategy } from '../navigation/navigation.strategy';
+import { useBilling } from './hooks';
+import { BillingPage, PlanComparison, PortalButton, PortalSpinner } from './components';
+import { transformProducts } from './utils';
+import type { BillingLabelsOverrides } from './labels';
+import type { BillingConfig, PlanTier } from './types';
+import { createPortalClient } from './create-portal-client';
+
+export interface TurnkeyBillingPageProps {
+  adapter: BillingAdapter;
+  products: Product[];
+  config: Omit<BillingConfig, 'plans'> & { plans?: PlanTier[] };
+  userId?: string;
+  defaultCycle?: BillingCycle;
+  successUrl?: string;
+  navigation?: NavigationStrategy;
+  locale?: string;
+  labels?: BillingLabelsOverrides;
+  onError?: (error: Error) => void;
+}
+
+function browserNavigation(): NavigationStrategy {
+  if (typeof window === 'undefined') return new NoopNavigationStrategy();
+  return {
+    redirect(url: string): void {
+      window.location.href = url;
+    },
+  };
+}
+
+export function TurnkeyBillingPage({
+  adapter,
+  products,
+  config,
+  userId,
+  defaultCycle,
+  successUrl,
+  navigation,
+  locale,
+  labels,
+  onError,
+}: TurnkeyBillingPageProps) {
+  const [cycle, setCycle] = useState<BillingCycle>(defaultCycle ?? 'monthly');
+  const [selecting, setSelecting] = useState(false);
+
+  const client = useMemo(
+    () =>
+      createPortalClient({
+        adapter,
+        products,
+        ...(userId !== undefined ? { userId } : {}),
+        ...(defaultCycle !== undefined ? { defaultCycle } : {}),
+        ...(successUrl !== undefined ? { successUrl } : {}),
+        navigation: navigation ?? browserNavigation(),
+      }),
+    [adapter, products, userId, defaultCycle, successUrl, navigation],
+  );
+
+  const { billing, isLoading, error, loadBilling, cancelSubscription } = useBilling({ apiClient: client });
+
+  useEffect(() => {
+    void loadBilling();
+  }, [loadBilling]);
+
+  const plans = config.plans ?? transformProducts(products);
+
+  const selectPlan = async (productId: string) => {
+    setSelecting(true);
+    try {
+      await client.selectPlan(productId, cycle);
+    } catch (err) {
+      onError?.(err instanceof Error ? err : new Error(String(err)));
+    } finally {
+      setSelecting(false);
+    }
+  };
+
+  const openPortalSafely = async () => {
+    try {
+      await client.openPortal();
+    } catch (err) {
+      onError?.(err instanceof Error ? err : new Error(String(err)));
+    }
+  };
+
+  const viewInvoice = async (invoiceId: string) => {
+    try {
+      await client.getInvoiceUrl(invoiceId);
+    } catch (err) {
+      onError?.(err instanceof Error ? err : new Error(String(err)));
+    }
+  };
+
+  const mergedConfig: BillingConfig = { ...config, plans };
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 24, width: '100%' }}>
+      <PlanComparison
+        plans={plans}
+        selectedPlan={billing?.subscription.plan.id}
+        cycle={cycle}
+        onPlanSelect={(productId) => void selectPlan(productId)}
+        onCycleChange={setCycle}
+        loading={selecting}
+        labels={labels}
+      />
+
+      {billing ? (
+        <BillingPage
+          config={mergedConfig}
+          billing={billing}
+          loading={isLoading}
+          error={error ?? undefined}
+          locale={locale}
+          labels={labels}
+          onAddPaymentMethod={() => void openPortalSafely()}
+          onSetDefaultPaymentMethod={() => void openPortalSafely()}
+          onRemovePaymentMethod={() => void openPortalSafely()}
+          onViewInvoice={(invoice) => void viewInvoice(invoice.id)}
+          onCancelSubscription={() => cancelSubscription().then(() => loadBilling())}
+        />
+      ) : (
+        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12, padding: 32 }}>
+          {isLoading ? (
+            <PortalSpinner />
+          ) : error ? (
+            <>
+              <span>{error}</span>
+              <PortalButton onClick={() => void loadBilling()}>Retry</PortalButton>
+            </>
+          ) : (
+            <PortalSpinner />
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/presentation/portal/components/BillingLayout.tsx

@@ -0,0 +1,163 @@
+
+import { VisualTokens } from '../../theme/visual-tokens';
+import { useBillingLabels, formatLabel } from '../labels';
+import type { BillingLayoutProps } from '../types';
+
+const BRAND_LOGO_SIZE = 32;
+
+const DefaultBrandMark = ({ initial }: { initial: string }) => (
+  <span
+    aria-hidden="true"
+    style={{
+      width: BRAND_LOGO_SIZE,
+      height: BRAND_LOGO_SIZE,
+      borderRadius: VisualTokens.radius.md,
+      background: VisualTokens.color.brandPrimary,
+      color: VisualTokens.color.textOnPrimary,
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      fontWeight: VisualTokens.fontWeight.strong,
+      fontSize: VisualTokens.fontSize.body,
+      flexShrink: 0,
+    }}
+  >
+    {initial}
+  </span>
+);
+
+const container = {
+  maxWidth: 1152,
+  marginLeft: 'auto',
+  marginRight: 'auto',
+  paddingLeft: VisualTokens.spacing.section,
+  paddingRight: VisualTokens.spacing.section,
+} as const;
+
+export const BillingLayout = ({ config, children, onBack }: BillingLayoutProps) => {
+  const labels = useBillingLabels();
+  const dashboardRoute = config.cancelRoute ?? '/dashboard';
+  const contactAria = formatLabel(labels.page.contactAria, { email: config.supportEmail ?? '' });
+
+  const backControl = () =>
+    onBack ? (
+      <button
+        type="button"
+        onClick={onBack}
+        style={{
+          fontSize: VisualTokens.fontSize.body,
+          color: VisualTokens.color.textMuted,
+          background: 'transparent',
+          border: 'none',
+          padding: 0,
+          cursor: 'pointer',
+        }}
+      >
+        {labels.page.backToDashboard}
+      </button>
+    ) : (
+      <a
+        href={dashboardRoute}
+        style={{
+          fontSize: VisualTokens.fontSize.body,
+          color: VisualTokens.color.textMuted,
+          textDecoration: 'none',
+        }}
+      >
+        {labels.page.backToDashboard}
+      </a>
+    );
+
+  return (
+    <div
+      style={{
+        minHeight: '100vh',
+        background: VisualTokens.color.surfaceMuted,
+        display: 'flex',
+        flexDirection: 'column',
+      }}
+    >
+      <header
+        style={{
+          borderBottom: `1px solid ${VisualTokens.color.borderSubtle}`,
+          padding: `${VisualTokens.spacing.xl}px ${VisualTokens.spacing.section}px`,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          background: VisualTokens.color.surfacePrimary,
+        }}
+      >
+        <a
+          href={dashboardRoute}
+          onClick={onBack ? (e) => { e.preventDefault(); onBack(); } : undefined}
+          style={{ display: 'flex', alignItems: 'center', gap: VisualTokens.spacing.sm, textDecoration: 'none' }}
+          aria-label={config.brandName}
+        >
+          {config.logo ?? <DefaultBrandMark initial={config.brandName.charAt(0).toUpperCase() || '?'} />}
+          <span
+            style={{
+              fontWeight: VisualTokens.fontWeight.strong,
+              fontSize: VisualTokens.fontSize.title,
+              color: VisualTokens.color.textPrimary,
+            }}
+          >
+            {config.brandName}
+          </span>
+        </a>
+        {backControl()}
+      </header>
+
+      <main style={{ flex: 1, ...container, paddingTop: 48, paddingBottom: 48, width: '100%', boxSizing: 'border-box' }}>
+        <div style={{ marginBottom: VisualTokens.spacing.page * 1.5 }}>
+          <h1
+            style={{
+              fontSize: 32,
+              fontWeight: VisualTokens.fontWeight.strong,
+              color: VisualTokens.color.textPrimary,
+              margin: 0,
+              marginBottom: VisualTokens.spacing.sm,
+            }}
+          >
+            {labels.page.title}
+          </h1>
+          <p style={{ color: VisualTokens.color.textMuted, margin: 0 }}>
+            {labels.page.description}
+          </p>
+        </div>
+
+        {children}
+      </main>
+
+      {config.supportEmail && (
+        <footer
+          style={{
+            borderTop: `1px solid ${VisualTokens.color.borderSubtle}`,
+            padding: `${VisualTokens.spacing.xl}px ${VisualTokens.spacing.section}px`,
+            background: VisualTokens.color.surfacePrimary,
+          }}
+        >
+          <div style={{ ...container, textAlign: 'center' }}>
+            <p
+              style={{
+                fontSize: VisualTokens.fontSize.body,
+                color: VisualTokens.color.textMuted,
+                margin: 0,
+              }}
+            >
+              {labels.page.needHelp}{' '}
+              <a
+                href={`mailto:${config.supportEmail}`}
+                style={{ color: VisualTokens.color.brandPrimary }}
+                aria-label={contactAria}
+              >
+                {config.supportEmail}
+              </a>
+            </p>
+          </div>
+        </footer>
+      )}
+    </div>
+  );
+};
+
+export default BillingLayout;

package/src/presentation/portal/components/BillingPage.tsx

@@ -0,0 +1,22 @@
+
+import { BillingLayout, BillingPortal } from '.';
+import type { BillingConfig, BillingPageProps } from '../types';
+import { DEFAULT_BILLING_CONFIG } from '../constants';
+import { BillingLabelsProvider } from '../labels';
+
+export const BillingPage = ({ config, labels, ...portalProps }: BillingPageProps) => {
+  const mergedConfig: BillingConfig = {
+    ...DEFAULT_BILLING_CONFIG,
+    ...config,
+  };
+
+  return (
+    <BillingLabelsProvider labels={labels}>
+      <BillingLayout config={mergedConfig}>
+        <BillingPortal showTabs {...portalProps} />
+      </BillingLayout>
+    </BillingLabelsProvider>
+  );
+};
+
+export default BillingPage;