@okendo/shopify-hydrogen 2.2.4 → 2.2.6

package/README.md

@@ -42,19 +42,16 @@ unauthenticated_read_product_tags
 
 Follow the instructions on [this page](https://help.shopify.com/en/manual/apps/app-types/custom-apps#create-and-install-a-custom-app) to create it.
 
-#### Note
-
-Shopify is in the process of deprecating `metafieldStorefrontVisibilityCreate` in favour of `metafieldDefinitionCreate`. The following method uses `metafieldDefinitionCreate`. If you're having trouble with it, you will find below the deprecated method using `metafieldStorefrontVisibilityCreate`.
 
 #### Using Curl
 
 Open a new terminal or PowerShell window, then:
 
-1. Run the following command to expose the `WidgetPreRenderStyleTags` shop metafield:
+1. Run the following command to expose the `widget_pre_render_style_tags` shop metafield:
 
 ```bash
 curl -X POST \
-https://{shop}.myshopify.com/admin/api/2023-07/graphql.json \
+https://{shop}.myshopify.com/admin/api/2024-10/graphql.json \
 -H 'Content-Type: application/graphql' \
 -H 'X-Shopify-Access-Token: {access_token}' \
 -d '
@@ -62,11 +59,14 @@ mutation {
 	metafieldDefinitionCreate(
 		definition: {
 			name: "WidgetPreRenderStyleTags"
-			namespace: "okendo"
-			key: "WidgetPreRenderStyleTags"
+			namespace: "$app:review"
+			key: "widget_pre_render_style_tags"
 			type: "multi_line_text_field"
 			ownerType: SHOP
-			visibleToStorefrontApi: true
+			access: {
+				admin: PUBLIC_READ
+				storefront: PUBLIC_READ
+			}
 		}
 	) {
 		createdDefinition { id name }
@@ -76,11 +76,11 @@ mutation {
 '
 ```
 
-2. Run the following command to expose the `WidgetPreRenderBodyStyleTags` shop metafield:
+2. Run the following command to expose the `widget_pre_render_body_style_tags` shop metafield:
 
 ```bash
 curl -X POST \
-https://{shop}.myshopify.com/admin/api/2023-07/graphql.json \
+https://{shop}.myshopify.com/admin/api/2024-10/graphql.json \
 -H 'Content-Type: application/graphql' \
 -H 'X-Shopify-Access-Token: {access_token}' \
 -d '
@@ -88,11 +88,14 @@ mutation {
 	metafieldDefinitionCreate(
 		definition: {
 			name: "WidgetPreRenderBodyStyleTags"
-			namespace: "okendo"
-			key: "WidgetPreRenderBodyStyleTags"
+			namespace: "$app:review"
+			key: "widget_pre_render_body_style_tags"
 			type: "multi_line_text_field"
 			ownerType: SHOP
-			visibleToStorefrontApi: true
+			access: {
+				admin: PUBLIC_READ
+				storefront: PUBLIC_READ
+			}
 		}
 	) {
 		createdDefinition { id name }
@@ -102,11 +105,11 @@ mutation {
 '
 ```
 
-3. Run the following command to expose the `ReviewsWidgetSnippet` product metafield:
+3. Run the following command to expose the `reviews_widget_snippet` product metafield:
 
 ```bash
 curl -X POST \
-https://{shop}.myshopify.com/admin/api/2023-07/graphql.json \
+https://{shop}.myshopify.com/admin/api/2024-10/graphql.json \
 -H 'Content-Type: application/graphql' \
 -H 'X-Shopify-Access-Token: {access_token}' \
 -d '
@@ -114,11 +117,14 @@ mutation {
 	metafieldDefinitionCreate(
 		definition: {
 			name: "ReviewsWidgetSnippet"
-			namespace: "okendo"
-			key: "ReviewsWidgetSnippet"
+			namespace: "$app:reviews"
+			key: "reviews_widget_snippet"
 			type: "multi_line_text_field"
 			ownerType: PRODUCT
-			visibleToStorefrontApi: true
+			access: {
+				admin: PUBLIC_READ
+				storefront: PUBLIC_READ
+			}
 		}
 	) {
 		createdDefinition { id name }
@@ -128,11 +134,11 @@ mutation {
 '
 ```
 
-4. Run the following command to expose the `StarRatingSnippet` the product metafield:
+4. Run the following command to expose the `star_rating_snippet` product metafield:
 
 ```bash
 curl -X POST \
-https://{shop}.myshopify.com/admin/api/2023-07/graphql.json \
+https://{shop}.myshopify.com/admin/api/2024-10/graphql.json \
 -H 'Content-Type: application/graphql' \
 -H 'X-Shopify-Access-Token: {access_token}' \
 -d '
@@ -140,11 +146,72 @@ mutation {
 	metafieldDefinitionCreate(
 		definition: {
 			name: "StarRatingSnippet"
-			namespace: "okendo"
-			key: "StarRatingSnippet"
+			namespace: "$app:reviews"
+			key: "star_rating_snippet"
 			type: "multi_line_text_field"
 			ownerType: PRODUCT
-			visibleToStorefrontApi: true
+			access: {
+				admin: PUBLIC_READ
+				storefront: PUBLIC_READ
+			}
+		}
+	) {
+		createdDefinition { id name }
+		userErrors { field message code }
+	}
+}
+'
+```
+
+5. Run the following command to expose the `review_count` product metafield:
+
+```bash
+curl -X POST \
+https://{shop}.myshopify.com/admin/api/2024-10/graphql.json \
+-H 'Content-Type: application/graphql' \
+-H 'X-Shopify-Access-Token: {access_token}' \
+-d '
+mutation {
+	metafieldDefinitionCreate(
+		definition: {
+			name: "ReviewCount"
+			namespace: "$app:reviews"
+			key: "review_count"
+			type: "number_integer"
+			ownerType: PRODUCT
+			access: {
+				admin: PUBLIC_READ
+				storefront: PUBLIC_READ
+			}
+		}
+	) {
+		createdDefinition { id name }
+		userErrors { field message code }
+	}
+}
+'
+```
+
+6. Run the following command to expose the `average_rating` product metafield:
+
+```bash
+curl -X POST \
+https://{shop}.myshopify.com/admin/api/2024-10/graphql.json \
+-H 'Content-Type: application/graphql' \
+-H 'X-Shopify-Access-Token: {access_token}' \
+-d '
+mutation {
+	metafieldDefinitionCreate(
+		definition: {
+			name: "AverageRating"
+			namespace: "$app:reviews"
+			key: "average_rating"
+			type: "rating"
+			ownerType: PRODUCT
+			access: {
+				admin: PUBLIC_READ
+				storefront: PUBLIC_READ
+			}
 		}
 	) {
 		createdDefinition { id name }
@@ -158,21 +225,24 @@ mutation {
 
 Open your GraphQL IDE (such as Postman) and make `POST` requests with the following details:
 
-- **URL:** https://{shop}.myshopify.com/admin/api/2023-07/graphql.json
+- **URL:** https://{shop}.myshopify.com/admin/api/2024-10/graphql.json
 - **Headers:** - X-Shopify-Access-Token: {access_token} - Content-Type: application/json
 
-1. Execute the following request to expose the `WidgetPreRenderStyleTags` shop metafield:
+1. Execute the following request to expose the `widget_pre_render_style_tags` shop metafield:
 
 ```graphql
 mutation {
 	metafieldDefinitionCreate(
 		definition: {
 			name: "WidgetPreRenderStyleTags"
-			namespace: "okendo"
-			key: "WidgetPreRenderStyleTags"
+			namespace: "$app:reviews"
+			key: "widget_pre_render_style_tags"
 			type: "multi_line_text_field"
 			ownerType: SHOP
-			visibleToStorefrontApi: true
+			access: {
+				admin: PUBLIC_READ
+				storefront: PUBLIC_READ
+			}
 		}
 	) {
 		createdDefinition {
@@ -188,18 +258,21 @@ mutation {
 }
 ```
 
-2. Execute the following request to expose the `WidgetPreRenderBodyStyleTags` shop metafield:
+2. Execute the following request to expose the `widget_pre_render_body_style_tags` shop metafield:
 
 ```graphql
 mutation {
 	metafieldDefinitionCreate(
 		definition: {
 			name: "WidgetPreRenderBodyStyleTags"
-			namespace: "okendo"
-			key: "WidgetPreRenderBodyStyleTags"
+			namespace: "$app:reviews"
+			key: "widget_pre_render_body_style_tags"
 			type: "multi_line_text_field"
 			ownerType: SHOP
-			visibleToStorefrontApi: true
+			access: {
+				admin: PUBLIC_READ
+				storefront: PUBLIC_READ
+			}
 		}
 	) {
 		createdDefinition {
@@ -215,18 +288,21 @@ mutation {
 }
 ```
 
-3. Execute the following request to expose the `ReviewsWidgetSnippet` product metafield:
+3. Execute the following request to expose the `reviews_widget_snippet` product metafield:
 
 ```graphql
 mutation {
 	metafieldDefinitionCreate(
 		definition: {
 			name: "ReviewsWidgetSnippet"
-			namespace: "okendo"
-			key: "ReviewsWidgetSnippet"
+			namespace: "$app:reviews"
+			key: "reviews_widget_snippet"
 			type: "multi_line_text_field"
 			ownerType: PRODUCT
-			visibleToStorefrontApi: true
+			access: {
+				admin: PUBLIC_READ
+				storefront: PUBLIC_READ
+			}
 		}
 	) {
 		createdDefinition {
@@ -242,18 +318,21 @@ mutation {
 }
 ```
 
-4. Execute the following request to expose the `StarRatingSnippet` the product metafield:
+4. Execute the following request to expose the `star_rating_snippet` product metafield:
 
 ```graphql
 mutation {
 	metafieldDefinitionCreate(
 		definition: {
 			name: "StarRatingSnippet"
-			namespace: "okendo"
-			key: "StarRatingSnippet"
+			namespace: "$app:reviews"
+			key: "star_rating_snippet"
 			type: "multi_line_text_field"
 			ownerType: PRODUCT
-			visibleToStorefrontApi: true
+			access: {
+				admin: PUBLIC_READ
+				storefront: PUBLIC_READ
+			}
 		}
 	) {
 		createdDefinition {
@@ -269,223 +348,70 @@ mutation {
 }
 ```
 
-**References**
-
-- [https://shopify.dev/api/examples/metafields#step-1-expose-metafields](https://shopify.dev/api/examples/metafields#step-1-expose-metafields)
-- [https://shopify.dev/api/admin-graphql/2023-07/mutations/metafieldDefinitionCreate](https://shopify.dev/api/admin-graphql/2023-07/mutations/metafieldDefinitionCreate)
-
-<details>
-
-<summary>If you're having trouble with `metafieldDefinitionCreate`, click here to see the deprecated method, using `metafieldStorefrontVisibilityCreate`.</summary>
-
-#### Using Curl
-
-Open a new terminal or PowerShell window, then:
-
-1. Run the following command to expose the `WidgetPreRenderStyleTags` shop metafield:
-
-```bash
-curl -X POST \
-https://{shop}.myshopify.com/admin/api/2023-07/graphql.json \
--H 'Content-Type: application/graphql' \
--H 'X-Shopify-Access-Token: {access_token}' \
--d '
-mutation {
-	metafieldStorefrontVisibilityCreate(
-		input: {
-			namespace: "okendo"
-			key: "WidgetPreRenderStyleTags"
-			ownerType: SHOP
-		}
-	) {
-		metafieldStorefrontVisibility {
-			id
-		}
-		userErrors {
-			field
-			message
-		}
-	}
-}
-'
-```
-
-2. Run the following command to expose the `WidgetPreRenderBodyStyleTags` shop metafield:
-
-```bash
-curl -X POST \
-https://{shop}.myshopify.com/admin/api/2023-07/graphql.json \
--H 'Content-Type: application/graphql' \
--H 'X-Shopify-Access-Token: {access_token}' \
--d '
-mutation {
-	metafieldStorefrontVisibilityCreate(
-		input: {
-			namespace: "okendo"
-			key: "WidgetPreRenderBodyStyleTags"
-			ownerType: SHOP
-		}
-	) {
-		metafieldStorefrontVisibility {
-			id
-		}
-		userErrors {
-			field
-			message
-		}
-	}
-}
-'
-```
-
-3. Run the following command to expose the `ReviewsWidgetSnippet` product metafield:
-
-```bash
-curl -X POST \
-https://{shop}.myshopify.com/admin/api/2023-07/graphql.json \
--H 'Content-Type: application/graphql' \
--H 'X-Shopify-Access-Token: {access_token}' \
--d '
-mutation {
-	metafieldStorefrontVisibilityCreate(
-		input: {
-			namespace: "okendo"
-			key: "ReviewsWidgetSnippet"
-			ownerType: PRODUCT
-		}
-	) {
-		metafieldStorefrontVisibility {
-			id
-		}
-		userErrors {
-			field
-			message
-		}
-	}
-}
-'
-```
-
-4. Run the following command to expose the `StarRatingSnippet` the product metafield:
-
-```bash
-curl -X POST \
-https://{shop}.myshopify.com/admin/api/2023-07/graphql.json \
--H 'Content-Type: application/graphql' \
--H 'X-Shopify-Access-Token: {access_token}' \
--d '
-mutation {
-	metafieldStorefrontVisibilityCreate(
-		input: {
-			namespace: "okendo"
-			key: "StarRatingSnippet"
-			ownerType: PRODUCT
-		}
-	) {
-		metafieldStorefrontVisibility {
-			id
-		}
-		userErrors {
-			field
-			message
-		}
-	}
-}
-'
-```
-
-### Using GraphQL IDE
-
-Open your GraphQL IDE (such as Postman) and make `POST` requests with the following details:
-
-- **URL:** https://{shop}.myshopify.com/admin/api/2023-07/graphql.json
-- **Headers:** - X-Shopify-Access-Token: {access_token} - Content-Type: application/json
-
-1. Execute the following request to expose the `WidgetPreRenderStyleTags` shop metafield:
+5. Execute the following request to expose the `review_count` product metafield:
 
 ```graphql
 mutation {
-	metafieldStorefrontVisibilityCreate(
-		input: {
-			namespace: "okendo"
-			key: "WidgetPreRenderStyleTags"
-			ownerType: SHOP
-		}
-	) {
-		metafieldStorefrontVisibility {
-			id
-		}
-		userErrors {
-			field
-			message
-		}
-	}
-}
-```
-
-2. Execute the following request to expose the `WidgetPreRenderBodyStyleTags` shop metafield:
-
-```graphql
-mutation {
-	metafieldStorefrontVisibilityCreate(
-		input: {
-			namespace: "okendo"
-			key: "WidgetPreRenderBodyStyleTags"
-			ownerType: SHOP
+	metafieldDefinitionCreate(
+		definition: {
+			name: "ReviewCount"
+			namespace: "$app:reviews"
+			key: "review_count"
+			type: "number_integer"
+			ownerType: PRODUCT
+			access: {
+				admin: PUBLIC_READ
+				storefront: PUBLIC_READ
+			}
 		}
 	) {
-		metafieldStorefrontVisibility {
+		createdDefinition {
 			id
+			name
 		}
 		userErrors {
 			field
 			message
+			code
 		}
 	}
 }
 ```
 
-3. Execute the following request to expose the `ReviewsWidgetSnippet` product metafield:
+6. Execute the following request to expose the `average_rating` product metafield:
 
 ```graphql
 mutation {
-	metafieldStorefrontVisibilityCreate(
-		input: {
-			namespace: "okendo"
-			key: "ReviewsWidgetSnippet"
+	metafieldDefinitionCreate(
+		definition: {
+			name: "AverageRating"
+			namespace: "$app:reviews"
+			key: "average_rating"
+			type: "rating"
 			ownerType: PRODUCT
+			access: {
+				admin: PUBLIC_READ
+				storefront: PUBLIC_READ
+			}
 		}
 	) {
-		metafieldStorefrontVisibility {
+		createdDefinition {
 			id
+			name
 		}
 		userErrors {
 			field
 			message
+			code
 		}
 	}
 }
 ```
 
-4. Execute the following request to expose the `StarRatingSnippet` the product metafield:
-
-```graphql
-mutation {
-	metafieldStorefrontVisibilityCreate(
-		input: { namespace: "okendo", key: "StarRatingSnippet", ownerType: PRODUCT }
-	) {
-		metafieldStorefrontVisibility {
-			id
-		}
-		userErrors {
-			field
-			message
-		}
-	}
-}
-```
+**References**
 
-</details>
+- [https://shopify.dev/api/examples/metafields#step-1-expose-metafields](https://shopify.dev/api/examples/metafields#step-1-expose-metafields)
+- [https://shopify.dev/docs/api/admin-graphql/2024-10/mutations/metafieldDefinitionCreate](https://shopify.dev/docs/api/admin-graphql/2024-10/mutations/metafieldDefinitionCreate)
 
 </details>
 
@@ -920,3 +846,26 @@ For instance, we can add it below the product title, like this:
 We now have the Okendo Star Rating and Reviews widgets visible on our product page:
 
 ![Okendo's Star Rating and Reviews widgets](./okendo-star-rating-and-reviews-widgets.png)
+
+### All Reviews Widget - Client Side Only
+If you would like to include a copy of the Okendo Reviews Widget which displays all reviews for a given store (to be used on a reviews page for example), please add the OkendoReviewsWidget without supplying the `productId`.
+
+Please note the all reviews widget loads on the client not the server.
+
+```tsx
+import { type MetaFunction } from '@remix-run/react';
+import { OkendoReviews } from '@okendo/shopify-hydrogen';
+
+export const meta: MetaFunction = () => {
+  return [{title: `Hydrogen | Okendo All Reviews`}];
+};
+
+export default function ReviewsPage() {
+  return (
+    <div className="all-reviews">
+      <h1>All Reviews Widget</h1>
+      <OkendoReviews />
+    </div>
+  );
+}
+```

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,o]=e.useState(!1);return e.createElement(n.Provider,{value:{okendoDataLoaded:r,setOkendoDataLoaded:o}},t)},o=()=>{const t=e.useContext(n);return void 0===t?null:t},a="cdn-static.okendo.io",i=({nonce:t="",okendoProviderData:n,productUrlFormatter:r,awaited:i,cdnDomain:s})=>{const d=o(),c=e.useRef(!1);if(e.useEffect((()=>{if(n&&d?.setOkendoDataLoaded(!0),n&&i&&!c.current){const e=document.createElement("script");e.src=`https://${s||a}/reviews-widget-plus/js/okendo-reviews.js`,document.head.appendChild(e),c.current=!0}}),[n,d,i,s]),!n)return null;const{reviewsHeaderConfig:l,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(l)}}),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}}),!i&&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 s=({dataAttributes:t,metafieldContent:n=""})=>{const r=e.useRef(null),o=e.useRef(!1),a=function(t){const n=e.useRef();return e.useEffect((()=>{n.current=t})),n.current}(t),i=()=>{r.current&&(window.okeWidgetApi.initWidget(r.current),o.current=!0)};return e.useEffect((()=>{if(!a||t["data-oke-widget"]!==a["data-oke-widget"]||t["data-oke-star-rating"]!==a["data-oke-star-rating"]||t["data-oke-reviews-product-id"]!==a["data-oke-reviews-product-id"]||!o.current)return window.okeWidgetApi&&r.current?i():document.addEventListener("oke-script-loaded",i),()=>{document.removeEventListener("oke-script-loaded",i)}}),[t,a]),e.createElement("div",{ref:r,key:JSON.stringify(t),...t,dangerouslySetInnerHTML:n?{__html:n}:void 0})},d=/^[0-9]*$/;function c(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: "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:n="",okendoProviderData:o,productUrlFormatter:a,cdnDomain:s,children:d})=>e.createElement(r,null,o&&"then"in o?e.createElement(e.Suspense,null,e.createElement(t.Await,{resolve:o},(t=>e.createElement(i,{nonce:n,okendoProviderData:t,productUrlFormatter:a,cdnDomain:s,awaited:!0})))):e.createElement(i,{nonce:n,okendoProviderData:o,productUrlFormatter:a,cdnDomain:s}),d),exports.OkendoReviews=({productId:t,okendoReviewsSnippet:n,placeholder:r})=>{const a=o(),i={"data-oke-widget":"","data-oke-reviews-product-id":c(t)};return null===a||a.okendoDataLoaded?e.createElement(s,{dataAttributes:i,metafieldContent:n?.value}):r||e.createElement("div",{style:{height:"350px"}})},exports.OkendoStarRating=({productId:t,okendoStarRatingSnippet:n,placeholder:r})=>{const a=o(),i={"data-oke-star-rating":"","data-oke-reviews-product-id":c(t)};return null===a||a.okendoDataLoaded?e.createElement(s,{dataAttributes:i,metafieldContent:n?.value}):r||e.createElement("div",{style:{height:"20px"}})},exports.getOkendoProviderData=async({context:e,subscriberId:t,apiDomain:n,cdnDomain:r})=>{const o=`https://${n||"api.okendo.io/v1"}/stores/${t}/widget_plus_settings`,i=await fetch(o);if(!i.ok)return console.error(`Failed to retrieve subscriber settings for subscriber ID '${t}'.`),null;const{reviewsHeaderConfig:s,cssVariables:d,customCss:c,starSymbols:l}=await i.json(),u=await fetch(`https://${r||a}/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: "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=m?.value??"";return g||console.warn("Failed to retrieve pre-rendered widget style settings."),{reviewsHeaderConfig:s,cssVariables:d,customCss:c,initScriptContents:p,preRenderStyleTags:g,starSymbols:l}};
+"use strict";var e=require("react"),t=require("@remix-run/react");const n=e.createContext(void 0),r=({children:t})=>{const[r,o]=e.useState(!1);return e.createElement(n.Provider,{value:{okendoDataLoaded:r,setOkendoDataLoaded:o}},t)},o=()=>{const t=e.useContext(n);return void 0===t?null:t},a="cdn-static.okendo.io",i=({nonce:t="",okendoProviderData:n,productUrlFormatter:r,awaited:i,cdnDomain:s})=>{const d=o(),c=e.useRef(!1);if(e.useEffect((()=>{if(n&&d?.setOkendoDataLoaded(!0),n&&i&&!c.current){const e=document.createElement("script");e.src=`https://${s||a}/reviews-widget-plus/js/okendo-reviews.js`,document.head.appendChild(e),c.current=!0}}),[n,d,i,s]),!n)return null;const{reviewsHeaderConfig:l,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(l)}}),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}}),!i&&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 s=({dataAttributes:t,metafieldContent:n=""})=>{const r=e.useRef(null),o=e.useRef(!1),a=function(t){const n=e.useRef();return e.useEffect((()=>{n.current=t})),n.current}(t),i=()=>{r.current&&(window.okeWidgetApi.initWidget(r.current),o.current=!0)};return e.useEffect((()=>{if(!a||t["data-oke-widget"]!==a["data-oke-widget"]||t["data-oke-star-rating"]!==a["data-oke-star-rating"]||t["data-oke-reviews-product-id"]!==a["data-oke-reviews-product-id"]||!o.current)return window.okeWidgetApi&&r.current?i():document.addEventListener("oke-script-loaded",i),()=>{document.removeEventListener("oke-script-loaded",i)}}),[t,a]),e.createElement("div",{ref:r,key:JSON.stringify(t),...t,dangerouslySetInnerHTML:n?{__html:n}:void 0})},d=/^[0-9]*$/;function c(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: "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:n="",okendoProviderData:o,productUrlFormatter:a,cdnDomain:s,children:d})=>e.createElement(r,null,o&&"then"in o?e.createElement(e.Suspense,null,e.createElement(t.Await,{resolve:o},(t=>e.createElement(i,{nonce:n,okendoProviderData:t,productUrlFormatter:a,cdnDomain:s,awaited:!0})))):e.createElement(i,{nonce:n,okendoProviderData:o,productUrlFormatter:a,cdnDomain:s}),d),exports.OkendoReviews=({productId:t,okendoReviewsSnippet:n,placeholder:r})=>{const a=o(),i=t?.length?c(t):null,d=t?.length?n:null,l={"data-oke-widget":"","data-oke-reviews-product-id":i};return null===a||a.okendoDataLoaded?e.createElement(s,{dataAttributes:l,metafieldContent:d?.value}):r||e.createElement("div",{style:{height:"350px"}})},exports.OkendoStarRating=({productId:t,okendoStarRatingSnippet:n,placeholder:r})=>{const a=o(),i={"data-oke-star-rating":"","data-oke-reviews-product-id":c(t)};return null===a||a.okendoDataLoaded?e.createElement(s,{dataAttributes:i,metafieldContent:n?.value}):r||e.createElement("div",{style:{height:"20px"}})},exports.getOkendoProviderData=async({context:e,subscriberId:t,apiDomain:n,cdnDomain:r})=>{const o=`https://${n||"api.okendo.io/v1"}/stores/${t}/widget_plus_settings`,i=await fetch(o);if(!i.ok)return console.error(`Failed to retrieve subscriber settings for subscriber ID '${t}'.`),null;const{reviewsHeaderConfig:s,cssVariables:d,customCss:c,starSymbols:l}=await i.json(),u=await fetch(`https://${r||a}/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: "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=m?.value??"";return g||console.warn("Failed to retrieve pre-rendered widget style settings."),{reviewsHeaderConfig:s,cssVariables:d,customCss:c,initScriptContents:p,preRenderStyleTags:g,starSymbols:l}};

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

@@ -4,7 +4,7 @@ export interface WithOkendoReviewsSnippet {
     okendoReviewsSnippet?: MetafieldValue | null;
 }
 interface OkendoReviewsProps {
-    productId: string;
+    productId?: string;
     okendoReviewsSnippet?: MetafieldValue | null;
     /**
      * Only used if the promise returned by `getOkendoProviderData` is given to the OkendoProvider

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

@@ -4,7 +4,7 @@ export interface OkendoWidgetProps {
     dataAttributes: {
         'data-oke-widget'?: string;
         'data-oke-star-rating'?: string;
-        'data-oke-reviews-product-id': string | undefined;
+        'data-oke-reviews-product-id': string | null | undefined;
     };
     metafieldContent?: string;
 }

package/dist/esm/index.js

@@ -1 +1 @@
-import e,{createContext as t,useState as n,useContext as r,Suspense as o,useRef as a,useEffect as i}from"react";import{Await as d}from"@remix-run/react";const s=t(void 0),c=({children:t})=>{const[r,o]=n(!1);return e.createElement(s.Provider,{value:{okendoDataLoaded:r,setOkendoDataLoaded:o}},t)},l=()=>{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 o=`https://${n||"api.okendo.io/v1"}/stores/${t}/widget_plus_settings`,a=await fetch(o);if(!a.ok)return console.error(`Failed to retrieve subscriber settings for subscriber ID '${t}'.`),null;const{reviewsHeaderConfig:i,cssVariables:d,customCss:s,starSymbols:c}=await a.json(),l=await fetch(`https://${r||u}/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: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: "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=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:c}},m=({nonce:t="",okendoProviderData:n,productUrlFormatter:r,cdnDomain:a,children:i})=>e.createElement(c,null,n&&"then"in n?e.createElement(o,null,e.createElement(d,{resolve:n},(n=>e.createElement(g,{nonce:t,okendoProviderData:n,productUrlFormatter:r,cdnDomain:a,awaited:!0})))):e.createElement(g,{nonce:t,okendoProviderData:n,productUrlFormatter:r,cdnDomain:a}),i),g=({nonce:t="",okendoProviderData:n,productUrlFormatter:r,awaited:o,cdnDomain:d})=>{const s=l(),c=a(!1);if(i((()=>{if(n&&s?.setOkendoDataLoaded(!0),n&&o&&!c.current){const e=document.createElement("script");e.src=`https://${d||u}/reviews-widget-plus/js/okendo-reviews.js`,document.head.appendChild(e),c.current=!0}}),[n,s,o,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>",""),f=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}}),f&&e.createElement("style",{nonce:t,id:"oke-reviews-custom-css",dangerouslySetInnerHTML:{__html:f}}),!o&&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=a(null),o=a(!1),d=function(e){const t=a();return i((()=>{t.current=e})),t.current}(t),s=()=>{r.current&&(window.okeWidgetApi.initWidget(r.current),o.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"]||!o.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 o=l(),a={"data-oke-widget":"","data-oke-reviews-product-id":w(t)};return null===o||o.okendoDataLoaded?e.createElement(v,{dataAttributes:a,metafieldContent:n?.value}):r||e.createElement("div",{style:{height:"350px"}})},f=({productId:t,okendoStarRatingSnippet:n,placeholder:r})=>{const o=l(),a={"data-oke-star-rating":"","data-oke-reviews-product-id":w(t)};return null===o||o.okendoDataLoaded?e.createElement(v,{dataAttributes:a,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: "okendo"\n\t\t\tkey: "StarRatingSnippet"\n\t\t) {\n\t\t\tvalue\n\t\t}\n\t}\n',h='#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{h as OKENDO_PRODUCT_REVIEWS_FRAGMENT,S as OKENDO_PRODUCT_STAR_RATING_FRAGMENT,m as OkendoProvider,y as OkendoReviews,f as OkendoStarRating,p as getOkendoProviderData};
+import e,{createContext as t,useState as n,useContext as r,Suspense as o,useRef as a,useEffect as i}from"react";import{Await as d}from"@remix-run/react";const s=t(void 0),c=({children:t})=>{const[r,o]=n(!1);return e.createElement(s.Provider,{value:{okendoDataLoaded:r,setOkendoDataLoaded:o}},t)},l=()=>{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 o=`https://${n||"api.okendo.io/v1"}/stores/${t}/widget_plus_settings`,a=await fetch(o);if(!a.ok)return console.error(`Failed to retrieve subscriber settings for subscriber ID '${t}'.`),null;const{reviewsHeaderConfig:i,cssVariables:d,customCss:s,starSymbols:c}=await a.json(),l=await fetch(`https://${r||u}/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: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: "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=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:c}},m=({nonce:t="",okendoProviderData:n,productUrlFormatter:r,cdnDomain:a,children:i})=>e.createElement(c,null,n&&"then"in n?e.createElement(o,null,e.createElement(d,{resolve:n},(n=>e.createElement(g,{nonce:t,okendoProviderData:n,productUrlFormatter:r,cdnDomain:a,awaited:!0})))):e.createElement(g,{nonce:t,okendoProviderData:n,productUrlFormatter:r,cdnDomain:a}),i),g=({nonce:t="",okendoProviderData:n,productUrlFormatter:r,awaited:o,cdnDomain:d})=>{const s=l(),c=a(!1);if(i((()=>{if(n&&s?.setOkendoDataLoaded(!0),n&&o&&!c.current){const e=document.createElement("script");e.src=`https://${d||u}/reviews-widget-plus/js/okendo-reviews.js`,document.head.appendChild(e),c.current=!0}}),[n,s,o,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>",""),f=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}}),f&&e.createElement("style",{nonce:t,id:"oke-reviews-custom-css",dangerouslySetInnerHTML:{__html:f}}),!o&&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=a(null),o=a(!1),d=function(e){const t=a();return i((()=>{t.current=e})),t.current}(t),s=()=>{r.current&&(window.okeWidgetApi.initWidget(r.current),o.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"]||!o.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 o=l(),a=t?.length?w(t):null,i=t?.length?n:null,d={"data-oke-widget":"","data-oke-reviews-product-id":a};return null===o||o.okendoDataLoaded?e.createElement(v,{dataAttributes:d,metafieldContent:i?.value}):r||e.createElement("div",{style:{height:"350px"}})},f=({productId:t,okendoStarRatingSnippet:n,placeholder:r})=>{const o=l(),a={"data-oke-star-rating":"","data-oke-reviews-product-id":w(t)};return null===o||o.okendoDataLoaded?e.createElement(v,{dataAttributes:a,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: "okendo"\n\t\t\tkey: "StarRatingSnippet"\n\t\t) {\n\t\t\tvalue\n\t\t}\n\t}\n',h='#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{h as OKENDO_PRODUCT_REVIEWS_FRAGMENT,S as OKENDO_PRODUCT_STAR_RATING_FRAGMENT,m as OkendoProvider,y as OkendoReviews,f as OkendoStarRating,p as getOkendoProviderData};

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

@@ -4,7 +4,7 @@ export interface WithOkendoReviewsSnippet {
     okendoReviewsSnippet?: MetafieldValue | null;
 }
 interface OkendoReviewsProps {
-    productId: string;
+    productId?: string;
     okendoReviewsSnippet?: MetafieldValue | null;
     /**
      * Only used if the promise returned by `getOkendoProviderData` is given to the OkendoProvider

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

@@ -4,7 +4,7 @@ export interface OkendoWidgetProps {
     dataAttributes: {
         'data-oke-widget'?: string;
         'data-oke-star-rating'?: string;
-        'data-oke-reviews-product-id': string | undefined;
+        'data-oke-reviews-product-id': string | null | undefined;
     };
     metafieldContent?: string;
 }

package/dist/index.d.ts

@@ -51,7 +51,7 @@ interface WithOkendoReviewsSnippet {
     okendoReviewsSnippet?: MetafieldValue | null;
 }
 interface OkendoReviewsProps {
-    productId: string;
+    productId?: string;
     okendoReviewsSnippet?: MetafieldValue | null;
     /**
      * Only used if the promise returned by `getOkendoProviderData` is given to the OkendoProvider

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@okendo/shopify-hydrogen",
-    "version": "2.2.4",
+    "version": "2.2.6",
     "description": "Okendo React components for Shopify Hydrogen 2 (Remix)",
     "author": "Okendo",
     "license": "SEE LICENSE IN LICENSE.txt",
@@ -19,8 +19,8 @@
         "eslint": "eslint src"
     },
     "devDependencies": {
-        "@okendo/reviews-common": "^5.163.1",
-        "@okendo/reviews-widget-plus": "^0.68.3",
+        "@okendo/reviews-common": "^7.14.0",
+        "@okendo/reviews-widget-plus": "^0.70.23",
         "@okendo/tsconfig": "0.0.2",
         "@rollup/plugin-commonjs": "^25.0.7",
         "@rollup/plugin-node-resolve": "^15.2.3",