@developer_tribe/react-builder 1.2.40 → 1.2.42

package/src/build-components/OnboardButton/pattern.json

@@ -41,7 +41,7 @@
   "meta": {
     "desiredParent": ["=OnboardButtons"],
     "label": "Onboard Button",
-    "description": "Single action button for onboarding.",
+    "description": "Single action button for onboard.",
     "attributes": {
       "labelKey": {
         "label": "Label Key",

package/src/build-components/OnboardFooter/OnboardFooter.tsx

@@ -7,7 +7,7 @@ import { useExtractViewStyle } from '../../attribute-analyser/style/web/useExtra
 import { useLogRender } from '../../utils/useLogRender';
 import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
 import { useMergedStyle } from '../../utils/useMergedStyle';
-import { defaultLocalization } from '../../types/PreviewConfig';
+import { useLocalize } from '../../hooks/useLocalize';
 import { parseColor } from '../../utils/parseColor';
 import { toAttributeRecord } from '../../utils/attributeStyle';
 
@@ -96,17 +96,14 @@ function OnboardFooter({ node }: OnboardFooterComponentProps) {
   node = useNode(node);
   const attributeName = node.sourceType ?? node.type ?? 'OnboardFooter';
   const {
-    localization: builderLocalization,
     selectedTheme: theme,
-    selectedLanguage,
     previewMode,
     selectedKey,
     projectColors: builderProjectColors,
   } = useBuilderParams();
-  const localization = builderLocalization ?? defaultLocalization;
   const projectColors = builderProjectColors;
-  const lang = selectedLanguage ?? 'en';
-  const t = (key?: string) => (key ? (localization?.[lang]?.[key] ?? key) : '');
+  const localize = useLocalize();
+  const t = (key?: string) => (key ? localize(key) : '');
 
   const attrs = node?.attributes;
   const attrRecord = toAttributeRecord(attrs);
@@ -178,18 +175,25 @@ function OnboardFooter({ node }: OnboardFooterComponentProps) {
           };
 
           return (
-            <>
+            <span
+              style={{
+                ...mergedTextStyle,
+                display: '-webkit-box',
+                WebkitLineClamp: 2,
+                WebkitBoxOrient: 'vertical',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+              }}
+            >
               {segments.map((seg, i) =>
                 seg.type === 'text' ? (
-                  <span key={i} style={mergedTextStyle}>
-                    {seg.value}
-                  </span>
+                  <React.Fragment key={i}>{seg.value}</React.Fragment>
                 ) : (
                   <span
                     key={i}
                     style={{
-                      ...mergedTextStyle,
-                      color: seg.color,
+                      ...(seg.color ? { color: seg.color } : {}),
+                      cursor: 'pointer',
                     }}
                     onClick={() => handleClick(seg.page)}
                   >
@@ -198,32 +202,37 @@ function OnboardFooter({ node }: OnboardFooterComponentProps) {
                 ),
               )}
               {matchCount === 0 && (
-                <div>
+                <>
+                  {' '}
                   {attrs?.linkedWordFirstLocalizationKey && (
                     <span
                       style={{
-                        ...mergedTextStyle,
-                        color: parsedFirstColor ?? undefined,
+                        ...(parsedFirstColor
+                          ? { color: parsedFirstColor }
+                          : {}),
+                        cursor: 'pointer',
                       }}
                       onClick={() => handleClick(attrs?.linkedWordFirstPage)}
                     >
                       {firstText}
                     </span>
-                  )}
+                  )}{' '}
                   {attrs?.linkedWordSecondLocalizationKey && (
                     <span
                       style={{
-                        ...mergedTextStyle,
-                        color: parsedSecondColor ?? undefined,
+                        ...(parsedSecondColor
+                          ? { color: parsedSecondColor }
+                          : {}),
+                        cursor: 'pointer',
                       }}
                       onClick={() => handleClick(attrs?.linkedWordSecondPage)}
                     >
                       {secondText}
                     </span>
                   )}
-                </div>
+                </>
               )}
-            </>
+            </span>
           );
         })()}
     </div>

package/src/build-components/OnboardFooter/pattern.json

@@ -18,12 +18,13 @@
   },
   "defaults": {
     "styles": {
+      "minHeight":"50@vs",
       "flexDirection": "row",
       "flexWrap": "wrap",
       "alignItems": "center",
       "justifyContent": "center",
       "textAlign": "center",
-      "paddingHorizontal": "24@s"
+      "paddingHorizontal": "16@s"
     }
   },
   "meta": {

package/src/build-components/OnboardProvider/pattern.json

@@ -20,7 +20,7 @@
   "meta": {
     "desiredParent": ["root"],
     "label": "Onboard Provider",
-    "description": "Provides shared settings for onboarding.",
+    "description": "Provides shared settings for onboard.",
     "styles": {},
     "attributes": {
       "theme": {

package/src/build-components/PaywallCloseButton/PaywallCloseButton.tsx

@@ -8,7 +8,7 @@ import { useLogRender } from '../../utils/useLogRender';
 import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
 import { useMergedStyle } from '../../utils/useMergedStyle';
 import { Icon } from '../../components/Icon.generated';
-import { IconsType } from '../../types/Icons.generated';
+import { IconsType } from '../../types/Icons';
 import { usePaywallContext } from '../PaywallProvider/PaywallContext';
 
 export function PaywallCloseButton({ node }: PaywallCloseButtonComponentProps) {

package/src/build-components/PaywallFooter/PaywallFooter.tsx

@@ -0,0 +1,242 @@
+import React, { useId, useMemo } from 'react';
+import type { PaywallFooterComponentProps } from './PaywallFooterProps.generated';
+import useNode from '../useNode';
+import { useBuilderParams } from '../../components/BuilderProvider';
+import { useExtractTextStyle } from '../../attribute-analyser/style/web/useExtractTextStyle';
+import { useExtractViewStyle } from '../../attribute-analyser/style/web/useExtractViewStyle';
+import { useLogRender } from '../../utils/useLogRender';
+import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
+import { useMergedStyle } from '../../utils/useMergedStyle';
+import { useLocalize } from '../../hooks/useLocalize';
+import { parseColor } from '../../utils/parseColor';
+import { toAttributeRecord } from '../../utils/attributeStyle';
+
+type Segment =
+  | { type: 'text'; value: string }
+  | {
+      type: 'match';
+      value: string;
+      color?: string;
+      page?: string;
+    };
+
+function escapeRegExp(str: string) {
+  return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
+function buildSegments(
+  text: string,
+  patterns: { value: string; color?: string; page?: string }[],
+): { segments: Segment[]; matchCount: number } {
+  type RawMatch = {
+    start: number;
+    end: number;
+    value: string;
+    color?: string;
+    page?: string;
+  };
+
+  const rawMatches: RawMatch[] = [];
+
+  for (const p of patterns) {
+    if (!p.value) continue;
+    const re = new RegExp(escapeRegExp(p.value), 'gi');
+    for (const m of text.matchAll(re)) {
+      if (m.index == null) continue;
+      const matched = m[0];
+      if (!matched) continue;
+      rawMatches.push({
+        start: m.index,
+        end: m.index + matched.length,
+        value: matched,
+        color: p.color,
+        page: p.page,
+      });
+    }
+  }
+
+  if (rawMatches.length === 0) {
+    return { segments: [{ type: 'text', value: text }], matchCount: 0 };
+  }
+
+  rawMatches.sort((a, b) => {
+    if (a.start !== b.start) return a.start - b.start;
+    const lenA = a.end - a.start;
+    const lenB = b.end - b.start;
+    return lenB - lenA;
+  });
+
+  const kept: RawMatch[] = [];
+  let lastEnd = -1;
+  for (const m of rawMatches) {
+    if (m.start >= lastEnd) {
+      kept.push(m);
+      lastEnd = m.end;
+    }
+  }
+
+  const segments: Segment[] = [];
+  let cursor = 0;
+  for (const { start, end, value, color, page } of kept) {
+    if (start > cursor) {
+      segments.push({ type: 'text', value: text.slice(cursor, start) });
+    }
+    segments.push({ type: 'match', value, color, page });
+    cursor = end;
+  }
+  if (cursor < text.length) {
+    segments.push({ type: 'text', value: text.slice(cursor) });
+  }
+
+  return { segments, matchCount: kept.length };
+}
+
+function PaywallFooter({ node }: PaywallFooterComponentProps) {
+  useLogRender('PaywallFooter');
+  node = useNode(node);
+  const attributeName = node.sourceType ?? node.type ?? 'PaywallFooter';
+  const {
+    selectedTheme: theme,
+    previewMode,
+    selectedKey,
+    projectColors: builderProjectColors,
+  } = useBuilderParams();
+  const projectColors = builderProjectColors;
+  const localize = useLocalize();
+  const t = (key?: string) => (key ? localize(key) : '');
+
+  const attrs = node?.attributes;
+  const attrRecord = toAttributeRecord(attrs);
+  const text = t(attrs?.textLocalizationKey);
+  const textStyle = useExtractTextStyle(node, true);
+  const viewStyle = useExtractViewStyle(node);
+
+  const rawFirstColor = attrRecord.linkedWordSecondColor as string | undefined;
+  const rawSecondColor = attrRecord.linkedWordFirstColor as string | undefined;
+
+  // Parse colors for linked words
+  const parsedFirstColor = useMemo(
+    () =>
+      parseColor(rawFirstColor, {
+        projectColors,
+        theme,
+      }),
+    [rawFirstColor, projectColors, theme],
+  );
+  const parsedSecondColor = useMemo(
+    () =>
+      parseColor(rawSecondColor, {
+        projectColors,
+        theme,
+      }),
+    [rawSecondColor, projectColors, theme],
+  );
+
+  const mergedTextStyle = useMergedStyle(textStyle, {
+    cursor: 'pointer',
+  });
+  const isSelected = isNodeSelected({
+    previewMode: !!previewMode,
+    current: selectedKey ? { key: selectedKey } : undefined,
+    node,
+  });
+  const mergedViewStyle = useMergedStyle(
+    viewStyle,
+    isSelected ? SELECTED_OUTLINE_STYLE : undefined,
+  );
+  const generatedId = useId();
+  const attributeKey = node.key ?? generatedId;
+
+  return (
+    <div
+      attribute-name={attributeName}
+      attribute-key={attributeKey}
+      style={mergedViewStyle}
+    >
+      {!!text &&
+        (() => {
+          const firstText = t(attrs?.linkedWordFirstLocalizationKey);
+          const secondText = t(attrs?.linkedWordSecondLocalizationKey);
+          const { segments, matchCount } = buildSegments(text, [
+            {
+              value: firstText,
+              color: parsedFirstColor ?? undefined,
+              page: attrs?.linkedWordFirstPage,
+            },
+            {
+              value: secondText,
+              color: parsedSecondColor ?? undefined,
+              page: attrs?.linkedWordSecondPage,
+            },
+          ]);
+
+          const handleClick = (page?: string) => {
+            if (!page) return;
+          };
+
+          return (
+            <span
+              style={{
+                ...mergedTextStyle,
+                display: '-webkit-box',
+                WebkitLineClamp: 2,
+                WebkitBoxOrient: 'vertical',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+              }}
+            >
+              {segments.map((seg, i) =>
+                seg.type === 'text' ? (
+                  <React.Fragment key={i}>{seg.value}</React.Fragment>
+                ) : (
+                  <span
+                    key={i}
+                    style={{
+                      ...(seg.color ? { color: seg.color } : {}),
+                      cursor: 'pointer',
+                    }}
+                    onClick={() => handleClick(seg.page)}
+                  >
+                    {seg.value}
+                  </span>
+                ),
+              )}
+              {matchCount === 0 && (
+                <>
+                  {' '}
+                  {attrs?.linkedWordFirstLocalizationKey && (
+                    <span
+                      style={{
+                        ...(parsedFirstColor
+                          ? { color: parsedFirstColor }
+                          : {}),
+                        cursor: 'pointer',
+                      }}
+                      onClick={() => handleClick(attrs?.linkedWordFirstPage)}
+                    >
+                      {firstText}
+                    </span>
+                  )}{' '}
+                  {attrs?.linkedWordSecondLocalizationKey && (
+                    <span
+                      style={{
+                        ...(parsedSecondColor
+                          ? { color: parsedSecondColor }
+                          : {}),
+                        cursor: 'pointer',
+                      }}
+                      onClick={() => handleClick(attrs?.linkedWordSecondPage)}
+                    >
+                      {secondText}
+                    </span>
+                  )}
+                </>
+              )}
+            </span>
+          );
+        })()}
+    </div>
+  );
+}
+
+export default React.memo(PaywallFooter);

package/src/build-components/PaywallFooter/PaywallFooterProps.generated.ts

@@ -0,0 +1,85 @@
+/* AUTO-GENERATED FILE - DO NOT EDIT */
+
+import type { NodeData } from '../../types/Node';
+
+export type FlexDirectionOptionType = 'row' | 'column';
+export type FlexWrapOptionType = 'nowrap' | 'wrap' | 'wrap-reverse';
+export type AlignItemsOptionType =
+  | 'flex-start'
+  | 'center'
+  | 'flex-end'
+  | 'stretch'
+  | 'baseline';
+export type JustifyContentOptionType =
+  | 'flex-start'
+  | 'center'
+  | 'flex-end'
+  | 'space-between'
+  | 'space-around'
+  | 'space-evenly';
+export type PositionOptionType = 'relative' | 'absolute';
+
+export interface PaywallFooterStyleGenerated {
+  color?: string;
+  fontSize?: string;
+  fontFamily?: string;
+  fontWeight?: string;
+  textAlign?: string;
+  flexDirection?: FlexDirectionOptionType;
+  flexWrap?: FlexWrapOptionType;
+  alignItems?: AlignItemsOptionType;
+  justifyContent?: JustifyContentOptionType;
+  gap?: string;
+  padding?: string;
+  paddingHorizontal?: string;
+  paddingVertical?: string;
+  paddingTop?: string;
+  paddingBottom?: string;
+  paddingLeft?: string;
+  paddingRight?: string;
+  margin?: string;
+  marginHorizontal?: string;
+  marginVertical?: string;
+  marginTop?: string;
+  marginBottom?: string;
+  marginLeft?: string;
+  marginRight?: string;
+  backgroundColor?: string;
+  borderRadius?: string;
+  width?: string;
+  minWidth?: string;
+  maxWidth?: string;
+  height?: string;
+  minHeight?: string;
+  maxHeight?: string;
+  flex?: number;
+  position?: PositionOptionType;
+  top?: string;
+  bottom?: string;
+  left?: string;
+  right?: string;
+  zIndex?: number;
+}
+
+export interface PaywallFooterPropsGenerated {
+  child: string;
+  attributes: {
+    styles?: PaywallFooterStyleGenerated;
+    adjustsFontSizeToFit?: boolean;
+    showEllipsis?: boolean;
+    translateCounter?: number;
+    scrollable?: boolean;
+    testID?: string;
+    textLocalizationKey?: string;
+    linkedWordFirstLocalizationKey?: string;
+    linkedWordFirstColor?: string;
+    linkedWordFirstPage?: string;
+    linkedWordSecondLocalizationKey?: string;
+    linkedWordSecondColor?: string;
+    linkedWordSecondPage?: string;
+  };
+}
+
+export interface PaywallFooterComponentProps {
+  node: NodeData<PaywallFooterPropsGenerated['attributes']>;
+}

package/src/build-components/PaywallFooter/pattern.json

@@ -0,0 +1,86 @@
+{
+  "schemaVersion": 2,
+  "pattern": {
+    "type": "PaywallFooter",
+    "title": "title",
+    "description": "description",
+    "children": "never",
+    "extends": "Text",
+    "attributes": {
+      "textLocalizationKey": "string",
+      "linkedWordFirstLocalizationKey": "string",
+      "linkedWordFirstColor": "color",
+      "linkedWordFirstPage": "string",
+      "linkedWordSecondLocalizationKey": "string",
+      "linkedWordSecondColor": "color",
+      "linkedWordSecondPage": "string"
+    }
+  },
+  "defaults": {
+    "styles": {
+      "minHeight":"50@vs",
+      "flexDirection": "row",
+      "flexWrap": "wrap",
+      "alignItems": "center",
+      "justifyContent": "center",
+      "textAlign": "center",
+      "paddingHorizontal": "16@s"
+    }
+  },
+  "meta": {
+    "desiredParent": [">PaywallProvider"],
+    "label": "Paywall Footer",
+    "description": "Footer text with optional links for paywall screens.",
+    "attributes": {
+      "textLocalizationKey": {
+        "label": "Text Localization Key",
+        "description": "Localization key for the footer text.",
+        "category": "other",
+        "specialCategory": null,
+        "sort": 1
+      },
+      "linkedWordFirstLocalizationKey": {
+        "label": "Linked Word First Localization Key",
+        "description": "Key for the first linked word.",
+        "category": "other",
+        "specialCategory": null,
+        "sort": 2
+      },
+      "linkedWordFirstColor": {
+        "label": "Linked Word First Color",
+        "description": "Color of the first linked word.",
+        "category": "other",
+        "specialCategory": null,
+        "sort": 3
+      },
+      "linkedWordFirstPage": {
+        "label": "Linked Word First Page",
+        "description": "Page opened by the first link.",
+        "category": "other",
+        "specialCategory": null,
+        "sort": 4
+      },
+      "linkedWordSecondLocalizationKey": {
+        "label": "Linked Word Second Localization Key",
+        "description": "Key for the second linked word.",
+        "category": "other",
+        "specialCategory": null,
+        "sort": 5
+      },
+      "linkedWordSecondColor": {
+        "label": "Linked Word Second Color",
+        "description": "Color of the second linked word.",
+        "category": "other",
+        "specialCategory": null,
+        "sort": 6
+      },
+      "linkedWordSecondPage": {
+        "label": "Linked Word Second Page",
+        "description": "Page opened by the second link.",
+        "category": "other",
+        "specialCategory": null,
+        "sort": 7
+      }
+    }
+  }
+}

package/src/build-components/RenderNode.generated.tsx

@@ -37,6 +37,7 @@ import type { OnboardSubtitleComponentProps } from './OnboardSubtitle/OnboardSub
 import type { OnboardTitleComponentProps } from './OnboardTitle/OnboardTitleProps.generated';
 import type { PaywallBackgroundComponentProps } from './PaywallBackground/PaywallBackgroundProps.generated';
 import type { PaywallCloseButtonComponentProps } from './PaywallCloseButton/PaywallCloseButtonProps.generated';
+import type { PaywallFooterComponentProps } from './PaywallFooter/PaywallFooterProps.generated';
 import type { PaywallOptionsComponentProps } from './PaywallOptions/PaywallOptionsProps.generated';
 import type { PaywallProviderComponentProps } from './PaywallProvider/PaywallProviderProps.generated';
 import type { PaywallSubscribeButtonComponentProps } from './PaywallSubscribeButton/PaywallSubscribeButtonProps.generated';
@@ -72,6 +73,7 @@ import OnboardSubtitle from './OnboardSubtitle/OnboardSubtitle';
 import OnboardTitle from './OnboardTitle/OnboardTitle';
 import PaywallBackground from './PaywallBackground/PaywallBackground';
 import { PaywallCloseButton } from './PaywallCloseButton/PaywallCloseButton';
+import PaywallFooter from './PaywallFooter/PaywallFooter';
 import PaywallOptions from './PaywallOptions/PaywallOptions';
 import PaywallProvider from './PaywallProvider/PaywallProvider';
 import PaywallSubscribeButton from './PaywallSubscribeButton/PaywallSubscribeButton';
@@ -109,6 +111,7 @@ type BuilderNode =
   | (OnboardTitleComponentProps['node'] & { type: 'OnboardTitle' })
   | (PaywallBackgroundComponentProps['node'] & { type: 'PaywallBackground' })
   | (PaywallCloseButtonComponentProps['node'] & { type: 'PaywallCloseButton' })
+  | (PaywallFooterComponentProps['node'] & { type: 'PaywallFooter' })
   | (PaywallOptionsComponentProps['node'] & { type: 'PaywallOptions' })
   | (PaywallProviderComponentProps['node'] & { type: 'PaywallProvider' })
   | (PaywallSubscribeButtonComponentProps['node'] & {
@@ -201,6 +204,8 @@ function RenderNode({ node }: { node: Node }) {
       return <PaywallBackground node={normalizedNode} />;
     case 'PaywallCloseButton':
       return <PaywallCloseButton node={normalizedNode} />;
+    case 'PaywallFooter':
+      return <PaywallFooter node={normalizedNode} />;
     case 'PaywallOptions':
       return <PaywallOptions node={normalizedNode} />;
     case 'PaywallProvider':

package/src/build-components/index.ts

@@ -29,6 +29,7 @@ export const allcomponentNames = [
   'OnboardTitle',
   'PaywallBackground',
   'PaywallCloseButton',
+  'PaywallFooter',
   'PaywallOptions',
   'PaywallProvider',
   'PaywallSubscribeButton',
@@ -138,6 +139,10 @@ export type {
   PaywallCloseButtonPropsGenerated,
   PaywallCloseButtonComponentProps,
 } from './PaywallCloseButton/PaywallCloseButtonProps.generated';
+export type {
+  PaywallFooterPropsGenerated,
+  PaywallFooterComponentProps,
+} from './PaywallFooter/PaywallFooterProps.generated';
 export type {
   PaywallOptionsPropsGenerated,
   PaywallOptionsComponentProps,