@appstorys/react-web 1.0.1 → 1.1.1

package/dist/index.d.mts

@@ -2,21 +2,21 @@ import React from 'react';
 
 type CampaignType = 'BAN' | 'FLT' | 'PIP' | 'SUR' | 'CSAT' | 'WID' | 'MOD' | 'BTS' | 'SCRT' | 'STR' | 'TLTP' | 'TTP';
 interface CrossButtonConfig {
-    color: {
-        cross: string;
-        fill: string;
-        stroke: string;
+    color?: {
+        cross?: string;
+        fill?: string;
+        stroke?: string;
     };
-    enabled: boolean;
-    image: string;
-    margin: {
-        bottom: number;
-        left: number;
-        right: number;
-        top: number;
+    enabled?: boolean;
+    image?: string;
+    margin?: {
+        bottom?: number;
+        left?: number;
+        right?: number;
+        top?: number;
     };
     selectedStyle?: string;
-    size: number;
+    size?: number;
 }
 interface StorySlideCtaBorderRadius {
     topLeft?: number;
@@ -51,6 +51,8 @@ interface CampaignBanner extends BaseCampaign {
         lottie_data: string | null;
         width: null | number;
         height: null | number;
+        originalWidth?: null | number | string;
+        originalHeight?: null | number | string;
         link: null | string;
         styling: {
             bottomLeftRadius?: string;
@@ -251,6 +253,14 @@ interface TooltipStyling {
             right?: number;
             top?: number;
         };
+        /** When both width and height are set, the tooltip is treated as an
+         * image tooltip: the container is sized to this exact (viewport-clamped)
+         * box and the image is cropped to fill it edge-to-edge, matching RN's
+         * `imageDimensions` + `resizeMode="cover"` behavior. */
+        imageDimensions?: {
+            width?: number;
+            height?: number;
+        };
     };
     cta?: {
         container?: {
@@ -637,7 +647,115 @@ interface CampaignCsat extends BaseCampaign {
     campaign_type: 'CSAT';
     details: CsatCampaignDetails;
 }
-type Campaign = CampaignBanner | CampaignStory | CampaignWidget | CampaignTooltip | CampaignBottomSheet | CampaignCsat | CampaignSurvey | BaseCampaign;
+interface ModalCtaRedirection {
+    key?: string;
+    pageName?: string;
+    type?: string;
+    url?: string;
+    value?: string;
+}
+interface ModalMediaType {
+    type?: 'image' | 'video' | string;
+    url?: string;
+}
+interface ModalContent {
+    chooseMediaType?: ModalMediaType;
+    primaryCtaRedirection?: ModalCtaRedirection;
+    primaryCtaText?: string;
+    secondaryCtaRedirection?: ModalCtaRedirection;
+    secondaryCtaText?: string;
+    subtitleText?: string;
+    titleText?: string;
+}
+interface ModalTextStyle {
+    color?: string;
+    fontDecoration?: string[];
+    fontFamily?: string;
+    fontSize?: number;
+    textAlign?: string;
+}
+interface ModalCtaStyle {
+    container?: {
+        alignment?: string;
+        backgroundColor?: string;
+        borderColor?: string;
+        borderWidth?: number;
+        ctaFullWidth?: boolean;
+        ctaWidth?: number;
+        height?: number;
+    };
+    cornerRadius?: {
+        bottomLeft?: number;
+        bottomRight?: number;
+        topLeft?: number;
+        topRight?: number;
+    };
+    margin?: {
+        bottom?: number;
+        left?: number;
+        right?: number;
+        top?: number;
+    };
+    text?: {
+        color?: string;
+        fontDecoration?: string[];
+        fontFamily?: string;
+        fontSize?: number;
+    };
+}
+interface ModalItemStyling {
+    appearance?: {
+        backdrop?: {
+            color?: string;
+            opacity?: number;
+        };
+        backgroundColor?: string;
+        cornerRadius?: {
+            bottomLeft?: number;
+            bottomRight?: number;
+            topLeft?: number;
+            topRight?: number;
+        };
+        dimension?: {
+            width?: number;
+            height?: number;
+        };
+        enableBackdrop?: boolean;
+    };
+    crossButton?: CrossButtonConfig;
+    primaryCta?: ModalCtaStyle;
+    secondaryCta?: ModalCtaStyle;
+    subTitle?: ModalTextStyle;
+    title?: ModalTextStyle;
+}
+interface ModalItem {
+    content?: ModalContent;
+    modal_type?: string;
+    modalType?: string;
+    screen?: number;
+    styling?: ModalItemStyling;
+    chooseMediaType?: ModalMediaType;
+    redirection?: ModalCtaRedirection;
+    image?: string;
+    video?: string;
+}
+interface ModalCampaignDetails {
+    id: string;
+    modal_type?: string;
+    modalType?: string;
+    modals?: ModalItem[];
+    chooseMediaType?: ModalMediaType;
+    redirection?: ModalCtaRedirection;
+    styling?: ModalItemStyling;
+}
+interface CampaignModal extends BaseCampaign {
+    campaign_type: 'MOD';
+    details: ModalCampaignDetails;
+    display_trigger?: boolean;
+    isTesting?: boolean;
+    priority?: number;
+}
+type Campaign = CampaignBanner | CampaignStory | CampaignWidget | CampaignTooltip | CampaignBottomSheet | CampaignCsat | CampaignSurvey | CampaignModal | BaseCampaign;
 interface InitializationOptions {
     appId: string;
     accountId: string;
@@ -683,6 +801,47 @@ declare const Csat: React.FC;
 
 declare const Survey: React.FC;
 
+declare const Modal: React.FC;
+
+interface TrackableProps {
+    /**
+     * AppStorys target identifier. Exposed to the DOM as `data-as-id` so the
+     * resolver can find it, measure it, and attach tooltips/campaigns to it —
+     * regardless of whether the wrapped component forwards custom props to
+     * its own root DOM node.
+     */
+    id: string;
+    children: React.ReactNode;
+}
+/**
+ * Wraps any child (native element or custom component) in a zero-layout-impact
+ * marker element carrying `data-as-id`. Use this when you can't or don't want
+ * to add `id`/`data-as-id` directly to a component's rendered DOM node, e.g.
+ * a third-party component or one that doesn't spread extra props onto its root:
+ *
+ *   <Trackable id="checkout-button">
+ *     <SomeThirdPartyButton>Checkout</SomeThirdPartyButton>
+ *   </Trackable>
+ */
+declare const Trackable: React.FC<TrackableProps>;
+
+interface VariantDetails {
+    id?: string;
+    name?: string;
+    weight?: number;
+    isControl?: boolean;
+    isActive?: boolean;
+    modal_type?: string;
+    modals?: any[];
+    [key: string]: any;
+}
+type VariantsMap = Record<string, VariantDetails>;
+declare const getVariantId: (campaignId: string) => string | undefined;
+declare function hasVariants(campaign: Campaign | any): boolean;
+declare function selectVariantByWeight(variants: VariantsMap, campaignId?: string): string | undefined;
+declare function resolveCampaignVariant<T extends Campaign>(campaign: T): T;
+declare function getCampaignVariantId(campaign: Campaign): string | undefined;
+
 declare class AppStorys {
     private state;
     private navigateToScreen?;
@@ -712,4 +871,4 @@ declare class AppStorys {
 
 declare const instance: AppStorys;
 
-export { instance as AppStorys, type AppStorysStore, type Attributes, Banner, type BaseCampaign, BottomSheet, type BottomSheetElement, type Campaign, type CampaignBanner, type CampaignBottomSheet, type CampaignCsat, type CampaignStory, type CampaignSurvey, type CampaignTooltip, type CampaignType, type CampaignWidget, type CrossButtonConfig, Csat, type CsatCampaignDetails, type CsatSpacing, type CsatTextStyle, Floater, type InitializationOptions, Pip, SdkState, Story, type StoryGroupStyling, type StorySlide, type StorySlideCta, type StorySlideCtaBorderRadius, type StorySlideCtaContainer, type StorySlideCtaText, type StorySlideStyling, Survey, type SurveyCampaignDetails, type SurveyOptionColors, type SurveyOptionStyle, type SurveySlide, type SurveySlideLogicRule, type SurveyTextStyle, type SurveyThankYouButtonConfig, Tooltip, type TooltipItem, type TooltipStyling, type TriggerEvent, type TriggerEventConfig, type TriggerEventObject, Widget, type WidgetImage, personalizeText };
+export { instance as AppStorys, type AppStorysStore, type Attributes, Banner, type BaseCampaign, BottomSheet, type BottomSheetElement, type Campaign, type CampaignBanner, type CampaignBottomSheet, type CampaignCsat, type CampaignModal, type CampaignStory, type CampaignSurvey, type CampaignTooltip, type CampaignType, type CampaignWidget, type CrossButtonConfig, Csat, type CsatCampaignDetails, type CsatSpacing, type CsatTextStyle, Floater, type InitializationOptions, Modal, type ModalCampaignDetails, type ModalContent, type ModalCtaRedirection, type ModalCtaStyle, type ModalItem, type ModalItemStyling, type ModalMediaType, type ModalTextStyle, Pip, SdkState, Story, type StoryGroupStyling, type StorySlide, type StorySlideCta, type StorySlideCtaBorderRadius, type StorySlideCtaContainer, type StorySlideCtaText, type StorySlideStyling, Survey, type SurveyCampaignDetails, type SurveyOptionColors, type SurveyOptionStyle, type SurveySlide, type SurveySlideLogicRule, type SurveyTextStyle, type SurveyThankYouButtonConfig, Tooltip, type TooltipItem, type TooltipStyling, Trackable, type TrackableProps, type TriggerEvent, type TriggerEventConfig, type TriggerEventObject, type VariantDetails, type VariantsMap, Widget, type WidgetImage, getCampaignVariantId, getVariantId, hasVariants, personalizeText, resolveCampaignVariant, selectVariantByWeight };

package/dist/index.d.ts

@@ -2,21 +2,21 @@ import React from 'react';
 
 type CampaignType = 'BAN' | 'FLT' | 'PIP' | 'SUR' | 'CSAT' | 'WID' | 'MOD' | 'BTS' | 'SCRT' | 'STR' | 'TLTP' | 'TTP';
 interface CrossButtonConfig {
-    color: {
-        cross: string;
-        fill: string;
-        stroke: string;
+    color?: {
+        cross?: string;
+        fill?: string;
+        stroke?: string;
     };
-    enabled: boolean;
-    image: string;
-    margin: {
-        bottom: number;
-        left: number;
-        right: number;
-        top: number;
+    enabled?: boolean;
+    image?: string;
+    margin?: {
+        bottom?: number;
+        left?: number;
+        right?: number;
+        top?: number;
     };
     selectedStyle?: string;
-    size: number;
+    size?: number;
 }
 interface StorySlideCtaBorderRadius {
     topLeft?: number;
@@ -51,6 +51,8 @@ interface CampaignBanner extends BaseCampaign {
         lottie_data: string | null;
         width: null | number;
         height: null | number;
+        originalWidth?: null | number | string;
+        originalHeight?: null | number | string;
         link: null | string;
         styling: {
             bottomLeftRadius?: string;
@@ -251,6 +253,14 @@ interface TooltipStyling {
             right?: number;
             top?: number;
         };
+        /** When both width and height are set, the tooltip is treated as an
+         * image tooltip: the container is sized to this exact (viewport-clamped)
+         * box and the image is cropped to fill it edge-to-edge, matching RN's
+         * `imageDimensions` + `resizeMode="cover"` behavior. */
+        imageDimensions?: {
+            width?: number;
+            height?: number;
+        };
     };
     cta?: {
         container?: {
@@ -637,7 +647,115 @@ interface CampaignCsat extends BaseCampaign {
     campaign_type: 'CSAT';
     details: CsatCampaignDetails;
 }
-type Campaign = CampaignBanner | CampaignStory | CampaignWidget | CampaignTooltip | CampaignBottomSheet | CampaignCsat | CampaignSurvey | BaseCampaign;
+interface ModalCtaRedirection {
+    key?: string;
+    pageName?: string;
+    type?: string;
+    url?: string;
+    value?: string;
+}
+interface ModalMediaType {
+    type?: 'image' | 'video' | string;
+    url?: string;
+}
+interface ModalContent {
+    chooseMediaType?: ModalMediaType;
+    primaryCtaRedirection?: ModalCtaRedirection;
+    primaryCtaText?: string;
+    secondaryCtaRedirection?: ModalCtaRedirection;
+    secondaryCtaText?: string;
+    subtitleText?: string;
+    titleText?: string;
+}
+interface ModalTextStyle {
+    color?: string;
+    fontDecoration?: string[];
+    fontFamily?: string;
+    fontSize?: number;
+    textAlign?: string;
+}
+interface ModalCtaStyle {
+    container?: {
+        alignment?: string;
+        backgroundColor?: string;
+        borderColor?: string;
+        borderWidth?: number;
+        ctaFullWidth?: boolean;
+        ctaWidth?: number;
+        height?: number;
+    };
+    cornerRadius?: {
+        bottomLeft?: number;
+        bottomRight?: number;
+        topLeft?: number;
+        topRight?: number;
+    };
+    margin?: {
+        bottom?: number;
+        left?: number;
+        right?: number;
+        top?: number;
+    };
+    text?: {
+        color?: string;
+        fontDecoration?: string[];
+        fontFamily?: string;
+        fontSize?: number;
+    };
+}
+interface ModalItemStyling {
+    appearance?: {
+        backdrop?: {
+            color?: string;
+            opacity?: number;
+        };
+        backgroundColor?: string;
+        cornerRadius?: {
+            bottomLeft?: number;
+            bottomRight?: number;
+            topLeft?: number;
+            topRight?: number;
+        };
+        dimension?: {
+            width?: number;
+            height?: number;
+        };
+        enableBackdrop?: boolean;
+    };
+    crossButton?: CrossButtonConfig;
+    primaryCta?: ModalCtaStyle;
+    secondaryCta?: ModalCtaStyle;
+    subTitle?: ModalTextStyle;
+    title?: ModalTextStyle;
+}
+interface ModalItem {
+    content?: ModalContent;
+    modal_type?: string;
+    modalType?: string;
+    screen?: number;
+    styling?: ModalItemStyling;
+    chooseMediaType?: ModalMediaType;
+    redirection?: ModalCtaRedirection;
+    image?: string;
+    video?: string;
+}
+interface ModalCampaignDetails {
+    id: string;
+    modal_type?: string;
+    modalType?: string;
+    modals?: ModalItem[];
+    chooseMediaType?: ModalMediaType;
+    redirection?: ModalCtaRedirection;
+    styling?: ModalItemStyling;
+}
+interface CampaignModal extends BaseCampaign {
+    campaign_type: 'MOD';
+    details: ModalCampaignDetails;
+    display_trigger?: boolean;
+    isTesting?: boolean;
+    priority?: number;
+}
+type Campaign = CampaignBanner | CampaignStory | CampaignWidget | CampaignTooltip | CampaignBottomSheet | CampaignCsat | CampaignSurvey | CampaignModal | BaseCampaign;
 interface InitializationOptions {
     appId: string;
     accountId: string;
@@ -683,6 +801,47 @@ declare const Csat: React.FC;
 
 declare const Survey: React.FC;
 
+declare const Modal: React.FC;
+
+interface TrackableProps {
+    /**
+     * AppStorys target identifier. Exposed to the DOM as `data-as-id` so the
+     * resolver can find it, measure it, and attach tooltips/campaigns to it —
+     * regardless of whether the wrapped component forwards custom props to
+     * its own root DOM node.
+     */
+    id: string;
+    children: React.ReactNode;
+}
+/**
+ * Wraps any child (native element or custom component) in a zero-layout-impact
+ * marker element carrying `data-as-id`. Use this when you can't or don't want
+ * to add `id`/`data-as-id` directly to a component's rendered DOM node, e.g.
+ * a third-party component or one that doesn't spread extra props onto its root:
+ *
+ *   <Trackable id="checkout-button">
+ *     <SomeThirdPartyButton>Checkout</SomeThirdPartyButton>
+ *   </Trackable>
+ */
+declare const Trackable: React.FC<TrackableProps>;
+
+interface VariantDetails {
+    id?: string;
+    name?: string;
+    weight?: number;
+    isControl?: boolean;
+    isActive?: boolean;
+    modal_type?: string;
+    modals?: any[];
+    [key: string]: any;
+}
+type VariantsMap = Record<string, VariantDetails>;
+declare const getVariantId: (campaignId: string) => string | undefined;
+declare function hasVariants(campaign: Campaign | any): boolean;
+declare function selectVariantByWeight(variants: VariantsMap, campaignId?: string): string | undefined;
+declare function resolveCampaignVariant<T extends Campaign>(campaign: T): T;
+declare function getCampaignVariantId(campaign: Campaign): string | undefined;
+
 declare class AppStorys {
     private state;
     private navigateToScreen?;
@@ -712,4 +871,4 @@ declare class AppStorys {
 
 declare const instance: AppStorys;
 
-export { instance as AppStorys, type AppStorysStore, type Attributes, Banner, type BaseCampaign, BottomSheet, type BottomSheetElement, type Campaign, type CampaignBanner, type CampaignBottomSheet, type CampaignCsat, type CampaignStory, type CampaignSurvey, type CampaignTooltip, type CampaignType, type CampaignWidget, type CrossButtonConfig, Csat, type CsatCampaignDetails, type CsatSpacing, type CsatTextStyle, Floater, type InitializationOptions, Pip, SdkState, Story, type StoryGroupStyling, type StorySlide, type StorySlideCta, type StorySlideCtaBorderRadius, type StorySlideCtaContainer, type StorySlideCtaText, type StorySlideStyling, Survey, type SurveyCampaignDetails, type SurveyOptionColors, type SurveyOptionStyle, type SurveySlide, type SurveySlideLogicRule, type SurveyTextStyle, type SurveyThankYouButtonConfig, Tooltip, type TooltipItem, type TooltipStyling, type TriggerEvent, type TriggerEventConfig, type TriggerEventObject, Widget, type WidgetImage, personalizeText };
+export { instance as AppStorys, type AppStorysStore, type Attributes, Banner, type BaseCampaign, BottomSheet, type BottomSheetElement, type Campaign, type CampaignBanner, type CampaignBottomSheet, type CampaignCsat, type CampaignModal, type CampaignStory, type CampaignSurvey, type CampaignTooltip, type CampaignType, type CampaignWidget, type CrossButtonConfig, Csat, type CsatCampaignDetails, type CsatSpacing, type CsatTextStyle, Floater, type InitializationOptions, Modal, type ModalCampaignDetails, type ModalContent, type ModalCtaRedirection, type ModalCtaStyle, type ModalItem, type ModalItemStyling, type ModalMediaType, type ModalTextStyle, Pip, SdkState, Story, type StoryGroupStyling, type StorySlide, type StorySlideCta, type StorySlideCtaBorderRadius, type StorySlideCtaContainer, type StorySlideCtaText, type StorySlideStyling, Survey, type SurveyCampaignDetails, type SurveyOptionColors, type SurveyOptionStyle, type SurveySlide, type SurveySlideLogicRule, type SurveyTextStyle, type SurveyThankYouButtonConfig, Tooltip, type TooltipItem, type TooltipStyling, Trackable, type TrackableProps, type TriggerEvent, type TriggerEventConfig, type TriggerEventObject, type VariantDetails, type VariantsMap, Widget, type WidgetImage, getCampaignVariantId, getVariantId, hasVariants, personalizeText, resolveCampaignVariant, selectVariantByWeight };