@okendo/shopify-hydrogen 2.1.0 → 2.1.2

package/README.md

@@ -16,7 +16,7 @@ This package brings [Okendo's review widgets](https://www.okendo.io/blog/widget-
 
 Our demo store, which is based on the demo store provided by Shopify, can be found [here](https://github.com/okendo/okendo-shopify-hydrogen-demo).
 
-> Note: there have been multiple versions of Shopify's Hydrogen demo store. If you project is based on an old version of it, consult our version history to find out how to add Okendo to it.
+> Note: there have been multiple versions of Shopify's Hydrogen demo store. If your project is based on an old version of it, consult our version history to find out how to add Okendo to it.
 
 ## How it works
 
@@ -256,7 +256,7 @@ mutation {
 
 ## Installation
 
-> The code examples provided in this section are based on the [demo store provided by Shopify](https://github.com/Shopify/hydrogen/tree/main/templates/demo-store). You will find the following steps already done in [our demo store](https://github.com/okendo/okendo-shopify-hydrogen-demo).
+> The code examples provided in this section are based on the Shopify template store created by running `npm create @shopify/hydrogen@latest` (see [Shopify's documentation](https://shopify.dev/docs/custom-storefronts/hydrogen/getting-started)). You will find the following steps already done in [our demo store](https://github.com/okendo/okendo-shopify-hydrogen-demo).
 
 Run:
 
@@ -275,16 +275,18 @@ import {
 } from "@okendo/shopify-hydrogen";
 ```
 
-Locate the `loader` function, append the `okendoProviderData` property to the returned data, and set `subscriberId` to your Okendo subscriber ID:
+Locate the `loader` function, append `okendoProviderData` to the returned data as shown below, and set `subscriberId` to your Okendo subscriber ID:
 
 ```ts
-return defer({
-	...
-	okendoProviderData: await getOkendoProviderData({
-		context,
-		subscriberId: "<your-okendo-subscriber-id>",
-	}),
-});
+return defer(
+	{
+		...
+		okendoProviderData: await getOkendoProviderData({
+			context,
+			subscriberId: "<your-okendo-subscriber-id>",
+		}),
+	}
+);
 ```
 
 Locate the `App` function, add the `meta` tag `oke:subscriber_id` to `head`, and place your Okendo subscriber ID in its content:
@@ -357,13 +359,27 @@ Add the following imports:
 
 ```ts
 import {
-	OKENDO_PRODUCT_STAR_RATING_FRAGMENT,
 	OkendoStarRating,
-	WithOkendoStarRatingSnippet,
+	type WithOkendoStarRatingSnippet,
 } from "@okendo/shopify-hydrogen";
 ```
 
-Locate the `RECOMMENDED_PRODUCTS_QUERY` GraphQL query, and append `${OKENDO_PRODUCT_STAR_RATING_FRAGMENT}` `...OkendoStarRatingSnippet` to it:
+Add the following block just before the `RECOMMENDED_PRODUCTS_QUERY` GraphQL query:
+
+```ts
+const OKENDO_PRODUCT_STAR_RATING_FRAGMENT = `#graphql
+	fragment OkendoStarRatingSnippet on Product {
+		okendoStarRatingSnippet: metafield(
+			namespace: "okendo"
+			key: "StarRatingSnippet"
+		) {
+			value
+		}
+	}
+` as const;
+```
+
+Then append `${OKENDO_PRODUCT_STAR_RATING_FRAGMENT}` and `...OkendoStarRatingSnippet` to `RECOMMENDED_PRODUCTS_QUERY`:
 
 ```ts
 const RECOMMENDED_PRODUCTS_QUERY = `#graphql
@@ -408,7 +424,7 @@ products: Promise<{
 		nodes: (RecommendedProductsQuery['products']['nodes'][0] &
 			WithOkendoStarRatingSnippet)[];
 	};
-};
+}>;
 ```
 
 Add `OkendoStarRating` to `RecommendedProducts`:
@@ -452,12 +468,38 @@ import {
 	OKENDO_PRODUCT_STAR_RATING_FRAGMENT,
 	OkendoReviews,
 	OkendoStarRating,
-	WithOkendoReviewsSnippet,
-	WithOkendoStarRatingSnippet,
+	type WithOkendoReviewsSnippet,
+	type WithOkendoStarRatingSnippet,
 } from "@okendo/shopify-hydrogen";
 ```
 
-Locate the `PRODUCT_FRAGMENT` GraphQL query, and append `${OKENDO_PRODUCT_STAR_RATING_FRAGMENT}`, `${OKENDO_PRODUCT_REVIEWS_FRAGMENT}`, `...OkendoStarRatingSnippet`, and `...OkendoReviewsSnippet` to it:
+Add the following block just before the `RECOMMENDED_PRODUCTS_QUERY` GraphQL query:
+
+```ts
+const OKENDO_PRODUCT_STAR_RATING_FRAGMENT = `#graphql
+	fragment OkendoStarRatingSnippet on Product {
+		okendoStarRatingSnippet: metafield(
+			namespace: "okendo"
+			key: "StarRatingSnippet"
+		) {
+			value
+		}
+	}
+` as const;
+
+const OKENDO_PRODUCT_REVIEWS_FRAGMENT = `#graphql
+	fragment OkendoReviewsSnippet on Product {
+		okendoReviewsSnippet: metafield(
+			namespace: "okendo"
+			key: "ReviewsWidgetSnippet"
+		) {
+			value
+		}
+	}
+` as const;
+```
+
+Then append `${OKENDO_PRODUCT_STAR_RATING_FRAGMENT}`, `${OKENDO_PRODUCT_REVIEWS_FRAGMENT}`, `...OkendoStarRatingSnippet`, and `...OkendoReviewsSnippet` to `PRODUCT_FRAGMENT`:
 
 ```ts
 const PRODUCT_FRAGMENT = `#graphql

package/dist/cjs/index.js

@@ -1 +1 @@
-"use strict";var t=require("react");const e=({dataAttributes:e,metafieldContent:n=""})=>{const r=t.useRef(null),o=()=>{r.current&&window.okeWidgetApi.initWidget(r.current)};return t.useEffect((()=>(window.okeWidgetApi&&r.current?o():document.addEventListener("oke-script-loaded",o),()=>{document.removeEventListener("oke-script-loaded",o)})),[e]),t.createElement("div",{ref:r,key:JSON.stringify(e),...e,dangerouslySetInnerHTML:n?{__html:n}:void 0})},n=/^[0-9]*$/;function r(t){if(t)return`shopify-${n.test(t)?t:t.split("/").slice(-1)[0]}`}exports.OKENDO_PRODUCT_REVIEWS_FRAGMENT='#graphql\n\tfragment OkendoReviewsSnippet on Product {\n\t\tokendoReviewsSnippet: metafield(\n\t\t\tnamespace: "okendo"\n\t\t\tkey: "ReviewsWidgetSnippet"\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: "okendo"\n\t\t\tkey: "StarRatingSnippet"\n\t\t) {\n\t\t\tvalue\n\t\t}\n\t}\n',exports.OkendoProvider=({nonce:e,okendoProviderData:n,productUrlFormatter:r})=>{if(!n)return null;const{reviewsHeaderConfig:o,cssVariables:s,customCss:i,initScriptContents:a,preRenderStyleTags:d,starSymbols:c}=n,l="function"==typeof r?r.toString():"string"==typeof r?r:"(product) =>\n\t\t\t\t\tproduct && product.productHandle\n\t\t\t\t\t\t? \"/products/\" + product.productHandle + \"/\" + (product.variantId ? '?variantId=' + product.variantId : '')\n\t\t\t\t\t\t: undefined",p=(s??"").replace('<style id="oke-css-vars">',"").replace("</style>",""),u=i?i.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(o)}}),t.createElement("style",{nonce:e||"",id:"oke-css-vars",dangerouslySetInnerHTML:{__html:p}}),u&&t.createElement("style",{nonce:e||"",id:"oke-reviews-custom-css",dangerouslySetInnerHTML:{__html:u}}),a&&t.createElement("script",{nonce:e||"",dangerouslySetInnerHTML:{__html:a}}),t.createElement("script",{nonce:e||"",type:"text/javascript",dangerouslySetInnerHTML:{__html:`window.okeProductUrlFormatter = ${l.toString()}`}}),d&&t.createElement("div",{dangerouslySetInnerHTML:{__html:d}}),c&&t.createElement("div",{dangerouslySetInnerHTML:{__html:c}}))},exports.OkendoReviews=({productId:n,okendoReviewsSnippet:o})=>{const s={"data-oke-widget":"","data-oke-reviews-product-id":r(n)};return t.createElement(e,{dataAttributes:s,metafieldContent:o?.value})},exports.OkendoStarRating=({productId:n,okendoStarRatingSnippet:o})=>{const s={"data-oke-star-rating":"","data-oke-reviews-product-id":r(n)};return t.createElement(e,{dataAttributes:s,metafieldContent:o?.value})},exports.getOkendoProviderData=async({context:t,subscriberId:e,apiDomain:n,cdnDomain:r})=>{const o=`https://${n||"api.okendo.io/v1"}/stores/${e}/widget_plus_settings`,s=await fetch(o);if(!s.ok)return console.error(`Failed to retrieve subscriber settings for subscriber ID '${e}'.`),null;const{reviewsHeaderConfig:i,cssVariables:a,customCss:d,starSymbols:c}=await s.json(),l=await fetch(`https://${r||"cdn-static.okendo.io"}/reviews-widget-plus/js/okendo-reviews.js`);if(!l.ok)return console.error("Failed to retrieve widget initialisation script."),null;const p=await l.text(),{shop:{widgetPreRenderStyleTags:u}}=await t.storefront.query('#graphql\n\t\tquery metafields {\n\t\t\tshop {\n\t\t\t\twidgetPreRenderStyleTags: metafield(\n\t\t\t\t\tnamespace: "okendo"\n\t\t\t\t\tkey: "WidgetPreRenderStyleTags"\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=u?.value??"";return g||console.warn("Failed to retrieve pre-rendered widget style settings."),{reviewsHeaderConfig:i,cssVariables:a,customCss:d,initScriptContents:p,preRenderStyleTags:g,starSymbols:c}};
+"use strict";var t=require("react");const e=({dataAttributes:e,metafieldContent:n=""})=>{const r=t.useRef(null),o=()=>{r.current&&window.okeWidgetApi.initWidget(r.current)};return t.useEffect((()=>(window.okeWidgetApi&&r.current?o():document.addEventListener("oke-script-loaded",o),()=>{document.removeEventListener("oke-script-loaded",o)})),[e]),t.createElement("div",{ref:r,key:JSON.stringify(e),...e,dangerouslySetInnerHTML:n?{__html:n}:void 0})},n=/^[0-9]*$/;function r(t){if(t)return`shopify-${n.test(t)?t:t.split("/").slice(-1)[0]}`}exports.OKENDO_PRODUCT_REVIEWS_FRAGMENT='#graphql\n\tfragment OkendoReviewsSnippet on Product {\n\t\tokendoReviewsSnippet: metafield(\n\t\t\tnamespace: "okendo"\n\t\t\tkey: "ReviewsWidgetSnippet"\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: "okendo"\n\t\t\tkey: "StarRatingSnippet"\n\t\t) {\n\t\t\tvalue\n\t\t}\n\t}\n',exports.OkendoProvider=({nonce:e="",okendoProviderData:n,productUrlFormatter:r})=>{if(!n)return null;const{reviewsHeaderConfig:o,cssVariables:s,customCss:i,initScriptContents:a,preRenderStyleTags:d,starSymbols:c}=n,l="function"==typeof r?r.toString():"string"==typeof r?r:"(product) =>\n\t\t\t\t\tproduct && product.productHandle\n\t\t\t\t\t\t? \"/products/\" + product.productHandle + \"/\" + (product.variantId ? '?variantId=' + product.variantId : '')\n\t\t\t\t\t\t: undefined",p=(s??"").replace('<style id="oke-css-vars">',"").replace("</style>",""),u=i?i.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(o)}}),t.createElement("style",{nonce:e,id:"oke-css-vars",dangerouslySetInnerHTML:{__html:p}}),u&&t.createElement("style",{nonce:e,id:"oke-reviews-custom-css",dangerouslySetInnerHTML:{__html:u}}),a&&t.createElement("script",{nonce:e,dangerouslySetInnerHTML:{__html:a}}),t.createElement("script",{nonce:e,type:"text/javascript",dangerouslySetInnerHTML:{__html:`window.okeProductUrlFormatter = ${l.toString()}`}}),d&&t.createElement("div",{dangerouslySetInnerHTML:{__html:d}}),c&&t.createElement("div",{dangerouslySetInnerHTML:{__html:c}}))},exports.OkendoReviews=({productId:n,okendoReviewsSnippet:o})=>{const s={"data-oke-widget":"","data-oke-reviews-product-id":r(n)};return t.createElement(e,{dataAttributes:s,metafieldContent:o?.value})},exports.OkendoStarRating=({productId:n,okendoStarRatingSnippet:o})=>{const s={"data-oke-star-rating":"","data-oke-reviews-product-id":r(n)};return t.createElement(e,{dataAttributes:s,metafieldContent:o?.value})},exports.getOkendoProviderData=async({context:t,subscriberId:e,apiDomain:n,cdnDomain:r})=>{const o=`https://${n||"api.okendo.io/v1"}/stores/${e}/widget_plus_settings`,s=await fetch(o);if(!s.ok)return console.error(`Failed to retrieve subscriber settings for subscriber ID '${e}'.`),null;const{reviewsHeaderConfig:i,cssVariables:a,customCss:d,starSymbols:c}=await s.json(),l=await fetch(`https://${r||"cdn-static.okendo.io"}/reviews-widget-plus/js/okendo-reviews.js`);if(!l.ok)return console.error("Failed to retrieve widget initialisation script."),null;const p=await l.text(),{shop:{widgetPreRenderStyleTags:u}}=await t.storefront.query('#graphql\n\t\tquery metafields {\n\t\t\tshop {\n\t\t\t\twidgetPreRenderStyleTags: metafield(\n\t\t\t\t\tnamespace: "okendo"\n\t\t\t\t\tkey: "WidgetPreRenderStyleTags"\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=u?.value??"";return g||console.warn("Failed to retrieve pre-rendered widget style settings."),{reviewsHeaderConfig:i,cssVariables:a,customCss:d,initScriptContents:p,preRenderStyleTags:g,starSymbols:c}};

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

@@ -1,11 +1,11 @@
 import { type FC } from "react";
 import { type MetafieldValue } from "../../internal/types";
 export interface WithOkendoReviewsSnippet {
-    okendoReviewsSnippet: MetafieldValue;
+    okendoReviewsSnippet?: MetafieldValue | null;
 }
 interface OkendoReviewsProps {
     productId: string;
-    okendoReviewsSnippet?: MetafieldValue;
+    okendoReviewsSnippet?: MetafieldValue | null;
 }
 export declare const OkendoReviews: FC<OkendoReviewsProps>;
 export {};

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

@@ -1,11 +1,11 @@
 import { type FC } from "react";
 import { type MetafieldValue } from "../../internal/types";
 export interface WithOkendoStarRatingSnippet {
-    okendoStarRatingSnippet: MetafieldValue;
+    okendoStarRatingSnippet?: MetafieldValue | null;
 }
 interface OkendoStarRatingProps {
     productId: string;
-    okendoStarRatingSnippet?: MetafieldValue;
+    okendoStarRatingSnippet?: MetafieldValue | null;
 }
 export declare const OkendoStarRating: FC<OkendoStarRatingProps>;
 export {};

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: \"okendo\"\n\t\t\tkey: \"StarRatingSnippet\"\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: \"okendo\"\n\t\t\tkey: \"ReviewsWidgetSnippet\"\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: \"okendo\"\n\t\t\tkey: \"StarRatingSnippet\"\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: \"okendo\"\n\t\t\tkey: \"ReviewsWidgetSnippet\"\n\t\t) {\n\t\t\tvalue\n\t\t}\n\t}\n";

package/dist/esm/index.js

@@ -1 +1 @@
-import t,{useRef as e,useEffect as n}from"react";const r=async({context:t,subscriberId:e,apiDomain:n,cdnDomain:r})=>{const o=`https://${n||"api.okendo.io/v1"}/stores/${e}/widget_plus_settings`,i=await fetch(o);if(!i.ok)return console.error(`Failed to retrieve subscriber settings for subscriber ID '${e}'.`),null;const{reviewsHeaderConfig:s,cssVariables:a,customCss:d,starSymbols:c}=await i.json(),l=await fetch(`https://${r||"cdn-static.okendo.io"}/reviews-widget-plus/js/okendo-reviews.js`);if(!l.ok)return console.error("Failed to retrieve widget initialisation script."),null;const p=await l.text(),{shop:{widgetPreRenderStyleTags:u}}=await t.storefront.query('#graphql\n\t\tquery metafields {\n\t\t\tshop {\n\t\t\t\twidgetPreRenderStyleTags: metafield(\n\t\t\t\t\tnamespace: "okendo"\n\t\t\t\t\tkey: "WidgetPreRenderStyleTags"\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'),m=u?.value??"";return m||console.warn("Failed to retrieve pre-rendered widget style settings."),{reviewsHeaderConfig:s,cssVariables:a,customCss:d,initScriptContents:p,preRenderStyleTags:m,starSymbols:c}},o=({nonce:e,okendoProviderData:n,productUrlFormatter:r})=>{if(!n)return null;const{reviewsHeaderConfig:o,cssVariables:i,customCss:s,initScriptContents:a,preRenderStyleTags:d,starSymbols:c}=n,l="function"==typeof r?r.toString():"string"==typeof r?r:"(product) =>\n\t\t\t\t\tproduct && product.productHandle\n\t\t\t\t\t\t? \"/products/\" + product.productHandle + \"/\" + (product.variantId ? '?variantId=' + product.variantId : '')\n\t\t\t\t\t\t: undefined",p=(i??"").replace('<style id="oke-css-vars">',"").replace("</style>",""),u=s?s.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(o)}}),t.createElement("style",{nonce:e||"",id:"oke-css-vars",dangerouslySetInnerHTML:{__html:p}}),u&&t.createElement("style",{nonce:e||"",id:"oke-reviews-custom-css",dangerouslySetInnerHTML:{__html:u}}),a&&t.createElement("script",{nonce:e||"",dangerouslySetInnerHTML:{__html:a}}),t.createElement("script",{nonce:e||"",type:"text/javascript",dangerouslySetInnerHTML:{__html:`window.okeProductUrlFormatter = ${l.toString()}`}}),d&&t.createElement("div",{dangerouslySetInnerHTML:{__html:d}}),c&&t.createElement("div",{dangerouslySetInnerHTML:{__html:c}}))},i=({dataAttributes:r,metafieldContent:o=""})=>{const i=e(null),s=()=>{i.current&&window.okeWidgetApi.initWidget(i.current)};return n((()=>(window.okeWidgetApi&&i.current?s():document.addEventListener("oke-script-loaded",s),()=>{document.removeEventListener("oke-script-loaded",s)})),[r]),t.createElement("div",{ref:i,key:JSON.stringify(r),...r,dangerouslySetInnerHTML:o?{__html:o}:void 0})},s=/^[0-9]*$/;function a(t){if(t)return`shopify-${s.test(t)?t:t.split("/").slice(-1)[0]}`}const d=({productId:e,okendoReviewsSnippet:n})=>{const r={"data-oke-widget":"","data-oke-reviews-product-id":a(e)};return t.createElement(i,{dataAttributes:r,metafieldContent:n?.value})},c=({productId:e,okendoStarRatingSnippet:n})=>{const r={"data-oke-star-rating":"","data-oke-reviews-product-id":a(e)};return t.createElement(i,{dataAttributes:r,metafieldContent:n?.value})},l='#graphql\n\tfragment OkendoStarRatingSnippet on Product {\n\t\tokendoStarRatingSnippet: metafield(\n\t\t\tnamespace: "okendo"\n\t\t\tkey: "StarRatingSnippet"\n\t\t) {\n\t\t\tvalue\n\t\t}\n\t}\n',p='#graphql\n\tfragment OkendoReviewsSnippet on Product {\n\t\tokendoReviewsSnippet: metafield(\n\t\t\tnamespace: "okendo"\n\t\t\tkey: "ReviewsWidgetSnippet"\n\t\t) {\n\t\t\tvalue\n\t\t}\n\t}\n';export{p as OKENDO_PRODUCT_REVIEWS_FRAGMENT,l as OKENDO_PRODUCT_STAR_RATING_FRAGMENT,o as OkendoProvider,d as OkendoReviews,c as OkendoStarRating,r as getOkendoProviderData};
+import t,{useRef as e,useEffect as n}from"react";const r=async({context:t,subscriberId:e,apiDomain:n,cdnDomain:r})=>{const o=`https://${n||"api.okendo.io/v1"}/stores/${e}/widget_plus_settings`,i=await fetch(o);if(!i.ok)return console.error(`Failed to retrieve subscriber settings for subscriber ID '${e}'.`),null;const{reviewsHeaderConfig:s,cssVariables:a,customCss:d,starSymbols:c}=await i.json(),l=await fetch(`https://${r||"cdn-static.okendo.io"}/reviews-widget-plus/js/okendo-reviews.js`);if(!l.ok)return console.error("Failed to retrieve widget initialisation script."),null;const p=await l.text(),{shop:{widgetPreRenderStyleTags:u}}=await t.storefront.query('#graphql\n\t\tquery metafields {\n\t\t\tshop {\n\t\t\t\twidgetPreRenderStyleTags: metafield(\n\t\t\t\t\tnamespace: "okendo"\n\t\t\t\t\tkey: "WidgetPreRenderStyleTags"\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'),m=u?.value??"";return m||console.warn("Failed to retrieve pre-rendered widget style settings."),{reviewsHeaderConfig:s,cssVariables:a,customCss:d,initScriptContents:p,preRenderStyleTags:m,starSymbols:c}},o=({nonce:e="",okendoProviderData:n,productUrlFormatter:r})=>{if(!n)return null;const{reviewsHeaderConfig:o,cssVariables:i,customCss:s,initScriptContents:a,preRenderStyleTags:d,starSymbols:c}=n,l="function"==typeof r?r.toString():"string"==typeof r?r:"(product) =>\n\t\t\t\t\tproduct && product.productHandle\n\t\t\t\t\t\t? \"/products/\" + product.productHandle + \"/\" + (product.variantId ? '?variantId=' + product.variantId : '')\n\t\t\t\t\t\t: undefined",p=(i??"").replace('<style id="oke-css-vars">',"").replace("</style>",""),u=s?s.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(o)}}),t.createElement("style",{nonce:e,id:"oke-css-vars",dangerouslySetInnerHTML:{__html:p}}),u&&t.createElement("style",{nonce:e,id:"oke-reviews-custom-css",dangerouslySetInnerHTML:{__html:u}}),a&&t.createElement("script",{nonce:e,dangerouslySetInnerHTML:{__html:a}}),t.createElement("script",{nonce:e,type:"text/javascript",dangerouslySetInnerHTML:{__html:`window.okeProductUrlFormatter = ${l.toString()}`}}),d&&t.createElement("div",{dangerouslySetInnerHTML:{__html:d}}),c&&t.createElement("div",{dangerouslySetInnerHTML:{__html:c}}))},i=({dataAttributes:r,metafieldContent:o=""})=>{const i=e(null),s=()=>{i.current&&window.okeWidgetApi.initWidget(i.current)};return n((()=>(window.okeWidgetApi&&i.current?s():document.addEventListener("oke-script-loaded",s),()=>{document.removeEventListener("oke-script-loaded",s)})),[r]),t.createElement("div",{ref:i,key:JSON.stringify(r),...r,dangerouslySetInnerHTML:o?{__html:o}:void 0})},s=/^[0-9]*$/;function a(t){if(t)return`shopify-${s.test(t)?t:t.split("/").slice(-1)[0]}`}const d=({productId:e,okendoReviewsSnippet:n})=>{const r={"data-oke-widget":"","data-oke-reviews-product-id":a(e)};return t.createElement(i,{dataAttributes:r,metafieldContent:n?.value})},c=({productId:e,okendoStarRatingSnippet:n})=>{const r={"data-oke-star-rating":"","data-oke-reviews-product-id":a(e)};return t.createElement(i,{dataAttributes:r,metafieldContent:n?.value})},l='#graphql\n\tfragment OkendoStarRatingSnippet on Product {\n\t\tokendoStarRatingSnippet: metafield(\n\t\t\tnamespace: "okendo"\n\t\t\tkey: "StarRatingSnippet"\n\t\t) {\n\t\t\tvalue\n\t\t}\n\t}\n',p='#graphql\n\tfragment OkendoReviewsSnippet on Product {\n\t\tokendoReviewsSnippet: metafield(\n\t\t\tnamespace: "okendo"\n\t\t\tkey: "ReviewsWidgetSnippet"\n\t\t) {\n\t\t\tvalue\n\t\t}\n\t}\n';export{p as OKENDO_PRODUCT_REVIEWS_FRAGMENT,l as OKENDO_PRODUCT_STAR_RATING_FRAGMENT,o as OkendoProvider,d as OkendoReviews,c as OkendoStarRating,r as getOkendoProviderData};

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

@@ -1,11 +1,11 @@
 import { type FC } from "react";
 import { type MetafieldValue } from "../../internal/types";
 export interface WithOkendoReviewsSnippet {
-    okendoReviewsSnippet: MetafieldValue;
+    okendoReviewsSnippet?: MetafieldValue | null;
 }
 interface OkendoReviewsProps {
     productId: string;
-    okendoReviewsSnippet?: MetafieldValue;
+    okendoReviewsSnippet?: MetafieldValue | null;
 }
 export declare const OkendoReviews: FC<OkendoReviewsProps>;
 export {};

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

@@ -1,11 +1,11 @@
 import { type FC } from "react";
 import { type MetafieldValue } from "../../internal/types";
 export interface WithOkendoStarRatingSnippet {
-    okendoStarRatingSnippet: MetafieldValue;
+    okendoStarRatingSnippet?: MetafieldValue | null;
 }
 interface OkendoStarRatingProps {
     productId: string;
-    okendoStarRatingSnippet?: MetafieldValue;
+    okendoStarRatingSnippet?: MetafieldValue | null;
 }
 export declare const OkendoStarRating: FC<OkendoStarRatingProps>;
 export {};

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: \"okendo\"\n\t\t\tkey: \"StarRatingSnippet\"\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: \"okendo\"\n\t\t\tkey: \"ReviewsWidgetSnippet\"\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: \"okendo\"\n\t\t\tkey: \"StarRatingSnippet\"\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: \"okendo\"\n\t\t\tkey: \"ReviewsWidgetSnippet\"\n\t\t) {\n\t\t\tvalue\n\t\t}\n\t}\n";

package/dist/index.d.ts

@@ -48,24 +48,24 @@ interface MetafieldValue {
 }
 
 interface WithOkendoReviewsSnippet {
-    okendoReviewsSnippet: MetafieldValue;
+    okendoReviewsSnippet?: MetafieldValue | null;
 }
 interface OkendoReviewsProps {
     productId: string;
-    okendoReviewsSnippet?: MetafieldValue;
+    okendoReviewsSnippet?: MetafieldValue | null;
 }
 declare const OkendoReviews: FC<OkendoReviewsProps>;
 
 interface WithOkendoStarRatingSnippet {
-    okendoStarRatingSnippet: MetafieldValue;
+    okendoStarRatingSnippet?: MetafieldValue | null;
 }
 interface OkendoStarRatingProps {
     productId: string;
-    okendoStarRatingSnippet?: MetafieldValue;
+    okendoStarRatingSnippet?: MetafieldValue | null;
 }
 declare const OkendoStarRating: FC<OkendoStarRatingProps>;
 
-declare const OKENDO_PRODUCT_STAR_RATING_FRAGMENT = "#graphql\n\tfragment OkendoStarRatingSnippet on Product {\n\t\tokendoStarRatingSnippet: metafield(\n\t\t\tnamespace: \"okendo\"\n\t\t\tkey: \"StarRatingSnippet\"\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: \"okendo\"\n\t\t\tkey: \"ReviewsWidgetSnippet\"\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: \"okendo\"\n\t\t\tkey: \"StarRatingSnippet\"\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: \"okendo\"\n\t\t\tkey: \"ReviewsWidgetSnippet\"\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, OkendoStarRating, type WithOkendoReviewsSnippet, type WithOkendoStarRatingSnippet, getOkendoProviderData };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@okendo/shopify-hydrogen",
-    "version": "2.1.0",
+    "version": "2.1.2",
     "description": "Okendo React components for Shopify Hydrogen 2 (Remix)",
     "author": "Okendo",
     "license": "SEE LICENSE IN LICENSE.txt",