@developer_tribe/react-builder 1.2.44 → 1.2.46

package/src/modals/CreateDeviceModal.tsx

@@ -0,0 +1,264 @@
+import React from 'react';
+import { useForm } from 'react-hook-form';
+import Modal from './Modal';
+import { Device } from '../types/Device';
+import { useCustomDeviceStore } from '../store/customDeviceStore';
+
+type CreateDeviceModalProps = {
+  onClose: () => void;
+  onSuccess: (device: Device) => void;
+  deviceToEdit?: Device;
+};
+
+type FormData = {
+  name: string;
+  platform: 'ios' | 'android';
+  width: number;
+  height: number;
+  type: 'phone' | 'tablet';
+  radius: number;
+  insetTop: number;
+  insetRight: number;
+  insetBottom: number;
+  insetLeft: number;
+  navigationBarType: Device['navigationBarType'];
+  importance: number;
+  multiplier: number;
+};
+
+export function CreateDeviceModal({
+  onClose,
+  onSuccess,
+  deviceToEdit,
+}: CreateDeviceModalProps) {
+  const { addCustomDevice, updateCustomDevice } = useCustomDeviceStore();
+  const {
+    register,
+    handleSubmit,
+    watch,
+    formState: { errors },
+  } = useForm<FormData>({
+    defaultValues: deviceToEdit
+      ? {
+          name: deviceToEdit.name,
+          platform: deviceToEdit.platform as 'ios' | 'android',
+          type: deviceToEdit.type,
+          width: deviceToEdit.width,
+          height: deviceToEdit.height,
+          insetTop: deviceToEdit.insets?.[0] ?? 0,
+          insetRight: deviceToEdit.insets?.[1] ?? 0,
+          insetBottom: deviceToEdit.insets?.[2] ?? 0,
+          insetLeft: deviceToEdit.insets?.[3] ?? 0,
+          navigationBarType: deviceToEdit.navigationBarType,
+          radius: deviceToEdit.radius,
+          importance: deviceToEdit.importance,
+          multiplier: deviceToEdit.multiplier,
+        }
+      : {
+          platform: 'ios',
+          type: 'phone',
+          navigationBarType: 'homeIndicator',
+          width: 375,
+          height: 812,
+          insetTop: 44,
+          insetBottom: 34,
+          insetLeft: 0,
+          insetRight: 0,
+          radius: 40,
+          importance: 10,
+          multiplier: 1,
+        },
+  });
+
+  const platform = watch('platform');
+
+  const onSubmit = (data: FormData) => {
+    const newDevice: Device = {
+      name: data.name,
+      platform: data.platform,
+      width: Number(data.width),
+      height: Number(data.height),
+      type: data.type,
+      radius: Number(data.radius),
+      insets: [
+        Number(data.insetTop),
+        Number(data.insetRight),
+        Number(data.insetBottom),
+        Number(data.insetLeft),
+      ],
+      navigationBarType: data.navigationBarType,
+      aspect: (() => {
+        const r = Number(data.height) / Number(data.width);
+        if (r >= 2.05) return 'tall';
+        if (r <= 1.75) return 'wide';
+        return 'regular';
+      })(),
+      importance: Number(data.importance),
+      multiplier: Number(data.multiplier),
+    };
+
+    if (deviceToEdit) {
+      updateCustomDevice(deviceToEdit.name, newDevice);
+    } else {
+      addCustomDevice(newDevice);
+    }
+    onSuccess(newDevice);
+    onClose();
+  };
+
+  return (
+    <Modal
+      onClose={onClose}
+      ariaLabelledBy="create-device-title"
+      contentClassName="create-device-modal"
+    >
+      <div className="modal__header">
+        <h3 id="create-device-title" className="modal__title">
+          {deviceToEdit ? 'Edit Custom Device' : 'Create Custom Device'}
+        </h3>
+        <button type="button" className="editor-button" onClick={onClose}>
+          Cancel
+        </button>
+      </div>
+      <form
+        onSubmit={handleSubmit(onSubmit)}
+        className="modal__body create-device-form"
+      >
+        <div className="create-device-form__group">
+          <label className="create-device-form__label">Device Name</label>
+          <input
+            {...register('name', { required: 'Name is required' })}
+            className="editor-input"
+            placeholder="e.g. My Custom iPhone"
+          />
+          {errors.name && (
+            <span className="create-device-form__error">
+              {errors.name.message}
+            </span>
+          )}
+        </div>
+
+        <div className="create-device-form__row">
+          <div className="create-device-form__group">
+            <label className="create-device-form__label">Platform</label>
+            <select {...register('platform')} className="editor-input">
+              <option value="ios">iOS</option>
+              <option value="android">Android</option>
+            </select>
+          </div>
+          <div className="create-device-form__group">
+            <label className="create-device-form__label">Type</label>
+            <select {...register('type')} className="editor-input">
+              <option value="phone">Phone</option>
+              <option value="tablet">Tablet</option>
+            </select>
+          </div>
+        </div>
+
+        <div className="create-device-form__row">
+          <div className="create-device-form__group">
+            <label className="create-device-form__label">Width (px)</label>
+            <input
+              type="number"
+              {...register('width', { required: true, min: 1 })}
+              className="editor-input"
+            />
+          </div>
+          <div className="create-device-form__group">
+            <label className="create-device-form__label">Height (px)</label>
+            <input
+              type="number"
+              {...register('height', { required: true, min: 1 })}
+              className="editor-input"
+            />
+          </div>
+        </div>
+
+        <div className="create-device-form__row">
+          <div className="create-device-form__group">
+            <label className="create-device-form__label">Safe Area Top</label>
+            <input
+              type="number"
+              {...register('insetTop', { min: 0 })}
+              className="editor-input"
+            />
+          </div>
+          <div className="create-device-form__group">
+            <label className="create-device-form__label">
+              Safe Area Bottom
+            </label>
+            <input
+              type="number"
+              {...register('insetBottom', { min: 0 })}
+              className="editor-input"
+            />
+          </div>
+        </div>
+
+        <div className="create-device-form__row">
+          <div className="create-device-form__group">
+            <label className="create-device-form__label">Navigation Bar</label>
+            <select {...register('navigationBarType')} className="editor-input">
+              <option value="none">None</option>
+              {platform === 'ios' ? (
+                <>
+                  <option value="homeIndicator">Home Indicator</option>
+                  <option value="tabBar">Tab Bar</option>
+                </>
+              ) : (
+                <>
+                  <option value="threeButtons">Three Buttons</option>
+                  <option value="gesture">Gesture</option>
+                </>
+              )}
+            </select>
+          </div>
+          <div className="create-device-form__group">
+            <label className="create-device-form__label">Corner Radius</label>
+            <input
+              type="number"
+              {...register('radius', { min: 0 })}
+              className="editor-input"
+            />
+          </div>
+        </div>
+
+        <div className="create-device-form__row">
+          <div className="create-device-form__group">
+            <label className="create-device-form__label">
+              Scale Multiplier
+            </label>
+            <input
+              type="number"
+              step="0.01"
+              {...register('multiplier', { min: 0.1, max: 2 })}
+              className="editor-input"
+            />
+          </div>
+          <div className="create-device-form__group">
+            <label className="create-device-form__label">
+              Importance (1-100)
+            </label>
+            <input
+              type="number"
+              {...register('importance', { min: 1, max: 100 })}
+              className="editor-input"
+            />
+          </div>
+        </div>
+
+        <div className="create-device-modal__footer">
+          <button
+            type="submit"
+            className="editor-button editor-button--primary"
+            style={{ width: '100%' }}
+          >
+            {deviceToEdit ? 'Update Device' : 'Save Device'}
+          </button>
+        </div>
+      </form>
+    </Modal>
+  );
+}
+
+export default CreateDeviceModal;

package/src/modals/DeviceSelectorModal.tsx

@@ -3,6 +3,8 @@ import { Device } from '../types/Device';
 import Modal from './Modal';
 import { DeviceButton } from '../components/DeviceButton';
 import { useRenderStore } from '../store';
+import { useCustomDeviceStore } from '../store/customDeviceStore';
+import { CreateDeviceModal } from './CreateDeviceModal';
 
 type DeviceSelectorModalProps = {
   devices: Device[];
@@ -18,10 +20,17 @@ export function DeviceSelectorModal({
   onClose,
 }: DeviceSelectorModalProps) {
   const [searchTerm, setSearchTerm] = useState('');
+  const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
+  const [editingDevice, setEditingDevice] = useState<Device | null>(null);
   const { favoriteDevices, toggleFavoriteDevice } = useRenderStore((state) => ({
     favoriteDevices: state.favoriteDevices || [],
     toggleFavoriteDevice: state.toggleFavoriteDevice,
   }));
+  const { customDevices, removeCustomDevice } = useCustomDeviceStore();
+
+  const allDevices = useMemo(() => {
+    return [...customDevices, ...devices];
+  }, [customDevices, devices]);
 
   const handleDeviceSelect = (device: Device) => {
     onSelect(device);
@@ -29,10 +38,10 @@ export function DeviceSelectorModal({
   };
 
   const filteredDevices = useMemo(() => {
-    return devices.filter((device) =>
+    return allDevices.filter((device) =>
       device.name.toLowerCase().includes(searchTerm.toLowerCase()),
     );
-  }, [devices, searchTerm]);
+  }, [allDevices, searchTerm]);
 
   const { favorites, others } = useMemo(() => {
     const favs: Device[] = [];
@@ -66,18 +75,21 @@ export function DeviceSelectorModal({
           Close
         </button>
       </div>
-      <div
-        className="device-selector-modal__search"
-        style={{ padding: '0 16px', marginBottom: '8px' }}
-      >
+      <div className="device-selector-modal__search-container">
         <input
           type="text"
           placeholder="Search devices..."
           value={searchTerm}
           onChange={(e) => setSearchTerm(e.target.value)}
           className="editor-input"
-          style={{ width: '100%', padding: '8px', boxSizing: 'border-box' }}
         />
+        <button
+          type="button"
+          className="editor-button editor-button--primary"
+          onClick={() => setIsCreateModalOpen(true)}
+        >
+          Add New
+        </button>
       </div>
       <div
         className="device-selector-modal__body"
@@ -103,6 +115,7 @@ export function DeviceSelectorModal({
                   onSelect={handleDeviceSelect}
                   isFavorite={true}
                   onToggleFavorite={(d) => toggleFavoriteDevice(d.name)}
+                  onEdit={(d) => setEditingDevice(d)}
                 />
               ))}
             </div>
@@ -129,11 +142,35 @@ export function DeviceSelectorModal({
                 onSelect={handleDeviceSelect}
                 isFavorite={false}
                 onToggleFavorite={(d) => toggleFavoriteDevice(d.name)}
+                onEdit={
+                  customDevices.some((cd) => cd.name === device.name)
+                    ? (d) => setEditingDevice(d)
+                    : undefined
+                }
               />
             ))}
           </div>
         </section>
       </div>
+      {isCreateModalOpen && (
+        <CreateDeviceModal
+          onClose={() => setIsCreateModalOpen(false)}
+          onSuccess={(newDevice) => {
+            onSelect(newDevice);
+            onClose();
+          }}
+        />
+      )}
+      {editingDevice && (
+        <CreateDeviceModal
+          deviceToEdit={editingDevice}
+          onClose={() => setEditingDevice(null)}
+          onSuccess={(updatedDevice) => {
+            onSelect(updatedDevice);
+            onClose();
+          }}
+        />
+      )}
     </Modal>
   );
 }

package/src/product-base/calculations.ts

@@ -12,7 +12,36 @@ export function extractPrice(formattedPrice: string): string {
   if (!formattedPrice) {
     return '';
   }
-  return formattedPrice.replace(/[^0-9.]/g, '');
+  // Remove currency symbols and other non-numeric chars except dot/comma
+  const cleaned = formattedPrice.replace(/[^0-9.,]/g, '');
+
+  // If there's both a dot and a comma, comma is likely decimal (e.g. 1.999,99)
+  // If there's multiple dots, dots are likely thousands and comma is decimal (e.g. 1.999,99)
+  // If there's only a comma, it's decimal (e.g. 149,99)
+
+  let numeric: string;
+  if (cleaned.includes(',') && cleaned.includes('.')) {
+    // Mixed: 1.234,56 -> 1234.56
+    numeric = cleaned.replace(/\./g, '').replace(',', '.');
+  } else if (cleaned.includes(',')) {
+    // Only comma: 149,99 -> 149.99
+    numeric = cleaned.replace(',', '.');
+  } else {
+    // Only dots or none: 1,999.99 (impossible with logic above but for safety) or 9.99
+    // If multiple dots, they are thousand separators
+    const dots = (cleaned.match(/\./g) || []).length;
+    if (dots > 1) {
+      numeric = cleaned.replace(/\./g, '');
+    } else {
+      numeric = cleaned;
+    }
+  }
+
+  const parsed = parseFloat(numeric);
+  if (isNaN(parsed)) return '';
+
+  // Round to 2 decimal places to avoid precision issues like 1999.9900000000002
+  return String(Math.round(parsed * 100) / 100);
 }
 
 /**

package/src/product-base/extractAndroidParams.ts

@@ -195,9 +195,8 @@ export function extractAndroidParams(
 
 /** Boş params ama mock product price'ları ile birleştirilmiş (fallback) */
 function getFallbackParams(product: Product): AndroidParams {
-  const price = String(product.price || product.localizedPrice || '').replace(
-    /[^0-9.]/g,
-    '',
+  const price = extractPrice(
+    String(product.price || product.localizedPrice || ''),
   );
   return {
     ...getEmptyParams(),

package/src/product-base/extractIOSParams.ts

@@ -1,6 +1,10 @@
-import { convertIOSPeriodUnit } from './periodLocalizationKeys';
+import {
+  convertIOSPeriodUnit,
+  normalizeIOSPeriod,
+} from './periodLocalizationKeys';
 import { iapLogger } from '../logger';
 import {
+  extractPrice,
   calculateDiscount,
   calculatePricePerMonth,
   calculatePricePerYear,
@@ -53,17 +57,19 @@ export function extractIOSParams(
   offerId?: string,
 ): IOSParams {
   try {
-    const price = String(product.price || product.localizedPrice || '').replace(
-      /[^0-9.]/g,
-      '',
+    const price = extractPrice(
+      String(product.price || product.localizedPrice || ''),
     );
     const currency = product.currency || product.currencyCode || '';
     const localizedPrice = product.localizedPrice || '';
 
-    const periodUnit = convertIOSPeriodUnit(
-      product.subscriptionPeriodUnitIOS || 'MONTH',
+    // iOS bazen WEEK yerine DAY+7 döndürür — normalize et
+    const normalizedPeriod = normalizeIOSPeriod(
+      product.subscriptionPeriodUnitIOS,
+      product.subscriptionPeriodNumberIOS,
     );
-    const periodValue = String(product.subscriptionPeriodNumberIOS || 1);
+    const periodUnit = normalizedPeriod.unit;
+    const periodValue = String(normalizedPeriod.value);
     const periodType = `${periodValue} ${periodUnit}${parseInt(periodValue, 10) > 1 ? 's' : ''}`;
 
     const introPrice =
@@ -114,7 +120,7 @@ export function extractIOSParams(
       );
 
       if (discount) {
-        promoPrice = String(discount.price || '').replace(/[^0-9.]/g, '');
+        promoPrice = extractPrice(String(discount.price || ''));
         const cycles = discount.numberOfPeriods || 1;
         const unit = convertIOSPeriodUnit(
           discount.subscriptionPeriod || 'MONTH',

package/src/product-base/mockProducts.json

@@ -485,5 +485,107 @@
       "subscriptionPeriodUnitIOS": "YEAR",
       "subscriptionPeriodNumberIOS": 1
     }
+  ],
+  "vpn-pro": [
+    {
+      "productId": "com.vpn111.pro.weekly",
+      "title": "Pro Subscription (Weekly)",
+      "description": "Pro Subscription (Weekly)",
+      "localizedPrice": "₺179,99",
+      "price": "179.99",
+      "currency": "TRY",
+      "type": "subs",
+      "subscriptionOffers": [],
+      "discounts": [],
+      "subscriptionPeriodNumberIOS": 7,
+      "subscriptionPeriodUnitIOS": "DAY",
+      "isConsumable": false
+    },
+    {
+      "productId": "com.vpn111.pro.monthly",
+      "title": "Pro Subscription (Monthly)",
+      "description": "Pro Subscription (Monthly)",
+      "localizedPrice": "₺399,99",
+      "price": "399.99",
+      "currency": "TRY",
+      "type": "subs",
+      "subscriptionOffers": [],
+      "discounts": [],
+      "subscriptionPeriodNumberIOS": 1,
+      "subscriptionPeriodUnitIOS": "MONTH",
+      "isConsumable": false
+    },
+    {
+      "productId": "com.vpn111.pro.annual",
+      "title": "Pro Subscription (Annual)",
+      "description": "Pro Subscription (Annual)",
+      "localizedPrice": "₺1.999,99",
+      "price": "1999.99",
+      "currency": "TRY",
+      "type": "subs",
+      "subscriptionOffers": [
+        {
+          "numberOfPeriodsIOS": 1,
+          "paymentMode": "pay-up-front",
+          "type": "promotional",
+          "period": { "value": 1, "unit": "year" },
+          "id": "one.year.discount.annual.offer",
+          "price": 999.99,
+          "periodCount": 1,
+          "displayPrice": "₺999,99",
+          "localizedPriceIOS": "₺999,99",
+          "offerId": "one.year.discount.annual.offer",
+          "localizedPrice": "₺999,99"
+        },
+        {
+          "numberOfPeriodsIOS": 1,
+          "localizedPriceIOS": "₺149,99",
+          "displayPrice": "₺149,99",
+          "period": { "value": 1, "unit": "month" },
+          "periodCount": 1,
+          "id": "one.month.discount.annual.offer",
+          "type": "promotional",
+          "paymentMode": "pay-up-front",
+          "price": 149.99,
+          "offerId": "one.month.discount.annual.offer",
+          "localizedPrice": "₺149,99"
+        }
+      ],
+      "discounts": [
+        {
+          "paymentMode": "pay-up-front",
+          "priceAmount": 999.99,
+          "localizedPrice": "₺999,99",
+          "type": "promotional",
+          "subscriptionPeriod": "YEAR",
+          "numberOfPeriods": 1,
+          "price": "999.99",
+          "identifier": "one.year.discount.annual.offer"
+        },
+        {
+          "numberOfPeriods": 1,
+          "priceAmount": 149.99,
+          "localizedPrice": "₺149,99",
+          "identifier": "one.month.discount.annual.offer",
+          "subscriptionPeriod": "MONTH",
+          "type": "promotional",
+          "paymentMode": "pay-up-front",
+          "price": "149.99"
+        },
+        {
+          "numberOfPeriods": 1,
+          "type": "promotional",
+          "subscriptionPeriod": "YEAR",
+          "priceAmount": 999.99,
+          "paymentMode": "pay-up-front",
+          "price": "999.99",
+          "localizedPrice": "₺999,99",
+          "identifier": "one.year.50discount.annual.offer"
+        }
+      ],
+      "subscriptionPeriodNumberIOS": 1,
+      "subscriptionPeriodUnitIOS": "YEAR",
+      "isConsumable": false
+    }
   ]
 }

package/src/product-base/periodLocalizationKeys.ts

@@ -112,3 +112,49 @@ export function convertIOSPeriodUnit(
   const normalized = unitMap[iosUnit.toUpperCase()];
   return normalized || 'month';
 }
+
+/**
+ * iOS'un döndüğü ham period değerlerini semantik olarak normalize eder.
+ *
+ * iOS bazen "WEEK" yerine "DAY" + 7, "MONTH" yerine "DAY" + 30 döndürür.
+ * Bu fonksiyon bu ham değerleri doğru semantic period'a çevirir.
+ *
+ * @example normalizeIOSPeriod('DAY', 7)   → { unit: 'week',  value: 1 }
+ * @example normalizeIOSPeriod('DAY', 14)  → { unit: 'week',  value: 2 }
+ * @example normalizeIOSPeriod('DAY', 30)  → { unit: 'month', value: 1 }
+ * @example normalizeIOSPeriod('DAY', 365) → { unit: 'year',  value: 1 }
+ * @example normalizeIOSPeriod('MONTH', 1) → { unit: 'month', value: 1 }
+ */
+export function normalizeIOSPeriod(
+  iosUnit: string | undefined,
+  iosValue: number | undefined,
+): { unit: 'day' | 'week' | 'month' | 'year'; value: number } {
+  const rawUnit = convertIOSPeriodUnit(iosUnit);
+  const rawValue = iosValue || 1;
+
+  // DAY cinsinden gelen değerleri daha büyük birime çevir
+  if (rawUnit === 'day') {
+    if (rawValue % 365 === 0) {
+      return { unit: 'year', value: rawValue / 365 };
+    }
+    if (rawValue === 366) {
+      return { unit: 'year', value: 1 };
+    }
+    if (rawValue % 30 === 0) {
+      return { unit: 'month', value: rawValue / 30 };
+    }
+    if (rawValue === 31) {
+      return { unit: 'month', value: 1 };
+    }
+    if (rawValue % 7 === 0) {
+      return { unit: 'week', value: rawValue / 7 };
+    }
+  }
+
+  // MONTH cinsinden gelen değerleri yıla çevir
+  if (rawUnit === 'month' && rawValue % 12 === 0) {
+    return { unit: 'year', value: rawValue / 12 };
+  }
+
+  return { unit: rawUnit, value: rawValue };
+}

package/src/store/customDeviceStore.ts

@@ -0,0 +1,38 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+import { Device } from '../types/Device';
+
+interface CustomDeviceState {
+  customDevices: Device[];
+  addCustomDevice: (device: Device) => void;
+  removeCustomDevice: (name: string) => void;
+  updateCustomDevice: (name: string, updatedDevice: Device) => void;
+}
+
+export const useCustomDeviceStore = create<CustomDeviceState>()(
+  persist(
+    (set) => ({
+      customDevices: [],
+      addCustomDevice: (device) =>
+        set((state) => ({
+          customDevices: [
+            device,
+            ...state.customDevices.filter((d) => d.name !== device.name),
+          ],
+        })),
+      removeCustomDevice: (name) =>
+        set((state) => ({
+          customDevices: state.customDevices.filter((d) => d.name !== name),
+        })),
+      updateCustomDevice: (name, updatedDevice) =>
+        set((state) => ({
+          customDevices: state.customDevices.map((d) =>
+            d.name === name ? updatedDevice : d,
+          ),
+        })),
+    }),
+    {
+      name: 'custom-devices-storage',
+    },
+  ),
+);