@developer_tribe/react-builder 1.2.20 → 1.2.22

package/src/assets/samples/paywall-notification-offer.json

@@ -0,0 +1,353 @@
+{
+  "name": "Paywall Notification Offer",
+  "version": "1.1.2",
+  "type": "paywall",
+  "appConfig": {
+    "theme": "light",
+    "isRtl": false,
+    "screenStyle": {
+      "light": {
+        "backgroundColor": "#F9FBF4",
+        "color": "#141A12"
+      },
+      "dark": {
+        "backgroundColor": "#0F140F",
+        "color": "#E8F2E4"
+      }
+    },
+    "defaultLanguage": "en"
+  },
+  "data": {
+    "type": "Main",
+    "isMain": true,
+    "attributes": {
+      "useSafeAreaView": true,
+      "description": "Main container for Notification Offer.",
+      "title": "Main"
+    },
+    "children": [
+      {
+        "type": "PaywallProvider",
+        "attributes": {
+          "scrollable": true,
+          "delay": 5000,
+          "description": "Paywall provider container.",
+          "title": "Main Paywall",
+          "styles": {
+            "flexDirection": "column",
+            "alignItems": "stretch",
+            "justifyContent": "flex-start",
+            "position": "relative",
+            "backgroundColor": "#EAF7E5"
+          }
+        },
+        "children": [
+          {
+            "type": "PaywallBackground",
+            "attributes": {
+              "src": "https://images.unsplash.com/photo-1469474968028-56623f02e42e?auto=format&fit=crop&w=1200&q=80",
+              "resizeMode": "cover",
+              "description": "Paywall background.",
+              "title": "Paywall Background"
+            },
+            "children": null
+          },
+          {
+            "type": "View",
+            "attributes": {
+              "styles": {
+                "paddingTop": 56,
+                "paddingHorizontal": 16,
+                "paddingBottom": 16,
+                "gap": 16,
+                "flex": 1
+              }
+            },
+            "children": [
+              {
+                "type": "PaywallCloseButton",
+                "attributes": {
+                  "styles": {
+                    "width": 32,
+                    "height": 32,
+                    "borderRadius": 16,
+                    "backgroundColor": "#FFFFFF",
+                    "color": "#000",
+                    "zIndex": 10,
+                    "alignItems": "center",
+                    "justifyContent": "center"
+                  }
+                },
+                "children": null
+              },
+              {
+                "type": "text",
+                "attributes": {
+                  "description": "Title text.",
+                  "title": "Paywall Title",
+                  "styles": {
+                    "color": "#FFFFFF",
+                    "fontWeight": "700",
+                    "fontSize": 28,
+                    "textAlign": "center"
+                  }
+                },
+                "children": "Notification Offer"
+              },
+              {
+                "type": "View",
+                "attributes": {
+                  "description": "Benefits container.",
+                  "title": "Benefits",
+                  "styles": {
+                    "flexDirection": "column",
+                    "gap": 4,
+                    "marginTop": "12%"
+                  }
+                },
+                "children": [
+                  {
+                    "type": "View",
+                    "attributes": {
+                      "description": "Benefit container #1.",
+                      "title": "Benefit #1",
+                      "styles": {
+                        "flexDirection": "row",
+                        "alignItems": "center",
+                        "gap": 8,
+                        "paddingVertical": 8,
+                        "paddingHorizontal": 12
+                      }
+                    },
+                    "children": [
+                      {
+                        "type": "BIcon",
+                        "attributes": {
+                          "iconType": "check",
+                          "strokeWidth": 3,
+                          "description": "Icon item.",
+                          "title": "BIcon 1",
+                          "styles": {
+                            "color": "#22c55e",
+                            "fontSize": "16",
+                            "flex": 0
+                          }
+                        },
+                        "children": null
+                      },
+                      {
+                        "type": "text",
+                        "attributes": {
+                          "description": "Text item.",
+                          "title": "text 1",
+                          "styles": {
+                            "flex": 1,
+                            "color": "#FFFFFF",
+                            "fontWeight": "700"
+                          }
+                        },
+                        "children": "@benefit1 — Unlimited access"
+                      }
+                    ]
+                  },
+                  {
+                    "type": "View",
+                    "attributes": {
+                      "description": "Benefit container #2.",
+                      "title": "Benefit #2",
+                      "styles": {
+                        "flexDirection": "row",
+                        "alignItems": "center",
+                        "gap": 8,
+                        "paddingVertical": 8,
+                        "paddingHorizontal": 12
+                      }
+                    },
+                    "children": [
+                      {
+                        "type": "BIcon",
+                        "attributes": {
+                          "iconType": "check",
+                          "strokeWidth": 3,
+                          "description": "Icon item.",
+                          "title": "BIcon 2",
+                          "styles": {
+                            "color": "#22c55e",
+                            "fontSize": "16",
+                            "flex": 0
+                          }
+                        },
+                        "children": null
+                      },
+                      {
+                        "type": "text",
+                        "attributes": {
+                          "description": "Text item.",
+                          "title": "text 2",
+                          "styles": {
+                            "flex": 1,
+                            "color": "#FFFFFF",
+                            "fontWeight": "700"
+                          }
+                        },
+                        "children": "@benefit2 — 7-day free trial"
+                      }
+                    ]
+                  },
+                  {
+                    "type": "View",
+                    "attributes": {
+                      "description": "Benefit container #3.",
+                      "title": "Benefit #3",
+                      "styles": {
+                        "flexDirection": "row",
+                        "alignItems": "center",
+                        "gap": 8,
+                        "paddingVertical": 8,
+                        "paddingHorizontal": 12
+                      }
+                    },
+                    "children": [
+                      {
+                        "type": "BIcon",
+                        "attributes": {
+                          "iconType": "check",
+                          "strokeWidth": 3,
+                          "description": "Icon item.",
+                          "title": "BIcon 3",
+                          "styles": {
+                            "color": "#22c55e",
+                            "fontSize": "16",
+                            "flex": 0
+                          }
+                        },
+                        "children": null
+                      },
+                      {
+                        "type": "text",
+                        "attributes": {
+                          "description": "Text item.",
+                          "title": "text 3",
+                          "styles": {
+                            "flex": 1,
+                            "color": "#FFFFFF",
+                            "fontWeight": "700"
+                          }
+                        },
+                        "children": "@benefit3 — Cancel anytime"
+                      }
+                    ]
+                  }
+                ]
+              },
+              {
+                "type": "PaywallOptions",
+                "attributes": {
+                  "description": "Subscription options area.",
+                  "title": "Option(s)",
+                  "styles": {
+                    "borderRadius": 12,
+                    "backgroundColor": "#FFFFFF"
+                  }
+                },
+                "children": [
+                  {
+                    "type": "RadioButton",
+                    "attributes": {
+                      "description": "Radio item.",
+                      "title": "Product Radio(s)",
+                      "styles": {
+                        "flex": 1
+                      }
+                    },
+                    "children": null
+                  },
+                  {
+                    "type": "text",
+                    "attributes": {
+                      "description": "Product description.",
+                      "title": "Product Desc(s)",
+                      "styles": {
+                        "flex": 4,
+                        "color": "#000"
+                      }
+                    },
+                    "children": "@productDescription — Unlock all premium features for a month."
+                  },
+                  {
+                    "type": "text",
+                    "attributes": {
+                      "description": "Product price.",
+                      "title": "Product Price(s)",
+                      "styles": {
+                        "flex": 1,
+                        "textAlign": "right",
+                        "color": "#000"
+                      }
+                    },
+                    "children": "@localizedPrice"
+                  },
+                  {
+                    "type": "BIcon",
+                    "attributes": {
+                      "iconType": "chevron-right",
+                      "size": 16,
+                      "description": "Chevron icon.",
+                      "title": "Product BIcon(s)",
+                      "styles": {
+                        "marginRight": 4,
+                        "flex": 0,
+                        "width": 32,
+                        "color": "#000"
+                      }
+                    },
+                    "children": null
+                  }
+                ]
+              },
+              {
+                "type": "CountDown",
+                "attributes": {
+                  "count": 5000,
+                  "description": "Countdown timer (5 seconds).",
+                  "title": "Countdown",
+                  "styles": {
+                    "color": "#FF0000",
+                    "fontWeight": "700",
+                    "fontSize": 40,
+                    "textAlign": "center"
+                  }
+                },
+                "children": null
+              },
+              {
+                "type": "View",
+                "attributes": {
+                  "description": "Subscribe button container.",
+                  "title": "Subs Container",
+                  "styles": {
+                    "flex": 1,
+                    "flexDirection": "column",
+                    "justifyContent": "flex-end",
+                    "alignItems": "stretch",
+                    "paddingBottom": "50px"
+                  }
+                },
+                "children": [
+                  {
+                    "type": "PaywallSubscribeButton",
+                    "children": "Subscribe Now",
+                    "attributes": {
+                      "description": "Subscription confirm button.",
+                      "title": "Subscribe"
+                    }
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  }
+}

package/src/assets/samples/vpn-onboard-1.json

@@ -484,21 +484,32 @@
             ]
           },
           {
-            "type": "OnboardFooter",
+            "type": "View",
             "attributes": {
-              "textLocalizationKey": "view.onboarding.footer.description",
-              "linkedWordFirstLocalizationKey": "view.onboarding.btnPrivacy",
-              "linkedWordFirstColor": "#1778F2",
-              "linkedWordFirstPage": "privacy",
-              "linkedWordSecondLocalizationKey": "view.onboarding.btnTerms",
-              "linkedWordSecondColor": "#1778F2",
-              "linkedWordSecondPage": "terms",
+              "title": "Onboard Footer Wrap",
+              "description": "Wrapper for OnboardFooter component",
               "styles": {
-                "flex": 2,
-                "gap": 8,
-                "color": "#A2A4B1"
+                "flex": 2
               }
-            }
+            },
+            "children": [
+              {
+                "type": "OnboardFooter",
+                "attributes": {
+                  "textLocalizationKey": "view.onboarding.footer.description",
+                  "linkedWordFirstLocalizationKey": "view.onboarding.btnPrivacy",
+                  "linkedWordFirstColor": "#1778F2",
+                  "linkedWordFirstPage": "privacy",
+                  "linkedWordSecondLocalizationKey": "view.onboarding.btnTerms",
+                  "linkedWordSecondColor": "#1778F2",
+                  "linkedWordSecondPage": "terms",
+                  "styles": {
+                    "gap": 8,
+                    "color": "#A2A4B1"
+                  }
+                }
+              }
+            ]
           }
         ],
         "attributes": {

package/src/assets/samples/vpn-onboard-2.json

@@ -487,21 +487,32 @@
             ]
           },
           {
-            "type": "OnboardFooter",
+            "type": "View",
             "attributes": {
-              "textLocalizationKey": "view.onboarding.footer.description",
-              "linkedWordFirstLocalizationKey": "view.onboarding.btnPrivacy",
-              "linkedWordFirstColor": "#1778F2",
-              "linkedWordFirstPage": "privacy",
-              "linkedWordSecondLocalizationKey": "view.onboarding.btnTerms",
-              "linkedWordSecondColor": "#1778F2",
-              "linkedWordSecondPage": "terms",
+              "title": "Onboard Footer Wrap",
+              "description": "Wrapper for OnboardFooter component",
               "styles": {
-                "flex": 2,
-                "gap": 8,
-                "color": "#A2A4B1"
+                "flex": 2
               }
-            }
+            },
+            "children": [
+              {
+                "type": "OnboardFooter",
+                "attributes": {
+                  "textLocalizationKey": "view.onboarding.footer.description",
+                  "linkedWordFirstLocalizationKey": "view.onboarding.btnPrivacy",
+                  "linkedWordFirstColor": "#1778F2",
+                  "linkedWordFirstPage": "privacy",
+                  "linkedWordSecondLocalizationKey": "view.onboarding.btnTerms",
+                  "linkedWordSecondColor": "#1778F2",
+                  "linkedWordSecondPage": "terms",
+                  "styles": {
+                    "gap": 8,
+                    "color": "#A2A4B1"
+                  }
+                }
+              }
+            ]
           }
         ],
         "attributes": {

package/src/assets/samples/vpn-onboard-3.json

@@ -470,21 +470,32 @@
             ]
           },
           {
-            "type": "OnboardFooter",
+            "type": "View",
             "attributes": {
-              "textLocalizationKey": "view.onboarding.footer.description",
-              "linkedWordFirstLocalizationKey": "view.onboarding.btnPrivacy",
-              "linkedWordFirstColor": "#81838F",
-              "linkedWordFirstPage": "privacy",
-              "linkedWordSecondLocalizationKey": "view.onboarding.btnTerms",
-              "linkedWordSecondColor": "#81838F",
-              "linkedWordSecondPage": "terms",
+              "title": "Onboard Footer Wrap",
+              "description": "Wrapper for OnboardFooter component",
               "styles": {
-                "flex": 2,
-                "gap": 8,
-                "color": "#81838F"
+                "flex": 2
               }
-            }
+            },
+            "children": [
+              {
+                "type": "OnboardFooter",
+                "attributes": {
+                  "textLocalizationKey": "view.onboarding.footer.description",
+                  "linkedWordFirstLocalizationKey": "view.onboarding.btnPrivacy",
+                  "linkedWordFirstColor": "#81838F",
+                  "linkedWordFirstPage": "privacy",
+                  "linkedWordSecondLocalizationKey": "view.onboarding.btnTerms",
+                  "linkedWordSecondColor": "#81838F",
+                  "linkedWordSecondPage": "terms",
+                  "styles": {
+                    "gap": 8,
+                    "color": "#81838F"
+                  }
+                }
+              }
+            ]
           }
         ],
         "attributes": {

package/src/assets/samples/vpn-onboard-4.json

@@ -470,21 +470,32 @@
             ]
           },
           {
-            "type": "OnboardFooter",
+            "type": "View",
             "attributes": {
-              "textLocalizationKey": "view.onboarding.footer.description",
-              "linkedWordFirstLocalizationKey": "view.onboarding.btnPrivacy",
-              "linkedWordFirstColor": "#81838F",
-              "linkedWordFirstPage": "privacy",
-              "linkedWordSecondLocalizationKey": "view.onboarding.btnTerms",
-              "linkedWordSecondColor": "#81838F",
-              "linkedWordSecondPage": "terms",
+              "title": "Onboard Footer Wrap",
+              "description": "Wrapper for OnboardFooter component",
               "styles": {
-                "flex": 2,
-                "gap": 8,
-                "color": "#81838F"
+                "flex": 2
               }
-            }
+            },
+            "children": [
+              {
+                "type": "OnboardFooter",
+                "attributes": {
+                  "textLocalizationKey": "view.onboarding.footer.description",
+                  "linkedWordFirstLocalizationKey": "view.onboarding.btnPrivacy",
+                  "linkedWordFirstColor": "#81838F",
+                  "linkedWordFirstPage": "privacy",
+                  "linkedWordSecondLocalizationKey": "view.onboarding.btnTerms",
+                  "linkedWordSecondColor": "#81838F",
+                  "linkedWordSecondPage": "terms",
+                  "styles": {
+                    "gap": 8,
+                    "color": "#81838F"
+                  }
+                }
+              }
+            ]
           }
         ],
         "attributes": {

package/src/assets/samples/vpn-onboard-5.json

@@ -670,21 +670,32 @@
             ]
           },
           {
-            "type": "OnboardFooter",
+            "type": "View",
             "attributes": {
-              "textLocalizationKey": "view.onboarding.footer.description",
-              "linkedWordFirstLocalizationKey": "view.onboarding.btnPrivacy",
-              "linkedWordFirstColor": "#0450E2",
-              "linkedWordFirstPage": "privacy",
-              "linkedWordSecondLocalizationKey": "view.onboarding.btnTerms",
-              "linkedWordSecondColor": "#0450E2",
-              "linkedWordSecondPage": "terms",
+              "title": "Onboard Footer Wrap",
+              "description": "Wrapper for OnboardFooter component",
               "styles": {
-                "flex": 2,
-                "gap": 8,
-                "color": "#A2A4B1"
+                "flex": 2
               }
-            }
+            },
+            "children": [
+              {
+                "type": "OnboardFooter",
+                "attributes": {
+                  "textLocalizationKey": "view.onboarding.footer.description",
+                  "linkedWordFirstLocalizationKey": "view.onboarding.btnPrivacy",
+                  "linkedWordFirstColor": "#0450E2",
+                  "linkedWordFirstPage": "privacy",
+                  "linkedWordSecondLocalizationKey": "view.onboarding.btnTerms",
+                  "linkedWordSecondColor": "#0450E2",
+                  "linkedWordSecondPage": "terms",
+                  "styles": {
+                    "gap": 8,
+                    "color": "#A2A4B1"
+                  }
+                }
+              }
+            ]
           }
         ],
         "attributes": {

package/src/assets/samples/vpn-onboard-6.json

@@ -472,21 +472,32 @@
             ]
           },
           {
-            "type": "OnboardFooter",
+            "type": "View",
             "attributes": {
-              "textLocalizationKey": "view.onboarding.footer.description",
-              "linkedWordFirstLocalizationKey": "view.onboarding.btnPrivacy",
-              "linkedWordFirstColor": "#0450E2",
-              "linkedWordFirstPage": "privacy",
-              "linkedWordSecondLocalizationKey": "view.onboarding.btnTerms",
-              "linkedWordSecondColor": "#0450E2",
-              "linkedWordSecondPage": "terms",
+              "title": "Onboard Footer Wrap",
+              "description": "Wrapper for OnboardFooter component",
               "styles": {
-                "flex": 2,
-                "gap": 8,
-                "color": "#81838F"
+                "flex": 2
               }
-            }
+            },
+            "children": [
+              {
+                "type": "OnboardFooter",
+                "attributes": {
+                  "textLocalizationKey": "view.onboarding.footer.description",
+                  "linkedWordFirstLocalizationKey": "view.onboarding.btnPrivacy",
+                  "linkedWordFirstColor": "#0450E2",
+                  "linkedWordFirstPage": "privacy",
+                  "linkedWordSecondLocalizationKey": "view.onboarding.btnTerms",
+                  "linkedWordSecondColor": "#0450E2",
+                  "linkedWordSecondPage": "terms",
+                  "styles": {
+                    "gap": 8,
+                    "color": "#81838F"
+                  }
+                }
+              }
+            ]
           }
         ],
         "attributes": {

package/src/attribute-analyser/style/web/useExtractTextStyle.ts

@@ -8,6 +8,7 @@ import { extractTextStyle } from '../../../utils/extractTextStyle';
 
 export function useExtractTextStyle<T extends TextPropsGenerated['attributes']>(
   node: NodeData<T>,
+  directlyTextStyle = false,
 ): CSSProperties {
   const {
     appConfig: builderAppConfig,
@@ -20,8 +21,14 @@ export function useExtractTextStyle<T extends TextPropsGenerated['attributes']>(
   const fonts = builderFonts;
 
   return useMemo(
-    () => extractTextStyle(node, { appConfig, projectColors, fonts }),
+    () =>
+      extractTextStyle(node, {
+        appConfig,
+        projectColors,
+        fonts,
+        directlyTextStyle,
+      }),
     // fonts is intentionally included: extractTextStyle resolves weights via font definitions.
-    [node, appConfig, projectColors, fonts],
+    [node, appConfig, projectColors, fonts, directlyTextStyle],
   );
 }

package/src/build-components/BIcon/BIconProps.generated.ts

@@ -4,6 +4,7 @@ import type { NodeData } from '../../types/Node';
 
 export type TextAlignOptionType = 'left' | 'center' | 'right' | 'justify';
 export type FlexDirectionOptionType = 'row' | 'column';
+export type FlexWrapOptionType = 'nowrap' | 'wrap' | 'wrap-reverse';
 export type AlignItemsOptionType =
   | 'flex-start'
   | 'center'
@@ -26,6 +27,7 @@ export interface BIconStyleGenerated {
   fontWeight?: string;
   textAlign?: TextAlignOptionType;
   flexDirection?: FlexDirectionOptionType;
+  flexWrap?: FlexWrapOptionType;
   alignItems?: AlignItemsOptionType;
   justifyContent?: JustifyContentOptionType;
   gap?: string;