@namiml/web-sdk 1.2.0 → 1.3.1

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # Changelog
 
+## 1.3.1 (August 12, 2024)
+
+### Bug Fixes
+  - `SHOW_PAYWALL` event action is being triggered as `UNKNOWN`
+
+## 1.3.0 (August 12, 2024)
+
+### New Features
+- **NamiEntitlementManager** - Implemented `NamiEntitlementManager` for Nami to manage entitlements.
+- **NamiEntitlementManager.active** - Retrieve all active entitlements for a user on the current device.
+- **NamiEntitlementManager.isEntitlementActive** - Check if a single entitlement is currently active.
+- **NamiEntitlementManager.refresh** - Manually trigger a refresh of the user's latest active entitlements from the Nami services.
+- **NamiEntitlementManager.registerActiveEntitlementsHandler** - Register a callback to react to a potential changes to the active entitlements for the user
+- **NamiEntitlement** - Object that contains data about an entitlement on the Nami Platform.
+- **Support hidden components** - Hide components without removing them from your paywalls.
+- **New components** - Video and collapsable components.
+- **Improved timeout and error handling**
+
+### Bug Fixes
+- Provide consistent typing with other Nami SDKs.
+- Updated the JavaScript version to ECMAScript2021 for better backward compatability.
+
+### Breaking changes
+- `NamiConfiguration`'s `appPlatformId` is now `appPlatformID` for consistentcy with other Nami SDKs
+- `NamiPaywallManager.buySkuComplete` has a much simpler (but modified) interface.
+
 ## 1.2.0 (July 26, 2024)
 
 ### New Features

package/dist/components/ContextProvider.d.ts

@@ -1,7 +1,9 @@
 import { ReactiveController, ReactiveControllerHost } from 'lit';
-import { IPaywall, TPaywallContext, TPaywallLaunchContext, TPaywallMedia } from 'src/types/paywall';
-import { NamiProductDetails } from 'src/types/products';
-import { NamiSKU } from 'src/types/sku';
+import { IPaywall, NamiAppSuppliedVideoDetails, TPaywallContext, TPaywallLaunchContext, TPaywallMedia } from 'src/types/paywall';
+import { NamiProductDetails } from 'src/types/externals/product';
+import { NamiSKU } from 'src/types/externals/sku';
+import { NamiCampaign } from 'src/types/externals/campaign';
+import { TDevice } from 'src/types/device';
 export declare const initialState: TPaywallContext;
 type Callback = () => void;
 declare class ContextProvider implements ReactiveController {
@@ -25,7 +27,9 @@ declare class ContextProvider implements ReactiveController {
     selectedProducts(): {
         [currentGroupId: string]: string;
     };
-    setPaywall(paywall: IPaywall, context?: TPaywallLaunchContext): void;
+    setPaywall(paywall: IPaywall, context?: TPaywallLaunchContext, campaign?: NamiCampaign): void;
+    getSelectedPaywall(): IPaywall | undefined;
+    getSelectedCampaign(): NamiCampaign | undefined;
     paywallId(): string;
     setCurrentPage(page: string): void;
     setCustomerAttribute(attributes: {
@@ -36,10 +40,14 @@ declare class ContextProvider implements ReactiveController {
     setMediaList(media: TPaywallMedia[]): void;
     setSafeAreaTop(safeAreaTop: number): void;
     setFullScreenPresentation(fullScreenPresentation: boolean): void;
-    setFormFactor(formFactor: string): void;
+    setFormFactor(formFactor: TDevice): void;
+    getFormFactor(): TDevice;
     setPurchaseInProgress(inProgress: boolean): void;
     setPurchase(inProgress: boolean, product?: NamiSKU): void;
     setTimeSpentOnPaywall(time: number): void;
+    setAppSuppliedVideoDetails({ url, name }: NamiAppSuppliedVideoDetails): void;
+    resetAppSuppliedVideoDetails(): void;
+    setLaunchDetails(value: string, type?: string): void;
 }
 declare const contextProvider: ContextProvider;
 export default contextProvider;

package/dist/components/Paywall.d.ts

@@ -1,15 +1,18 @@
-import { IPaywall, NamiPaywallEvent, TPaywallLaunchContext } from 'src/types/paywall';
+import { IPaywall, TPaywallLaunchContext } from 'src/types/paywall';
 import { TDevice } from 'src/types/device';
 import { NamiElement } from './NamiElement';
 import { TemplateResult } from 'lit';
-import { CampaignRule } from 'src/types/campaign';
+import { NamiCampaign } from 'src/types/externals/campaign';
+import { NamiPaywallEvent } from 'src/types/externals/paywall';
 declare class PaywallComponent extends NamiElement {
-    private formFactor;
-    private campaign;
-    private paywall;
-    private paywallEvent;
-    constructor(paywall: IPaywall, formFactor: TDevice, event: Partial<NamiPaywallEvent>, campaign?: CampaignRule, context?: TPaywallLaunchContext);
+    formFactor: TDevice;
+    campaign: NamiCampaign;
+    paywall: IPaywall;
+    paywallEvent: Partial<NamiPaywallEvent>;
+    constructor(paywall: IPaywall, event: Partial<NamiPaywallEvent>, campaign?: NamiCampaign, context?: TPaywallLaunchContext);
+    setPaywallData(paywall: IPaywall, campaign: NamiCampaign): void;
     firstUpdated(): void;
+    private postImpression;
     private getTemplate;
     styles(): import("lit").CSSResult;
     render(): TemplateResult;

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

@@ -0,0 +1,12 @@
+import { CSSResult } from 'lit';
+import { NamiElement } from '../NamiElement';
+import { TCollapseContainer } from 'src/types/components/containers';
+export declare class NamiCollapseContainer extends NamiElement {
+    component: TCollapseContainer;
+    inFocusedState: boolean;
+    height: number;
+    constructor();
+    private _handleClick;
+    protected styles(): CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+}

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

@@ -4,7 +4,9 @@ import { TProductContainer } from 'src/types/components/containers';
 export declare class NamiProductContainer extends NamiElement {
     component: TProductContainer;
     inFocusedState: boolean;
+    private currentGroupId;
     protected styles(): CSSResult;
+    updated(): void;
     private _offerState;
     render(): any[][];
 }

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

@@ -7,5 +7,5 @@ export declare class NamiSegmentPicker extends NamiElement {
     constructor();
     private _handleClick;
     protected styles(): CSSResult;
-    render(): any[];
+    render(): import("lit-html").TemplateResult<1>;
 }

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

@@ -7,9 +7,6 @@ export declare class NamiSegmentPickerItem extends NamiElement {
     constructor();
     private _handleClick;
     private _handleHover;
-    private getComponentStyles;
-    private formatKey;
-    private applyStyles;
     protected styles(): CSSResult;
     render(): import("lit-html").TemplateResult<1>;
 }

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

@@ -0,0 +1,10 @@
+import { TVideoComponent } from "src/types/components/elements";
+import { NamiElement } from "../NamiElement";
+import { CSSResult, TemplateResult } from "lit";
+export declare class NamiVideo extends NamiElement {
+    component: TVideoComponent;
+    inFocusedState: boolean;
+    protected styles(): CSSResult;
+    updated(): void;
+    protected render(): TemplateResult;
+}

package/dist/components/index.d.ts

@@ -10,6 +10,8 @@ import { NamiBackgroundContainer } from "./containers/BackgroundContainer";
 import { NamiContentContainer } from "./containers/Content";
 import { NamiSegmentPicker } from "./elements/SegmentPicker";
 import { NamiSegmentPickerItem } from "./elements/SegmentPickerItem";
+import { NamiVideo } from "./elements/Video";
+import { NamiCollapseContainer } from "./containers/CollapseContainer";
 declare global {
     interface HTMLElementTagNameMap {
         "nami-spacer": NamiSpacer;
@@ -25,6 +27,8 @@ declare global {
         "nami-background-container": NamiBackgroundContainer;
         "nami-content-container": NamiContentContainer;
         "nami-symbol": NamiSymbol;
+        "nami-video": NamiVideo;
+        "nami-collapse-container": NamiCollapseContainer;
     }
 }
-export { NamiSpacer, NamiButton, NamiHeader, NamiFooter, NamiText, NamiSegmentPicker, NamiSegmentPickerItem, NamiContainer, NamiProductContainer, NamiImage, NamiBackgroundContainer, NamiContentContainer, NamiSymbol };
+export { NamiSpacer, NamiButton, NamiHeader, NamiFooter, NamiText, NamiSegmentPicker, NamiSegmentPickerItem, NamiContainer, NamiProductContainer, NamiImage, NamiBackgroundContainer, NamiContentContainer, NamiSymbol, NamiVideo, NamiCollapseContainer };

package/dist/components/productDetails.d.ts

@@ -1,3 +1,3 @@
-import { NamiProductDetails } from "src/types/products";
+import { NamiProductDetails } from "src/types/externals/product";
 import { PaywallSKU } from "src/types/sku";
 export declare const getProductDetail: (variableName: string, product?: NamiProductDetails | null, referenceId?: string, skus?: PaywallSKU[]) => unknown;

package/dist/components/utils/actionTap.d.ts

@@ -1,5 +1,5 @@
 import { UserAction } from "src/types/components/containers";
-import { NamiSKU } from "src/types/sku";
+import { NamiSKU } from "src/types/externals/sku";
 export declare const handleAction: (onTap?: UserAction, sku?: NamiSKU) => void;
 export declare const closePaywallHandler: () => void;
 export declare const restorePurchase: () => void;

package/dist/components/utils/impression.d.ts

@@ -1,4 +1,4 @@
 import { Impression } from "src/types/api";
 import { TransactionRequest } from "src/types/purchase";
 export declare const postImpression: (options: Impression) => Promise<void>;
-export declare const postConversion: (transactionInfo?: TransactionRequest) => Promise<void>;
+export declare const postConversion: (transactionInfo: TransactionRequest) => Promise<void>;

package/dist/components/utils/products.d.ts

@@ -1,4 +1,5 @@
-import { NamiProductDetails, NamiProductOffer, NamiSubscriptionPeriod, PricingPhase } from "src/types/products";
+import { NamiProductDetails, NamiProductOffer, NamiSubscriptionPeriod } from "src/types/externals/product";
+import { PricingPhase } from "src/types/products";
 import { PaywallSKU } from "src/types/sku";
 export declare function getStandardBillingPeriod(product: NamiProductDetails): string | undefined;
 export declare function getFreeTrialPeriod(product: NamiProductDetails): string | undefined;

package/dist/components/utils/state.d.ts

@@ -1,5 +1,5 @@
 import { ISkuMenu, TInitialState } from "src/types/paywall";
-import { NamiProductDetails } from "src/types/products";
+import { NamiProductDetails } from "src/types/externals/product";
 import { PaywallSKU } from "src/types/sku";
 export declare function currentSku(productDetails: NamiProductDetails[], initialState: TInitialState, skuMenus: ISkuMenu[], skus: PaywallSKU[]): {
     [key: string]: any;

package/dist/components/utils/styles.d.ts

@@ -1,5 +1,5 @@
 import { TBaseComponent, TContainerPosition } from "src/types/components";
-import { TTextLikeComponent } from "src/types/components/elements";
+import { TSegmentPickerItem, TTextLikeComponent } from "src/types/components/elements";
 export declare function parseSize(value: string | number): string;
 export declare function backgroundColor(value: string): string;
 export declare function pickAndApplyBackgroundColor(component: TBaseComponent, inFocusedState?: boolean): string;
@@ -19,3 +19,7 @@ export declare function textStrikethrough(value: boolean | undefined): string;
 export declare function font({ fontName }: TTextLikeComponent): string;
 export declare function applyStyles(component: TBaseComponent, inFocusedState?: boolean): string;
 export declare function parsePosition(position?: TContainerPosition): string;
+export declare function getComponentStyles(prefix: string, component: TSegmentPickerItem): TSegmentPickerItem;
+export declare function formatKey(key: string, prefix: string): string;
+export declare function applySegmentStyles(styles: any, inFocusedState: boolean): string;
+export declare function appySegmentFontStyles(styles: any): string;

package/dist/core/withRetry.d.ts

@@ -1 +1,2 @@
-export declare function withRetry<T>(url: string, options?: RequestInit, retries?: number): Promise<T>;
+export declare function withRetry<T>(url: string, options?: RequestInit, timeout?: number, retries?: number): Promise<T>;
+export declare function timeoutRequest(url: string, options: RequestInit | undefined, timeout: number): Promise<Response>;

package/dist/nami/api.d.ts

@@ -16,5 +16,4 @@ export declare class NamiAPI {
     purchaseValidation(options: PurchaseValidationRequest): Promise<void>;
     fetchAPI<T>(path: string): Promise<T>;
     requestBodyAPI<T, U>(path: string, bodyData: T, method?: string, keepalive?: boolean, timeout?: number): Promise<U>;
-    timeoutRequest<T>(url: string, options: RequestInit, timeout: number): Promise<T>;
 }

package/dist/nami/campaign.d.ts

@@ -1,36 +1,27 @@
-import { AvailableCampaignsResponseHandler, CampaignRule } from "src/types/campaign";
-import { NamiPaywallActionHandler, TPaywallLaunchContext, PaywallResultHandler } from "src/types/paywall";
+import { AvailableCampaignsResponseHandler } from "src/types/campaign";
+import { TPaywallLaunchContext, PaywallResultHandler } from "src/types/paywall";
 import { PaywallComponent } from "src/components/Paywall";
 import { Callback } from "src/types/components/containers";
+import { NamiPaywallActionHandler } from "src/types/externals/paywall";
+import { NamiCampaign } from "src/types/externals/campaign";
 export declare class NamiCampaignManager {
     static instance: NamiCampaignManager;
     private emitter;
-    static allCampaigns(): CampaignRule[];
+    static allCampaigns(): NamiCampaign[];
     /**
-     * Checks if a campaign is available for a given label.
+     * Checks if a campaign is available for a given argument.
+     * The argument can be a label string, or a deeplink URL.
      *
-     * @param label - The label of the campaign to check.
+     * @param label - The argument to check. Can be a label string, or a deeplink URL.
      * @returns True if the campaign is available, false otherwise.
      */
     static isCampaignAvailable(label: string): boolean;
     /**
-     * Checks if a campaign is available for a given URL.
+     * Asks Nami to fetch the latest active campaigns for this device
      *
-     * @param url - The deeplink URL of the campaign to check.
-     * @returns True if the campaign is available, false otherwise.
-     */
-    static isCampaignAvailable(url: URL): boolean;
-    /**
-     * Checks if a campaign is available for a given type and value.
-     *
-     * @param params - An object containing the type and value of the campaign to check.
-     * @returns True if the campaign is available, false otherwise.
+     * @returns list of campaigns
      */
-    static isCampaignAvailable(params: {
-        type?: string;
-        value: string;
-    }): boolean;
-    static refresh(): Promise<CampaignRule[]>;
+    static refresh(): Promise<NamiCampaign[]>;
     static registerAvailableCampaignsHandler(handler: AvailableCampaignsResponseHandler): Callback;
     /**
      * Launches a campaign with a given label.

package/dist/nami/entitlement.d.ts

@@ -0,0 +1,29 @@
+import { NamiActiveEntitlementsHandler, NamiEntitlement } from "src/types/entitlements";
+import { Callback } from "src/types/components/containers";
+export declare class NamiEntitlementManager {
+    static instance: NamiEntitlementManager;
+    private emitter;
+    /**
+     * @returns list of currently active entitlements
+     */
+    static active(): NamiEntitlement[];
+    /**
+     * Checks if a Nami Control Center defined Entitlement has at least one backing purchase
+     * and it's not expired.
+     *
+     * @param referenceId - entitlement referenceId
+     * @returns True if the entitlement is active for given referenceId, false otherwise.
+     */
+    static isEntitlementActive(referenceId: string): boolean;
+    /**
+     * Asks Nami to fetch the latest active entitlements
+     *
+     * @returns list of NamiEntitlement
+     */
+    static refresh(): Promise<NamiEntitlement[]>;
+    static registerActiveEntitlementsHandler(handler: NamiActiveEntitlementsHandler): Callback | undefined;
+    /**
+     * Private Instance Methods
+     */
+    private get sdkInitialized();
+}

package/dist/nami/namiRefs.d.ts

@@ -4,4 +4,5 @@ export declare class NamiRefs {
     init(config: NamiConfiguration): Promise<void>;
     private setInitialValues;
     private initAndFetchRequiredData;
+    private reRenderPaywall;
 }

package/dist/nami/paywalls.d.ts

@@ -1,7 +1,7 @@
 import { IPaywall } from "src/types/paywall";
-import { NamiProductDetails } from "src/types/products";
+import { NamiProductDetails } from "src/types/externals/product";
 import { Callback } from "src/types/components/containers";
-import { Purchase } from "src/types/purchase";
+import { NamiPurchaseDetails } from "src/types/externals/purchase";
 export declare class NamiPaywallManager {
     static instance: NamiPaywallManager;
     private emitter;
@@ -18,12 +18,18 @@ export declare class NamiPaywallManager {
       * [NamiBuySkuHandler] is complete. Only available for plans where Nami is
       * not handling subscription & IAP management.
       */
-    static buySkuComplete(purchase: Purchase): Promise<void>;
+    static buySkuComplete(purchase: NamiPurchaseDetails): Promise<void>;
     /**
        Notify the NamiPaywallManager that purchase flow handled by you is cancelled.
        Used to disable product purchase-in-progress loading indicators
     */
     static buySkuCancel(): void;
+    /**
+      * Set the video details for the app supplied video
+      * @param url The URL of the video
+      * @param name The name of the video
+      */
+    static setAppSuppliedVideoDetails(url: string, name?: string): void;
     /**
      * Private Instance Methods
      */

package/dist/nami/purchase.d.ts

@@ -0,0 +1,5 @@
+import { NamiPurchase } from "src/types/externals/purchase";
+export declare class NamiPurchaseManager {
+    static instance: NamiPurchaseManager;
+    static allPurchases(): NamiPurchase[];
+}

package/dist/nami/utils/campaign.d.ts

@@ -0,0 +1,8 @@
+import { NamiCampaign } from "src/types/externals/campaign";
+import { IPaywall } from "src/types/paywall";
+export declare const isValidUrl: (label: string) => boolean;
+export declare const allCampaigns: () => NamiCampaign[];
+export declare const getPaywallDataFromLabel: (value: string, type?: string) => {
+    campaign: NamiCampaign | undefined;
+    paywall: IPaywall | undefined;
+};

package/dist/nami/utils/entitlement.d.ts

@@ -0,0 +1,55 @@
+import { IEntitlements, NamiEntitlement } from "src/types/entitlements";
+import { NamiPurchase } from "src/types/externals/purchase";
+import { PaywallSKU, SKU } from "src/types/sku";
+import { NamiSKU } from "src/types/externals/sku";
+export declare class EntitlementUtils {
+    static instance: EntitlementUtils;
+    refIdToPurchasedSKUs: {
+        [key: string]: NamiSKU[];
+    };
+    refIdToRelatedSKUs: {
+        [key: string]: NamiSKU[];
+    };
+    refIdToActivePurchases: {
+        [key: string]: NamiPurchase[];
+    };
+}
+export declare const toNamiEntitlements: (entitlement: IEntitlements) => NamiEntitlement;
+export declare const setActiveNamiEntitlements: (entitlements: NamiEntitlement[]) => void;
+export declare const activeEntitlements: () => NamiEntitlement[];
+export declare const invokeHandler: () => void;
+export declare const getEntitlementRefIdsForSku: (purchasedSkuId: string) => string[];
+/**
+ * Populate a list of [NamiEntitlement] from the entitlements that have been provided by the
+ * app config. Also clears any previous list of [NamiEntitlement] from cache
+ */
+export declare const createNamiEntitlements: (entitlements?: IEntitlements[]) => NamiEntitlement[];
+/**
+ * For namiPurchase instance, it will have a purchasedSKU that will back the activation of
+ * the entitlement.
+ *
+ * The purchaseSku (pSKU) can then be used to retrieve all entitlements activated by that pSKU
+ *
+ * The entitlement will then be inspected to see if pSKU has yet to be tracked by that
+ * entitlement. If it has not, then it will be added.
+ *
+ * The entitlement will then be inspected to see if there any active purchases that match
+ * the NamiSKU. If there isn't any, then the NamiPurchase is then added to the
+ * entitlement's list of active purchases
+ */
+export declare const applyEntitlementActivation: (namiPurchase: NamiPurchase) => string[];
+/**
+   * Using the Nami Purchase object, look up the corresponding NamiSKU
+   * and set the NamiEntitlement associated to NamiSKU as an active entitlement
+   *
+   * @return List of strings where each string is a reference Id of an entitlement
+   * that was just successfully activated
+   */
+export declare const activateEntitlementByPurchase: (purchase: NamiPurchase) => string[];
+export declare const skuMapFromEntitlements: (entitlements?: IEntitlements[]) => {
+    [key: string]: NamiSKU[];
+};
+export declare const updateRelatedSKUsForNamiEntitlement: (entitlementRefId: string, entitlementRefIdToNamiSkus: {
+    [key: string]: NamiSKU[];
+}) => void;
+export declare function toNamiSKU(sku: PaywallSKU | SKU): NamiSKU;

package/dist/nami/utils/paywall.d.ts

@@ -0,0 +1,2 @@
+import { IPaywall } from "src/types/paywall";
+export declare const allPaywalls: () => IPaywall[];

package/dist/nami/utils/purchase.d.ts

@@ -1,3 +1,4 @@
-import { NamiPurchase, Purchase, TransactionRequest } from "src/types/purchase";
-export declare function toNamiPurchase(purchase: Purchase): NamiPurchase;
-export declare function getTransactionInfo(purchase?: NamiPurchase): TransactionRequest | undefined;
+import { NamiPurchaseCompleteResult } from "src/types/purchase";
+import { NamiPurchaseDetails, NamiPurchase } from "src/types/externals/purchase";
+export declare function toNamiPurchase(purchase: NamiPurchaseDetails): NamiPurchase;
+export declare function namiBuySKU(skuRefId: string): NamiPurchaseCompleteResult | undefined;