@namiml/web-sdk 1.6.3 → 1.7.0

package/dist/services/storage.service.d.ts

@@ -30,8 +30,8 @@ export declare class StorageService {
     setProducts(key: string, products: SKU[]): void;
     getProducts(key: string): SKU[] | null;
     getCachedProducts(): SKU[] | null;
-    setNamiConfig(config: NamiConfiguration): void;
-    getNamiConfig(): NamiConfiguration | null;
+    setNamiConfig(config: Omit<NamiConfiguration, "initialConfig">): void;
+    getNamiConfig(): Omit<NamiConfiguration, "initialConfig"> | null;
     setCustomerAttribute<T>(attribute: string, value: T): void;
     getCustomerAttribute<T>(attribute: string): T | null;
     getAllCustomerAttributes(): string[];

package/dist/services/video.service.d.ts

@@ -1,4 +1,5 @@
 import { NamiPaywallAction } from "../types/externals/paywall";
+import type { PaywallContextProvider } from "../components/ContextProvider";
 export declare class VideoService {
     video: HTMLVideoElement;
     playing: boolean;
@@ -10,11 +11,12 @@ export declare class VideoService {
     videoComponentId: string;
     videoSrc: string;
     toggling: boolean;
-    static instance: VideoService;
-    constructor(video: HTMLVideoElement, name?: string, id?: string);
-    handleVideoEvents: () => void;
-    togglePlayVideo(): void;
-    toggleMuteVideo(): void;
+    static instance: VideoService | null;
+    constructor(contextProvider: PaywallContextProvider, video: HTMLVideoElement, name?: string, id?: string);
+    handleVideoEvents: (contextProvider: PaywallContextProvider) => void;
+    removeVideoEvents: () => void;
+    togglePlayVideo(contextProvider: PaywallContextProvider): void;
+    toggleMuteVideo(contextProvider: PaywallContextProvider): void;
     videoPlayingAction(): NamiPaywallAction.VIDEO_STARTED | NamiPaywallAction.VIDEO_PAUSED | NamiPaywallAction.VIDEO_RESUMED | NamiPaywallAction.VIDEO_ENDED | NamiPaywallAction.UNKNOWN;
-    handlePlayerAnalytics(action?: NamiPaywallAction): void;
+    handlePlayerAnalytics(contextProvider: PaywallContextProvider, action?: NamiPaywallAction): void;
 }

package/dist/types/components/containers.d.ts

@@ -1,14 +1,17 @@
 import { NamiSKU } from "../../types/externals/sku";
 import { TBaseComponent, TComponent, TContainer, TTestObject } from ".";
-import { TConditionalComponent, TImageComponent, TSpacerComponent, TTextComponent, TTextListComponent } from "./elements";
-export type THeaderFooter = (TContainer | TButtonContainer | TSpacerComponent | TTextComponent)[];
+import { TConditionalComponent, TImageComponent, TSpacerComponent, TSymbolComponent, TTextComponent, TTextListComponent } from "./elements";
+export type TVariablePattern = `\${var.${string}}`;
+export type THeaderFooter = (TContainer | TButtonContainer | TSpacerComponent | TTextComponent | TConditionalComponent)[] | null;
 type Button = TBaseComponent & {
     id?: string;
     sku?: NamiSKU;
     url?: string;
-    components: Array<TTextComponent | TTextListComponent | TSpacerComponent | TImageComponent | TContainer | TConditionalComponent>;
+    components: Array<TTextComponent | TTextListComponent | TSpacerComponent | TImageComponent | TContainer | TConditionalComponent | TSymbolComponent>;
     screenreaderText?: string;
     screenreaderHint?: string;
+    text?: string | null;
+    actionTap?: string | null;
 };
 export type TButtonContainer = Button & {
     component: "button";
@@ -44,20 +47,30 @@ export type SKUActionHandler = (sku: NamiSKU) => void;
 export type DeepLinkUrlHandler = (url: string) => void;
 export type CloseHandler = (body?: any) => void;
 export type Callback = () => void;
+type CarouselIndicator = {
+    width: number;
+    height: number;
+    borderRadius: number;
+    fillColor: string;
+    component: "container";
+};
 export type TCarouselContainer = Omit<TContainer, "component"> & {
     component: "carouselContainer";
     indicatorColor: string;
     activeIndicatorColor: string;
     autoplay: boolean;
     autoplaySeconds: number;
-    loopSource?: TCarouselSlide[] | string;
+    loopSource?: string | TCarouselSlide[];
     loopVariable?: string;
-    loopSourceConditions: TTestObject[];
+    loopSourceConditions?: TTestObject[];
     showIndicators?: boolean;
     inactiveSlideScale?: number;
     nextSlidePadding?: number;
     previousSlidePadding?: number;
     slideSpacing?: number;
+    onChange?: UserAction;
+    indicator?: CarouselIndicator;
+    activeIndicator?: CarouselIndicator;
 };
 export type TCarouselSlidesState = {
     [groupId: string]: {
@@ -66,7 +79,7 @@ export type TCarouselSlidesState = {
 };
 export type TCarouselSlide = {
     id: string;
-    title: string;
+    title?: string;
     [slideAttr: string]: any;
 };
 export type TFlexProductContainer = Omit<TContainer, "component"> & {
@@ -107,4 +120,38 @@ export type TResponsiveGrid = TBaseComponent & {
     loopSource?: string;
     loopSourceConditions: TTestObject[];
 };
+export type TToggleSwitch = TBaseComponent & {
+    component: 'toggleSwitch';
+    checked?: boolean;
+    innerPadding?: TVariablePattern | number;
+    activeHandleFillColor?: string;
+    activeHandleBorderColor?: string;
+    activeHandleBorderWidth?: number;
+    activePlateFillColor?: string;
+    activePlateBorderColor?: string;
+    activePlateBorderWidth?: number;
+    activePlateBorderRadius?: number;
+    inactiveHandleFillColor?: string;
+    inactiveHandleBorderColor?: string;
+    inactiveHandleBorderWidth?: number;
+    inactivePlateFillColor?: string;
+    inactivePlateBorderColor?: string;
+    inactivePlateBorderWidth?: number;
+    inactivePlateBorderRadius?: number;
+};
+export type TRadioButton = TBaseComponent & {
+    component: 'radio';
+    components: TComponent[];
+    active?: boolean;
+    innerPadding?: TVariablePattern | number;
+    activeFillColor?: string;
+    activeBorderColor?: string;
+    activeBorderWidth?: number;
+    activeDropShadow?: string;
+    inactiveFillColor?: string;
+    inactiveBorderColor?: string;
+    inactiveBorderWidth?: number;
+    inactiveDropShadow?: string;
+    sku?: NamiSKU;
+};
 export {};

package/dist/types/components/elements.d.ts

@@ -75,7 +75,7 @@ export type TVideoComponent = TBaseComponent & {
     imageCropping?: "fill" | "fit";
     autoplayVideo?: boolean;
     controlsType?: string;
-    fallbackImage?: string;
+    fallbackImage?: string | null;
     loopVideo?: boolean;
     mute?: boolean;
     screenreaderText?: string;

package/dist/types/components/index.d.ts

@@ -1,4 +1,4 @@
-import { TButtonContainer, TCarouselContainer, TCarouselSlide, TCollapseContainer, TFlexProductContainer, TPlayPauseButton, TProductContainer, TResponsiveGrid, TStack, TVolumeButton, UserAction } from "./containers";
+import { TButtonContainer, TCarouselContainer, TCarouselSlide, TCollapseContainer, TFlexProductContainer, TPlayPauseButton, TProductContainer, TRadioButton, TResponsiveGrid, TStack, TToggleSwitch, TVolumeButton, UserAction } from "./containers";
 import { TConditionalComponent, TImageComponent, TQRCodeComponent, TSegmentPicker, TSegmentPickerItem, TSpacerComponent, TSvgImageComponent, TSymbolComponent, TTextComponent, TTextListComponent, TVideoComponent } from "./elements";
 export interface TBaseComponent {
     id?: string;
@@ -46,6 +46,7 @@ export interface TBaseComponent {
     width?: number | string;
     dropShadow?: string;
     onTap?: UserAction;
+    actionTap?: string;
     refId?: string;
     _fields?: {
         [attribute: string]: TFieldSettings;
@@ -68,7 +69,7 @@ export interface TBaseComponent {
     fixedWidth?: number | "fitContent";
     hidden?: boolean;
 }
-export type TComponent = TButtonContainer | TContainer | TTextListComponent | TTextComponent | TSpacerComponent | TImageComponent | TSvgImageComponent | TSymbolComponent | TCarouselContainer | TProductContainer | TFlexProductContainer | TStack | TConditionalComponent | TSegmentPicker | TSegmentPickerItem | TVideoComponent | TCollapseContainer | TResponsiveGrid | TVolumeButton | TPlayPauseButton | TQRCodeComponent;
+export type TComponent = TButtonContainer | TContainer | TTextListComponent | TTextComponent | TSpacerComponent | TImageComponent | TSvgImageComponent | TSymbolComponent | TCarouselContainer | TProductContainer | TFlexProductContainer | TStack | TConditionalComponent | TSegmentPicker | TSegmentPickerItem | TVideoComponent | TCollapseContainer | TResponsiveGrid | TVolumeButton | TPlayPauseButton | TQRCodeComponent | TToggleSwitch | TRadioButton;
 export type DirectionType = "vertical" | "horizontal";
 export type AlignmentType = "center" | "right" | "left" | "top" | "bottom";
 export type BorderLocationType = "upperLeft" | "upperRight" | "lowerLeft" | "lowerRight";
@@ -79,7 +80,7 @@ export declare const BorderSideMap: Record<BorderSideType, string>;
 export type TTestObject = {
     value: any;
     expected: any;
-    operator: "equals" | "contains" | "notEquals" | "set" | "notSet" | "notContains";
+    operator: "equals" | "contains" | "notEquals" | "set" | "notSet" | "notContains" | 'gt' | 'lt' | 'gte' | 'lte';
 };
 type TransformToString<T> = {
     [P in keyof T]: T[P] extends number | boolean ? T[P] | string : T[P];
@@ -92,17 +93,19 @@ export type TConditionalAttributes = Array<Omit<TConditionalComponent, "componen
         url?: string;
         fontSize?: number;
         screenreaderText?: string;
+        fontColor?: string;
+        linkColor?: string;
     };
 }>;
 export type TField = "image" | "listContainerComponent" | "text" | "url" | "textArea" | "fontSelect" | "splitTextArea" | "color" | "colorGradient" | "number" | "alignment" | "carouselSlides" | "option" | "iconSelect" | "toggle";
 export type TContainer = TBaseComponent & {
-    component: "container";
+    component: "container" | "formContainer";
     position?: TContainerPosition;
     fillColor?: string;
     fillImage?: string | null;
     components?: TComponent[];
     loopVariable?: string;
-    loopSource?: any[];
+    loopSource?: string | any[];
     backgroundBlur?: number | null;
 };
 export type TFieldSettings = {

package/dist/types/conditions.d.ts

@@ -1,16 +1,18 @@
-export declare enum LogicalOperator {
-    NONE = "none",
-    AND = "and",
-    OR = "or"
-}
-export declare enum FilterOperator {
-    I_CONTAINS = "i_contains",
-    EQUALS = "equals",
-    I_EQUALS = "i_equals",
-    NOT_EQUALS = "not_equals",
-    NOT_I_EQUALS = "not_i_equals",
-    NOT_CONTAINS = "not_contains"
-}
+export declare const LogicalOperator: {
+    readonly NONE: "none";
+    readonly AND: "and";
+    readonly OR: "or";
+};
+export type LogicalOperator = (typeof LogicalOperator)[keyof typeof LogicalOperator];
+export declare const FilterOperator: {
+    readonly I_CONTAINS: "i_contains";
+    readonly EQUALS: "equals";
+    readonly I_EQUALS: "i_equals";
+    readonly NOT_EQUALS: "not_equals";
+    readonly NOT_I_EQUALS: "not_i_equals";
+    readonly NOT_CONTAINS: "not_contains";
+};
+export type FilterOperator = (typeof FilterOperator)[keyof typeof FilterOperator];
 export interface NamiConditionFilter {
     identifier: string;
     operator: FilterOperator;
@@ -18,5 +20,5 @@ export interface NamiConditionFilter {
 }
 export interface NamiConditions {
     filter?: NamiConditionFilter[];
-    operatorType: `${LogicalOperator}`;
+    operator?: LogicalOperator;
 }

package/dist/types/externals/product.d.ts

@@ -13,7 +13,7 @@ export interface NamiProductDetails {
 }
 export type NamiProductOffer = NamiOfferPrice & {
     offer_ref_id?: string;
-    offer_type: 'promo' | 'default';
+    offer_type: 'promo' | 'default' | (string & {});
     promo_period?: NamiOfferPeriod;
     promo_price?: NamiOfferPrice;
 };
@@ -22,7 +22,7 @@ type NamiOfferPrice = {
     currency: string;
 };
 type NamiOfferPeriod = NamiSubscriptionPeriod;
-export type NamiSubscriptionInterval = 'day' | 'week' | 'month' | 'year' | 'unknown';
+export type NamiSubscriptionInterval = 'day' | 'week' | 'month' | 'year' | 'unknown' | (string & {});
 export type NamiSubscriptionPeriod = {
     type: NamiSubscriptionInterval;
     count: number;

package/dist/types/flow.d.ts

@@ -1,12 +1,13 @@
 import type { NamiConditions } from "./conditions";
 import { FormFactor } from "./campaign";
-export declare enum NamiFlowStepType {
-    ENTRY = "entry",
-    SCREEN = "screen",
-    BRANCH = "branch",
-    EXIT = "exit",
-    UNKNOWN = "unknown"
-}
+export declare const NamiFlowStepType: {
+    readonly ENTRY: "entry";
+    readonly SCREEN: "screen";
+    readonly BRANCH: "branch";
+    readonly EXIT: "exit";
+    readonly UNKNOWN: "unknown";
+};
+export type NamiFlowStepType = (typeof NamiFlowStepType)[keyof typeof NamiFlowStepType];
 export declare enum NamiFlowActionFunction {
     NAVIGATE = "flowNav",
     BACK = "flowPrev",
@@ -41,6 +42,7 @@ export interface NamiFlowObjectDTO {
     form_factors?: FormFactor[];
     version?: string;
     steps?: NamiFlowStep[];
+    transition?: NamiFlowTransition;
 }
 type SetVideoAction = {
     name?: string;
@@ -56,6 +58,7 @@ export interface NamiFlowAction {
         step?: string;
         eventName?: string;
         delay?: string | number;
+        [key: string]: any;
     } & SetVideoAction;
     conditions?: NamiConditions[];
 }
@@ -73,4 +76,24 @@ export interface NamiFlowStep {
     actions: Partial<Record<string, NamiFlowOn[]>>;
     allow_back_to?: boolean;
 }
+export type NamiFlowTransition = 'none' | 'slide' | 'verticalSlide' | 'fade';
+export type NamiFlowTransitionDirection = 'forward' | 'backward';
+export interface NamiFlowAnimation {
+    transition: NamiFlowTransition;
+    direction: NamiFlowTransitionDirection;
+}
+export declare const NamiReservedActions: {
+    readonly BUY_SKU: "__buy_sku__";
+    readonly DEFAULT: "__default__";
+    readonly APPEAR: "__appear__";
+    readonly DISAPPEAR: "__disappear__";
+    readonly LOGIN_SUCCESS: "__login_success__";
+    readonly LOGIN_FAILURE: "__login_failure__";
+    readonly LOGOUT_SUCCESS: "__logout_success__";
+    readonly LOGOUT_FAILURE: "__logout_failure__";
+    readonly PURCHASE_SUCCESS: "__purchase_success__";
+    readonly PURCHASE_FAILURE: "__purchase_failure__";
+    readonly RESUME: "__resume__";
+    readonly REMOTE_BACK: "__remoteback__";
+};
 export {};

package/dist/types/paywall.d.ts

@@ -1,7 +1,6 @@
 import { NamiCampaign } from "./externals/campaign";
 import { TComponent, TContainer } from "./components";
-import { TButtonContainer, TCarouselSlidesState } from "./components/containers";
-import { TSpacerComponent, TTextComponent } from "./components/elements";
+import { TCarouselSlidesState, THeaderFooter } from "./components/containers";
 import { TDeviceOrientation } from "./device";
 import { PaywallSKU } from "./sku";
 import { NamiPurchase } from "./externals/purchase";
@@ -53,7 +52,7 @@ export type TPaywallContext = TInitialState & {
     timeSpentOnPaywall?: number;
     userInteractionEnabled?: boolean;
 };
-export type TPaywallLaunchContext = NamiPaywallLaunchContext;
+export type TPaywallLaunchContext = Required<NamiPaywallLaunchContext>;
 export type ProductGroup = {
     id: string;
     products: PaywallSKU[];
@@ -96,7 +95,7 @@ export type FontDetails = {
 export type TPaywallTemplate = {
     id: string;
     orgs?: string | null;
-    org_id: string | null;
+    org_id?: string | null;
     changelog?: string;
     userHasAccess?: boolean;
     media?: {
@@ -120,9 +119,9 @@ export type TPaywallTemplate = {
 };
 export type TPages = {
     name: string;
-    header: Array<TButtonContainer | TSpacerComponent | TTextComponent | TContainer>;
+    header: THeaderFooter;
     contentContainer: TContainer | null;
-    footer: TComponent[] | null;
+    footer: THeaderFooter;
     backgroundContainer: TContainer | null;
 };
 export type TInitialState = {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@namiml/web-sdk",
   "type": "module",
-  "version": "1.6.3",
+  "version": "1.7.0",
   "source": "src/nami-web.ts",
   "description": "Nami Web SDK makes subscriptions & in-app purchases easy, with powerful built-in paywalls and A/B testing",
   "scripts": {
@@ -9,8 +9,10 @@
     "test": "yarn clear-test-cache && TZ=UTC jest --coverage -i --forceExit",
     "build-sdk": "rm -rf dist && rollup -c",
     "watch": "microbundle --tsconfig tsconfig.dev.json --output ./dist/nami-web.mjs --watch --no-compress --format modern --define NAMI_SDK_ENV='development'",
-    "build:dev": "yarn build-sdk --environment NAMI_SDK_ENV:development",
-    "build:prod": "yarn build-sdk --environment NAMI_SDK_ENV:production",
+    "dev": "NAMI_SDK_ENV=development rollup -c -w",
+    "build": "NAMI_SDK_ENV=production rollup -c",
+    "build:dev": "NAMI_SDK_ENV=development rollup -c",
+    "build:prod": "NAMI_SDK_ENV=production rollup -c",
     "react-dev": "yarn build:dev && yarn copy-react && cd examples/react-demo && yarn start",
     "react-prod": "yarn build:dev && yarn copy-react && cd examples/react-demo && yarn start",
     "vue-dev": "yarn build:dev && yarn copy-vue && cd examples/vue-demo && yarn serve",
@@ -21,15 +23,18 @@
     "copy-lit": "cd examples/lit && rm -rf nami-dist && mkdir nami-dist && cp -r ../../dist/nami-web.mjs nami-dist/",
     "copy-vue": "cd examples/vue-demo && rm -rf nami-dist && mkdir nami-dist && cp -r ../../dist/nami-web.* nami-dist/"
   },
+  "main": "./dist/nami-web.cjs",
+  "module": "./dist/nami-web.mjs",
+  "types": "dist/nami-web.d.ts",
   "exports": {
-    "require": "./dist/nami-web.cjs",
-    "import": "./dist/nami-web.mjs",
-    "default": "./dist/nami-web.js"
+    ".": {
+      "types": "./dist/nami-web.d.ts",
+      "import": "./dist/nami-web.mjs",
+      "require": "./dist/nami-web.cjs",
+      "umd": "./dist/nami-web.umd.js",
+      "default": "./dist/nami-web.mjs"
+    }
   },
-  "main": "dist/nami-web.cjs",
-  "module": "dist/nami-web.js",
-  "unpkg": "dist/nami-web.umd.js",
-  "types": "dist/nami-web.d.ts",
   "files": [
     "dist",
     "CHANGELOG.md"
@@ -83,11 +88,12 @@
     "wrangler": "^3.66.0"
   },
   "dependencies": {
-    "@lit-labs/ssr-dom-shim": "^1.2.0",
+    "@lit-labs/ssr-dom-shim": "^1.4.0",
+    "@lit/context": "^1.1.6",
     "bowser": "^2.11.0",
-    "date-fns-tz": "^3.1.3",
+    "date-fns-tz": "^3.2.0",
     "hls.js": "^1.5.15",
-    "lit": "^3.1.3",
+    "lit": "^3.3.1",
     "lodash-es": "^4.17.21",
     "marked": "^12.0.2",
     "pako": "^2.1.0",