@developer_tribe/react-builder 1.2.45 → 1.2.47

package/src/components/AttributesEditorPanel.tsx

@@ -88,6 +88,7 @@ export function AttributesEditorPanel({
         node={nodeForEditor}
         onChange={handleAttributesChange}
         projectColors={projectColors}
+        projectRoot={attributes}
       />
     </div>
   );

package/src/modals/CreateDeviceModal.tsx

@@ -31,7 +31,8 @@ export function CreateDeviceModal({
   onSuccess,
   deviceToEdit,
 }: CreateDeviceModalProps) {
-  const { addCustomDevice, updateCustomDevice } = useCustomDeviceStore();
+  const { addCustomDevice, updateCustomDevice, customDevices } =
+    useCustomDeviceStore();
   const {
     register,
     handleSubmit,
@@ -127,7 +128,16 @@ export function CreateDeviceModal({
         <div className="create-device-form__group">
           <label className="create-device-form__label">Device Name</label>
           <input
-            {...register('name', { required: 'Name is required' })}
+            {...register('name', {
+              required: 'Name is required',
+              validate: (value) => {
+                if (deviceToEdit && value === deviceToEdit.name) return true;
+                const exists = customDevices.some(
+                  (d) => d.name.toLowerCase() === value.trim().toLowerCase(),
+                );
+                return exists ? 'A device with this name already exists' : true;
+              },
+            })}
             className="editor-input"
             placeholder="e.g. My Custom iPhone"
           />

package/src/modals/DeviceSelectorModal.tsx

@@ -26,7 +26,7 @@ export function DeviceSelectorModal({
     favoriteDevices: state.favoriteDevices || [],
     toggleFavoriteDevice: state.toggleFavoriteDevice,
   }));
-  const { customDevices, removeCustomDevice } = useCustomDeviceStore();
+  const { customDevices } = useCustomDeviceStore();
 
   const allDevices = useMemo(() => {
     return [...customDevices, ...devices];

package/src/patterns/event-constants.json

@@ -0,0 +1,19 @@
+{
+  "$comment": "Central event constants. Referenced via $ref in pattern.json types blocks. Run 'yarn prebuild' after changes.",
+  "eventTypes": ["Permission", "Navigate", "Placement", "SetCondition"],
+  "placementKeys": ["terms", "onboard", "paywall", "subscription", "home"],
+  "conditionKeys": ["termsAccepted"],
+  "permissionTypes": [
+    "notification",
+    "camera",
+    "microphone",
+    "location",
+    "photos",
+    "contacts",
+    "att",
+    "rating",
+    "GDPR"
+  ],
+  "validationTypes": ["required", "email", "url", "min", "max"],
+  "formFieldNames": ["email", "firstName", "lastName", "phone", "birthday"]
+}

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

@@ -4,6 +4,7 @@ import {
 } from './periodLocalizationKeys';
 import { iapLogger } from '../logger';
 import {
+  extractPrice,
   calculateDiscount,
   calculatePricePerMonth,
   calculatePricePerYear,
@@ -56,9 +57,8 @@ 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 || '';
@@ -120,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/styles/components/_global-provider.scss

@@ -0,0 +1,131 @@
+/* Page transition animations for GlobalProvider (platform-style names). */
+$page-transition-duration: 0.3s;
+$page-transition-easing: cubic-bezier(0.32, 0.72, 0, 1);
+
+.global-provider-page {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+}
+
+.global-provider-page--none {
+  animation: none;
+}
+
+.global-provider-page--default {
+  animation: global-provider-fade $page-transition-duration $page-transition-easing;
+}
+
+.global-provider-page--fade {
+  animation: global-provider-fade $page-transition-duration $page-transition-easing;
+}
+
+@keyframes global-provider-fade {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.global-provider-page--fade_from_bottom {
+  animation: global-provider-fade-from-bottom $page-transition-duration $page-transition-easing;
+}
+
+@keyframes global-provider-fade-from-bottom {
+  from {
+    opacity: 0;
+    transform: translateY(24px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.global-provider-page--fade_from_right {
+  animation: global-provider-fade-from-right $page-transition-duration $page-transition-easing;
+}
+
+@keyframes global-provider-fade-from-right {
+  from {
+    opacity: 0;
+    transform: translateX(24px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.global-provider-page--reveal_from_bottom {
+  animation: global-provider-reveal-from-bottom $page-transition-duration $page-transition-easing;
+}
+
+@keyframes global-provider-reveal-from-bottom {
+  from {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.global-provider-page--scale_from_center {
+  animation: global-provider-scale-from-center $page-transition-duration $page-transition-easing;
+}
+
+@keyframes global-provider-scale-from-center {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.global-provider-page--slide_from_right {
+  animation: global-provider-slide-from-right $page-transition-duration $page-transition-easing;
+}
+
+@keyframes global-provider-slide-from-right {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+.global-provider-page--slide_from_left {
+  animation: global-provider-slide-from-left $page-transition-duration $page-transition-easing;
+}
+
+@keyframes global-provider-slide-from-left {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+.global-provider-page--slide_from_bottom {
+  animation: global-provider-slide-from-bottom $page-transition-duration $page-transition-easing;
+}
+
+@keyframes global-provider-slide-from-bottom {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}

package/src/styles/index.scss

@@ -16,6 +16,7 @@
 @use './components/mockos-router';
 @use './components/bottom-bar';
 @use './components/onboard';
+@use './components/global-provider';
 
 @use './components/webview';
 @use './components/checkbox';

package/src/utils/analyseNodeByPatterns.ts

@@ -439,12 +439,15 @@ function validateAttributesByPattern(
       if (
         attrName === 'title' ||
         attrName === 'description' ||
-        attrName === 'testID'
+        attrName === 'testID' ||
+        attrName === 'animation'
       ) {
         const res = validateAttributeValue(
           pattern.pattern.type,
           attrValue,
-          attrName === 'testID' ? 'string' : attrName,
+          attrName === 'testID' || attrName === 'animation'
+            ? 'string'
+            : attrName,
           joinPath(path, attrName),
         );
         if (!res.valid) return res;

package/src/utils/nodeTree.ts

@@ -1,4 +1,5 @@
 import type { Node, NodeData } from '../types/Node';
+import eventConstants from '../patterns/event-constants.json';
 
 export function deleteNodeFromTree(root: Node, target: Node): Node {
   if (root === null || root === undefined) return root;
@@ -97,3 +98,117 @@ export function findNodeByKey(root: Node, key?: string): Node | null {
 
   return null;
 }
+
+export type ProjectOptions = {
+  pageKeys: string[];
+  conditionKeys: string[];
+  placementKeys: string[];
+  formFieldNames: string[];
+  eventTypes: string[];
+  validationTypes: string[];
+};
+
+/**
+ * Traverses the entire node tree to dynamically discover project-level metadata
+ * (page keys, condition keys, form field names, etc.) and merges them with
+ * central constants from event-constants.json.
+ *
+ * This enables the Attributes Editor to provide a complete list of valid options
+ * for dropdown fields, combining predefined standards with actually used keys
+ * in the current design.
+ */
+export function collectProjectMetadata(root: Node): ProjectOptions {
+  const pageKeys = new Set<string>();
+  const conditionKeys = new Set<string>();
+  const placementKeys = new Set<string>();
+  const formFieldNames = new Set<string>();
+  const eventTypes = new Set<string>();
+
+  function traverse(node: Node) {
+    if (!node || typeof node === 'string') return;
+
+    if (Array.isArray(node)) {
+      node.forEach(traverse);
+      return;
+    }
+
+    const data = node as NodeData;
+    const type = data.type;
+    const attrs = (data.attributes ?? {}) as Record<string, any>;
+
+    // Collect Page Keys
+    if (type === 'GlobalProvider' && Array.isArray(data.children)) {
+      data.children.forEach((child) => {
+        if (typeof child === 'object' && child !== null && 'key' in child) {
+          if (typeof child.key === 'string') pageKeys.add(child.key);
+        }
+      });
+    }
+    if (attrs.pageKey && typeof attrs.pageKey === 'string') {
+      pageKeys.add(attrs.pageKey);
+    }
+
+    // Collect Condition Keys
+    if (attrs.conditionKey && typeof attrs.conditionKey === 'string') {
+      conditionKeys.add(attrs.conditionKey);
+    }
+    if (Array.isArray(attrs.skipConditions)) {
+      attrs.skipConditions.forEach((entry: any) => {
+        if (entry?.conditionKey) conditionKeys.add(entry.conditionKey);
+      });
+    }
+
+    // Collect Placement Keys
+    if (attrs.placementKey && typeof attrs.placementKey === 'string') {
+      placementKeys.add(attrs.placementKey);
+    }
+
+    // Collect Form Field Names
+    if (type.startsWith('Form') && type !== 'FormProvider' && attrs.name) {
+      if (typeof attrs.name === 'string') formFieldNames.add(attrs.name);
+    }
+
+    // Collect from events
+    if (Array.isArray(attrs.events)) {
+      attrs.events.forEach((evt: any) => {
+        if (evt.type && typeof evt.type === 'string') eventTypes.add(evt.type);
+        if (evt.navigate_to) pageKeys.add(evt.navigate_to);
+        if (evt.placementKey) placementKeys.add(evt.placementKey);
+        if (evt.conditionKey) conditionKeys.add(evt.conditionKey);
+      });
+    }
+
+    if (data.children) {
+      traverse(data.children as Node);
+    }
+  }
+
+  traverse(root);
+
+  // Merge with central constants for a complete set of options
+  const result: ProjectOptions = {
+    pageKeys: Array.from(
+      new Set([...pageKeys, ...eventConstants.placementKeys]),
+    ).sort(),
+    conditionKeys: Array.from(
+      new Set([...conditionKeys, ...eventConstants.conditionKeys]),
+    ).sort(),
+    placementKeys: Array.from(
+      new Set([...placementKeys, ...eventConstants.placementKeys]),
+    ).sort(),
+    formFieldNames: Array.from(
+      new Set([
+        ...formFieldNames,
+        ...((eventConstants as any).formFieldNames as string[]),
+      ]),
+    ).sort(),
+    eventTypes: Array.from(
+      new Set([...eventTypes, ...eventConstants.eventTypes]),
+    ).sort(),
+    validationTypes: Array.from(
+      new Set((eventConstants as any).validationTypes as string[]),
+    ).sort(),
+  };
+
+  return result;
+}