@developer_tribe/react-builder 1.2.27 → 1.2.28

package/src/pages/tabs/SideTool.tsx

@@ -8,80 +8,39 @@ import { Checkbox } from '../../components/Checkbox';
 import { LocalicationModal } from '../../modals/LocalicationModal';
 import { DebugJsonPage } from '../DebugJsonPage';
 
-const screenStyleDefaults = {
-  light: { backgroundColor: '#FDFDFD', color: '#161827' },
-  dark: { backgroundColor: '#12131A', color: '#E9EBF9' },
-} as const;
-
-type ScreenMode = keyof typeof screenStyleDefaults;
-type ScreenColorKey = keyof (typeof screenStyleDefaults)['light'];
-
 type SideToolProps = {
   data: Node;
   setData: React.Dispatch<React.SetStateAction<Node>>;
 };
 
-const colorFields = [
-  {
-    id: 'light-bg',
-    label: 'Light Background Color',
-    mode: 'light' as ScreenMode,
-    key: 'backgroundColor' as ScreenColorKey,
-  },
-  {
-    id: 'light-color',
-    label: 'Light Color',
-    mode: 'light' as ScreenMode,
-    key: 'color' as ScreenColorKey,
-  },
-  {
-    id: 'dark-bg',
-    label: 'Dark Background Color',
-    mode: 'dark' as ScreenMode,
-    key: 'backgroundColor' as ScreenColorKey,
-  },
-  {
-    id: 'dark-color',
-    label: 'Dark Color',
-    mode: 'dark' as ScreenMode,
-    key: 'color' as ScreenColorKey,
-  },
-];
-
 export function SideTool({ data, setData }: SideToolProps) {
   useLogRender('SideTool');
   const [isDebugModalOpen, setIsDebugModalOpen] = useState(false);
   const [isLocalicationModalOpen, setIsLocalicationModalOpen] = useState(false);
   const [isCompactPanelVisible, setIsCompactPanelVisible] = useState(false);
-  const { appConfig, setAppConfig, previewMode, setPreviewMode } =
-    useRenderStore((s) => ({
-      appConfig: s.appConfig,
-      setAppConfig: s.setAppConfig,
-      previewMode: s.previewMode,
-      setPreviewMode: s.setPreviewMode,
-    }));
-
-  const getScreenColorValue = (mode: ScreenMode, key: ScreenColorKey) =>
-    appConfig.screenStyle?.[mode]?.[key] ?? screenStyleDefaults[mode][key];
-
-  const handleScreenStyleChange = (
-    mode: ScreenMode,
-    key: ScreenColorKey,
-    value: string,
-  ) => {
-    setAppConfig({
-      ...appConfig,
-      screenStyle: {
-        ...screenStyleDefaults,
-        ...appConfig.screenStyle,
-        [mode]: {
-          ...screenStyleDefaults[mode],
-          ...appConfig.screenStyle?.[mode],
-          [key]: value,
-        },
-      },
-    });
-  };
+  const {
+    appConfig,
+    setAppConfig,
+    theme,
+    setTheme,
+    defaultLanguage,
+    setDefaultLanguage,
+    previewMode,
+    setPreviewMode,
+    isRtl,
+    setIsRtl,
+  } = useRenderStore((s) => ({
+    appConfig: s.appConfig,
+    setAppConfig: s.setAppConfig,
+    theme: s.theme,
+    setTheme: s.setTheme,
+    defaultLanguage: s.defaultLanguage,
+    setDefaultLanguage: s.setDefaultLanguage,
+    previewMode: s.previewMode,
+    setPreviewMode: s.setPreviewMode,
+    isRtl: s.isRtl,
+    setIsRtl: s.setIsRtl,
+  }));
 
   const handleLocalicationChange = (data: Localication) => {
     setAppConfig({ ...appConfig, localication: data });
@@ -101,10 +60,8 @@ export function SideTool({ data, setData }: SideToolProps) {
       {isCompactPanelVisible && (
         <div className="side-tool">
           <select
-            value={appConfig.defaultLanguage ?? 'en'}
-            onChange={(e) =>
-              setAppConfig({ ...appConfig, defaultLanguage: e.target.value })
-            }
+            value={defaultLanguage}
+            onChange={(e) => setDefaultLanguage(e.target.value)}
           >
             {Object.keys(appConfig.localication ?? {}).map((language) => (
               <option key={language} value={language}>
@@ -115,19 +72,11 @@ export function SideTool({ data, setData }: SideToolProps) {
 
           <Checkbox
             label="Dark Mode"
-            checked={appConfig.theme === 'dark'}
-            onChange={(checked) =>
-              setAppConfig({ ...appConfig, theme: checked ? 'dark' : 'light' })
-            }
+            checked={theme === 'dark'}
+            onChange={(checked) => setTheme(checked ? 'dark' : 'light')}
           />
 
-          <Checkbox
-            label="Is RTL"
-            checked={appConfig.isRtl ?? false}
-            onChange={(checked) =>
-              setAppConfig({ ...appConfig, isRtl: checked })
-            }
-          />
+          <Checkbox label="Is RTL" checked={isRtl} onChange={setIsRtl} />
 
           <Checkbox
             label="Preview mode"
@@ -135,31 +84,6 @@ export function SideTool({ data, setData }: SideToolProps) {
             onChange={setPreviewMode}
           />
 
-          <div>
-            <div
-              style={{
-                display: 'grid',
-                gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
-                gap: 12,
-              }}
-            >
-              {colorFields.map(({ id, label, mode, key }) => (
-                <React.Fragment key={id}>
-                  <div>{label}</div>
-                  <input
-                    id={id}
-                    type="color"
-                    className="input input--color"
-                    value={getScreenColorValue(mode, key)}
-                    onChange={(e) =>
-                      handleScreenStyleChange(mode, key, e.target.value)
-                    }
-                  />
-                </React.Fragment>
-              ))}
-            </div>
-          </div>
-
           <div
             style={{
               marginTop: 'auto',

package/src/paywall/hooks/useCalculateLocalizedPrice.ts

@@ -1,6 +1,11 @@
+import { extractPrice } from '../../product-base';
+
 /**
- * Placeholder hook — will be implemented later.
+ * Extracts a numeric price string from a localized/formatted price.
+ * @param formattedPrice e.g. "$9.99", "€4,99"
+ * @returns Numeric string e.g. "9.99", "4.99"
  */
-export function useCalculateLocalizedPrice(): string {
-  return '';
+export function useCalculateLocalizedPrice(formattedPrice?: string): string {
+  if (!formattedPrice) return '';
+  return extractPrice(formattedPrice);
 }

package/src/paywall/hooks/useDiscountRate.ts

@@ -1,6 +1,14 @@
+import { calculateDiscount } from '../../product-base';
+
 /**
- * Placeholder hook — will be implemented later.
+ * Calculates the discount percentage between a regular and promo price.
+ * @returns Discount as integer (e.g. 50 for 50%), or 0 if not calculable.
  */
-export function useDiscountRate(): number {
-  return 0;
+export function useDiscountRate(
+  regularPrice?: string,
+  promoPrice?: string,
+): number {
+  if (!regularPrice || !promoPrice) return 0;
+  const discount = calculateDiscount(regularPrice, promoPrice);
+  return discount ? parseInt(discount, 10) : 0;
 }

package/src/paywall/types/paywall-types.ts

@@ -1,51 +1,20 @@
 /**
- * Simple paywall-related types.
+ * Paywall-related types.
  *
- * We keep this intentionally small and runtime-agnostic.
+ * Product is now re-exported from product-base (the unified type with all
+ * platform-specific fields). This keeps every consumer compatible while
+ * gaining access to subscriptionOffers, pricingPhases, introductoryPrice, etc.
  *
- * Product fields are based on the common shape returned by `react-native-iap`
- * calls like `getProducts()` / `getSubscriptions()`.
- * See: `https://www.npmjs.com/package/react-native-iap`
+ * See: product-base/types.ts for the full definition.
  */
 
 export type { PaywallBenefits, PaywallBenefitValue } from './benefits';
-
-/**
- * Minimal "product" representation (compatible with `react-native-iap` product-ish objects).
- *
- * Note: `react-native-iap` has slightly different fields per platform/product type.
- * This is the common subset most paywalls need.
- */
-export interface Product {
-  /** iOS: `productId`, Android: `productId` */
-  productId: string;
-
-  /** Display name / title from the store (when available). */
-  title?: string;
-
-  /** Description from the store (when available). */
-  description?: string;
-
-  /**
-   * Localized formatted price (e.g. "$4.99", "€9,99").
-   * In `react-native-iap` this is typically `localizedPrice`.
-   */
-  localizedPrice?: string;
-
-  /**
-   * Raw price string from the store (often numeric string).
-   * In `react-native-iap` this is typically `price`.
-   */
-  price?: string;
-
-  /** Currency code (e.g. "USD", "EUR"). */
-  currency?: string;
-}
+export type { Product } from '../../product-base/types';
 
 /**
  * A simple paywall model you can store/serialize.
  */
 export interface PaywallModel {
-  product: Product[];
+  product: import('../../product-base/types').Product[];
   benefits: import('./benefits').PaywallBenefits;
 }

package/src/product-base/buildPaywallLocalizationParams.ts

@@ -0,0 +1,100 @@
+/**
+ * Pure function that extracts all paywall localization params from a product.
+ *
+ * Platform-agnostic: caller provides `platform` to select iOS vs Android extraction.
+ * Optionally accepts a `localize` function for period text translation.
+ */
+
+import {
+  extractAndroidParams,
+  type AndroidParams,
+} from './extractAndroidParams';
+import { extractIOSParams, type IOSParams } from './extractIOSParams';
+import {
+  getPeriodLocalizationKey,
+  PAYWALL_TEXT_KEYS,
+} from './periodLocalizationKeys';
+import type { Product, ProductParams } from './types';
+
+type PeriodUnit = 'day' | 'week' | 'month' | 'year';
+
+/**
+ * Extracts paywall localization params from a product.
+ *
+ * @param product  - The selected product (iOS or Android shape)
+ * @param platform - 'ios' | 'android' — determines which extractor runs
+ * @param offerId  - Optional offer id (for promo/discount matching)
+ * @param localize - Optional function to translate period keys (falls back to identity)
+ */
+export function buildPaywallLocalizationParams(
+  product: Product,
+  platform: 'ios' | 'android',
+  offerId?: string,
+  localize?: (key: string) => string,
+): ProductParams {
+  const resolve = localize ?? ((k: string) => k);
+
+  const extractedParams: AndroidParams | IOSParams =
+    platform === 'android'
+      ? extractAndroidParams(product, offerId)
+      : extractIOSParams(product, offerId);
+
+  const period = (extractedParams.period || 'month') as PeriodUnit;
+  const hasPromo = !!extractedParams.promoPrice;
+  const hasTrial = extractedParams.hasTrial === 'true';
+
+  const periodKey = getPeriodLocalizationKey(period, false);
+  const promoPeriodKey = hasPromo ? getPeriodLocalizationKey(period, true) : '';
+
+  const localizedPromoPrice = hasPromo
+    ? `${extractedParams.promoPrice} ${extractedParams.currency}`.trim()
+    : '';
+
+  const localizedPeriod = resolve(periodKey);
+  const localizedPromoPeriod = hasPromo ? resolve(promoPeriodKey) : '';
+
+  // Fallback-aware: use promo values when available, otherwise regular
+  const localizedCalculatedPrice =
+    localizedPromoPrice || extractedParams.localizedPrice;
+  const localizedCalculatedPeriod = localizedPromoPeriod || localizedPeriod;
+
+  // Pick the right pricing/promo template based on product state
+  let pricingTextKey: string;
+  let promoTextKey: string;
+  if (hasPromo) {
+    pricingTextKey = PAYWALL_TEXT_KEYS.pricingDefault;
+    promoTextKey = PAYWALL_TEXT_KEYS.promoDefault;
+  } else if (hasTrial) {
+    pricingTextKey = PAYWALL_TEXT_KEYS.pricingFreeTrial;
+    promoTextKey = PAYWALL_TEXT_KEYS.promoFreeTrial;
+  } else {
+    pricingTextKey = PAYWALL_TEXT_KEYS.pricingRegular;
+    promoTextKey = PAYWALL_TEXT_KEYS.promoRegular;
+  }
+
+  return {
+    price: extractedParams.price,
+    promoPrice: extractedParams.promoPrice,
+    currency: extractedParams.currency,
+    localizedPrice: extractedParams.localizedPrice,
+    period: extractedParams.period,
+    promoPeriod: extractedParams.promoPeriod,
+    promoPeriodUnit: extractedParams.promoPeriodUnit,
+    hasTrial: extractedParams.hasTrial,
+    trialPeriod: extractedParams.trialPeriod,
+    trialPeriodUnit: extractedParams.trialPeriodUnit,
+    discountPercentage: extractedParams.discountPercentage,
+    localizedPeriod,
+    localizedPromoPeriod,
+    localizedPromoPrice,
+    localizedCalculatedPrice,
+    localizedCalculatedPeriod,
+    baseLocalizedPricingText: resolve(pricingTextKey),
+    baseLocalizedPromoText: resolve(promoTextKey),
+    productTitle: String(product.title ?? ''),
+    productDescription: String(product.description ?? ''),
+    productCurreny: extractedParams.currency,
+    productId: String(product.productId ?? ''),
+    productSelected: 'true',
+  };
+}

package/src/product-base/calculations.ts

@@ -0,0 +1,93 @@
+/**
+ * Product calculation utilities
+ * Price, discount, period calculations
+ */
+
+/**
+ * Fiyat string'inden sadece sayıları extract eder
+ * @example "$9.99" → "9.99"
+ * @example "€4,99" → "4.99"
+ */
+export function extractPrice(formattedPrice: string): string {
+  if (!formattedPrice) {
+    return '';
+  }
+  return formattedPrice.replace(/[^0-9.]/g, '');
+}
+
+/**
+ * İndirim yüzdesini hesaplar
+ * @returns Discount percentage as string (e.g. "50")
+ */
+export function calculateDiscount(
+  regularPrice: string,
+  promoPrice: string,
+): string {
+  if (!promoPrice || !regularPrice) {
+    return '';
+  }
+
+  const regular = parseFloat(regularPrice);
+  const promo = parseFloat(promoPrice);
+
+  if (isNaN(regular) || isNaN(promo) || regular <= 0) {
+    return '';
+  }
+
+  const discount = Math.round(((regular - promo) / regular) * 100);
+  return String(Math.max(0, discount));
+}
+
+/**
+ * Aylık eşdeğer fiyat hesaplar
+ * @param price - Fiyat (number)
+ * @param unit - Period unit (day/week/month/year)
+ * @returns Monthly price as string (e.g. "3.33")
+ */
+export function calculatePricePerMonth(price: number, unit: string): string {
+  if (isNaN(price)) {
+    return '';
+  }
+
+  if (unit === 'month') {
+    return price.toFixed(2);
+  }
+  if (unit === 'year') {
+    return (price / 12).toFixed(2);
+  }
+  if (unit === 'week') {
+    return ((price * 52) / 12).toFixed(2);
+  }
+  if (unit === 'day') {
+    return ((price * 365) / 12).toFixed(2);
+  }
+
+  return price.toFixed(2);
+}
+
+/**
+ * Yıllık eşdeğer fiyat hesaplar
+ * @param price - Fiyat (number)
+ * @param unit - Period unit (day/week/month/year)
+ * @returns Yearly price as string (e.g. "119.88")
+ */
+export function calculatePricePerYear(price: number, unit: string): string {
+  if (isNaN(price)) {
+    return '';
+  }
+
+  if (unit === 'year') {
+    return price.toFixed(2);
+  }
+  if (unit === 'month') {
+    return (price * 12).toFixed(2);
+  }
+  if (unit === 'week') {
+    return (price * 52).toFixed(2);
+  }
+  if (unit === 'day') {
+    return (price * 365).toFixed(2);
+  }
+
+  return price.toFixed(2);
+}

package/src/product-base/extractAndroidParams.ts

@@ -0,0 +1,207 @@
+import { parseBillingPeriod } from './periodLocalizationKeys';
+import { iapLogger } from '../logger';
+import {
+  extractPrice,
+  calculateDiscount,
+  calculatePricePerMonth,
+  calculatePricePerYear,
+} from './calculations';
+import type { Product, SubscriptionOffer, PricingPhase } from './types';
+
+export interface AndroidParams {
+  price: string;
+  promoPrice: string;
+  currency: string;
+  localizedPrice: string;
+  period: string;
+  periodValue: string;
+  periodType: string;
+  promoPeriod: string;
+  promoCycles: string;
+  promoPeriodUnit: string;
+  hasTrial: string;
+  trialPeriod: string;
+  trialPeriodUnit: string;
+  discountPercentage: string;
+  pricePerMonth: string;
+  pricePerYear: string;
+}
+
+function findOffer(
+  subscriptionOffers: SubscriptionOffer[],
+  offerId: string,
+): SubscriptionOffer | undefined {
+  return subscriptionOffers.find(
+    (offer) => offer.id === offerId || offer.basePlanIdAndroid === offerId,
+  );
+}
+
+/**
+ * Android product'tan params'ları extract eder
+ * pricingPhases'den trial, promo, regular bilgilerini parse eder
+ */
+export function extractAndroidParams(
+  product: Product,
+  offerId?: string,
+): AndroidParams {
+  try {
+    const subscriptionOffers = product.subscriptionOffers ?? [];
+
+    let selectedOffer: SubscriptionOffer | undefined = subscriptionOffers[0];
+
+    if (offerId && subscriptionOffers.length > 0) {
+      const found = findOffer(subscriptionOffers, offerId);
+      if (found) {
+        selectedOffer = found;
+      } else {
+        iapLogger.error(
+          ['extractAndroidParams'],
+          'Requested offer not found, using default',
+          {
+            productId: product.id || product.productId,
+            requestedOfferId: offerId,
+            availableOffers: subscriptionOffers.map((o) => o.id),
+          },
+          { remote: true },
+        );
+      }
+    }
+
+    if (!selectedOffer) {
+      iapLogger.warn(['extractAndroidParams'], 'No offers found in product', {
+        productId: product.id || product.productId,
+      });
+      return getEmptyParams();
+    }
+
+    const pricingPhases =
+      selectedOffer.pricingPhasesAndroid?.pricingPhaseList ?? [];
+
+    if (pricingPhases.length === 0) {
+      iapLogger.warn(['extractAndroidParams'], 'No pricing phases found', {
+        productId: product.id || product.productId,
+        offerId: selectedOffer.id,
+      });
+      return getEmptyParams();
+    }
+
+    // Trial phase: priceAmountMicros === "0"
+    const trialPhase = pricingPhases.find(
+      (p: PricingPhase) => p.priceAmountMicros === '0',
+    );
+
+    // Promo phase: recurrenceMode === 2 (finite) ve ücretli
+    const promoPhase = pricingPhases.find(
+      (p: PricingPhase) =>
+        p.recurrenceMode === 2 && p.priceAmountMicros !== '0',
+    );
+
+    // Regular phase: recurrenceMode === 1 (infinite) veya son phase
+    const regularPhase =
+      pricingPhases.find((p: PricingPhase) => p.recurrenceMode === 1) ??
+      pricingPhases[pricingPhases.length - 1];
+
+    if (!regularPhase) {
+      iapLogger.error(
+        ['extractAndroidParams'],
+        'No regular phase found',
+        {
+          productId: product.id || product.productId,
+          pricingPhasesCount: pricingPhases.length,
+        },
+        { remote: true },
+      );
+      return getEmptyParams();
+    }
+
+    const regularPeriod = parseBillingPeriod(regularPhase.billingPeriod);
+    const periodType = `${regularPeriod.value} ${regularPeriod.unit}${regularPeriod.value > 1 ? 's' : ''}`;
+
+    const price = extractPrice(regularPhase.formattedPrice);
+    const currency = regularPhase.priceCurrencyCode || '';
+    const localizedPrice = regularPhase.formattedPrice || '';
+
+    let promoPrice = '';
+    let promoPeriod = '';
+    let promoCycles = '';
+    let promoPeriodUnit = '';
+
+    if (promoPhase) {
+      promoPrice = extractPrice(promoPhase.formattedPrice);
+      const cycles = promoPhase.billingCycleCount || 0;
+      const period = parseBillingPeriod(promoPhase.billingPeriod);
+      const totalValue = cycles * period.value;
+      promoPeriod = `${totalValue} ${period.unit}${totalValue > 1 ? 's' : ''}`;
+      promoCycles = String(cycles);
+      promoPeriodUnit = period.unit;
+    }
+
+    let hasTrial = 'false';
+    let trialPeriod = '';
+    let trialPeriodUnit = '';
+
+    if (trialPhase) {
+      hasTrial = 'true';
+      const period = parseBillingPeriod(trialPhase.billingPeriod);
+      trialPeriod = String(period.value);
+      trialPeriodUnit = period.unit;
+    }
+
+    const discountPercentage = calculateDiscount(price, promoPrice);
+    const priceNum = parseFloat(price);
+    const pricePerMonth = calculatePricePerMonth(priceNum, regularPeriod.unit);
+    const pricePerYear = calculatePricePerYear(priceNum, regularPeriod.unit);
+
+    return {
+      price,
+      promoPrice,
+      currency,
+      localizedPrice,
+      period: regularPeriod.unit,
+      periodValue: String(regularPeriod.value),
+      periodType,
+      promoPeriod,
+      promoCycles,
+      promoPeriodUnit,
+      hasTrial,
+      trialPeriod,
+      trialPeriodUnit,
+      discountPercentage,
+      pricePerMonth,
+      pricePerYear,
+    };
+  } catch (error) {
+    iapLogger.error(
+      ['extractAndroidParams'],
+      'Failed to extract Android params',
+      {
+        productId: product?.id || product?.productId,
+        error: error instanceof Error ? error.message : String(error),
+      },
+      { remote: true },
+    );
+    return getEmptyParams();
+  }
+}
+
+/** Boş params döner (fallback) */
+function getEmptyParams(): AndroidParams {
+  return {
+    price: '',
+    promoPrice: '',
+    currency: '',
+    localizedPrice: '',
+    period: 'month',
+    periodValue: '1',
+    periodType: '1 month',
+    promoPeriod: '',
+    promoCycles: '',
+    promoPeriodUnit: '',
+    hasTrial: 'false',
+    trialPeriod: '',
+    trialPeriodUnit: '',
+    discountPercentage: '',
+    pricePerMonth: '',
+    pricePerYear: '',
+  };
+}