@okendo/shopify-hydrogen 0.0.1 → 0.0.2

package/README.md

@@ -1,13 +1,16 @@
-# Okendo Hydrogen React Components #
+# Okendo Hydrogen React Components
 
 This is the React component library to support Okendo Widget Plus Widgets in Shopify Hydrogen Projects.
 
 Currently we support server side components for 2 widgets:
+
 1. Reviews List
 2. Star Ratings
 
-This includes:
-## OkendoProvider.server ##
+## Overview
+
+### OkendoProvider.server
+
 This retrieves the Widget Plus configuration from our public API.
 
 This should wrap as high up in the React component tree as possible.
@@ -15,30 +18,28 @@ This should wrap as high up in the React component tree as possible.
 In the sample Shopify Hydrogen project in `App.server.jsx` we include it as the first child of `<ShopifyProvider>`.
 
 The final server side render/output includes:
-* Okendo Subscriber Settings JSON
-* Widget Pre-Render Style Tags Metafield - This is the "Above the fold" CSS essential for rendering SSR'd Okendo Reviews Widget (first page) and Star Ratings - This ensures styled widgets before client-side hydration occurs.
-* Base CSS Vars
-* Any custom CSS specified in the Okendo Admin.
 
-## OkendoStarRating.server ##
-This is the server-side rendered Star Rating widget - It then invokes the client side `OkendoWidget.client.tsx` component to perform client side hydration.
+- Okendo Subscriber Settings JSON
+- Widget Pre-Render Style Tags Metafield: This is the "Above the fold" CSS essential for rendering server-side rendered (SSR) Okendo Reviews Widget (first page) and Star Ratings. This ensures styled widgets before client-side hydration occurs.
+- Base CSS Vars
+- Okendo Initialisation Script: This is used to render the widgets on the page.
+- Any custom CSS specified in the Okendo Admin.
+
+### OkendoStarRating.server
 
-## OkendoReviewsWidget.server ##
-This is the server-side rendered Reviews List widget - It then invokes the client side `OkendoWidget.client.tsx` component to perform client side hydration.
+This is the server-side rendered Star Rating widget. It then invokes the client side `OkendoWidget.client.tsx` component to perform client side hydration.
 
+### OkendoReviewsWidget.server
 
-### How do I use this in my Shopify Hydrogen project? ###
-* Your Shopify Hydrogen app will require the following variables added to your `.env` file:
-** `VITE_STORE_DOMAIN`: Your myshopify.com URL
-** `VITE_SHOPIFY_STOREFRONT_TOKEN`: Your Shopify App Storefront Token - See: https://shopify.dev/api/examples/storefront-api
-** `VITE_OKENDO_SUBSCRIBER_ID`: Your Okendo Subscriber ID - Issued by Okendo
-** `VITE_OKENDO_API_DOMAIN`: The Okendo api domain this will override the default production domain if supplied: api.okendo.io
-** `VITE_OKENDO_CDN`: The Okendo CDN domain - This will override the default production domain if supplied: cdn.okendo.io
+This is the server-side rendered Reviews List widget. It then invokes the client side `OkendoWidget.client.tsx` component to perform client side hydration.
 
-* TODO - Ideally we point to a sample hydrogen project using our widgets.
+## How do I use this in my Shopify Hydrogen project?
 
+- [Okendo Shopify Hydrogen Guide](https://www.notion.so/okendo/Okendo-Shopify-Hydrogen-Guide-0054b79113c34a1fb3f9a8b661ddaac9)
+- [Okendo Shopify Hydrogen Demo Project](https://bitbucket.org/okendo/okendo-shopify-hydrogen-demo/)
 
-### Who do I talk to? ###
+## Who do I talk to?
 
-* Tom Fulcher - tom.fulcher@okendo.io, Susanne Peng - susanne.peng@okendo.io, Rowan Puckeridge - rowan.puckeridge@okendo.io
-* Okendo Widget Pod
+- Tom Fulcher - tom.fulcher@okendo.io
+- Susanne Peng - susanne.peng@okendo.io
+- Rowan Puckeridge - rowan.puckeridge@okendo.io

package/dist/esnext/components/OkendoProvider.server.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import type { ReviewWithProductPublic } from '@okendo/reviews-common';
+export declare const OkendoContext: React.Context<{}>;
+export declare const OkendoProvider: React.FunctionComponent<OkendoProviderProps>;
+interface OkendoProviderProps {
+    children: React.ReactNode;
+    subscriberId: string;
+    apiDomain?: string;
+    cdnDomain?: string;
+    productUrlFormatOverride?: (product: Pick<ReviewWithProductPublic, 'productHandle' | 'productId' | 'variantId'>) => string;
+}
+export {};

package/dist/esnext/components/OkendoProvider.server.js

@@ -0,0 +1,49 @@
+import React from "react";
+import parse from "html-react-parser";
+import { Head } from "@shopify/hydrogen/client";
+import { fetchSync, useShopQuery, gql } from "@shopify/hydrogen";
+const kDefaultContext = {};
+const kDefaultOkendoApiDomain = 'api.okendo.io/v1';
+const kDefaultOkendoCdnDomain = 'd3hw6dc1ow8pp2.cloudfront.net';
+export const OkendoContext = React.createContext(kDefaultContext);
+export const OkendoProvider = (props) => {
+    var _a;
+    const { children, subscriberId, apiDomain, cdnDomain, productUrlFormatOverride } = props;
+    const url = `https://${apiDomain !== null && apiDomain !== void 0 ? apiDomain : kDefaultOkendoApiDomain}/stores/${subscriberId}/widget_plus_settings`;
+    const { reviewsHeaderConfig, cssVariables, customCss, starSymbols } = fetchSync(url, { preload: true }).json();
+    const cssVariablesNormalized = cssVariables.replace('<style id="oke-css-vars">', '').replace('</style>', '');
+    const customCssNormalized = customCss && customCss.replace('<style id="oke-reviews-custom-css">', '').replace('</style>', '');
+    const productUrlFormatter = typeof productUrlFormatOverride === 'function'
+        ? productUrlFormatOverride
+        : (product) => (product === null || product === void 0 ? void 0 : product.productHandle)
+            ? `/products/${product.productHandle}/${product.variantId ? '?variantId=' + product.variantId : ''}`
+            : undefined;
+    const query = gql `
+        query metafields {
+            shop {
+                widgetPreRenderStyleTags: metafield(namespace: "okendo", key: "WidgetPreRenderStyleTags") {
+                    value
+                }
+            }
+        }
+    `;
+    const { data: { shop: { widgetPreRenderStyleTags } } } = useShopQuery({
+        query: query,
+        preload: true
+    });
+    const styles = parse((_a = widgetPreRenderStyleTags === null || widgetPreRenderStyleTags === void 0 ? void 0 : widgetPreRenderStyleTags.value) !== null && _a !== void 0 ? _a : '');
+    // Download contents of widget initialisation script.
+    const initScriptContents = fetchSync(`https://${cdnDomain !== null && cdnDomain !== void 0 ? cdnDomain : kDefaultOkendoCdnDomain}/reviews-widget-plus/js/okendo-reviews.js`).text();
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Head, null,
+            React.createElement("script", { id: "oke-reviews-settings", type: "application/json" }, JSON.stringify(reviewsHeaderConfig)),
+            React.createElement("style", { id: "oke-css-vars" }, cssVariablesNormalized),
+            customCssNormalized && React.createElement("style", { id: "oke-reviews-custom-css" }, customCssNormalized),
+            React.createElement("meta", { name: "oke:subscriber_id", content: subscriberId }),
+            React.createElement("script", null, initScriptContents),
+            productUrlFormatter && React.createElement("script", { type: "text/javascript" }, `window.okeProductUrlFormatter = ${productUrlFormatter}`)),
+        styles,
+        parse(starSymbols),
+        children));
+};
+//# sourceMappingURL=OkendoProvider.server.js.map

package/dist/esnext/components/OkendoProvider.server.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OkendoProvider.server.js","sourceRoot":"","sources":["../../../src/components/OkendoProvider.server.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from \"react\";\nimport parse from \"html-react-parser\";\nimport { Head } from \"@shopify/hydrogen/client\";\nimport { fetchSync, useShopQuery, gql } from \"@shopify/hydrogen\";\nimport type { ReviewsAPIPublic, ReviewWithProductPublic } from '@okendo/reviews-common';\nimport type { Metafield } from \"@shopify/hydrogen/dist/esnext/storefront-api-types\";\n\nconst kDefaultContext = {};\nconst kDefaultOkendoApiDomain = 'api.okendo.io/v1';\nconst kDefaultOkendoCdnDomain = 'd3hw6dc1ow8pp2.cloudfront.net';\n\nexport const OkendoContext = React.createContext(kDefaultContext);\n\nexport const OkendoProvider: React.FunctionComponent<OkendoProviderProps> = (props): JSX.Element => {\n    const { children, subscriberId, apiDomain, cdnDomain, productUrlFormatOverride } = props;\n    const url = `https://${apiDomain ?? kDefaultOkendoApiDomain}/stores/${subscriberId}/widget_plus_settings`;\n    const { reviewsHeaderConfig, cssVariables, customCss, starSymbols } = fetchSync(url, { preload: true }).json() as ReviewsAPIPublic.Reviews.WidgetPlusSettings.Get.Response;\n\n    const cssVariablesNormalized = cssVariables.replace('<style id=\"oke-css-vars\">', '').replace('</style>', '');\n    const customCssNormalized = customCss && customCss.replace('<style id=\"oke-reviews-custom-css\">', '').replace('</style>', '');\n\n    const productUrlFormatter = typeof productUrlFormatOverride === 'function' \n        ? productUrlFormatOverride \n        : (product: Pick<ReviewWithProductPublic, 'productHandle' | 'productId' | 'variantId'>) =>\n            product?.productHandle\n            ? `/products/${product.productHandle}/${\n                product.variantId ? '?variantId=' + product.variantId : ''\n                }`\n            : undefined;\n\n    const query = gql`\n        query metafields {\n            shop {\n                widgetPreRenderStyleTags: metafield(namespace: \"okendo\", key: \"WidgetPreRenderStyleTags\") {\n                    value\n                }\n            }\n        }\n    `;\n\n    const {\n        data: { shop: { widgetPreRenderStyleTags } }\n    } = useShopQuery<OkendoProviderMetafields>({\n        query: query,\n        preload: true\n    });\n\n    const styles = parse(widgetPreRenderStyleTags?.value ?? '');\n\n    // Download contents of widget initialisation script.\n    const initScriptContents: string = fetchSync(`https://${cdnDomain ?? kDefaultOkendoCdnDomain}/reviews-widget-plus/js/okendo-reviews.js`).text();\n    return (\n        <>\n            <Head>\n                <script id=\"oke-reviews-settings\" type=\"application/json\">\n                    {JSON.stringify(reviewsHeaderConfig)}\n                </script>\n                <style id=\"oke-css-vars\">\n                    {cssVariablesNormalized}\n                </style>\n                {customCssNormalized && <style id=\"oke-reviews-custom-css\">{customCssNormalized}</style>}\n                <meta name=\"oke:subscriber_id\" content={subscriberId} />\n                <script>{initScriptContents}</script>\n                {productUrlFormatter && <script type=\"text/javascript\">{`window.okeProductUrlFormatter = ${productUrlFormatter}`}</script>}\n            </Head>\n            {styles}\n            {parse(starSymbols)}\n            {children}\n        </>\n    );\n}\n\ninterface OkendoProviderProps {\n    children: React.ReactNode;\n    subscriberId: string;\n    apiDomain?: string;\n    cdnDomain?: string;\n    productUrlFormatOverride?: (product: Pick<ReviewWithProductPublic, 'productHandle' | 'productId' | 'variantId'>) => string;\n}\n\ninterface OkendoProviderMetafields {\n    shop: {\n        widgetPreRenderStyleTags?: Pick<Metafield, 'value'>\n    };\n}\n"]}

package/dist/esnext/components/OkendoReviewsWidget.server.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare const OkendoReviewsWidget: React.FunctionComponent<OkendoReviewsWidgetProps>;
+interface OkendoReviewsWidgetProps {
+    productId?: string;
+}
+export default OkendoReviewsWidget;

package/dist/esnext/components/OkendoReviewsWidget.server.js

@@ -0,0 +1,57 @@
+import { useShopQuery, gql } from '@shopify/hydrogen';
+import parse from 'html-react-parser';
+import { OkendoWidgetClient } from './OkendoWidget.client';
+import { getOkendoProductId } from '../shared/productUtils';
+import React from 'react';
+export const OkendoReviewsWidget = (props) => {
+    var _a, _b, _c, _d;
+    const { productId } = props;
+    const productQuery = productId
+        ? `
+            product(id: $productId) {
+                reviewsWidgetSnippet: metafield(namespace: "okendo", key: "ReviewsWidgetSnippet") {
+                    value
+                }
+            }
+        `
+        : '';
+    const query = gql `
+        query metafields${productId ? '($productId: ID!)' : ''} {
+            ${productQuery}
+            shop {
+                widgetPreRenderBodyStyleTags: metafield(namespace: "okendo", key: "WidgetPreRenderBodyStyleTags") {
+                    value
+                }
+            }
+        }
+    `;
+    const { data: { product, shop } } = useShopQuery({
+        query: query,
+        preload: true,
+        variables: {
+            productId: productId
+        }
+    });
+    if (productId && !((_a = product === null || product === void 0 ? void 0 : product.reviewsWidgetSnippet) === null || _a === void 0 ? void 0 : _a.value)) {
+        console.error(`--OKE-- Could not retrieve product 'reviewsWidgetSnippet' metafield.`);
+        return null;
+    }
+    if (!((_b = shop === null || shop === void 0 ? void 0 : shop.widgetPreRenderBodyStyleTags) === null || _b === void 0 ? void 0 : _b.value)) {
+        console.error(`--OKE-- Could not retrieve shop 'widgetPreRenderBodyStyleTags' metafield.`);
+        return null;
+    }
+    const dataAttributes = {
+        'data-oke-widget': ''
+    };
+    if (productId) {
+        const okendoProductId = getOkendoProductId(productId);
+        if (okendoProductId) {
+            dataAttributes['data-oke-reviews-product-id'] = okendoProductId;
+        }
+    }
+    return (React.createElement(React.Fragment, null,
+        parse(shop.widgetPreRenderBodyStyleTags.value),
+        React.createElement(OkendoWidgetClient, { dataAttributes: dataAttributes, metafieldContent: (_d = (_c = product === null || product === void 0 ? void 0 : product.reviewsWidgetSnippet) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : '' })));
+};
+export default OkendoReviewsWidget;
+//# sourceMappingURL=OkendoReviewsWidget.server.js.map

package/dist/esnext/components/OkendoReviewsWidget.server.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OkendoReviewsWidget.server.js","sourceRoot":"","sources":["../../../src/components/OkendoReviewsWidget.server.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,KAAK,MAAM,mBAAmB,CAAC;AACtC,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAE3D,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAE5D,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,CAAC,MAAM,mBAAmB,GAAsD,CAAC,KAAK,EAAE,EAAE;;IAC5F,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;IAE5B,MAAM,YAAY,GAAG,SAAS;QAC1B,CAAC,CAAC;;;;;;SAMD;QACD,CAAC,CAAC,EAAE,CAAC;IAET,MAAM,KAAK,GAAG,GAAG,CAAA;0BACK,SAAS,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE;cAChD,YAAY;;;;;;;KAOrB,CAAC;IAEF,MAAM,EACF,IAAI,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAC1B,GAAG,YAAY,CAAgC;QAC5C,KAAK,EAAE,KAAK;QACZ,OAAO,EAAE,IAAI;QACb,SAAS,EAAE;YACP,SAAS,EAAE,SAAS;SACvB;KACJ,CAAC,CAAC;IAEH,IAAI,SAAS,IAAI,CAAC,CAAA,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,oBAAoB,0CAAE,KAAK,CAAA,EAAE;QACpD,OAAO,CAAC,KAAK,CAAC,sEAAsE,CAAC,CAAC;QACtF,OAAO,IAAI,CAAC;KACf;IAED,IAAI,CAAC,CAAA,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,4BAA4B,0CAAE,KAAK,CAAA,EAAE;QAC5C,OAAO,CAAC,KAAK,CAAC,2EAA2E,CAAC,CAAC;QAC3F,OAAO,IAAI,CAAC;KACf;IAED,MAAM,cAAc,GAAQ;QACxB,iBAAiB,EAAE,EAAE;KACxB,CAAC;IAEF,IAAI,SAAS,EAAE;QACX,MAAM,eAAe,GAAG,kBAAkB,CAAC,SAAS,CAAC,CAAC;QACtD,IAAI,eAAe,EAAE;YACjB,cAAc,CAAC,6BAA6B,CAAC,GAAG,eAAe,CAAC;SACnE;KACJ;IAED,OAAO,CACH;QACK,KAAK,CAAC,IAAI,CAAC,4BAA4B,CAAC,KAAK,CAAC;QAC/C,oBAAC,kBAAkB,IAAC,cAAc,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAA,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,oBAAoB,0CAAE,KAAK,mCAAI,EAAE,GAAI,CACrH,CACN,CAAC;AACN,CAAC,CAAC;AAeF,eAAe,mBAAmB,CAAC","sourcesContent":["import { useShopQuery, gql } from '@shopify/hydrogen';\nimport parse from 'html-react-parser';\nimport { OkendoWidgetClient } from './OkendoWidget.client';\nimport { Metafield } from '@shopify/hydrogen/dist/esnext/storefront-api-types';\nimport { getOkendoProductId } from '../shared/productUtils';\nimport type { SKO } from '@okendo/reviews-common';\nimport React from 'react';\n\nexport const OkendoReviewsWidget: React.FunctionComponent<OkendoReviewsWidgetProps> = (props) => {\n    const { productId } = props;\n\n    const productQuery = productId\n        ? `\n            product(id: $productId) {\n                reviewsWidgetSnippet: metafield(namespace: \"okendo\", key: \"ReviewsWidgetSnippet\") {\n                    value\n                }\n            }\n        `\n        : '';\n\n    const query = gql`\n        query metafields${productId ? '($productId: ID!)' : ''} {\n            ${productQuery}\n            shop {\n                widgetPreRenderBodyStyleTags: metafield(namespace: \"okendo\", key: \"WidgetPreRenderBodyStyleTags\") {\n                    value\n                }\n            }\n        }\n    `;\n\n    const {\n        data: { product, shop }\n    } = useShopQuery<OkendoReviewsWidgetMetafields>({\n        query: query,\n        preload: true,\n        variables: {\n            productId: productId\n        }\n    });\n\n    if (productId && !product?.reviewsWidgetSnippet?.value) {\n        console.error(`--OKE-- Could not retrieve product 'reviewsWidgetSnippet' metafield.`);\n        return null;\n    }\n\n    if (!shop?.widgetPreRenderBodyStyleTags?.value) {\n        console.error(`--OKE-- Could not retrieve shop 'widgetPreRenderBodyStyleTags' metafield.`);\n        return null;\n    }\n\n    const dataAttributes: SKO = {\n        'data-oke-widget': ''\n    };\n\n    if (productId) {\n        const okendoProductId = getOkendoProductId(productId);\n        if (okendoProductId) {\n            dataAttributes['data-oke-reviews-product-id'] = okendoProductId;\n        }\n    }\n\n    return (\n        <>\n            {parse(shop.widgetPreRenderBodyStyleTags.value)}\n            <OkendoWidgetClient dataAttributes={dataAttributes} metafieldContent={product?.reviewsWidgetSnippet?.value ?? ''} />\n        </>\n    );\n};\n\ninterface OkendoReviewsWidgetProps {\n    productId?: string;\n}\n\ninterface OkendoReviewsWidgetMetafields {\n    product: {\n        reviewsWidgetSnippet?: Pick<Metafield, 'value'>;\n    };\n    shop: {\n        widgetPreRenderBodyStyleTags?: Pick<Metafield, 'value'>;\n    };\n}\n\nexport default OkendoReviewsWidget;\n"]}

package/dist/esnext/components/OkendoStarRating.server.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare const OkendoStarRating: React.FunctionComponent<OkendoStarRatingProps>;
+interface OkendoStarRatingProps {
+    productId: string;
+}
+export default OkendoStarRating;

package/dist/esnext/components/OkendoStarRating.server.js

@@ -0,0 +1,40 @@
+import { useShopQuery, gql } from '@shopify/hydrogen';
+import { OkendoWidgetClient } from './OkendoWidget.client';
+import { getOkendoProductId } from '../shared/productUtils';
+import React from 'react';
+export const OkendoStarRating = (props) => {
+    const { productId } = props;
+    const okendoProductId = getOkendoProductId(productId);
+    if (!okendoProductId) {
+        console.warn(`--OKE-- Product does not contain id.`);
+        return null;
+    }
+    const query = gql `
+        query metafields($productId: ID!) {
+            product(id: $productId) {
+                starRatingSnippet: metafield(namespace: "okendo", key: "StarRatingSnippet") {
+                    value
+                }
+            }
+        }
+    `;
+    const { data: { product: { starRatingSnippet } } } = useShopQuery({
+        query: query,
+        preload: true,
+        variables: {
+            productId: productId
+        }
+    });
+    if (!(starRatingSnippet === null || starRatingSnippet === void 0 ? void 0 : starRatingSnippet.value)) {
+        console.error(`--OKE-- Could not retrieve product 'starRatingSnippet' metafield.`);
+        return null;
+    }
+    const dataAttributes = {
+        'data-oke-star-rating': '',
+        'data-oke-reviews-product-id': okendoProductId,
+        'data-oke-scroll-disabled': 'true'
+    };
+    return (React.createElement(OkendoWidgetClient, { dataAttributes: dataAttributes, metafieldContent: starRatingSnippet.value }));
+};
+export default OkendoStarRating;
+//# sourceMappingURL=OkendoStarRating.server.js.map

package/dist/esnext/components/OkendoStarRating.server.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OkendoStarRating.server.js","sourceRoot":"","sources":["../../../src/components/OkendoStarRating.server.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAGtD,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAC3D,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,CAAC,MAAM,gBAAgB,GAAmD,CAAC,KAAK,EAAuB,EAAE;IAC3G,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;IAE5B,MAAM,eAAe,GAAG,kBAAkB,CAAC,SAAS,CAAC,CAAC;IACtD,IAAI,CAAC,eAAe,EAAE;QAClB,OAAO,CAAC,IAAI,CAAC,sCAAsC,CAAC,CAAC;QACrD,OAAO,IAAI,CAAC;KACf;IAED,MAAM,KAAK,GAAG,GAAG,CAAA;;;;;;;;KAQhB,CAAC;IAEF,MAAM,EACF,IAAI,EAAE,EACF,OAAO,EAAE,EAAE,iBAAiB,EAAE,EACjC,EACJ,GAAG,YAAY,CAA6B;QACzC,KAAK,EAAE,KAAK;QACZ,OAAO,EAAE,IAAI;QACb,SAAS,EAAE;YACP,SAAS,EAAE,SAAS;SACvB;KACJ,CAAC,CAAC;IAEH,IAAI,CAAC,CAAA,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,KAAK,CAAA,EAAE;QAC3B,OAAO,CAAC,KAAK,CAAC,mEAAmE,CAAC,CAAC;QACnF,OAAO,IAAI,CAAC;KACf;IAED,MAAM,cAAc,GAAG;QACnB,sBAAsB,EAAE,EAAE;QAC1B,6BAA6B,EAAE,eAAe;QAC9C,0BAA0B,EAAE,MAAM;KACrC,CAAC;IAEF,OAAO,CACH,oBAAC,kBAAkB,IAAC,cAAc,EAAE,cAAc,EAAE,gBAAgB,EAAE,iBAAiB,CAAC,KAAK,GAAI,CACpG,CAAC;AACN,CAAC,CAAC;AAYF,eAAe,gBAAgB,CAAC","sourcesContent":["import { useShopQuery, gql } from '@shopify/hydrogen';\nimport { Metafield } from '@shopify/hydrogen/dist/esnext/storefront-api-types';\nimport { ReactElement } from 'react';\nimport { OkendoWidgetClient } from './OkendoWidget.client';\nimport { getOkendoProductId } from '../shared/productUtils';\nimport React from 'react';\n\nexport const OkendoStarRating: React.FunctionComponent<OkendoStarRatingProps> = (props): ReactElement | null => {\n    const { productId } = props;\n\n    const okendoProductId = getOkendoProductId(productId);\n    if (!okendoProductId) {\n        console.warn(`--OKE-- Product does not contain id.`);\n        return null;\n    }\n\n    const query = gql`\n        query metafields($productId: ID!) {\n            product(id: $productId) {\n                starRatingSnippet: metafield(namespace: \"okendo\", key: \"StarRatingSnippet\") {\n                    value\n                }\n            }\n        }\n    `;\n\n    const {\n        data: {\n            product: { starRatingSnippet }\n        }\n    } = useShopQuery<OkendoStarRatingMetafields>({\n        query: query,\n        preload: true,\n        variables: {\n            productId: productId\n        }\n    });\n\n    if (!starRatingSnippet?.value) {\n        console.error(`--OKE-- Could not retrieve product 'starRatingSnippet' metafield.`);\n        return null;\n    }\n\n    const dataAttributes = {\n        'data-oke-star-rating': '',\n        'data-oke-reviews-product-id': okendoProductId,\n        'data-oke-scroll-disabled': 'true'\n    };\n\n    return (\n        <OkendoWidgetClient dataAttributes={dataAttributes} metafieldContent={starRatingSnippet.value} />\n    );\n};\n\ninterface OkendoStarRatingProps {\n    productId: string;\n}\n\ninterface OkendoStarRatingMetafields {\n    product: {\n        starRatingSnippet?: Pick<Metafield, 'value'>;\n    };\n}\n\nexport default OkendoStarRating;\n"]}

package/dist/esnext/components/OkendoWidget.client.d.ts

@@ -0,0 +1,13 @@
+import type { SKO } from "@okendo/reviews-common";
+import type { ReviewsWidgetPlus } from '@okendo/reviews-widget-plus/dist-utils/ReviewsWidgetPlus';
+import React from "react";
+export declare const OkendoWidgetClient: React.FunctionComponent<OkendoWidgetClientProps>;
+export interface OkendoWidgetClientProps {
+    dataAttributes: SKO;
+    metafieldContent: string;
+}
+declare global {
+    interface Window {
+        okeWidgetApi: ReviewsWidgetPlus.WidgetWindowApi;
+    }
+}

package/dist/esnext/components/OkendoWidget.client.js

@@ -0,0 +1,21 @@
+import React from "react";
+import { useEffect, useRef } from "react";
+export const OkendoWidgetClient = (props) => {
+    const { dataAttributes, metafieldContent } = props;
+    const widgetContainer = useRef(null);
+    const initialiseReviewsWidget = () => {
+        if (widgetContainer.current) {
+            window.okeWidgetApi.initWidget(widgetContainer.current);
+        }
+    };
+    useEffect(() => {
+        if (window.okeWidgetApi) {
+            initialiseReviewsWidget();
+        }
+        else {
+            window.addEventListener('oke-script-loaded', initialiseReviewsWidget);
+        }
+    }, []);
+    return (React.createElement("div", { ref: widgetContainer, ...dataAttributes, dangerouslySetInnerHTML: { __html: metafieldContent } }));
+};
+//# sourceMappingURL=OkendoWidget.client.js.map

package/dist/esnext/components/OkendoWidget.client.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OkendoWidget.client.js","sourceRoot":"","sources":["../../../src/components/OkendoWidget.client.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE1C,MAAM,CAAC,MAAM,kBAAkB,GAAqD,CAAC,KAAK,EAAE,EAAE;IAC1F,MAAM,EAAE,cAAc,EAAE,gBAAgB,EAAE,GAAG,KAAK,CAAC;IACnD,MAAM,eAAe,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAErD,MAAM,uBAAuB,GAAG,GAAG,EAAE;QACjC,IAAI,eAAe,CAAC,OAAO,EAAE;YACzB,MAAM,CAAC,YAAY,CAAC,UAAU,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC;SAC3D;IACL,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,MAAM,CAAC,YAAY,EAAE;YACrB,uBAAuB,EAAE,CAAC;SAC7B;aACI;YACD,MAAM,CAAC,gBAAgB,CAAC,mBAAmB,EAAE,uBAAuB,CAAC,CAAC;SACzE;IACL,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACH,6BAAK,GAAG,EAAE,eAAe,KAAM,cAAc,EAAE,uBAAuB,EAAG,EAAE,MAAM,EAAE,gBAAgB,EAAE,GAAS,CACjH,CAAC;AACN,CAAC,CAAA","sourcesContent":["import type { SKO } from \"@okendo/reviews-common\";\nimport type { ReviewsWidgetPlus } from '@okendo/reviews-widget-plus/dist-utils/ReviewsWidgetPlus';\nimport React from \"react\";\nimport { useEffect, useRef } from \"react\";\n\nexport const OkendoWidgetClient: React.FunctionComponent<OkendoWidgetClientProps> = (props) => {\n    const { dataAttributes, metafieldContent } = props;\n    const widgetContainer = useRef<HTMLDivElement>(null);\n\n    const initialiseReviewsWidget = () => {\n        if (widgetContainer.current) {\n            window.okeWidgetApi.initWidget(widgetContainer.current);\n        }\n    };\n\n    useEffect(() => {\n        if (window.okeWidgetApi) {\n            initialiseReviewsWidget();\n        }\n        else {\n            window.addEventListener('oke-script-loaded', initialiseReviewsWidget);\n        }\n    }, []);\n\n    return (\n        <div ref={widgetContainer} {...dataAttributes} dangerouslySetInnerHTML={ { __html: metafieldContent } }></div>\n    );\n}\n\nexport interface OkendoWidgetClientProps {\n    dataAttributes: SKO;\n    metafieldContent: string;\n}\n\ndeclare global {\n    interface Window {\n        okeWidgetApi: ReviewsWidgetPlus.WidgetWindowApi;\n    }\n}\n"]}

package/dist/esnext/components/index.d.ts

@@ -0,0 +1,3 @@
+export * from './OkendoReviewsWidget.server';
+export * from './OkendoStarRating.server';
+export * from './OkendoProvider.server';

package/dist/esnext/components/index.js

@@ -0,0 +1,4 @@
+export * from './OkendoReviewsWidget.server';
+export * from './OkendoStarRating.server';
+export * from './OkendoProvider.server';
+//# sourceMappingURL=index.js.map

package/dist/esnext/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,8BAA8B,CAAC;AAC7C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,yBAAyB,CAAC","sourcesContent":["export * from './OkendoReviewsWidget.server';\nexport * from './OkendoStarRating.server';\nexport * from './OkendoProvider.server';\n"]}

package/dist/esnext/index.d.ts

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

package/dist/esnext/index.js

@@ -0,0 +1,2 @@
+export * from './components';
+//# sourceMappingURL=index.js.map

package/dist/esnext/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC","sourcesContent":["export * from './components';\n"]}

package/dist/esnext/shared/productUtils.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Gets the product ID with Okendo formatting.
+ * @param productId The Shopify Product ID e.g. gid://shopify/Product/10079785100.
+ * @returns The product ID in Okendo formatting.
+ */
+export declare function getOkendoProductId(productId: string): string | undefined;

package/dist/esnext/shared/productUtils.js

@@ -0,0 +1,16 @@
+const kProductIdRegex = /^[0-9]*$/;
+/**
+ * Gets the product ID with Okendo formatting.
+ * @param productId The Shopify Product ID e.g. gid://shopify/Product/10079785100.
+ * @returns The product ID in Okendo formatting.
+ */
+export function getOkendoProductId(productId) {
+    if (!productId) {
+        return;
+    }
+    // Supports Shopify's GraphQL Id syntax e.g. gid://shopify/Product/10079785100
+    return `shopify-${kProductIdRegex.test(productId)
+        ? productId
+        : productId.split('/').slice(-1)[0]}`;
+}
+//# sourceMappingURL=productUtils.js.map

package/dist/esnext/shared/productUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"productUtils.js","sourceRoot":"","sources":["../../../src/shared/productUtils.ts"],"names":[],"mappings":"AAAA,MAAM,eAAe,GAAG,UAAU,CAAC;AAEnC;;;;GAIG;AACH,MAAM,UAAU,kBAAkB,CAAC,SAAiB;IAChD,IAAI,CAAC,SAAS,EAAE;QACZ,OAAO;KACV;IAED,8EAA8E;IAC9E,OAAO,WAAW,eAAe,CAAC,IAAI,CAAC,SAAS,CAAC;QAC7C,CAAC,CAAC,SAAS;QACX,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAClC,EAAE,CAAC;AACX,CAAC","sourcesContent":["const kProductIdRegex = /^[0-9]*$/;\n\n/**\n * Gets the product ID with Okendo formatting.\n * @param productId The Shopify Product ID e.g. gid://shopify/Product/10079785100.\n * @returns The product ID in Okendo formatting.\n */\nexport function getOkendoProductId(productId: string): string | undefined {\n    if (!productId) {\n        return;\n    }\n\n    // Supports Shopify's GraphQL Id syntax e.g. gid://shopify/Product/10079785100\n    return `shopify-${kProductIdRegex.test(productId)\n        ? productId\n        : productId.split('/').slice(-1)[0]\n        }`;\n}\n"]}

package/dist/node/plugin/extendViteOptimizeDeps.d.ts

@@ -0,0 +1,2 @@
+import type { Plugin } from 'vite';
+export declare const extendViteOptimizeDeps: () => Plugin;

package/dist/node/plugin/extendViteOptimizeDeps.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.extendViteOptimizeDeps = void 0;
+const extendViteOptimizeDeps = () => ({
+    name: 'vite-plugin-okendo-extend-optimize-deps',
+    config: () => ({
+        optimizeDeps: {
+            include: [
+                '@okendo/shopify-hydrogen > html-react-parser'
+            ]
+        }
+    })
+});
+exports.extendViteOptimizeDeps = extendViteOptimizeDeps;
+//# sourceMappingURL=extendViteOptimizeDeps.js.map

package/dist/node/plugin/extendViteOptimizeDeps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"extendViteOptimizeDeps.js","sourceRoot":"","sources":["../../../src/plugins/extendViteOptimizeDeps.ts"],"names":[],"mappings":";;;AAEO,MAAM,sBAAsB,GAAG,GAAW,EAAE,CAAC,CAAC;IACjD,IAAI,EAAE,yCAAyC;IAC/C,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC;QACX,YAAY,EAAE;YACV,OAAO,EAAE;gBACL,8CAA8C;aACjD;SACJ;KACJ,CAAC;CACL,CAAC,CAAC;AATU,QAAA,sBAAsB,0BAShC","sourcesContent":["import type { Plugin } from 'vite';\n\nexport const extendViteOptimizeDeps = (): Plugin => ({\n    name: 'vite-plugin-okendo-extend-optimize-deps',\n    config: () => ({\n        optimizeDeps: {\n            include: [\n                '@okendo/shopify-hydrogen > html-react-parser'\n            ]\n        }\n    })\n});\n"]}

package/dist/node/plugin/index.d.ts

@@ -0,0 +1,3 @@
+import type { Plugin } from 'vite';
+declare const _default: () => Plugin[];
+export default _default;

package/dist/node/plugin/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const extendViteOptimizeDeps_1 = require("./extendViteOptimizeDeps");
+exports.default = () => {
+    return [
+        (0, extendViteOptimizeDeps_1.extendViteOptimizeDeps)()
+    ];
+};
+//# sourceMappingURL=index.js.map

package/dist/node/plugin/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/plugins/index.ts"],"names":[],"mappings":";;AACA,qEAAkE;AAElE,kBAAe,GAAG,EAAE;IAChB,OAAO;QACH,IAAA,+CAAsB,GAAE;KACf,CAAC;AAClB,CAAC,CAAC","sourcesContent":["import type { Plugin } from 'vite';\nimport { extendViteOptimizeDeps } from './extendViteOptimizeDeps';\n\nexport default () => {\n    return [\n        extendViteOptimizeDeps()\n    ] as Plugin[];\n};\n"]}

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@okendo/shopify-hydrogen",
-    "version": "0.0.1",
-    "description": "A component library containing Okendo Reviews Widget componenets.",
+    "version": "0.0.2",
+    "description": "A component library containing Okendo Reviews React components.",
     "main": "dist/esnext/index.js",
     "files": [
         "dist",
@@ -10,7 +10,8 @@
     "scripts": {
         "build": "rimraf dist/ && npm run build:plugin:cjs && npm run build:esm",
         "build:plugin:cjs": "tsc --p tsconfig.plugin.cjs.json",
-        "build:esm": "tsc --p tsconfig.esm.json"
+        "build:esm": "tsc --p tsconfig.esm.json",
+        "prepublishOnly": "npm run build"
     },
     "author": "Okendo",
     "license": "ISC",