@nosto/nosto-react 0.4.3 → 1.0.0

package/dist/index.d.ts

@@ -0,0 +1,1201 @@
+import { Context } from 'react';
+import { default as default_2 } from 'react';
+import { JSX as JSX_2 } from 'react/jsx-runtime';
+
+/**
+ * @group Types
+ */
+declare interface Action {
+    /**
+     * Handles click attribution for product recommendations.
+     * This can be called when reporting a product view
+     * to signal that the view is a result of a click on a recommendation.
+     *
+     * @public
+     * @param {String} productId currently viewed product's product id
+     * @param {String} reference value of result_id from the recommendation response that was clicked
+     * @return {Action}
+     */
+    setRef(productId: string, reference: string): Action;
+    /**
+     * Allows you to provide an additional recommender hint that a product is being
+     * viewed.
+     * <br/><br/>
+     * You must invoke [the load method]{@link Action#load} on the resultant
+     * action in order for the request to be made.
+     *
+     * @public
+     * @param {String} product the identifier of the product being viewed
+     * @return {Action} the instance of the action
+     */
+    setProduct(product: string | Product): Action;
+    /**
+     * @deprecated
+     * @param {Array<String>} products
+     * @return {Action}
+     */
+    setProducts(products: (string | Product)[]): Action;
+    /**
+     * Sets the information about the user's current shopping cart. It the user
+     * does not have any items in his shopping cart, you can pass <code>null<code>.
+     * Passing <code>null<code> will nullify the user's shopping cart on Nosto's
+     * end. You must also pass in the shopping cart content in it's entirety as
+     * partial content are not supported.
+     * <br/><br/>
+     * It is not recommended to pass the current cart contents to an action but
+     * instead use the the session
+     * <br/><br/>
+     * You must invoke [the load method]{@link Action#load} on the resultant
+     * action in order for the request to be made.
+     *
+     * @see {@link Session#setCart}
+     * @return {Action}
+     */
+    setCart(cart: Cart): Action;
+    /**
+     * Sets the information about the currently logged in customer. If the current
+     * customer is not provided, you will not be able to leverage features such as
+     * triggered emails. While it is recommended to always provide the details of
+     * the currently logged in customer, it may be omitted if there are concerns
+     * about privacy or compliance.
+     * <br/><br/>
+     * It is not recommended to pass the current customer details to an action but
+     * instead use the the session
+     * <br/><br/>
+     * You must invoke [the load method]{@link Action#load} on the resultant
+     * action in order for the request to be made.
+     *
+     * @see {@link Session#setCustomer}
+     * @public
+     * @param {Customer} customer the details of the currently logged in customer
+     * @return {Action}
+     */
+    setCustomer(customer: Customer): Action;
+    /**
+     * @param {Order} order
+     * @return {Action}
+     */
+    setOrder(order: Order): Action;
+    /**
+     * <br/><br/>
+     * You must invoke [the load method]{@link Action#load} on the resultant
+     * action in order for the request to be made.
+     *
+     * @public
+     * @param searchTerms
+     * @return {Action}
+     */
+    setSearchTerms(searchTerms: string[]): Action;
+    /**
+     * <br/><br/>
+     * You must invoke [the load method]{@link Action#load} on the resultant
+     * action in order for the request to be made.
+     *
+     * @public
+     * @param {Array<String>} categories
+     * @return {Action}
+     */
+    setCategories(categories: string[]): Action;
+    /**
+     * <br/><br/>
+     * You must invoke [the load method]{@link Action#load} on the resultant
+     * action in order for the request to be made.
+     *
+     * @public
+     * @param {Array<String>} categoryIds
+     * @return {Action}
+     */
+    setCategoryIds(categoryIds: string[]): Action;
+    /**
+     * <br/><br/>
+     * You must invoke [the load method]{@link Action#load} on the resultant
+     * action in order for the request to be made.
+     *
+     * @public
+     * @param {Array<String>} parentCategoryIds
+     * @return {Action}
+     */
+    setParentCategoryIds(parentCategoryIds: string[]): Action;
+    /**
+     * <br/><br/>
+     * You must invoke [the load method]{@link Action#load} on the resultant
+     * action in order for the request to be made.
+     *
+     * @public
+     * @param tags
+     * @return {Action}
+     */
+    setTags(tags: string[]): Action;
+    /**
+     * <br/><br/>
+     * You must invoke [the load method]{@link Action#load} on the resultant
+     * action in order for the request to be made.
+     *
+     * @public
+     * @param customFields
+     * @return {Action}
+     */
+    setCustomFields(customFields: Record<string, string[]>): Action;
+    /**
+     * Sets the current variation identifier for the session. A variation identifier
+     * identifies the current currency (or the current customer group). If your site
+     * uses multi-currency, you must provide the ISO code current currency being viewed.
+     * <br/><br/>
+     * It is not recommended to pass the variation identifier to an action but
+     * instead use the the session.
+     * <br/><br/>
+     * You must invoke [the load method]{@link Action#load} on the resultant
+     * action in order for the request to be made.
+     *
+     * @see {@link Session#setVariation}
+     * @public
+     * @param {String} variation the case-sensitive identifier of the current variation
+     * @return {Action}
+     */
+    setVariation(variation: string): Action;
+    /**
+     * <br/><br/>
+     * You must invoke [the load method]{@link Action#load} on the resultant
+     * action in order for the request to be made.
+     *
+     * @public
+     * @param {Array.<String>} placements
+     * @return {Action}
+     */
+    setPlacements(placements: string[]): Action;
+    /**
+     * Sets the restore link for the current session. Restore links can be leveraged
+     * in email campaigns. Restore links allow the the user to restore the cart
+     * contents in a single click.
+     * <br/><br/>
+     * Read more about
+     * {@link https://help.nosto.com/en/articles/664692|how to leverage the restore cart link}
+     * <br/><br/>
+     * It is not recommended to pass the restore link to an action but instead use the the
+     * session.
+     * <br/><br/>
+     * You must invoke [the load method]{@link Action#load} on the resultant
+     * action in order for the request to be made.
+     *
+     * @see {@link Session#setRestoreLink}
+     * @public
+     * @param {String} restoreLink the secure URL to restore the user's current session
+     * @return {Action}
+     */
+    setRestoreLink(restoreLink: string): Action;
+    /**
+     * Sets the identifier of the current page type to the current request. The different
+     * page types are product, front, search, cart, order, category, notfound and other.
+     * <br/><br/>
+     * You must invoke [the load method]{@link Action#load} on the resultant
+     * action in order for the request to be made.
+     * <br/><br/>
+     * It is not recommended to pass the page type to an action but instead use the the
+     * session.
+     * <br/><br/>
+     * You must invoke [the load method]{@link Action#load} on the resultant
+     * action in order for the request to be made.
+     *
+     * @see {@link Session#viewFrontPage} for when a front or home page is being viewed
+     * @see {@link Session#viewCart} for when a cart or checkout page is being viewed
+     * @see {@link Session#viewNotFound} for when a not-found or 404 page is being viewed
+     * @see {@link Session#viewProduct} for when a product page is being viewed
+     * @see {@link Session#viewCategory} for when a category, collection or brand page is being viewed
+     * @see {@link Session#viewTag} for when a tag page is being viewed
+     * @see {@link Session#viewSearch} for when a search page is being viewed
+     * @see {@link Session#viewOther} for when a miscellaneous page is being viewed
+     * @public
+     */
+    setPageType(pageType: PageType): Action;
+    /**
+     * @public
+     * @return {Object}
+     */
+    dumpData(): Data;
+    update(): unknown;
+    load(flags?: RecommendationRequestFlags): Promise<ActionResponse>;
+}
+
+declare interface ActionResponse {
+    recommendations: Record<string, unknown>;
+    campaigns?: {
+        recommendations: Record<string, unknown>;
+        content: Record<string, unknown>;
+    };
+    page_views: number;
+    geo_location: string[];
+    affinities: CustomerAffinityResponse;
+    cmpid: string;
+}
+
+declare type AnyFunction = (...args: unknown[]) => unknown;
+
+/**
+ * @group Types
+ */
+export declare interface Cart {
+    hcid?: string;
+    items: CartItem[];
+}
+
+/**
+ * @group Types
+ */
+declare interface CartItem {
+    name: string;
+    price_currency_code: string;
+    product_id: string;
+    quantity: number;
+    sku_id?: string;
+    unit_price: number;
+}
+
+/**
+ * @group Types
+ */
+declare interface ConversionItem {
+    name: string;
+    price_currency_code: string;
+    product_id: string;
+    quantity?: number;
+    sku_id?: string;
+    unit_price?: number;
+}
+
+/**
+ * @group Types
+ */
+export declare interface Customer {
+    customer_reference?: string;
+    email: string;
+    first_name: string;
+    hcid?: string;
+    last_name: string;
+    newsletter?: boolean;
+    order_number?: string;
+    source?: string;
+    source_id?: string;
+    type?: string;
+}
+
+/**
+ * @group Types
+ */
+declare interface CustomerAffinityResponse {
+    discount: number;
+    top_brands: CustomerAffinityResponseItem[];
+    top_categories: CustomerAffinityResponseItem[];
+    top_product_types: CustomerAffinityResponseItem[];
+    top_skus: {
+        [index: string]: CustomerAffinityResponseItem[];
+    };
+}
+
+/**
+ * @group Types
+ */
+declare interface CustomerAffinityResponseItem {
+    name: string;
+    score: number;
+}
+
+/**
+ * @group Types
+ */
+declare interface Data<ProductType extends Product = Product> {
+    cart: Cart | undefined;
+    customer: Customer | undefined;
+    variation: string | undefined;
+    restoreLink: string | undefined;
+    products: ProductType[];
+    order: Order | undefined;
+    searchTerms: string[] | undefined;
+    categories: string[] | undefined;
+    categoryIds: string[] | undefined;
+    parentCategoryIds: string[] | undefined;
+    tags: string[] | undefined;
+    customFields: Record<string, string[]> | undefined;
+    elements: string[] | undefined;
+    pageType: PageType | undefined;
+    sortOrder: string | undefined;
+    pluginVersion: PluginMetadata | undefined;
+}
+
+declare type EventType = typeof eventTypes[number];
+
+declare const eventTypes: readonly ["vp", "lp", "dp", "rp", "bp", "vc", "or", "is", "cp", "ec", "es", "gc", "src", "cpr", "pl", "cc", "con"];
+
+/**
+ * You can personalise your cart and checkout pages by using the `Nosto404` component.
+ * The component does not require any props.
+ *
+ * By default, your account, when created, has three 404-page placements named `notfound-nosto-1`, `notfound-nosto-2` and `notfound-nosto-3`.
+ * You may omit these and use any identifier you need.
+ * The identifiers used here are simply provided to illustrate the example.
+ *
+ * @example
+ * ```
+ * <div className="notfound-page">
+ *   <NostoPlacement id="notfound-nosto-1" />
+ *   <NostoPlacement id="notfound-nosto-2" />
+ *   <NostoPlacement id="notfound-nosto-3" />
+ *   <Nosto404 />
+ * </div>
+ * ```
+ *
+ * @group Components
+ */
+export declare function Nosto404(props: {
+    placements?: string[];
+}): null;
+
+/**
+ * You can personalise your category and collection pages by using the NostoCategory component.
+ * The component requires that you provide it the the slash-delimited slug representation of the current category.
+ *
+ * By default, your account, when created, has two category placements named `categorypage-nosto-1` and `categorypage-nosto-2`.
+ * You may omit these and use any identifier you need. The identifiers used here are simply provided to illustrate the example.
+ *
+ * @example
+ * ```
+ * <div className="category-page">
+ *   <NostoPlacement id="categorypage-nosto-1" />
+ *   <NostoPlacement id="categorypage-nosto-2" />
+ *   <NostoCategory category={category.name} />
+ * </div>
+ * ```
+ *
+ * **Note:** Be sure to pass in the correct category representation.
+ * If the category being viewed is `Mens >> Jackets`, you must provide the name as `/Mens/Jackets`.
+ * You must ensure that the category path provided here matches that of the categories tagged in your products.
+ *
+ * @group Components
+ */
+export declare function NostoCategory(props: {
+    category: string;
+    placements?: string[];
+}): null;
+
+/**
+ * You can personalise your cart and checkout pages by using the NostoCheckout component.
+ * The component does not require any props.
+ *
+ * By default, your account, when created, has two cart-page placements named `categorypage-nosto-1` and `categorypage-nosto-2`.
+ * You may omit these and use any identifier you need.
+ * The identifiers used here are simply provided to illustrate the example.
+ *
+ * @example
+ * ```
+ * <div className="checkout-page">
+ *   <NostoPlacement id="checkout-nosto-1" />
+ *   <NostoPlacement id="checkout-nosto-2" />
+ *   <NostoCheckout />
+ * </div>
+ * ```
+ *
+ * @group Components
+ */
+export declare function NostoCheckout(props: {
+    placements?: string[];
+}): null;
+
+/**
+ * @group Types
+ */
+declare interface NostoClient {
+    setAutoLoad(autoload: boolean): void;
+    defaultSession(): Session;
+    placements: {
+        getPlacements(): string[];
+        injectCampaigns(recommendations: Record<string, unknown>): void;
+    };
+}
+
+/**
+ * @group Essential Functions
+ */
+export declare const NostoContext: Context<NostoContextType>;
+
+/**
+ * @group Types
+ */
+export declare interface NostoContextType {
+    account: string;
+    clientScriptLoaded: boolean;
+    currentVariation?: string;
+    renderFunction?: AnyFunction;
+    responseMode: RenderMode;
+    recommendationComponent?: React.ReactElement<{
+        nostoRecommendation: Recommendation;
+    }>;
+    useRenderCampaigns(type: string): {
+        renderCampaigns(data: unknown, api: NostoClient): void;
+        pageTypeUpdated: boolean;
+    };
+    pageType: string;
+}
+
+/**
+ * The `NostoHome` component must be used to personalise the home page. The component does not require any props.
+ *
+ * By default, your account, when created, has four front-page placements named `frontpage-nosto-1`, `frontpage-nosto-2`, `frontpage-nosto-3` and `frontpage-nosto-4`.
+ * You may omit these and use any identifier you need.
+ * The identifiers used here are simply provided to illustrate the example.
+ *
+ * The `<NostoHome \>` component needs to be added after the placements.
+ * Content and recommendations will be rendered through this component.
+ *
+ * @example
+ * ```
+ *  <div className="front-page">
+ *   <NostoPlacement id="frontpage-nosto-1" />
+ *   <NostoPlacement id="frontpage-nosto-2" />
+ *   <NostoPlacement id="frontpage-nosto-3" />
+ *   <NostoPlacement id="frontpage-nosto-4" />
+ *   <NostoHome />
+ * </div>
+ * ```
+ *
+ * @group Components
+ */
+export declare function NostoHome(props: {
+    placements?: string[];
+}): null;
+
+/**
+ * You can personalise your order-confirmation/thank-you page by using the `NostoOrder` component.
+ * The component requires that you provide it with the details of the order.
+ *
+ * By default, your account, when created, has one other-page placement named `thankyou-nosto-1`.
+ * You may omit this and use any identifier you need. The identifier used here is simply provided to illustrate the example.
+ *
+ * The order prop requires a value that adheres to the type `Purchase`.
+ *
+ * @example
+ * ```
+ * <div className="thankyou-page">
+ *     <NostoPlacement id="thankyou-nosto-1" />
+ *     <NostoOrder order={{ purchase: toOrder(order) }} />
+ * </div>
+ * ```
+ *
+ * @group Components
+ */
+export declare function NostoOrder(props: {
+    order: Order;
+    placements?: string[];
+}): null;
+
+/**
+ * You can personalise your miscellaneous pages by using the NostoOther component.
+ * The component does not require any props.
+ *
+ * By default, your account, when created, has two other-page placements named `other-nosto-1` and `other-nosto-2`.
+ * You may omit these and use any identifier you need.
+ * The identifiers used here are simply provided to illustrate the example.
+ *
+ * @example
+ * ```
+ * <div className="other-page">
+ *     <NostoPlacement id="other-nosto-1" />
+ *     <NostoPlacement id="other-nosto-2" />
+ *     <NostoOther />
+ * </div>;
+ * ```
+ *
+ * @group Components
+ */
+export declare function NostoOther(props: {
+    placements?: string[];
+}): null;
+
+/**
+ * Nosto React has a special component called NostoPlacement.
+ * The component is a simply a hidden `<div>` placeholder into which Nosto injects recommendations or personalises the content between the tags.
+ *
+ * We recommend adding as many placements across your views as needed as these are hidden and only populated when a corresponding campaign (targeting that placement) is configured.
+ *
+ * @example
+ * ```
+ * <NostoPlacement id="frontpage-nosto-1" />
+ * ```
+ *
+ * @group Components
+ */
+export declare function NostoPlacement(props: {
+    id: string;
+    pageType?: string;
+}): JSX_2.Element;
+
+/**
+ * The NostoProduct component must be used to personalise the product page.
+ * The component requires that you provide it the identifier of the current product being viewed.
+ *
+ * By default, your account, when created, has three product-page placements named `productpage-nosto-1`, `productpage-nosto-2` and `productpage-nosto-3`.
+ * You may omit these and use any identifier you need.
+ * The identifiers used here are simply provided to illustrate the example.
+ *
+ * The `<NostoProduct \>` component needs to be added after the placements.
+ * Content and recommendations will be rendered through this component.
+ * Pass in the product ID via the product prop to pass this information back to Nosto.
+ *
+ * @example
+ * ```
+ * <div className="product-page">
+ *   <NostoPlacement id="productpage-nosto-1" />
+ *   <NostoPlacement id="productpage-nosto-2" />
+ *   <NostoPlacement id="productpage-nosto-3" />
+ *   <NostoProduct product={product.id} />
+ * </div>
+ * ```
+ *
+ * @group Components
+ */
+export declare function NostoProduct(props: {
+    product: string;
+    tagging?: Product;
+    placements?: string[];
+}): null;
+
+/**
+ * This widget is what we call the Nosto root widget, which is responsible for adding the actual Nosto script and the JS API stub.
+ * This widget wraps all other React Nosto widgets.
+ *
+ * ```
+ * <NostoProvider account="your-nosto-account-id" recommendationComponent={<NostoSlot />}>
+ *   <App />
+ * </NostoProvider>
+ * ```
+ *
+ * **Note:** the component also accepts a prop to configure the host `host="connect.nosto.com"`.
+ * In advanced use-cases, the need to configure the host may surface.
+ *
+ * In order to implement client-side rendering, the requires a designated component to render the recommendations provided by Nosto.
+ * This component should be capable of processing the JSON response received from our backend.
+ * Notice the `recommendationComponent` prop passed to `<NostoProvider>` above.
+ *
+ * Learn more [here](https://github.com/Nosto/shopify-hydrogen/blob/main/README.md#client-side-rendering-for-recommendations) and see a [live example](https://github.com/Nosto/shopify-hydrogen-demo) on our demo store.
+ *
+ * @group Components
+ */
+export declare function NostoProvider(props: NostoProviderProps): JSX_2.Element;
+
+/**
+ * @group Components
+ */
+declare interface NostoProviderProps {
+    /**
+     * Indicates merchant id
+     */
+    account: string;
+    /**
+     * Indicates currency
+     */
+    currentVariation?: string;
+    /**
+     * Indicates an url of a server
+     */
+    host?: string;
+    children: default_2.ReactElement;
+    /**
+     * Indicates if merchant uses multiple currencies
+     */
+    multiCurrency?: boolean;
+    /**
+     * Recommendation component which holds nostoRecommendation object
+     */
+    recommendationComponent?: default_2.ReactElement<{
+        nostoRecommendation: Recommendation;
+    }>;
+    /**
+     * Enables Shopify markets with language and market id
+     */
+    shopifyMarkets?: {
+        language?: string;
+        marketId?: string | number;
+    };
+}
+
+/**
+ * You can personalise your search pages by using the NostoSearch component.
+ * The component requires that you provide it the current search term.
+ *
+ * By default, your account, when created, has two search-page placements named `searchpage-nosto-1` and `searchpage-nosto-2`.
+ * You may omit these and use any identifier you need. The identifiers used here are simply provided to illustrate the example.
+ *
+ * @example
+ * ```
+ * <div className="search-page">
+ *   <NostoPlacement id="searchpage-nosto-1" />
+ *   <NostoPlacement id="searchpage-nosto-2" />
+ *   <NostoSearch query={"black shoes"} />
+ * </div>
+ * ```
+ *
+ * **Note:** Do not encode the search term in any way.
+ * It should be provided an unencoded string.
+ * A query for `black shoes` must be provided as-is and not as `black+shoes`.
+ * Doing so will lead to invalid results.
+ *
+ * @group Components
+ */
+export declare function NostoSearch(props: {
+    query: string;
+    placements?: string[];
+}): null;
+
+/**
+ * Nosto React requires that you pass it the details of current cart contents and the details of the currently logged-in customer, if any, on every route change.
+ * This makes it easier to add attribution.
+ *
+ * The `NostoSession` component makes it very easy to keep the session up to date so long as the cart and the customer are provided.
+ *
+ * The cart prop requires a value that adheres to the type `Cart`, while the customer prop requires a value that adheres to the type `Customer`.
+ *
+ * @group Essential Functions
+ */
+export declare function NostoSession(props?: {
+    cart?: Cart;
+    customer?: Customer;
+}): JSX_2.Element;
+
+/**
+ * @group Types
+ */
+export declare interface Order {
+    created_at?: Date;
+    external_order_ref: string;
+    info?: OrderCustomer;
+    items: ConversionItem[];
+    order_status?: string;
+    order_status_label?: string;
+    payment_provider: string;
+}
+
+/**
+ * @group Types
+ */
+declare interface OrderCustomer {
+    country: string;
+    email?: string;
+    first_name?: string;
+    last_name?: string;
+    newsletter: string;
+    order_number: string;
+    phone: string;
+    post_code: string;
+    type: string;
+}
+
+/**
+ * @group Types
+ */
+declare type PageType = "front" | "category" | "product" | "cart" | "search" | "notfound" | "order" | "other" | "checkout";
+
+/**
+ * @group Types
+ */
+declare interface PluginMetadata {
+    mainModule?: string;
+    cmpModule?: string;
+    msiModule?: string;
+}
+
+/**
+ * @group Types
+ */
+export declare type Product = {
+    product_id: string;
+    selected_sku_id?: string;
+};
+
+/**
+ * @group Types
+ */
+export declare interface Recommendation {
+    result_id: string;
+    products: Product[];
+    result_type: string;
+    title: string;
+    div_id: string;
+    source_product_ids: string[];
+    params: unknown;
+}
+
+/**
+ * @group Types
+ */
+declare interface RecommendationRequestFlags {
+    skipPageViews?: boolean;
+    trackEvents?: boolean;
+    skipEvents?: boolean;
+    reloadCart?: boolean;
+}
+
+/**
+ * @group Types
+ */
+declare type RenderMode = "HTML" | "SIMPLE" | "JSON_170x170" | "JSON_100_X_100" | "JSON_90x70" | "JSON_50x50" | "JSON_30x30" | "JSON_100x140" | "JSON_200x200" | "JSON_400x400" | "JSON_750x750" | "JSON_10_MAX_SQUARE" | "JSON_200x200_SQUARE" | "JSON_400x400_SQUARE" | "JSON_750x750_SQUARE" | "JSON_ORIGINAL" | "VERSION_SOURCE";
+
+/**
+ * @group Types
+ */
+declare interface Session {
+    /**
+     * Sets the information about the user's current shopping cart. It the user
+     * does not have any items in his shopping cart, you can pass <code>null<code>.
+     * Passing <code>null<code> will nullify the user's shopping cart on Nosto's
+     * end. You must also pass in the shopping cart content in it's entirety as
+     * partial content are not supported.
+     *
+     * @example
+     * nostojs(api => api
+     *   .defaultSession()
+     *   .setCart({
+     *     items: [
+     *       product_id: "101",
+     *       sku_id: "101-S",
+     *       name: "Shoe",
+     *       unit_price: 34.99
+     *       price_currency_code: "EUR"
+     *     ]
+     *   })
+     *   .viewCart()
+     *   .setPlacements(["free-shipper"])
+     *   .update()
+     *   .then(data => console.log(data)))
+     *
+     * @public
+     * @param {Cart|undefined} cart the details of the user's shopping cart contents
+     * @returns {Session} the current session
+     */
+    setCart(cart: Cart | undefined): Session;
+    /**
+     * Sets the information about the currently logged in customer. If the current
+     * customer is not provided, you will not be able to leverage features such as
+     * triggered emails. While it is recommended to always provide the details of
+     * the currently logged in customer, it may be omitted if there are concerns
+     * about privacy or compliance.
+     *
+     * @example
+     * nostojs(api => api
+     *   .defaultSession()
+     *   .setCustomer({
+     *     first_name: "Mridang",
+     *     last_name: "Agarwalla",
+     *     email: "mridang@nosto.com",
+     *     newsletter: false,
+     *     customer_reference: "5e3d4a9c-cf58-11ea-87d0-0242ac130003"
+     *   })
+     *   .viewCart()
+     *   .setPlacements(["free-shipper"])
+     *   .load()
+     *   .then(data => console.log(data)))
+     *
+     * @public
+     * @param {Customer} customer the details of the currently logged in customer
+     * @returns {Session} the current session
+     */
+    setCustomer(customer: Customer | undefined): Session;
+    /**
+     * Sets the current variation identifier for the session. A variation identifier
+     * identifies the current currency (or the current customer group). If your site
+     * uses multi-currency, you must provide the ISO code current currency being viewed.
+     *
+     * @example
+     * nostojs(api => api
+     *   .defaultSession()
+     *   .setVariation("GBP")
+     *   .viewCart()
+     *   .setPlacements(["free-shipper"])
+     *   .load()
+     *   .then(data => console.log(data)))
+     *
+     * @public
+     * @param {String} variation the case-sensitive identifier of the current variation
+     * @returns {Session} the current session
+     */
+    setVariation(variation: string): Session;
+    /**
+     * Sets the restore link for the current session. Restore links can be leveraged
+     * in email campaigns. Restore links allow the the user to restore the cart
+     * contents in a single click.
+     * <br/><br/>
+     * Read more about
+     * {@link https://help.nosto.com/en/articles/664692|how to leverage the restore cart link}
+     *
+     * @example
+     * nostojs(api => api
+     *   .defaultSession()
+     *   .setRestoreLink("https://jeans.com/session/restore?sid=6bdb69d5-ed15-4d92")
+     *   .viewCart()
+     *   .setPlacements(["free-shipper"])
+     *   .load()
+     *   .then(data => console.log(data)))
+     *
+     * @public
+     * @param {String} restoreLink the secure URL to restore the user's current session
+     * @returns {Session} the current session
+     */
+    setRestoreLink(restoreLink: string): Session;
+    /**
+     * Sets the response type to HTML or JSON_ORIGINAL. This denotes the preferred
+     * response type of the recommendation result.
+     * If you would like to access the raw recommendation data in <code>JSON</code> form, specify
+     * <code>JSON</code>. When you specify JSON, you will need to template the result yourself.
+     * If you require a more simplified approach, specify <code>HTML</code>. When you specify
+     * <code>HTML</code>, you get back HTML blobs, that you may simply inject into
+     * you placements.
+     *
+     * @example
+     * nostojs(api => api
+     *   .defaultSession()
+     *   .setResponseMode("HTML")
+     *   .viewCart()
+     *   .setPlacements(["free-shipper"])
+     *   .load()
+     *   .then(data => console.log(data)))
+     *
+     * @public
+     * @param {String} mode the response mode for the recommendation data
+     * @returns {Session} the current session
+     */
+    setResponseMode(mode: RenderMode): Session;
+    /**
+     * Create a new action for a front page. This should be used when the user
+     * visits the home page.
+     * <br/><br/>
+     * You must invoke [the load method]{@link Action#load} on the resultant
+     * action in order for the request to be made.
+     * <br/><br/>
+     * You do not need to specify the page-type explicitly as it is inferred
+     * from the action.
+     *
+     * @example
+     * nostojs(api => api
+     *   .defaultSession()
+     *   .viewFrontPage()
+     *   .setPlacements(["best-seller"])
+     *   .load()
+     *   .then(data => console.log(data)))
+     *
+     *
+     * @public
+     * @returns {Action} the action instance to load content or track events.
+     */
+    viewFrontPage(): Action;
+    /**
+     * Create a new action for a cart page. This should be used on all cart and
+     * checkout pages. If your site has a multi-step checkout, it is recommended
+     * that you send this event on each checkout page.
+     * <br/><br/>
+     * You must invoke [the load method]{@link Action#load} on the resultant
+     * action in order for the request to be made.
+     * <br/><br/>
+     * You do not need to specify the page-type explicitly as it is inferred
+     * from the action.
+     *
+     * @example
+     * nostojs(api => api
+     *   .defaultSession()
+     *   .viewCart()
+     *   .setPlacements(["free-shipper"])
+     *   .load()
+     *   .then(data => console.log(data)))
+     *
+     * @public
+     * @returns {Action} the action instance to load content or track events.
+     */
+    viewCart(): Action;
+    /**
+     * Create a new action for a not found page. This should be used only on 404
+     * pages.
+     * <br/><br/>
+     * You must invoke [the load method]{@link Action#load} on the resultant
+     * action in order for the request to be made.
+     * <br/><br/>
+     * You do not need to specify the page-type explicitly as it is inferred
+     * from the action.
+     *
+     * @example
+     * nostojs(api => api
+     *   .defaultSession()
+     *   .viewNotFound()
+     *   .setPlacements(["best-seller"])
+     *   .load()
+     *   .then(data => console.log(data)))
+     *
+     * @public
+     * @returns {Action} the action instance to load content or track events.
+     */
+    viewNotFound(): Action;
+    /**
+     * Create a new action for a product page. This must be used only when a
+     * product is being viewed. In case a specific SKU of the product is being viewed, use viewProductSku instead.
+     * <br/><br/>
+     * You must invoke [the load method]{@link Action#load} on the resultant
+     * action in order for the request to be made.
+     * <br/><br/>
+     * You do not need to specify the page-type explicitly as it is inferred
+     * from the action.
+     *
+     * @example
+     * nostojs(api => api
+     *   .defaultSession()
+     *   .viewProduct("101")
+     *   .setCategories(["/men/trousers"])
+     *   .setRef("123", "example_reco_id")
+     *   .setPlacements(["cross-seller"])
+     *   .load()
+     *   .then(data => console.log(data)))
+     *
+     * @public
+     * @param product
+     * @returns {Action} the action instance to load content or track events.
+     */
+    viewProduct(product: string | Product): Action;
+    /**
+     * Create a new action for a product page when a specific SKU has been chosen. This must be used only when a
+     * product and specific SKU is being viewed.
+     * <br/><br/>
+     * You must invoke [the load method]{@link Action#load} on the resultant
+     * action in order for the request to be made.
+     * <br/><br/>
+     * You do not need to specify the page-type explicitly as it is inferred
+     * from the action.
+     *
+     * @example
+     * nostojs(api => api
+     *   .defaultSession()
+     *   .viewProductSku("101", "101-sku-1")
+     *   .setCategories(["/men/trousers"])
+     *   .setRef("123", "example_reco_id")
+     *   .setPlacements(["cross-seller"])
+     *   .load()
+     *   .then(data => console.log(data)))
+     *
+     * @public
+     * @param productId
+     * @param skuId
+     * @returns {Action} the action instance to load content or track events.
+     */
+    viewProductSku(productId: string, skuId: string): Action;
+    /**
+     * Create a new action for a category page. This should be used on all
+     * category, collection of brand pages.
+     * <br/><br/>
+     * You must invoke [the load method]{@link Action#load} on the resultant
+     * action in order for the request to be made.
+     * <br/><br/>
+     * You do not need to specify the page-type explicitly as it is inferred
+     * from the action.
+     *
+     * @example
+     * nostojs(api => api
+     *   .defaultSession()
+     *   .viewCategory("/men/shoes")
+     *   .setPlacements(["category123"])
+     *   .load()
+     *   .then(data => console.log(data)))
+     *
+     * @public
+     * @param {Array<String>} categories
+     * @returns {Action} the action instance to load content or track events.
+     */
+    viewCategory(...categories: string[]): Action;
+    /**
+     * Create a new action for a tag page. This should be used only on tag pages.
+     * <br/><br/>
+     * You must invoke [the load method]{@link Action#load} on the resultant
+     * action in order for the request to be made.
+     * <br/><br/>
+     * You do not need to specify the page-type explicitly as it is inferred
+     * from the action.
+     * Note: tags are not case-sensitive.
+     *
+     * @example
+     * nostojs(api => api
+     *   .defaultSession()
+     *   .viewTag("colourful")
+     *   .load()
+     *   .then(data => console.log(data)))
+     *
+     * @public
+     * @deprecated as this is an advanced action with a limited a use case
+     * @param {Array<String>} tags the set of the tags being viewed.
+     * @returns {Action} the action instance to load content or track events.
+     */
+    viewTag(...tags: string[]): Action;
+    /**
+     * Create a new action with custom fields.
+     * <br/><br/>
+     * You must invoke [the load method]{@link Action#load} on the resultant
+     * action in order for the request to be made.
+     * <br/><br/>
+     * You do not need to specify the page-type explicitly as it is inferred
+     * from the action.
+     * Note: tags are not case-sensitive.
+     *
+     * @example
+     * nostojs(api => api
+     *   .defaultSession()
+     *   .viewCustomField({material: "cotton"})
+     *   .load()
+     *   .then(data => console.log(data)))
+     *
+     * @public
+     * @deprecated as this is an advanced action with a limited a use case
+     * @param {Object} customFields custom fields being viewed.
+     * @returns {Action} the action instance to load content or track events.
+     */
+    viewCustomField(customFields: Record<string, string[]>): Action;
+    /**
+     * Create a new action for a search page. This should be used only
+     * on search pages. A search page action requires you to pass the search
+     * term. For example, if the user search for "black shoes", you must pass
+     * in "black shoes" and not an encoded version such as "black+shoes".
+     * <br/><br/>
+     * You must invoke [the load method]{@link Action#load} on the resultant
+     * action in order for the request to be made.
+     * <br/><br/>
+     * You do not need to specify the page-type explicitly as it is inferred
+     * from the action.
+     * Search terms are not case-sensitive.
+     *
+     * @example
+     * nostojs(api => api
+     *   .defaultSession()
+     *   .viewSearch("black shoes")
+     *   .load()
+     *   .then(data => console.log(data)))
+     *
+     * @public
+     * @param {Array.<String>} searchTerms the non-encoded search terms
+     * @returns {Action} the action instance to load content or track events.
+     */
+    viewSearch(...searchTerms: string[]): Action;
+    /**
+     * Create a new action for a general page. This should be used only on
+     * pages that don't have a corresponding action. For example, if the user
+     * is viewing a page such as a "Contact Us" page, you should use the viewOther
+     * action.
+     * <br/><br/>
+     * You must invoke [the load method]{@link Action#load} on the resultant
+     * action in order for the request to be made.
+     * <br/><br/>
+     * You do not need to specify the page-type explicitly as it is inferred
+     * from the action.
+     *
+     * @example
+     * nostojs(api => api
+     *   .defaultSession()
+     *   .viewOther()
+     *   .load()
+     *   .then(data => console.log(data)))
+     *
+     * @public
+     * @returns {Action} the action instance to load content or track events.
+     */
+    viewOther(): Action;
+    /**
+     * Create a new action for an order page. This should only be used on order
+     * confirmation / thank you pages.
+     * <br/><br/>
+     * You do not need to specify the page-type explicitly as it is inferred
+     * from the action.
+     * <br/><br/>
+     * You must invoke [the load method]{@link Action#load} on the resultant
+     * action in order for the request to be made.
+     *
+     * @example
+     * nostojs(api => {
+     *   api.defaultSession()
+     *    .addOrder({
+     *      external_order_ref: "145000006",
+     *      info: {
+     *        order_number: "195",
+     *        email: "mridang@nosto.com",
+     *        first_name: "Mridang",
+     *        last_name: "Agarwalla",
+     *        type: "order",
+     *        newsletter: true
+     *      },
+     *      items: [{
+     *        product_id: "406",
+     *        sku_id: "243",
+     *        name: "Linen Blazer (White, S)",
+     *        quantity: 1,
+     *        unit_price: 455,
+     *        price_currency_code: "EUR"
+     *      }]
+     *    })
+     *    .setPlacements(["order-related"])
+     *    .load()
+     *    .then(data => {
+     *      console.log(data.recommendations)
+     *    })
+     *  })
+     * @public
+     * @param {Order} order the information about the order that was placed
+     * @returns {Action} the action instance to load content or track events.
+     */
+    addOrder(order: Order): Action;
+    /**
+     * Creates an action to report that product was added to the shopping cart,
+     * e.g. from the recommendation slot with "Add to cart" button.
+     * <p>
+     * You must invoke [the load method]{@link Action#load} on the resultant
+     * action in order for the request to be made.
+     *
+     *
+     * @example
+     * nostojs(api => api
+     *   .defaultSession()
+     *   .reportAddToCart("123", "reco-slot-1")
+     *   .load()
+     *   .then(data => console.log(data)))
+     *
+     * @public
+     * @param product
+     * @param element
+     * @returns {Action} the action instance to load content or track events.
+     */
+    reportAddToCart(product: string, element: string): Action;
+    /**
+     * @example
+     * nostojs(api => api
+     *  .defaultSession()
+     *  .recordAttribution("vp", "12345678", "123456")
+     *  .done()
+     *  .then(data => console.log(data))
+     *  @param { EventType } type
+     * @param { String } target
+     * @param { String | undefined } [ref]
+     * @param { String | undefined } [refSrc]
+     *  @return { Object }
+     *
+     */
+    recordAttribution(type: EventType, target: string, ref: string, refSrc: string): object;
+}
+
+/**
+ * A hook that allows you to access the NostoContext and retrieve Nosto-related data from it in React components.
+ *
+ * @group Essential Functions
+ */
+export declare function useNostoContext(): NostoContextType;
+
+export { }
+
+declare global {
+    interface Window {
+        nosto?: {
+            reload(settings: unknown): void;
+        };
+        nostojs: {
+            (callback: (api: NostoClient) => void): void;
+            q?: unknown[];
+        };
+    }
+}
+