@okendo/shopify-hydrogen 2.3.2 → 2.5.0

package/dist/cjs/index.js

@@ -1 +1 @@
-"use strict";var e=require("react"),t=require("@remix-run/react");const n=e.createContext(void 0),r=({children:t})=>{const[r,a]=e.useState(!1);return e.createElement(n.Provider,{value:{okendoDataLoaded:r,setOkendoDataLoaded:a}},t)},a=()=>{const t=e.useContext(n);return void 0===t?null:t},o="cdn-static.okendo.io",s=({nonce:t="",okendoProviderData:n,productUrlFormatter:r,awaited:s,cdnDomain:i})=>{const d=a(),l=e.useRef(!1);if(e.useEffect((()=>{if(n&&d?.setOkendoDataLoaded(!0),n&&s&&!l.current){const e=document.createElement("script");e.src=`https://${i||o}/reviews-widget-plus/js/okendo-reviews.js`,document.head.appendChild(e),l.current=!0}}),[n,d,s,i]),!n)return null;const{reviewsHeaderConfig:c,cssVariables:u,customCss:p,initScriptContents:m,preRenderStyleTags:g,starSymbols:v}=n,k=(u??"").replace('<style id="oke-css-vars">',"").replace("</style>",""),w=p?p.replace('<style id="oke-reviews-custom-css">',"").replace("</style>",""):"";return e.createElement(e.Fragment,null,e.createElement("script",{nonce:t,id:"oke-reviews-settings",type:"application/json",dangerouslySetInnerHTML:{__html:JSON.stringify(c)}}),e.createElement("style",{nonce:t,id:"oke-css-vars",dangerouslySetInnerHTML:{__html:k}}),w&&e.createElement("style",{nonce:t,id:"oke-reviews-custom-css",dangerouslySetInnerHTML:{__html:w}}),!s&&m&&e.createElement("script",{nonce:t,dangerouslySetInnerHTML:{__html:m}}),e.createElement("script",{nonce:t,type:"text/javascript",dangerouslySetInnerHTML:{__html:`window.okeProductUrlFormatter = ${"function"==typeof r?r.toString():"string"==typeof r?r:"(product) =>\n    product && product.productHandle\n        ? \"/products/\" + product.productHandle + \"/\" + (product.variantId ? '?variantId=' + product.variantId : '')\n        : undefined"}`}}),g&&e.createElement("div",{dangerouslySetInnerHTML:{__html:g}}),v&&e.createElement("div",{dangerouslySetInnerHTML:{__html:v}}))};const i=({dataAttributes:t,metafieldContent:n=""})=>{const r=e.useRef(null),a=e.useRef(!1),o=function(t){const n=e.useRef();return e.useEffect((()=>{n.current=t})),n.current}(t),s=()=>{r.current&&(window.okeWidgetApi.initWidget(r.current),a.current=!0)};return e.useEffect((()=>{if(!o||t["data-oke-widget"]!==o["data-oke-widget"]||t["data-oke-star-rating"]!==o["data-oke-star-rating"]||t["data-oke-reviews-product-id"]!==o["data-oke-reviews-product-id"]||!a.current)return window.okeWidgetApi&&r.current?s():document.addEventListener("oke-script-loaded",s),()=>{document.removeEventListener("oke-script-loaded",s)}}),[t,o]),e.createElement("div",{ref:r,key:JSON.stringify(t),...t,dangerouslySetInnerHTML:n?{__html:n}:void 0})},d=/^[0-9]*$/;function l(e){if(e)return`shopify-${d.test(e)?e:e.split("/").slice(-1)[0]}`}exports.OKENDO_PRODUCT_REVIEWS_FRAGMENT='#graphql\n\tfragment OkendoReviewsSnippet on Product {\n\t\tokendoReviewsSnippet: metafield(\n\t\t\tnamespace: "$app:reviews"\n\t\t\tkey: "reviews_widget_snippet"\n\t\t) {\n\t\t\tvalue\n\t\t}\n\t}\n',exports.OKENDO_PRODUCT_STAR_RATING_FRAGMENT='#graphql\n\tfragment OkendoStarRatingSnippet on Product {\n\t\tokendoStarRatingSnippet: metafield(\n\t\t\tnamespace: "$app:reviews"\n\t\t\tkey: "star_rating_snippet"\n\t\t) {\n\t\t\tvalue\n\t\t}\n\t}\n',exports.OkendoProvider=({nonce:n="",okendoProviderData:a,productUrlFormatter:o,cdnDomain:i,children:d})=>e.createElement(r,null,a&&"then"in a?e.createElement(e.Suspense,null,e.createElement(t.Await,{resolve:a},(t=>e.createElement(s,{nonce:n,okendoProviderData:t,productUrlFormatter:o,cdnDomain:i,awaited:!0})))):e.createElement(s,{nonce:n,okendoProviderData:a,productUrlFormatter:o,cdnDomain:i}),d),exports.OkendoReviews=({productId:t,okendoReviewsSnippet:n,placeholder:r})=>{const o=a(),s=t?.length?l(t):null,d=t?.length?n:null,c={"data-oke-widget":"","data-oke-reviews-product-id":s};return null===o||o.okendoDataLoaded?e.createElement(i,{dataAttributes:c,metafieldContent:d?.value}):r||e.createElement("div",{style:{height:"350px"}})},exports.OkendoReviewsCarousel=({productId:t,groupId:n,headerBadgeUrl:r,placeholder:o})=>{const s=a(),d={"data-oke-carousel":"","data-oke-reviews-product-id":t?.length?l(t):null,"data-oke-reviews-group-id":n?.length?n:null,"data-oke-header-badge-url":r};return null===s||s.okendoDataLoaded?e.createElement(i,{dataAttributes:d}):o||e.createElement("div",{style:{height:"350px"}})},exports.OkendoStarRating=({productId:t,okendoStarRatingSnippet:n,placeholder:r})=>{const o=a(),s={"data-oke-star-rating":"","data-oke-reviews-product-id":l(t)};return null===o||o.okendoDataLoaded?e.createElement(i,{dataAttributes:s,metafieldContent:n?.value}):r||e.createElement("div",{style:{height:"20px"}})},exports.getOkendoProviderData=async({context:e,subscriberId:t,apiDomain:n,cdnDomain:r})=>{const a=`https://${n||"api.okendo.io/v1"}/stores/${t}/widget_plus_settings`,s=await fetch(a);if(!s.ok)return console.error(`Failed to retrieve subscriber settings for subscriber ID '${t}'.`),null;const{reviewsHeaderConfig:i,cssVariables:d,customCss:l,starSymbols:c}=await s.json(),u=await fetch(`https://${r||o}/reviews-widget-plus/js/okendo-reviews.js`);if(!u.ok)return console.error("Failed to retrieve widget initialisation script."),null;const p=await u.text(),{shop:{widgetPreRenderStyleTags:m}}=await e.storefront.query('#graphql\n\t\tquery metafields {\n\t\t\tshop {\n\t\t\t\twidgetPreRenderStyleTags: metafield(\n\t\t\t\t\tnamespace: "$app:reviews"\n\t\t\t\t\tkey: "widget_pre_render_style_tags"\n\t\t\t\t) {\n\t\t\t\t\tvalue\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t'),g=m?.value??"";return g||console.warn("Failed to retrieve pre-rendered widget style settings."),{reviewsHeaderConfig:i,cssVariables:d,customCss:l,initScriptContents:p,preRenderStyleTags:g,starSymbols:c}};
+"use strict";var e=require("react-router"),t=require("react");const n=/^[0-9]*$/,r="app--1576377";function s(e){if(e)return`shopify-${n.test(e)?e:e.split("/").slice(-1)[0]}`}const a="cdn-static.okendo.io",o=({nonce:e="",okendoProviderData:n,productUrlFormatter:r,cdnDomain:s})=>{const o=t.useRef(!1),i=t.useRef(!1);if(t.useEffect((()=>{if(n&&n.loyaltySettings&&!1===o.current){const e=document.createElement("script");e.src=`https://${s||a}/loyalty/js/init-onsite.js`,document.head.appendChild(e);const t=document.createElement("script");t.type="application/json",t.id="oke-loyalty-settings";const r=n.loyaltySettings?n.loyaltySettings.replace('<script type="application/json" id="oke-loyalty-settings">',"").replace('<\/script><script src="https://rhys-cdn.okendo.dev/loyalty/js/init-onsite.js" defer><\/script>',""):"";t.innerHTML=r,document.head.appendChild(t),o.current=!0}}),[n,s]),t.useEffect((()=>{if(n&&!i.current){const e=document.createElement("script");e.src=`https://${s||a}/reviews-widget-plus/js/okendo-reviews.js`,document.head.appendChild(e),i.current=!0}}),[n,s]),!n)return null;const{reviewsHeaderConfig:d,cssVariables:l,customCss:c,preRenderStyleTags:u,starSymbols:p}=n,y=(l??"").replace('<style id="oke-css-vars">',"").replace("</style>",""),m=c?c.replace('<style id="oke-reviews-custom-css">',"").replace("</style>",""):"";return t.createElement(t.Fragment,null,t.createElement("script",{nonce:e,id:"oke-reviews-settings",type:"application/json",dangerouslySetInnerHTML:{__html:JSON.stringify(d)}}),t.createElement("style",{nonce:e,id:"oke-css-vars",dangerouslySetInnerHTML:{__html:y}}),m&&t.createElement("style",{nonce:e,id:"oke-reviews-custom-css",dangerouslySetInnerHTML:{__html:m}}),t.createElement("script",{nonce:e,type:"text/javascript",dangerouslySetInnerHTML:{__html:`window.okeProductUrlFormatter = ${"function"==typeof r?r.toString():"string"==typeof r?r:"(product) =>\n    product && product.productHandle\n        ? \"/products/\" + product.productHandle + \"/\" + (product.variantId ? '?variantId=' + product.variantId : '')\n        : undefined"}`}}),u&&t.createElement("div",{dangerouslySetInnerHTML:{__html:u}}),p&&t.createElement("div",{dangerouslySetInnerHTML:{__html:p}}))};const i=({style:e,className:n,dataAttributes:r,metafieldContent:s=""})=>{const a=t.useRef(null),o=t.useRef(!1),i=function(e){const n=t.useRef();return t.useEffect((()=>{n.current=e})),n.current}(r),d=()=>{a.current&&(window.okeWidgetApi.initWidget(a.current),o.current=!0)};return t.useEffect((()=>{if(!i||r["data-oke-widget"]!==i["data-oke-widget"]||r["data-oke-star-rating"]!==i["data-oke-star-rating"]||r["data-oke-reviews-product-id"]!==i["data-oke-reviews-product-id"]||!o.current)return window.okeWidgetApi&&a.current?d():document.addEventListener("oke-script-loaded",d),()=>{document.removeEventListener("oke-script-loaded",d)}}),[r,i]),t.createElement("div",{ref:a,style:e,className:n,key:JSON.stringify(r),...r,dangerouslySetInnerHTML:s?{__html:s}:void 0})},d=`#graphql\n\tfragment OkendoStarRatingSnippet on Product {\n\t\tokendoStarRatingSnippet: metafield(\n\t\t\tnamespace: "${r}--reviews"\n\t\t\tkey: "star_rating_snippet"\n\t\t) {\n\t\t\tvalue\n\t\t}\n\t}\n`,l=`#graphql\n\tfragment OkendoReviewsSnippet on Product {\n\t\tokendoReviewsSnippet: metafield(\n\t\t\tnamespace: "${r}--reviews"\n\t\t\tkey: "reviews_widget_snippet"\n\t\t) {\n\t\t\tvalue\n\t\t}\n\t}\n`;exports.OKENDO_PRODUCT_REVIEWS_FRAGMENT=l,exports.OKENDO_PRODUCT_STAR_RATING_FRAGMENT=d,exports.OkendoLoyaltyEmbeddedWidget=function(){const n=e.useLocation();return t.useEffect((()=>{window?.okeLoyaltyApi?.initialiseWidgets()}),[n.pathname]),t.createElement("div",{"data-oke-loyalty-embedded-widget":""})},exports.OkendoProvider=({nonce:n="",okendoProviderData:r,customerAccessToken:s,productUrlFormatter:a,cdnDomain:i,children:d})=>t.createElement(t.Fragment,null,t.createElement(t.Suspense,null,t.createElement(e.Await,{resolve:r},(e=>t.createElement(o,{nonce:n,okendoProviderData:e,productUrlFormatter:a,cdnDomain:i})))),s&&t.createElement("script",{nonce:n,id:"oke-loyalty-customer-access-token",type:"application/json",dangerouslySetInnerHTML:{__html:JSON.stringify({customerAccessToken:s})}}),d),exports.OkendoReviews=({style:e,className:n,productId:r,okendoReviewsSnippet:a})=>{const o=r?.length?s(r):null,d=r?.length?a:null,l={"data-oke-widget":"","data-oke-reviews-product-id":o};return t.createElement(i,{style:e,className:n,dataAttributes:l,metafieldContent:d?.value})},exports.OkendoReviewsCarousel=({style:e,className:n,productId:r,groupId:a,headerBadgeUrl:o})=>{const d={"data-oke-carousel":"","data-oke-reviews-product-id":r?.length?s(r):null,"data-oke-reviews-group-id":a?.length?a:null,"data-oke-header-badge-url":o};return t.createElement(i,{style:e,className:n,dataAttributes:d})},exports.OkendoStarRating=({style:e,className:n,productId:r,okendoStarRatingSnippet:a})=>{const o={"data-oke-star-rating":"","data-oke-reviews-product-id":s(r)};return t.createElement(i,{style:e,className:n,dataAttributes:o,metafieldContent:a?.value})},exports.getOkendoProviderData=async({context:e,subscriberId:t,apiDomain:n,okendoProducts:s=["reviews"],appNamespace:a})=>{if(!s.length)return null;const o=`loyaltySettings: metafield(\n        namespace: "${a??r}--loyalty",\n        key: "loyalty_settings"\n    ) {\n        value\n    }`,i=`widgetPreRenderStyleTags: metafield(\n        namespace: "${a??r}--reviews",\n        key: "widget_pre_render_style_tags"\n    ) {\n        value\n    }`,d=`#graphql\n        query metafields {\n            shop {\n                ${s.includes("loyalty")?o:""}\n                ${s.includes("reviews")?i:""}\n            }\n        }\n    `,{shop:{loyaltySettings:l,widgetPreRenderStyleTags:c}}=await e.storefront.query(d);let u=null;if(s.includes("loyalty")&&(u={...u??{},loyaltySettings:l?.value??""}),s.includes("reviews")){const e=`https://${n||"api.okendo.io/v1"}/stores/${t}/widget_plus_settings`,r=await fetch(e);if(!r.ok)return console.error(`Failed to retrieve subscriber settings for subscriber ID '${t}'.`),u;const{reviewsHeaderConfig:s,cssVariables:a,customCss:o,starSymbols:i}=await r.json(),d=c?.value??"";d||console.warn("Failed to retrieve pre-rendered widget style settings."),u={...u??{},reviewsHeaderConfig:s,cssVariables:a,customCss:o,preRenderStyleTags:d,starSymbols:i}}return u};

package/dist/cjs/types/components/OkendoLoyalty/OkendoLoyaltyEmbeddedWidget.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+declare global {
+    interface Window {
+        okeLoyaltyApi?: {
+            initialiseWidgets: () => void;
+        };
+    }
+}
+export declare function OkendoLoyaltyEmbeddedWidget(): React.JSX.Element;

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

@@ -0,0 +1 @@
+export * from './OkendoLoyaltyEmbeddedWidget';

package/dist/cjs/types/components/OkendoProvider/OkendoProvider.d.ts

@@ -1,22 +1,29 @@
 import type { WidgetPlus } from '@okendo/reviews-common';
-import type { Storefront } from '@shopify/hydrogen';
+import type { CustomerAccount, Storefront } from '@shopify/hydrogen';
 import React, { type PropsWithChildren } from 'react';
-interface OkendoProviderData {
+type OkendoProviderData = Partial<OkendoReviewsProviderData & OkendoLoyaltyProviderData>;
+type OkendoProduct = 'reviews' | 'loyalty';
+interface OkendoReviewsProviderData {
     reviewsHeaderConfig: WidgetPlus.ReviewsHeaderConfig;
     cssVariables: string;
     customCss?: string;
-    initScriptContents: string;
     preRenderStyleTags: string;
     starSymbols: string;
 }
-export declare const getOkendoProviderData: ({ context, subscriberId, apiDomain, cdnDomain, }: {
-    context: {
-        storefront: Storefront;
-    };
+interface OkendoLoyaltyProviderData {
+    loyaltySettings: string;
+}
+export declare const getOkendoProviderData: ({ context, subscriberId, apiDomain, okendoProducts, appNamespace, }: {
+    context: StorefrontContext;
     subscriberId: string;
     apiDomain?: string;
-    cdnDomain?: string;
+    okendoProducts?: OkendoProduct[];
+    appNamespace?: string;
 }) => Promise<OkendoProviderData | null>;
+interface StorefrontContext {
+    customerAccount: CustomerAccount;
+    storefront: Storefront;
+}
 interface ReviewProduct {
     productHandle?: string;
     productId: string;
@@ -29,16 +36,17 @@ interface OkendoProviderProps {
      */
     nonce?: string;
     /**
-     * Either:
-     * - the data returned by the promise returned by `getOkendoProviderData`, using this will allow the
-     * Okendo widgets to show instantly on page load, but it will slightly increase the page load time;
-     * - the promise returned by `getOkendoProviderData`, using this will make the Okendo widgets
-     * show slightly after page load, but it have the advantage of not increasing the page load time.
+     * The promise returned by `getOkendoProviderData`.
+     */
+    okendoProviderData: Promise<OkendoProviderData | null>;
+    /**
+     * Used by the loyalty widget to verify the user's identity via the Storefront API.
+     * Can be retrieved via `await context.customerAccount.getAccessToken()` in the loader function.
      */
-    okendoProviderData: Partial<OkendoProviderData> | null | Promise<Partial<OkendoProviderData> | null>;
+    customerAccessToken?: string;
     /** An optional product URL formatter */
     productUrlFormatter?: (product: ReviewProduct) => string;
     cdnDomain?: string;
 }
-export declare const OkendoProvider: ({ nonce, okendoProviderData, productUrlFormatter, cdnDomain, children, }: OkendoProviderProps & PropsWithChildren) => React.JSX.Element;
+export declare const OkendoProvider: ({ nonce, okendoProviderData, customerAccessToken, productUrlFormatter, cdnDomain, children, }: OkendoProviderProps & PropsWithChildren) => React.JSX.Element;
 export {};

package/dist/cjs/types/components/OkendoReviews/OkendoReviews.d.ts

@@ -1,16 +1,13 @@
-import React from 'react';
+import React, { type CSSProperties } from 'react';
 import { type MetafieldValue } from '../../internal/types';
 export interface WithOkendoReviewsSnippet {
     okendoReviewsSnippet?: MetafieldValue | null;
 }
 interface OkendoReviewsProps {
+    style?: CSSProperties;
+    className?: string;
     productId?: string;
     okendoReviewsSnippet?: MetafieldValue | null;
-    /**
-     * Only used if the promise returned by `getOkendoProviderData` is given to the OkendoProvider
-     * without being awaited; in this case, the placeholder here will be shown until the widget is ready
-     */
-    placeholder?: JSX.Element;
 }
-export declare const OkendoReviews: ({ productId, okendoReviewsSnippet, placeholder }: OkendoReviewsProps) => React.JSX.Element;
+export declare const OkendoReviews: ({ style, className, productId, okendoReviewsSnippet }: OkendoReviewsProps) => React.JSX.Element;
 export {};

package/dist/cjs/types/components/OkendoReviewsCarousel/OkendoReviewsCarousel.d.ts

@@ -1,13 +1,10 @@
-import React from 'react';
+import React, { type CSSProperties } from 'react';
 interface OkendoReviewsCarouselProps {
+    style?: CSSProperties;
+    className?: string;
     productId?: string;
     groupId?: string;
     headerBadgeUrl?: string;
-    /**
-     * Only used if the promise returned by `getOkendoProviderData` is given to the OkendoProvider
-     * without being awaited; in this case, the placeholder here will be shown until the widget is ready
-     */
-    placeholder?: JSX.Element;
 }
-export declare const OkendoReviewsCarousel: ({ productId, groupId, headerBadgeUrl, placeholder }: OkendoReviewsCarouselProps) => React.JSX.Element;
+export declare const OkendoReviewsCarousel: ({ style, className, productId, groupId, headerBadgeUrl }: OkendoReviewsCarouselProps) => React.JSX.Element;
 export {};

package/dist/cjs/types/components/OkendoStarRating/OkendoStarRating.d.ts

@@ -1,16 +1,13 @@
-import React, { type ReactNode } from 'react';
+import React, { type CSSProperties } from 'react';
 import { type MetafieldValue } from '../../internal/types';
 export interface WithOkendoStarRatingSnippet {
     okendoStarRatingSnippet?: MetafieldValue | null;
 }
 interface OkendoStarRatingProps {
+    style?: CSSProperties;
+    className?: string;
     productId: string;
     okendoStarRatingSnippet?: MetafieldValue | null;
-    /**
-     * Only used if the promise returned by `getOkendoProviderData` is given to the OkendoProvider
-     * without being awaited; in this case, the placeholder here will be shown until the widget is ready
-     */
-    placeholder?: ReactNode;
 }
-export declare const OkendoStarRating: ({ productId, okendoStarRatingSnippet, placeholder }: OkendoStarRatingProps) => string | number | true | Iterable<React.ReactNode> | React.JSX.Element;
+export declare const OkendoStarRating: ({ style, className, productId, okendoStarRatingSnippet }: OkendoStarRatingProps) => React.JSX.Element;
 export {};

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

@@ -1,3 +1,4 @@
+export * from "./OkendoLoyalty";
 export * from "./OkendoProvider";
 export * from "./OkendoReviews";
 export * from "./OkendoReviewsCarousel";

package/dist/cjs/types/fragments/fragments.d.ts

@@ -1,2 +1,2 @@
-export declare const OKENDO_PRODUCT_STAR_RATING_FRAGMENT: "#graphql\n\tfragment OkendoStarRatingSnippet on Product {\n\t\tokendoStarRatingSnippet: metafield(\n\t\t\tnamespace: \"$app:reviews\"\n\t\t\tkey: \"star_rating_snippet\"\n\t\t) {\n\t\t\tvalue\n\t\t}\n\t}\n";
-export declare const OKENDO_PRODUCT_REVIEWS_FRAGMENT: "#graphql\n\tfragment OkendoReviewsSnippet on Product {\n\t\tokendoReviewsSnippet: metafield(\n\t\t\tnamespace: \"$app:reviews\"\n\t\t\tkey: \"reviews_widget_snippet\"\n\t\t) {\n\t\t\tvalue\n\t\t}\n\t}\n";
+export declare const OKENDO_PRODUCT_STAR_RATING_FRAGMENT: "#graphql\n\tfragment OkendoStarRatingSnippet on Product {\n\t\tokendoStarRatingSnippet: metafield(\n\t\t\tnamespace: \"app--1576377--reviews\"\n\t\t\tkey: \"star_rating_snippet\"\n\t\t) {\n\t\t\tvalue\n\t\t}\n\t}\n";
+export declare const OKENDO_PRODUCT_REVIEWS_FRAGMENT: "#graphql\n\tfragment OkendoReviewsSnippet on Product {\n\t\tokendoReviewsSnippet: metafield(\n\t\t\tnamespace: \"app--1576377--reviews\"\n\t\t\tkey: \"reviews_widget_snippet\"\n\t\t) {\n\t\t\tvalue\n\t\t}\n\t}\n";

package/dist/cjs/types/internal/OkendoWidget/OkendoWidget.d.ts

@@ -1,6 +1,8 @@
 import type { ReviewsWidgetPlus } from '@okendo/reviews-widget-plus/dist-utils/ReviewsWidgetPlus';
-import React from 'react';
+import React, { type CSSProperties } from 'react';
 export interface OkendoWidgetProps {
+    style?: CSSProperties;
+    className?: string;
     dataAttributes: {
         'data-oke-widget'?: string;
         'data-oke-star-rating'?: string;
@@ -13,4 +15,4 @@ declare global {
         okeWidgetApi: ReviewsWidgetPlus.WidgetWindowApi;
     }
 }
-export declare const OkendoWidget: ({ dataAttributes, metafieldContent }: OkendoWidgetProps) => React.JSX.Element;
+export declare const OkendoWidget: ({ style, className, dataAttributes, metafieldContent }: OkendoWidgetProps) => React.JSX.Element;

package/dist/cjs/types/internal/utils.d.ts

@@ -1,3 +1,4 @@
+export declare const OKENDO_APP_NAMESPACE = "app--1576377";
 /**
  * Gets the product ID with Okendo formatting.
  * @param productId The Shopify Product ID e.g. gid://shopify/Product/10079785100.

package/dist/esm/index.js

@@ -1 +1 @@
-import e,{createContext as t,useState as n,useContext as r,Suspense as a,useRef as o,useEffect as i}from"react";import{Await as d}from"@remix-run/react";const s=t(void 0),l=({children:t})=>{const[r,a]=n(!1);return e.createElement(s.Provider,{value:{okendoDataLoaded:r,setOkendoDataLoaded:a}},t)},c=()=>{const e=r(s);return void 0===e?null:e},u="cdn-static.okendo.io",p=async({context:e,subscriberId:t,apiDomain:n,cdnDomain:r})=>{const a=`https://${n||"api.okendo.io/v1"}/stores/${t}/widget_plus_settings`,o=await fetch(a);if(!o.ok)return console.error(`Failed to retrieve subscriber settings for subscriber ID '${t}'.`),null;const{reviewsHeaderConfig:i,cssVariables:d,customCss:s,starSymbols:l}=await o.json(),c=await fetch(`https://${r||u}/reviews-widget-plus/js/okendo-reviews.js`);if(!c.ok)return console.error("Failed to retrieve widget initialisation script."),null;const p=await c.text(),{shop:{widgetPreRenderStyleTags:m}}=await e.storefront.query('#graphql\n\t\tquery metafields {\n\t\t\tshop {\n\t\t\t\twidgetPreRenderStyleTags: metafield(\n\t\t\t\t\tnamespace: "$app:reviews"\n\t\t\t\t\tkey: "widget_pre_render_style_tags"\n\t\t\t\t) {\n\t\t\t\t\tvalue\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t'),g=m?.value??"";return g||console.warn("Failed to retrieve pre-rendered widget style settings."),{reviewsHeaderConfig:i,cssVariables:d,customCss:s,initScriptContents:p,preRenderStyleTags:g,starSymbols:l}},m=({nonce:t="",okendoProviderData:n,productUrlFormatter:r,cdnDomain:o,children:i})=>e.createElement(l,null,n&&"then"in n?e.createElement(a,null,e.createElement(d,{resolve:n},(n=>e.createElement(g,{nonce:t,okendoProviderData:n,productUrlFormatter:r,cdnDomain:o,awaited:!0})))):e.createElement(g,{nonce:t,okendoProviderData:n,productUrlFormatter:r,cdnDomain:o}),i),g=({nonce:t="",okendoProviderData:n,productUrlFormatter:r,awaited:a,cdnDomain:d})=>{const s=c(),l=o(!1);if(i((()=>{if(n&&s?.setOkendoDataLoaded(!0),n&&a&&!l.current){const e=document.createElement("script");e.src=`https://${d||u}/reviews-widget-plus/js/okendo-reviews.js`,document.head.appendChild(e),l.current=!0}}),[n,s,a,d]),!n)return null;const{reviewsHeaderConfig:p,cssVariables:m,customCss:g,initScriptContents:v,preRenderStyleTags:k,starSymbols:w}=n,y=(m??"").replace('<style id="oke-css-vars">',"").replace("</style>",""),h=g?g.replace('<style id="oke-reviews-custom-css">',"").replace("</style>",""):"";return e.createElement(e.Fragment,null,e.createElement("script",{nonce:t,id:"oke-reviews-settings",type:"application/json",dangerouslySetInnerHTML:{__html:JSON.stringify(p)}}),e.createElement("style",{nonce:t,id:"oke-css-vars",dangerouslySetInnerHTML:{__html:y}}),h&&e.createElement("style",{nonce:t,id:"oke-reviews-custom-css",dangerouslySetInnerHTML:{__html:h}}),!a&&v&&e.createElement("script",{nonce:t,dangerouslySetInnerHTML:{__html:v}}),e.createElement("script",{nonce:t,type:"text/javascript",dangerouslySetInnerHTML:{__html:`window.okeProductUrlFormatter = ${"function"==typeof r?r.toString():"string"==typeof r?r:"(product) =>\n    product && product.productHandle\n        ? \"/products/\" + product.productHandle + \"/\" + (product.variantId ? '?variantId=' + product.variantId : '')\n        : undefined"}`}}),k&&e.createElement("div",{dangerouslySetInnerHTML:{__html:k}}),w&&e.createElement("div",{dangerouslySetInnerHTML:{__html:w}}))};const v=({dataAttributes:t,metafieldContent:n=""})=>{const r=o(null),a=o(!1),d=function(e){const t=o();return i((()=>{t.current=e})),t.current}(t),s=()=>{r.current&&(window.okeWidgetApi.initWidget(r.current),a.current=!0)};return i((()=>{if(!d||t["data-oke-widget"]!==d["data-oke-widget"]||t["data-oke-star-rating"]!==d["data-oke-star-rating"]||t["data-oke-reviews-product-id"]!==d["data-oke-reviews-product-id"]||!a.current)return window.okeWidgetApi&&r.current?s():document.addEventListener("oke-script-loaded",s),()=>{document.removeEventListener("oke-script-loaded",s)}}),[t,d]),e.createElement("div",{ref:r,key:JSON.stringify(t),...t,dangerouslySetInnerHTML:n?{__html:n}:void 0})},k=/^[0-9]*$/;function w(e){if(e)return`shopify-${k.test(e)?e:e.split("/").slice(-1)[0]}`}const y=({productId:t,okendoReviewsSnippet:n,placeholder:r})=>{const a=c(),o=t?.length?w(t):null,i=t?.length?n:null,d={"data-oke-widget":"","data-oke-reviews-product-id":o};return null===a||a.okendoDataLoaded?e.createElement(v,{dataAttributes:d,metafieldContent:i?.value}):r||e.createElement("div",{style:{height:"350px"}})},h=({productId:t,groupId:n,headerBadgeUrl:r,placeholder:a})=>{const o=c(),i={"data-oke-carousel":"","data-oke-reviews-product-id":t?.length?w(t):null,"data-oke-reviews-group-id":n?.length?n:null,"data-oke-header-badge-url":r};return null===o||o.okendoDataLoaded?e.createElement(v,{dataAttributes:i}):a||e.createElement("div",{style:{height:"350px"}})},f=({productId:t,okendoStarRatingSnippet:n,placeholder:r})=>{const a=c(),o={"data-oke-star-rating":"","data-oke-reviews-product-id":w(t)};return null===a||a.okendoDataLoaded?e.createElement(v,{dataAttributes:o,metafieldContent:n?.value}):r||e.createElement("div",{style:{height:"20px"}})},S='#graphql\n\tfragment OkendoStarRatingSnippet on Product {\n\t\tokendoStarRatingSnippet: metafield(\n\t\t\tnamespace: "$app:reviews"\n\t\t\tkey: "star_rating_snippet"\n\t\t) {\n\t\t\tvalue\n\t\t}\n\t}\n',_='#graphql\n\tfragment OkendoReviewsSnippet on Product {\n\t\tokendoReviewsSnippet: metafield(\n\t\t\tnamespace: "$app:reviews"\n\t\t\tkey: "reviews_widget_snippet"\n\t\t) {\n\t\t\tvalue\n\t\t}\n\t}\n';export{_ as OKENDO_PRODUCT_REVIEWS_FRAGMENT,S as OKENDO_PRODUCT_STAR_RATING_FRAGMENT,m as OkendoProvider,y as OkendoReviews,h as OkendoReviewsCarousel,f as OkendoStarRating,p as getOkendoProviderData};
+import{useLocation as e,Await as t}from"react-router";import n,{useEffect as r,Suspense as s,useRef as a}from"react";function o(){const t=e();return r((()=>{window?.okeLoyaltyApi?.initialiseWidgets()}),[t.pathname]),n.createElement("div",{"data-oke-loyalty-embedded-widget":""})}const i=/^[0-9]*$/,l="app--1576377";function d(e){if(e)return`shopify-${i.test(e)?e:e.split("/").slice(-1)[0]}`}const c="cdn-static.okendo.io",u=async({context:e,subscriberId:t,apiDomain:n,okendoProducts:r=["reviews"],appNamespace:s})=>{if(!r.length)return null;const a=`loyaltySettings: metafield(\n        namespace: "${s??l}--loyalty",\n        key: "loyalty_settings"\n    ) {\n        value\n    }`,o=`widgetPreRenderStyleTags: metafield(\n        namespace: "${s??l}--reviews",\n        key: "widget_pre_render_style_tags"\n    ) {\n        value\n    }`,i=`#graphql\n        query metafields {\n            shop {\n                ${r.includes("loyalty")?a:""}\n                ${r.includes("reviews")?o:""}\n            }\n        }\n    `,{shop:{loyaltySettings:d,widgetPreRenderStyleTags:c}}=await e.storefront.query(i);let u=null;if(r.includes("loyalty")&&(u={...u??{},loyaltySettings:d?.value??""}),r.includes("reviews")){const e=`https://${n||"api.okendo.io/v1"}/stores/${t}/widget_plus_settings`,r=await fetch(e);if(!r.ok)return console.error(`Failed to retrieve subscriber settings for subscriber ID '${t}'.`),u;const{reviewsHeaderConfig:s,cssVariables:a,customCss:o,starSymbols:i}=await r.json(),l=c?.value??"";l||console.warn("Failed to retrieve pre-rendered widget style settings."),u={...u??{},reviewsHeaderConfig:s,cssVariables:a,customCss:o,preRenderStyleTags:l,starSymbols:i}}return u},p=({nonce:e="",okendoProviderData:r,customerAccessToken:a,productUrlFormatter:o,cdnDomain:i,children:l})=>n.createElement(n.Fragment,null,n.createElement(s,null,n.createElement(t,{resolve:r},(t=>n.createElement(m,{nonce:e,okendoProviderData:t,productUrlFormatter:o,cdnDomain:i})))),a&&n.createElement("script",{nonce:e,id:"oke-loyalty-customer-access-token",type:"application/json",dangerouslySetInnerHTML:{__html:JSON.stringify({customerAccessToken:a})}}),l),m=({nonce:e="",okendoProviderData:t,productUrlFormatter:s,cdnDomain:o})=>{const i=a(!1),l=a(!1);if(r((()=>{if(t&&t.loyaltySettings&&!1===i.current){const e=document.createElement("script");e.src=`https://${o||c}/loyalty/js/init-onsite.js`,document.head.appendChild(e);const n=document.createElement("script");n.type="application/json",n.id="oke-loyalty-settings";const r=t.loyaltySettings?t.loyaltySettings.replace('<script type="application/json" id="oke-loyalty-settings">',"").replace('<\/script><script src="https://rhys-cdn.okendo.dev/loyalty/js/init-onsite.js" defer><\/script>',""):"";n.innerHTML=r,document.head.appendChild(n),i.current=!0}}),[t,o]),r((()=>{if(t&&!l.current){const e=document.createElement("script");e.src=`https://${o||c}/reviews-widget-plus/js/okendo-reviews.js`,document.head.appendChild(e),l.current=!0}}),[t,o]),!t)return null;const{reviewsHeaderConfig:d,cssVariables:u,customCss:p,preRenderStyleTags:m,starSymbols:y}=t,g=(u??"").replace('<style id="oke-css-vars">',"").replace("</style>",""),v=p?p.replace('<style id="oke-reviews-custom-css">',"").replace("</style>",""):"";return n.createElement(n.Fragment,null,n.createElement("script",{nonce:e,id:"oke-reviews-settings",type:"application/json",dangerouslySetInnerHTML:{__html:JSON.stringify(d)}}),n.createElement("style",{nonce:e,id:"oke-css-vars",dangerouslySetInnerHTML:{__html:g}}),v&&n.createElement("style",{nonce:e,id:"oke-reviews-custom-css",dangerouslySetInnerHTML:{__html:v}}),n.createElement("script",{nonce:e,type:"text/javascript",dangerouslySetInnerHTML:{__html:`window.okeProductUrlFormatter = ${"function"==typeof s?s.toString():"string"==typeof s?s:"(product) =>\n    product && product.productHandle\n        ? \"/products/\" + product.productHandle + \"/\" + (product.variantId ? '?variantId=' + product.variantId : '')\n        : undefined"}`}}),m&&n.createElement("div",{dangerouslySetInnerHTML:{__html:m}}),y&&n.createElement("div",{dangerouslySetInnerHTML:{__html:y}}))};const y=({style:e,className:t,dataAttributes:s,metafieldContent:o=""})=>{const i=a(null),l=a(!1),d=function(e){const t=a();return r((()=>{t.current=e})),t.current}(s),c=()=>{i.current&&(window.okeWidgetApi.initWidget(i.current),l.current=!0)};return r((()=>{if(!d||s["data-oke-widget"]!==d["data-oke-widget"]||s["data-oke-star-rating"]!==d["data-oke-star-rating"]||s["data-oke-reviews-product-id"]!==d["data-oke-reviews-product-id"]||!l.current)return window.okeWidgetApi&&i.current?c():document.addEventListener("oke-script-loaded",c),()=>{document.removeEventListener("oke-script-loaded",c)}}),[s,d]),n.createElement("div",{ref:i,style:e,className:t,key:JSON.stringify(s),...s,dangerouslySetInnerHTML:o?{__html:o}:void 0})},g=({style:e,className:t,productId:r,okendoReviewsSnippet:s})=>{const a=r?.length?d(r):null,o=r?.length?s:null,i={"data-oke-widget":"","data-oke-reviews-product-id":a};return n.createElement(y,{style:e,className:t,dataAttributes:i,metafieldContent:o?.value})},v=({style:e,className:t,productId:r,groupId:s,headerBadgeUrl:a})=>{const o={"data-oke-carousel":"","data-oke-reviews-product-id":r?.length?d(r):null,"data-oke-reviews-group-id":s?.length?s:null,"data-oke-header-badge-url":a};return n.createElement(y,{style:e,className:t,dataAttributes:o})},k=({style:e,className:t,productId:r,okendoStarRatingSnippet:s})=>{const a={"data-oke-star-rating":"","data-oke-reviews-product-id":d(r)};return n.createElement(y,{style:e,className:t,dataAttributes:a,metafieldContent:s?.value})},w=`#graphql\n\tfragment OkendoStarRatingSnippet on Product {\n\t\tokendoStarRatingSnippet: metafield(\n\t\t\tnamespace: "${l}--reviews"\n\t\t\tkey: "star_rating_snippet"\n\t\t) {\n\t\t\tvalue\n\t\t}\n\t}\n`,f=`#graphql\n\tfragment OkendoReviewsSnippet on Product {\n\t\tokendoReviewsSnippet: metafield(\n\t\t\tnamespace: "${l}--reviews"\n\t\t\tkey: "reviews_widget_snippet"\n\t\t) {\n\t\t\tvalue\n\t\t}\n\t}\n`;export{f as OKENDO_PRODUCT_REVIEWS_FRAGMENT,w as OKENDO_PRODUCT_STAR_RATING_FRAGMENT,o as OkendoLoyaltyEmbeddedWidget,p as OkendoProvider,g as OkendoReviews,v as OkendoReviewsCarousel,k as OkendoStarRating,u as getOkendoProviderData};

package/dist/esm/types/components/OkendoLoyalty/OkendoLoyaltyEmbeddedWidget.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+declare global {
+    interface Window {
+        okeLoyaltyApi?: {
+            initialiseWidgets: () => void;
+        };
+    }
+}
+export declare function OkendoLoyaltyEmbeddedWidget(): React.JSX.Element;

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

@@ -0,0 +1 @@
+export * from './OkendoLoyaltyEmbeddedWidget';

package/dist/esm/types/components/OkendoProvider/OkendoProvider.d.ts

@@ -1,22 +1,29 @@
 import type { WidgetPlus } from '@okendo/reviews-common';
-import type { Storefront } from '@shopify/hydrogen';
+import type { CustomerAccount, Storefront } from '@shopify/hydrogen';
 import React, { type PropsWithChildren } from 'react';
-interface OkendoProviderData {
+type OkendoProviderData = Partial<OkendoReviewsProviderData & OkendoLoyaltyProviderData>;
+type OkendoProduct = 'reviews' | 'loyalty';
+interface OkendoReviewsProviderData {
     reviewsHeaderConfig: WidgetPlus.ReviewsHeaderConfig;
     cssVariables: string;
     customCss?: string;
-    initScriptContents: string;
     preRenderStyleTags: string;
     starSymbols: string;
 }
-export declare const getOkendoProviderData: ({ context, subscriberId, apiDomain, cdnDomain, }: {
-    context: {
-        storefront: Storefront;
-    };
+interface OkendoLoyaltyProviderData {
+    loyaltySettings: string;
+}
+export declare const getOkendoProviderData: ({ context, subscriberId, apiDomain, okendoProducts, appNamespace, }: {
+    context: StorefrontContext;
     subscriberId: string;
     apiDomain?: string;
-    cdnDomain?: string;
+    okendoProducts?: OkendoProduct[];
+    appNamespace?: string;
 }) => Promise<OkendoProviderData | null>;
+interface StorefrontContext {
+    customerAccount: CustomerAccount;
+    storefront: Storefront;
+}
 interface ReviewProduct {
     productHandle?: string;
     productId: string;
@@ -29,16 +36,17 @@ interface OkendoProviderProps {
      */
     nonce?: string;
     /**
-     * Either:
-     * - the data returned by the promise returned by `getOkendoProviderData`, using this will allow the
-     * Okendo widgets to show instantly on page load, but it will slightly increase the page load time;
-     * - the promise returned by `getOkendoProviderData`, using this will make the Okendo widgets
-     * show slightly after page load, but it have the advantage of not increasing the page load time.
+     * The promise returned by `getOkendoProviderData`.
+     */
+    okendoProviderData: Promise<OkendoProviderData | null>;
+    /**
+     * Used by the loyalty widget to verify the user's identity via the Storefront API.
+     * Can be retrieved via `await context.customerAccount.getAccessToken()` in the loader function.
      */
-    okendoProviderData: Partial<OkendoProviderData> | null | Promise<Partial<OkendoProviderData> | null>;
+    customerAccessToken?: string;
     /** An optional product URL formatter */
     productUrlFormatter?: (product: ReviewProduct) => string;
     cdnDomain?: string;
 }
-export declare const OkendoProvider: ({ nonce, okendoProviderData, productUrlFormatter, cdnDomain, children, }: OkendoProviderProps & PropsWithChildren) => React.JSX.Element;
+export declare const OkendoProvider: ({ nonce, okendoProviderData, customerAccessToken, productUrlFormatter, cdnDomain, children, }: OkendoProviderProps & PropsWithChildren) => React.JSX.Element;
 export {};

package/dist/esm/types/components/OkendoReviews/OkendoReviews.d.ts

@@ -1,16 +1,13 @@
-import React from 'react';
+import React, { type CSSProperties } from 'react';
 import { type MetafieldValue } from '../../internal/types';
 export interface WithOkendoReviewsSnippet {
     okendoReviewsSnippet?: MetafieldValue | null;
 }
 interface OkendoReviewsProps {
+    style?: CSSProperties;
+    className?: string;
     productId?: string;
     okendoReviewsSnippet?: MetafieldValue | null;
-    /**
-     * Only used if the promise returned by `getOkendoProviderData` is given to the OkendoProvider
-     * without being awaited; in this case, the placeholder here will be shown until the widget is ready
-     */
-    placeholder?: JSX.Element;
 }
-export declare const OkendoReviews: ({ productId, okendoReviewsSnippet, placeholder }: OkendoReviewsProps) => React.JSX.Element;
+export declare const OkendoReviews: ({ style, className, productId, okendoReviewsSnippet }: OkendoReviewsProps) => React.JSX.Element;
 export {};

package/dist/esm/types/components/OkendoReviewsCarousel/OkendoReviewsCarousel.d.ts

@@ -1,13 +1,10 @@
-import React from 'react';
+import React, { type CSSProperties } from 'react';
 interface OkendoReviewsCarouselProps {
+    style?: CSSProperties;
+    className?: string;
     productId?: string;
     groupId?: string;
     headerBadgeUrl?: string;
-    /**
-     * Only used if the promise returned by `getOkendoProviderData` is given to the OkendoProvider
-     * without being awaited; in this case, the placeholder here will be shown until the widget is ready
-     */
-    placeholder?: JSX.Element;
 }
-export declare const OkendoReviewsCarousel: ({ productId, groupId, headerBadgeUrl, placeholder }: OkendoReviewsCarouselProps) => React.JSX.Element;
+export declare const OkendoReviewsCarousel: ({ style, className, productId, groupId, headerBadgeUrl }: OkendoReviewsCarouselProps) => React.JSX.Element;
 export {};

package/dist/esm/types/components/OkendoStarRating/OkendoStarRating.d.ts

@@ -1,16 +1,13 @@
-import React, { type ReactNode } from 'react';
+import React, { type CSSProperties } from 'react';
 import { type MetafieldValue } from '../../internal/types';
 export interface WithOkendoStarRatingSnippet {
     okendoStarRatingSnippet?: MetafieldValue | null;
 }
 interface OkendoStarRatingProps {
+    style?: CSSProperties;
+    className?: string;
     productId: string;
     okendoStarRatingSnippet?: MetafieldValue | null;
-    /**
-     * Only used if the promise returned by `getOkendoProviderData` is given to the OkendoProvider
-     * without being awaited; in this case, the placeholder here will be shown until the widget is ready
-     */
-    placeholder?: ReactNode;
 }
-export declare const OkendoStarRating: ({ productId, okendoStarRatingSnippet, placeholder }: OkendoStarRatingProps) => string | number | true | Iterable<React.ReactNode> | React.JSX.Element;
+export declare const OkendoStarRating: ({ style, className, productId, okendoStarRatingSnippet }: OkendoStarRatingProps) => React.JSX.Element;
 export {};

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

@@ -1,3 +1,4 @@
+export * from "./OkendoLoyalty";
 export * from "./OkendoProvider";
 export * from "./OkendoReviews";
 export * from "./OkendoReviewsCarousel";

package/dist/esm/types/fragments/fragments.d.ts

@@ -1,2 +1,2 @@
-export declare const OKENDO_PRODUCT_STAR_RATING_FRAGMENT: "#graphql\n\tfragment OkendoStarRatingSnippet on Product {\n\t\tokendoStarRatingSnippet: metafield(\n\t\t\tnamespace: \"$app:reviews\"\n\t\t\tkey: \"star_rating_snippet\"\n\t\t) {\n\t\t\tvalue\n\t\t}\n\t}\n";
-export declare const OKENDO_PRODUCT_REVIEWS_FRAGMENT: "#graphql\n\tfragment OkendoReviewsSnippet on Product {\n\t\tokendoReviewsSnippet: metafield(\n\t\t\tnamespace: \"$app:reviews\"\n\t\t\tkey: \"reviews_widget_snippet\"\n\t\t) {\n\t\t\tvalue\n\t\t}\n\t}\n";
+export declare const OKENDO_PRODUCT_STAR_RATING_FRAGMENT: "#graphql\n\tfragment OkendoStarRatingSnippet on Product {\n\t\tokendoStarRatingSnippet: metafield(\n\t\t\tnamespace: \"app--1576377--reviews\"\n\t\t\tkey: \"star_rating_snippet\"\n\t\t) {\n\t\t\tvalue\n\t\t}\n\t}\n";
+export declare const OKENDO_PRODUCT_REVIEWS_FRAGMENT: "#graphql\n\tfragment OkendoReviewsSnippet on Product {\n\t\tokendoReviewsSnippet: metafield(\n\t\t\tnamespace: \"app--1576377--reviews\"\n\t\t\tkey: \"reviews_widget_snippet\"\n\t\t) {\n\t\t\tvalue\n\t\t}\n\t}\n";

package/dist/esm/types/internal/OkendoWidget/OkendoWidget.d.ts

@@ -1,6 +1,8 @@
 import type { ReviewsWidgetPlus } from '@okendo/reviews-widget-plus/dist-utils/ReviewsWidgetPlus';
-import React from 'react';
+import React, { type CSSProperties } from 'react';
 export interface OkendoWidgetProps {
+    style?: CSSProperties;
+    className?: string;
     dataAttributes: {
         'data-oke-widget'?: string;
         'data-oke-star-rating'?: string;
@@ -13,4 +15,4 @@ declare global {
         okeWidgetApi: ReviewsWidgetPlus.WidgetWindowApi;
     }
 }
-export declare const OkendoWidget: ({ dataAttributes, metafieldContent }: OkendoWidgetProps) => React.JSX.Element;
+export declare const OkendoWidget: ({ style, className, dataAttributes, metafieldContent }: OkendoWidgetProps) => React.JSX.Element;

package/dist/esm/types/internal/utils.d.ts

@@ -1,3 +1,4 @@
+export declare const OKENDO_APP_NAMESPACE = "app--1576377";
 /**
  * Gets the product ID with Okendo formatting.
  * @param productId The Shopify Product ID e.g. gid://shopify/Product/10079785100.

package/dist/index.d.ts

@@ -1,23 +1,39 @@
+import React, { PropsWithChildren, CSSProperties } from 'react';
 import { WidgetPlus } from '@okendo/reviews-common';
-import { Storefront } from '@shopify/hydrogen';
-import React, { PropsWithChildren, ReactNode } from 'react';
+import { CustomerAccount, Storefront } from '@shopify/hydrogen';
 
-interface OkendoProviderData {
+declare global {
+    interface Window {
+        okeLoyaltyApi?: {
+            initialiseWidgets: () => void;
+        };
+    }
+}
+declare function OkendoLoyaltyEmbeddedWidget(): React.JSX.Element;
+
+type OkendoProviderData = Partial<OkendoReviewsProviderData & OkendoLoyaltyProviderData>;
+type OkendoProduct = 'reviews' | 'loyalty';
+interface OkendoReviewsProviderData {
     reviewsHeaderConfig: WidgetPlus.ReviewsHeaderConfig;
     cssVariables: string;
     customCss?: string;
-    initScriptContents: string;
     preRenderStyleTags: string;
     starSymbols: string;
 }
-declare const getOkendoProviderData: ({ context, subscriberId, apiDomain, cdnDomain, }: {
-    context: {
-        storefront: Storefront;
-    };
+interface OkendoLoyaltyProviderData {
+    loyaltySettings: string;
+}
+declare const getOkendoProviderData: ({ context, subscriberId, apiDomain, okendoProducts, appNamespace, }: {
+    context: StorefrontContext;
     subscriberId: string;
     apiDomain?: string;
-    cdnDomain?: string;
+    okendoProducts?: OkendoProduct[];
+    appNamespace?: string;
 }) => Promise<OkendoProviderData | null>;
+interface StorefrontContext {
+    customerAccount: CustomerAccount;
+    storefront: Storefront;
+}
 interface ReviewProduct {
     productHandle?: string;
     productId: string;
@@ -30,18 +46,19 @@ interface OkendoProviderProps {
      */
     nonce?: string;
     /**
-     * Either:
-     * - the data returned by the promise returned by `getOkendoProviderData`, using this will allow the
-     * Okendo widgets to show instantly on page load, but it will slightly increase the page load time;
-     * - the promise returned by `getOkendoProviderData`, using this will make the Okendo widgets
-     * show slightly after page load, but it have the advantage of not increasing the page load time.
+     * The promise returned by `getOkendoProviderData`.
+     */
+    okendoProviderData: Promise<OkendoProviderData | null>;
+    /**
+     * Used by the loyalty widget to verify the user's identity via the Storefront API.
+     * Can be retrieved via `await context.customerAccount.getAccessToken()` in the loader function.
      */
-    okendoProviderData: Partial<OkendoProviderData> | null | Promise<Partial<OkendoProviderData> | null>;
+    customerAccessToken?: string;
     /** An optional product URL formatter */
     productUrlFormatter?: (product: ReviewProduct) => string;
     cdnDomain?: string;
 }
-declare const OkendoProvider: ({ nonce, okendoProviderData, productUrlFormatter, cdnDomain, children, }: OkendoProviderProps & PropsWithChildren) => React.JSX.Element;
+declare const OkendoProvider: ({ nonce, okendoProviderData, customerAccessToken, productUrlFormatter, cdnDomain, children, }: OkendoProviderProps & PropsWithChildren) => React.JSX.Element;
 
 interface MetafieldValue {
     value: string;
@@ -51,43 +68,34 @@ interface WithOkendoReviewsSnippet {
     okendoReviewsSnippet?: MetafieldValue | null;
 }
 interface OkendoReviewsProps {
+    style?: CSSProperties;
+    className?: string;
     productId?: string;
     okendoReviewsSnippet?: MetafieldValue | null;
-    /**
-     * Only used if the promise returned by `getOkendoProviderData` is given to the OkendoProvider
-     * without being awaited; in this case, the placeholder here will be shown until the widget is ready
-     */
-    placeholder?: JSX.Element;
 }
-declare const OkendoReviews: ({ productId, okendoReviewsSnippet, placeholder }: OkendoReviewsProps) => React.JSX.Element;
+declare const OkendoReviews: ({ style, className, productId, okendoReviewsSnippet }: OkendoReviewsProps) => React.JSX.Element;
 
 interface OkendoReviewsCarouselProps {
+    style?: CSSProperties;
+    className?: string;
     productId?: string;
     groupId?: string;
     headerBadgeUrl?: string;
-    /**
-     * Only used if the promise returned by `getOkendoProviderData` is given to the OkendoProvider
-     * without being awaited; in this case, the placeholder here will be shown until the widget is ready
-     */
-    placeholder?: JSX.Element;
 }
-declare const OkendoReviewsCarousel: ({ productId, groupId, headerBadgeUrl, placeholder }: OkendoReviewsCarouselProps) => React.JSX.Element;
+declare const OkendoReviewsCarousel: ({ style, className, productId, groupId, headerBadgeUrl }: OkendoReviewsCarouselProps) => React.JSX.Element;
 
 interface WithOkendoStarRatingSnippet {
     okendoStarRatingSnippet?: MetafieldValue | null;
 }
 interface OkendoStarRatingProps {
+    style?: CSSProperties;
+    className?: string;
     productId: string;
     okendoStarRatingSnippet?: MetafieldValue | null;
-    /**
-     * Only used if the promise returned by `getOkendoProviderData` is given to the OkendoProvider
-     * without being awaited; in this case, the placeholder here will be shown until the widget is ready
-     */
-    placeholder?: ReactNode;
 }
-declare const OkendoStarRating: ({ productId, okendoStarRatingSnippet, placeholder }: OkendoStarRatingProps) => string | number | true | Iterable<React.ReactNode> | React.JSX.Element;
+declare const OkendoStarRating: ({ style, className, productId, okendoStarRatingSnippet }: OkendoStarRatingProps) => React.JSX.Element;
 
-declare const OKENDO_PRODUCT_STAR_RATING_FRAGMENT: "#graphql\n\tfragment OkendoStarRatingSnippet on Product {\n\t\tokendoStarRatingSnippet: metafield(\n\t\t\tnamespace: \"$app:reviews\"\n\t\t\tkey: \"star_rating_snippet\"\n\t\t) {\n\t\t\tvalue\n\t\t}\n\t}\n";
-declare const OKENDO_PRODUCT_REVIEWS_FRAGMENT: "#graphql\n\tfragment OkendoReviewsSnippet on Product {\n\t\tokendoReviewsSnippet: metafield(\n\t\t\tnamespace: \"$app:reviews\"\n\t\t\tkey: \"reviews_widget_snippet\"\n\t\t) {\n\t\t\tvalue\n\t\t}\n\t}\n";
+declare const OKENDO_PRODUCT_STAR_RATING_FRAGMENT: "#graphql\n\tfragment OkendoStarRatingSnippet on Product {\n\t\tokendoStarRatingSnippet: metafield(\n\t\t\tnamespace: \"app--1576377--reviews\"\n\t\t\tkey: \"star_rating_snippet\"\n\t\t) {\n\t\t\tvalue\n\t\t}\n\t}\n";
+declare const OKENDO_PRODUCT_REVIEWS_FRAGMENT: "#graphql\n\tfragment OkendoReviewsSnippet on Product {\n\t\tokendoReviewsSnippet: metafield(\n\t\t\tnamespace: \"app--1576377--reviews\"\n\t\t\tkey: \"reviews_widget_snippet\"\n\t\t) {\n\t\t\tvalue\n\t\t}\n\t}\n";
 
-export { OKENDO_PRODUCT_REVIEWS_FRAGMENT, OKENDO_PRODUCT_STAR_RATING_FRAGMENT, OkendoProvider, OkendoReviews, OkendoReviewsCarousel, OkendoStarRating, type WithOkendoReviewsSnippet, type WithOkendoStarRatingSnippet, getOkendoProviderData };
+export { OKENDO_PRODUCT_REVIEWS_FRAGMENT, OKENDO_PRODUCT_STAR_RATING_FRAGMENT, OkendoLoyaltyEmbeddedWidget, OkendoProvider, OkendoReviews, OkendoReviewsCarousel, OkendoStarRating, type WithOkendoReviewsSnippet, type WithOkendoStarRatingSnippet, getOkendoProviderData };

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@okendo/shopify-hydrogen",
-    "version": "2.3.2",
-    "description": "Okendo React components for Shopify Hydrogen 2 (Remix)",
+    "version": "2.5.0",
+    "description": "Okendo React components for Shopify Hydrogen",
     "author": "Okendo",
     "license": "SEE LICENSE IN LICENSE.txt",
     "engines": {
@@ -20,8 +20,8 @@
         "eslint": "eslint src"
     },
     "devDependencies": {
-        "@okendo/reviews-common": "^7.14.0",
-        "@okendo/reviews-widget-plus": "^0.70.23",
+        "@okendo/reviews-common": "^7.111.2",
+        "@okendo/reviews-widget-plus": "^0.77.0",
         "@okendo/tsconfig": "0.0.2",
         "@rollup/plugin-commonjs": "^25.0.7",
         "@rollup/plugin-node-resolve": "^15.2.3",
@@ -41,9 +41,9 @@
         "typescript": "^5.3.3"
     },
     "peerDependencies": {
-        "@remix-run/react": "*",
         "@shopify/hydrogen": "*",
         "@shopify/remix-oxygen": "*",
-        "react": "*"
+        "react": "*",
+        "react-router": "*"
     }
 }

package/dist/cjs/types/internal/OkendoContext.d.ts

@@ -1,10 +0,0 @@
-import React, { type Dispatch, type PropsWithChildren, type SetStateAction } from 'react';
-export declare const OkendoContext: React.Context<{
-    okendoDataLoaded: boolean;
-    setOkendoDataLoaded: Dispatch<SetStateAction<boolean>>;
-} | undefined>;
-export declare const OkendoContextProvider: ({ children }: PropsWithChildren) => React.JSX.Element;
-export declare const useOkendoContext: () => {
-    okendoDataLoaded: boolean;
-    setOkendoDataLoaded: Dispatch<SetStateAction<boolean>>;
-} | null;