@okendo/shopify-hydrogen 0.0.1 → 0.0.4

package/README.md

@@ -1,13 +1,411 @@
-# 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 ##
+<br/>
+
+# Table of contents
+
+1. [What is Okendo Shopify Hydrogen](#introduction)
+2. [Guided Installation](#installation)
+   1. [Configure Hydrogen App](#configurehydrogenapp)
+   2. [Expose Shopify Metafields](#exposemetafields)
+3. [How to Use Okendo Hydrogen Components In Your Hydrogen Apps](#okendohydrogencomponentsusage)
+4. [Component Props](#componentprops)
+5. [NPM Component Terminology/Defintions](#npmdefinitions)
+6. [View Our Okendo Sample Hydrogen App](#learnmore)
+
+<br/><br/>
+
+# What is Okendo Shopify Hydrogen?<a name="introduction"></a>
+
+Okendo Shopify Hydrogen is a React component library to be used in Shopify Hydrogen apps. This utilises [Shopify’s Hydrogen framework](https://shopify.dev/custom-storefronts/hydrogen/framework) which is used to create custom storefronts using both server-side rendered and client-side rendered React components.
+
+The purpose of this library is for a Hydrogen-based React Shopify storefront to import this library so that the Okendo Reviews List and Okendo Star Ratings components can be rendered within their React application, providing [Okendo’s reviews display functionality](https://www.okendo.io/blog/widget-plus/).
+
+<br/>
+
+# Guided Installation <a name="installation"></a>
+
+The purpose of this documentation is to guide you on the following:
+
+- How to configure your Shopify store ready for Okendo Shopify Hydrogen.
+- How to install and configure Okendo Shopify Hydrogen components in your Shopify Hydrogen app.
+
+<br/>
+
+## Requirements
+
+- You have an existing Shopify store.
+- You have an existing Hydrogen app. ([Learn how to create a Hydrogen app](https://shopify.dev/custom-storefronts/hydrogen/getting-started/create))
+- You have a current Okendo Reviews subscription and have the **Okendo: Product Reviews & UCG** app installed and configured.
+- You have an existing Shopify custom app with Storefront access token. ([Learn how to configure Shopify Storefront](https://www.notion.so/Configure-Shopify-Storefront-9e78e31bb4d94546aa1d037367c6a0b8))
+
+<br/>
+
+## 1. Configure Hydrogen app config <a name="configurehydrogenapp"></a>
+
+1. Open **hydrogen.config.js** in your project.
+2. Make the following changes and save the file:
+   - Update `storeDomain` to specify your store's domain name.
+   - Update `storefrontToken` to specify your Storefront API access token.
+
+<br/>
+
+## 2. Expose Shopify Metafields <a name="exposemetafields"></a>
+
+Okendo Reviews utilise Product and Shop specific [metafields](https://shopify.dev/api/examples/metafields) in order to function and provide a seamless user experience. You will need to expose these metafields so that they can be retrieved by your Hydrogen app.
+
+At this point in time, unfortunately Shopify does not have a way of exposing Shop Metafields through their admin UI.
+
+The preferred method to expose Metafields is to [contact Okendo Support](mailto:support@okendo.io).
+
+<br/>
+
+### For Technical/Advanced Users
+
+<details>
+  <summary>Learn How to Expose Metafields Via The Storefront API</summary>
+  
+  # Exposing Metafields via GraphQL
+
+## Using Curl
+
+You can also expose the required Okendo Shopify Metafields by using GraphQL with curl.
+
+1. Open a new terminal or PowerShell window.
+2. Run the following command to expose the `WidgetPreRenderStyleTag` Shop Metafield.
+
+```bash
+curl -X POST \
+https://{shop}.myshopify.com/admin/api/2022-04/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
+    }
+  }
+}
+'
+```
+
+3. Run the following command to expose the `WidgetPreRenderBodyStyleTags` Shop Metafield.
+
+```bash
+curl -X POST \
+https://{shop}.myshopify.com/admin/api/2022-04/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
+    }
+  }
+}
+'
+```
+
+4. Run the following command to expose the `ReviewsWidgetSnippet` Product Metafield.
+
+```bash
+curl -X POST \
+https://{shop}.myshopify.com/admin/api/2022-04/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
+    }
+  }
+}
+'
+```
+
+5. Run the following command to expose the `StarRatingSnippet` the Product Metafield.
+
+```bash
+curl -X POST \
+https://{shop}.myshopify.com/admin/api/2022-04/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
+
+1. Open your GraphQL IDE (such as Postman) and make a `POST` request with the following details:
+
+- **URL:** https://{shop}.myshopify.com/admin/api/2022-04/graphql.json
+- **Headers:** - X-Shopify-Access-Token: {access_token} - Content-Type: application/json 2. Execute the following request to expose the `WidgetPreRenderStyleTag` Shop Metafield.
+
+  ```graphql
+  mutation {
+    metafieldStorefrontVisibilityCreate(
+      input: {
+        namespace: "okendo"
+        key: "WidgetPreRenderStyleTags"
+        ownerType: SHOP
+      }
+    ) {
+      metafieldStorefrontVisibility {
+        id
+      }
+      userErrors {
+        field
+        message
+      }
+    }
+  }
+  ```
+
+  3. Execute the following request to expose the `WidgetPreRenderBodyStyleTags` Shop Metafield.
+
+  ```graphql
+  mutation {
+    metafieldStorefrontVisibilityCreate(
+      input: {
+        namespace: "okendo"
+        key: "WidgetPreRenderBodyStyleTags"
+        ownerType: SHOP
+      }
+    ) {
+      metafieldStorefrontVisibility {
+        id
+      }
+      userErrors {
+        field
+        message
+      }
+    }
+  }
+  ```
+
+  4. Execute the following request to expose the `ReviewsWidgetSnippet` Product Metafield.
+
+  ```graphql
+  mutation {
+    metafieldStorefrontVisibilityCreate(
+      input: {
+        namespace: "okendo"
+        key: "ReviewsWidgetSnippet"
+        ownerType: PRODUCT
+      }
+    ) {
+      metafieldStorefrontVisibility {
+        id
+      }
+      userErrors {
+        field
+        message
+      }
+    }
+  }
+  ```
+
+  5. 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**
+
+  [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/2022-04/mutations/metafieldstorefrontvisibilitycreate](https://shopify.dev/api/admin-graphql/2022-04/mutations/metafieldstorefrontvisibilitycreate)
+  </details>
+  <br/>
+  <br/>
+
+## 3. How to Use Okendo Hydrogen Components In Your Hydrogen App <a name="okendohydrogencomponentsusage"></a>
+
+### Installation
+
+1. In your Hydrogen app directory, run `npm install @okendo/shopify-hydrogen` inside a terminal or PowerShell window.
+2. Open **vite.config.js** and add `import okendo from '@okendo/shopify-hydrogen/plugin` to the list of imports.
+3. Add `okendo()` to the list of `plugins`.
+
+   ```tsx
+   /* **vite.config.js */**
+   import {defineConfig} from 'vite';
+   import hydrogen from '@shopify/hydrogen/plugin';
+   import okendo from '@okendo/shopify-hydrogen/plugin';
+
+   // https://vitejs.dev/config/
+   export default defineConfig({
+     plugins: [hydrogen(), okendo()],
+     optimizeDeps: {include: ['@headlessui/react']},
+     test: {
+       globals: true,
+       testTimeout: 10000,
+       hookTimeout: 10000,
+     },
+   });
+   ```
+
+4. Open **App.server.jsx** and import `OkendoProvider`.
+5. Include the `OkendoProvider` as shown below.
+
+   ```tsx
+   /* **App.server.jsx */**
+   import { OkendoProvider } from '@okendo/shopify-hydrogen';
+
+   function App() {
+     return (
+       <Suspense fallback={<LoadingFallback />}>
+         <ShopifyProvider>
+   			<!-- *** Include OkendoProvider HERE *** -->
+            <OkendoProvider subscriberId={okendo_subscriber_id} />
+             <ServerCartProvider>
+               <DefaultSeo />
+               <Router>
+                 <FileRoutes />
+                 <Route path="*" page={<NotFound />} />
+               </Router>
+             </ServerCartProvider>
+             <PerformanceMetrics />
+             {import.meta.env.DEV && <PerformanceMetricsDebug />}
+         </ShopifyProvider>
+       </Suspense>
+     );
+
+   ```
+
+### **Widget Usage**
+
+- Import `OkendoReviewsWidget` and `OkendoStarRating` and use as JSX components. Pass in the Shopify product ID as a prop.
+- The `productId` prop is optional for the `OkendoReviewsWidget`. Not providing will mean that the widget will display reviews for all products, which is ideal for homepages or collection pages.
+
+```tsx
+import {
+  OkendoReviewsWidget,
+  OkendoStarRating,
+} from "@okendo/shopify-hydrogen";
+
+const okendoReviewsWidget = <OkendoReviewsWidget productId={product.id} />;
+const okendoStarRating = <OkendoStarRating productId={product.id} />;
+```
+
+> ℹ️ If you are wanting to use Okendo server components within React client components, you must pass the component in as a prop to the client component passed down from another server component. Otherwise, you can use the component directly in a server component. [Learn more here](https://shopify.dev/api/hydrogen/components#customizing-hydrogen-components).
+
+<br/>
+
+---
+
+## Component Props <a name="componentprops"></a>
+
+<br/>
+
+### OkendoProviderProps
+
+| Name                     | Type                                                                                               | Description                                                                                                                                                                                     | Optional |
+| ------------------------ | -------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
+| subscriberId             | string                                                                                             | The Okendo subscriber ID.                                                                                                                                                                       | no       |
+| apiDomain                | string                                                                                             | To override the default Okendo API Domain. (Default: api.okendo.io/v1)                                                                                                                          | yes      |
+| cdnDomain                | string                                                                                             | To override the default Okendo CDN domain. (Default: d3hw6dc1ow8pp2.cloudfront.net)                                                                                                             | yes      |
+| productUrlFormatOverride | (product: Pick<ReviewWithProductPublic, 'productHandle' \| 'productId' \| 'variantId'>) => string; | By default, we use Hydrogen’s default product routing. **Advanced Usage Only:** Function hook which allows the custom configuration of the Shopify product URLs from the Okendo Reviews Widget. | yes      |
+
+<br/><br/>
+
+### OkendoReviewsWidgetProps
+
+| Name      | Type   | Description                                                                                                                                                                                  | Optional |
+| --------- | ------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
+| productId | string | The Shopify Product ID. If provided, the Reviews Widget will be configured to display reviews specific to that product. Otherwise, the Reviews Widget will display reviews for all products. | yes      |
+
+<br/>
+
+### OkendoStarRatingProps
+
+| Name      | Type   | Description             | Optional |
+| --------- | ------ | ----------------------- | -------- |
+| productId | string | The Shopify Product ID. | no       |
+
+<br/>
+
+---
+
+<br/>
+
+## NPM Component Definitions <a name="npmdefinitions"></a>
+
+### 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 +413,31 @@ 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 ##
+- 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.
+
+<br/>
+
+### 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.
 
-## 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.
+<br/>
 
+### 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.
 
-### 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
+---
 
-* TODO - Ideally we point to a sample hydrogen project using our widgets.
+<br/>
 
+## View Our Okendo Sample Hydrogen App <a name="learnmore"></a>
 
-### Who do I talk to? ###
+We have created a Shopify Hydrogen sample application with our widgets pre-installed.
 
-* Tom Fulcher - tom.fulcher@okendo.io, Susanne Peng - susanne.peng@okendo.io, Rowan Puckeridge - rowan.puckeridge@okendo.io
-* Okendo Widget Pod
+- [View our Sample Okendo Shopify Hydrogen Demo Repository](https://github.com/okendo/okendo-shopify-hydrogen-demo)

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ServerComponentRequest } from '@shopify/hydrogen/dist/esnext/framework/Hydration/ServerComponentRequest.server';
+import type { ReviewWithProductPublic } from '@okendo/reviews-common';
+export declare const OkendoProvider: React.FunctionComponent<OkendoProviderProps>;
+interface OkendoProviderProps {
+    apiDomain?: string;
+    cdnDomain?: string;
+    productUrlFormatOverride?: (product: Pick<ReviewWithProductPublic, 'productHandle' | 'productId' | 'variantId'>) => string;
+    request: ServerComponentRequest;
+    subscriberId: string;
+}
+export {};

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

@@ -0,0 +1,67 @@
+import React from 'react';
+import parse from 'html-react-parser';
+import { fetchSync, useShopQuery, gql, CacheMinutes } from '@shopify/hydrogen';
+import { Head } from '@shopify/hydrogen/client';
+import { okendoError, setInOkendoRequestContext } from '../shared';
+const kDefaultOkendoApiDomain = 'api.okendo.io/v1';
+const kDefaultOkendoCdnDomain = 'd3hw6dc1ow8pp2.cloudfront.net';
+export const OkendoProvider = (props) => {
+    const { apiDomain, cdnDomain, productUrlFormatOverride, request, subscriberId } = props;
+    // Download subscriber widget plus settings.
+    const url = `https://${apiDomain !== null && apiDomain !== void 0 ? apiDomain : kDefaultOkendoApiDomain}/stores/${subscriberId}/widget_plus_settings`;
+    const settingsResponse = fetchSync(url, { preload: true });
+    if (!settingsResponse.response.ok) {
+        console.error(okendoError('Failed to retrieve subscriber settings. Please check your environment variables.'));
+        setInOkendoRequestContext(request, 'setupFailed', true);
+        return null;
+    }
+    const { cssVariables, customCss, reviewsHeaderConfig, starSymbols } = settingsResponse.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>', '') : '';
+    // Download contents of widget initialisation script.
+    const initScriptResponse = fetchSync(`https://${cdnDomain !== null && cdnDomain !== void 0 ? cdnDomain : kDefaultOkendoCdnDomain}/reviews-widget-plus/js/okendo-reviews.js`, {
+        cache: CacheMinutes(),
+        preload: true
+    });
+    if (!initScriptResponse.response.ok) {
+        console.error(okendoError('Failed to retrieve widget initialization script.'));
+        setInOkendoRequestContext(request, 'setupFailed', true);
+        return null;
+    }
+    const initScriptContents = initScriptResponse.text();
+    // Set up product URL formatter.
+    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;
+    // Get pre-rendered style settings.
+    const query = gql `
+        query metafields {
+            shop {
+                widgetPreRenderStyleTags: metafield(namespace: "okendo", key: "WidgetPreRenderStyleTags") {
+                    value
+                }
+            }
+        }
+    `;
+    const { data: { shop: { widgetPreRenderStyleTags } } } = useShopQuery({
+        query: query,
+        preload: true
+    });
+    const preRenderStyleTags = (widgetPreRenderStyleTags === null || widgetPreRenderStyleTags === void 0 ? void 0 : widgetPreRenderStyleTags.value) ? parse(widgetPreRenderStyleTags.value) : '';
+    if (!preRenderStyleTags) {
+        console.warn(okendoError('Failed to retrieve pre-rendered widget style settings.'));
+    }
+    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}`)),
+        preRenderStyleTags,
+        parse(starSymbols)));
+};
+//# 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 { fetchSync, useShopQuery, gql, CacheMinutes } from '@shopify/hydrogen';\nimport { Head } from '@shopify/hydrogen/client';\nimport { ServerComponentRequest } from '@shopify/hydrogen/dist/esnext/framework/Hydration/ServerComponentRequest.server';\nimport type { Metafield } from '@shopify/hydrogen/dist/esnext/storefront-api-types';\nimport type { ReviewsAPIPublic, ReviewWithProductPublic } from '@okendo/reviews-common';\n\nimport { okendoError, setInOkendoRequestContext } from '../shared';\n\nconst kDefaultOkendoApiDomain = 'api.okendo.io/v1';\nconst kDefaultOkendoCdnDomain = 'd3hw6dc1ow8pp2.cloudfront.net';\n\nexport const OkendoProvider: React.FunctionComponent<OkendoProviderProps> = (props): JSX.Element | null => {\n    const { apiDomain, cdnDomain, productUrlFormatOverride, request, subscriberId } = props;\n\n    // Download subscriber widget plus settings.\n    const url = `https://${apiDomain ?? kDefaultOkendoApiDomain}/stores/${subscriberId}/widget_plus_settings`;\n    const settingsResponse = fetchSync(url, { preload: true });\n\n    if (!settingsResponse.response.ok) {\n        console.error(okendoError('Failed to retrieve subscriber settings. Please check your environment variables.'));\n        setInOkendoRequestContext(request, 'setupFailed', true);\n        return null;\n    }\n\n    const { cssVariables, customCss, reviewsHeaderConfig, starSymbols } = settingsResponse.json() as ReviewsAPIPublic.Reviews.WidgetPlusSettings.Get.Response;\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    // Download contents of widget initialisation script.\n    const initScriptResponse = fetchSync(`https://${cdnDomain ?? kDefaultOkendoCdnDomain}/reviews-widget-plus/js/okendo-reviews.js`, {\n        cache: CacheMinutes(),\n        preload: true\n    });\n\n    if (!initScriptResponse.response.ok) {\n        console.error(okendoError('Failed to retrieve widget initialization script.'));\n        setInOkendoRequestContext(request, 'setupFailed', true);\n        return null;\n    }\n\n    const initScriptContents = initScriptResponse.text();\n\n    // Set up product URL formatter.\n    const productUrlFormatter = typeof productUrlFormatOverride === 'function'\n        ? productUrlFormatOverride\n        : (product: Pick<ReviewWithProductPublic, 'productHandle' | 'productId' | 'variantId'>) =>\n            product?.productHandle\n                ? `/products/${product.productHandle}/${product.variantId ? '?variantId=' + product.variantId : ''}`\n                : undefined;\n\n    // Get pre-rendered style settings.\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 preRenderStyleTags = widgetPreRenderStyleTags?.value ? parse(widgetPreRenderStyleTags.value) : '';\n\n    if (!preRenderStyleTags) {\n        console.warn(okendoError('Failed to retrieve pre-rendered widget style settings.'));\n    }\n\n    return (\n        <>\n            <Head>\n                <script id=\"oke-reviews-settings\" type=\"application/json\">{JSON.stringify(reviewsHeaderConfig)}</script>\n                <style id=\"oke-css-vars\">{cssVariablesNormalized}</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            {preRenderStyleTags}\n            {parse(starSymbols)}\n        </>\n    );\n}\n\ninterface OkendoProviderProps {\n    apiDomain?: string;\n    cdnDomain?: string;\n    productUrlFormatOverride?: (product: Pick<ReviewWithProductPublic, 'productHandle' | 'productId' | 'variantId'>) => string;\n    request: ServerComponentRequest;\n    subscriberId: 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,59 @@
+import React from 'react';
+import parse from 'html-react-parser';
+import { useShopQuery, gql } from '@shopify/hydrogen';
+import { OkendoWidgetClient } from './OkendoWidget.client';
+import { getOkendoProductId, useOkendoRequestContext, widgetMetafieldError } from '../shared';
+export const OkendoReviewsWidget = (props) => {
+    var _a, _b, _c, _d, _e, _f;
+    const { setupFailed } = useOkendoRequestContext();
+    if (setupFailed) {
+        return null;
+    }
+    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
+        }
+    });
+    if (productId && !((_a = product === null || product === void 0 ? void 0 : product.reviewsWidgetSnippet) === null || _a === void 0 ? void 0 : _a.value)) {
+        console.warn(widgetMetafieldError('OkendoReviewsWidget', 'ReviewsWidgetSnippet'));
+    }
+    if (!((_b = shop === null || shop === void 0 ? void 0 : shop.widgetPreRenderBodyStyleTags) === null || _b === void 0 ? void 0 : _b.value)) {
+        console.warn(widgetMetafieldError('OkendoReviewsWidget', 'WidgetPreRenderBodyStyleTags'));
+    }
+    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((_d = (_c = shop === null || shop === void 0 ? void 0 : shop.widgetPreRenderBodyStyleTags) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : ''),
+        React.createElement(OkendoWidgetClient, { dataAttributes: dataAttributes, metafieldContent: (_f = (_e = product === null || product === void 0 ? void 0 : product.reviewsWidgetSnippet) === null || _e === void 0 ? void 0 : _e.value) !== null && _f !== void 0 ? _f : '' })));
+};
+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,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,MAAM,mBAAmB,CAAC;AACtC,OAAO,EAAE,YAAY,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAItD,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAC3D,OAAO,EAAE,kBAAkB,EAAE,uBAAuB,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAC;AAE9F,MAAM,CAAC,MAAM,mBAAmB,GAAsD,CAAC,KAAK,EAA6B,EAAE;;IACvH,MAAM,EAAE,WAAW,EAAE,GAAG,uBAAuB,EAAE,CAAC;IAClD,IAAI,WAAW,EAAE;QACb,OAAO,IAAI,CAAC;KACf;IAED,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;SACZ;KACJ,CAAC,CAAC;IAEH,IAAI,SAAS,IAAI,CAAC,CAAA,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,oBAAoB,0CAAE,KAAK,CAAA,EAAE;QACpD,OAAO,CAAC,IAAI,CAAC,oBAAoB,CAAC,qBAAqB,EAAE,sBAAsB,CAAC,CAAC,CAAC;KACrF;IAED,IAAI,CAAC,CAAA,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,4BAA4B,0CAAE,KAAK,CAAA,EAAE;QAC5C,OAAO,CAAC,IAAI,CAAC,oBAAoB,CAAC,qBAAqB,EAAE,8BAA8B,CAAC,CAAC,CAAC;KAC7F;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,MAAA,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,4BAA4B,0CAAE,KAAK,mCAAI,EAAE,CAAC;QACvD,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 React from 'react';\nimport parse from 'html-react-parser';\nimport { useShopQuery, gql } from '@shopify/hydrogen';\nimport type { Metafield } from '@shopify/hydrogen/dist/esnext/storefront-api-types';\nimport type { SKO } from '@okendo/reviews-common';\n\nimport { OkendoWidgetClient } from './OkendoWidget.client';\nimport { getOkendoProductId, useOkendoRequestContext, widgetMetafieldError } from '../shared';\n\nexport const OkendoReviewsWidget: React.FunctionComponent<OkendoReviewsWidgetProps> = (props): React.ReactElement | null => {\n    const { setupFailed } = useOkendoRequestContext();\n    if (setupFailed) {\n        return null;\n    }\n\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\n        }\n    });\n\n    if (productId && !product?.reviewsWidgetSnippet?.value) {\n        console.warn(widgetMetafieldError('OkendoReviewsWidget', 'ReviewsWidgetSnippet'));\n    }\n\n    if (!shop?.widgetPreRenderBodyStyleTags?.value) {\n        console.warn(widgetMetafieldError('OkendoReviewsWidget', 'WidgetPreRenderBodyStyleTags'));\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,43 @@
+import React from 'react';
+import { useShopQuery, gql } from '@shopify/hydrogen';
+import { OkendoWidgetClient } from './OkendoWidget.client';
+import { getOkendoProductId, useOkendoRequestContext, widgetConfigurationError, widgetMetafieldError } from '../shared';
+export const OkendoStarRating = (props) => {
+    const { setupFailed } = useOkendoRequestContext();
+    if (setupFailed) {
+        return null;
+    }
+    const { productId } = props;
+    const okendoProductId = getOkendoProductId(productId);
+    if (!okendoProductId) {
+        console.error(widgetConfigurationError('OkendoStarRating', 'productId was not provided'));
+        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
+        }
+    });
+    if (!(starRatingSnippet === null || starRatingSnippet === void 0 ? void 0 : starRatingSnippet.value)) {
+        console.warn(widgetMetafieldError('OkendoStarRating', 'StarRatingSnippet'));
+    }
+    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 === null || starRatingSnippet === void 0 ? void 0 : 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,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,YAAY,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAGtD,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAC3D,OAAO,EAAE,kBAAkB,EAAE,uBAAuB,EAAE,wBAAwB,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAC;AAExH,MAAM,CAAC,MAAM,gBAAgB,GAAmD,CAAC,KAAK,EAA6B,EAAE;IACjH,MAAM,EAAE,WAAW,EAAE,GAAG,uBAAuB,EAAE,CAAC;IAClD,IAAI,WAAW,EAAE;QACb,OAAO,IAAI,CAAC;KACf;IAED,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;IAE5B,MAAM,eAAe,GAAG,kBAAkB,CAAC,SAAS,CAAC,CAAC;IACtD,IAAI,CAAC,eAAe,EAAE;QAClB,OAAO,CAAC,KAAK,CAAC,wBAAwB,CAAC,kBAAkB,EAAE,4BAA4B,CAAC,CAAC,CAAC;QAC1F,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;SACZ;KACJ,CAAC,CAAC;IAEH,IAAI,CAAC,CAAA,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,KAAK,CAAA,EAAE;QAC3B,OAAO,CAAC,IAAI,CAAC,oBAAoB,CAAC,kBAAkB,EAAE,mBAAmB,CAAC,CAAC,CAAC;KAC/E;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,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,KAAK,GAAI,CACrG,CAAC;AACN,CAAC,CAAC;AAYF,eAAe,gBAAgB,CAAC","sourcesContent":["import React from 'react';\nimport { useShopQuery, gql } from '@shopify/hydrogen';\nimport type { Metafield } from '@shopify/hydrogen/dist/esnext/storefront-api-types';\n\nimport { OkendoWidgetClient } from './OkendoWidget.client';\nimport { getOkendoProductId, useOkendoRequestContext, widgetConfigurationError, widgetMetafieldError } from '../shared';\n\nexport const OkendoStarRating: React.FunctionComponent<OkendoStarRatingProps> = (props): React.ReactElement | null => {\n    const { setupFailed } = useOkendoRequestContext();\n    if (setupFailed) {\n        return null;\n    }\n\n    const { productId } = props;\n\n    const okendoProductId = getOkendoProductId(productId);\n    if (!okendoProductId) {\n        console.error(widgetConfigurationError('OkendoStarRating', 'productId was not provided'));\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\n        }\n    });\n\n    if (!starRatingSnippet?.value) {\n        console.warn(widgetMetafieldError('OkendoStarRating', 'StarRatingSnippet'));\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 React from 'react';
+import type { SKO } from '@okendo/reviews-common';
+import type { ReviewsWidgetPlus } from '@okendo/reviews-widget-plus/dist-utils/ReviewsWidgetPlus';
+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,20 @@
+import React, { 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":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAIjD,MAAM,CAAC,MAAM,kBAAkB,GAAqD,CAAC,KAAK,EAAE,EAAE;IAC1F,MAAM,EAAE,cAAc,EAAE,gBAAgB,GAAG,EAAE,EAAE,GAAG,KAAK,CAAC;IACxD,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,EAAE,EAAE,MAAM,EAAE,gBAAgB,EAAE,GAAQ,CAC/G,CAAC;AACN,CAAC,CAAA","sourcesContent":["import React, { useEffect, useRef } from 'react';\nimport type { SKO } from '@okendo/reviews-common';\nimport type { ReviewsWidgetPlus } from '@okendo/reviews-widget-plus/dist-utils/ReviewsWidgetPlus';\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,2 @@
+export * from './components';
+export * from './shared';

package/dist/esnext/index.js

@@ -0,0 +1,3 @@
+export * from './components';
+export * from './shared';
+//# 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;AAC7B,cAAc,UAAU,CAAC","sourcesContent":["export * from './components';\nexport * from './shared';\n"]}

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

@@ -0,0 +1,3 @@
+export declare function okendoError(message: string): string;
+export declare function widgetConfigurationError(widgetName: string, message: string): string;
+export declare function widgetMetafieldError(widgetName: string, metafieldName: string): string;

package/dist/esnext/shared/errorUtils.js

@@ -0,0 +1,10 @@
+export function okendoError(message) {
+    return `Okendo: ${message}`;
+}
+export function widgetConfigurationError(widgetName, message) {
+    return okendoError(`${widgetName} error: ${message}`);
+}
+export function widgetMetafieldError(widgetName, metafieldName) {
+    return okendoError(`${widgetName} error: Failed to retrieve metafield '${metafieldName}'.`);
+}
+//# sourceMappingURL=errorUtils.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"errorUtils.js","sourceRoot":"","sources":["../../../src/shared/errorUtils.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,WAAW,CAAC,OAAe;IACvC,OAAO,WAAW,OAAO,EAAE,CAAC;AAChC,CAAC;AAED,MAAM,UAAU,wBAAwB,CAAC,UAAkB,EAAE,OAAe;IACxE,OAAO,WAAW,CAAC,GAAG,UAAU,WAAW,OAAO,EAAE,CAAC,CAAC;AAC1D,CAAC;AAED,MAAM,UAAU,oBAAoB,CAAC,UAAkB,EAAE,aAAqB;IAC1E,OAAO,WAAW,CAAC,GAAG,UAAU,yCAAyC,aAAa,IAAI,CAAC,CAAC;AAChG,CAAC","sourcesContent":["export function okendoError(message: string): string {\n    return `Okendo: ${message}`;\n}\n\nexport function widgetConfigurationError(widgetName: string, message: string): string {\n    return okendoError(`${widgetName} error: ${message}`);\n}\n\nexport function widgetMetafieldError(widgetName: string, metafieldName: string): string {\n    return okendoError(`${widgetName} error: Failed to retrieve metafield '${metafieldName}'.`);\n}\n"]}

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

@@ -0,0 +1,3 @@
+export * from './errorUtils';
+export * from './productUtils';
+export * from './requestUtils';

package/dist/esnext/shared/index.js

@@ -0,0 +1,4 @@
+export * from './errorUtils';
+export * from './productUtils';
+export * from './requestUtils';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/shared/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC","sourcesContent":["export * from './errorUtils';\nexport * from './productUtils';\nexport * from './requestUtils';\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/esnext/shared/requestUtils.d.ts

@@ -0,0 +1,12 @@
+import { SKO } from '@okendo/reviews-common';
+import { ServerComponentRequest } from '@shopify/hydrogen/dist/esnext/framework/Hydration/ServerComponentRequest.server';
+export declare function setInOkendoRequestContext(request: ServerComponentRequest, key: keyof OkendoRequestContextKeys, value: RequestContextSafeType | RequestContextSafeType[]): void;
+export declare function useOkendoRequestContext(): OkendoRequestContext;
+interface OkendoRequestContextKeys {
+    setupFailed: boolean;
+}
+export interface OkendoRequestContext extends OkendoRequestContextKeysWithSKO {
+}
+declare type OkendoRequestContextKeysWithSKO = OkendoRequestContextKeys & SKO;
+declare type RequestContextSafeType = string | number | boolean;
+export {};

package/dist/esnext/shared/requestUtils.js

@@ -0,0 +1,11 @@
+import { useServerRequest } from '@shopify/hydrogen/dist/esnext/foundation/ServerRequestProvider';
+export function setInOkendoRequestContext(request, key, value) {
+    const okendoRequestContext = request.ctx.okendoRequestContext || {};
+    okendoRequestContext[key] = value;
+    request.ctx.okendoRequestContext = okendoRequestContext;
+}
+export function useOkendoRequestContext() {
+    const { ctx: { okendoRequestContext } } = useServerRequest();
+    return okendoRequestContext || {};
+}
+//# sourceMappingURL=requestUtils.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"requestUtils.js","sourceRoot":"","sources":["../../../src/shared/requestUtils.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,gEAAgE,CAAC;AAGlG,MAAM,UAAU,yBAAyB,CAAC,OAA+B,EAAE,GAAmC,EAAE,KAAwD;IACpK,MAAM,oBAAoB,GAAyB,OAAO,CAAC,GAAG,CAAC,oBAAoB,IAAI,EAAE,CAAC;IAC1F,oBAAoB,CAAC,GAAG,CAAC,GAAG,KAAY,CAAC;IACzC,OAAO,CAAC,GAAG,CAAC,oBAAoB,GAAG,oBAAoB,CAAC;AAC5D,CAAC;AAED,MAAM,UAAU,uBAAuB;IACnC,MAAM,EAAE,GAAG,EAAE,EAAE,oBAAoB,EAAE,EAAE,GAAG,gBAAgB,EAAE,CAAC;IAC7D,OAAO,oBAAoB,IAAI,EAAE,CAAC;AACtC,CAAC","sourcesContent":["import { SKO } from '@okendo/reviews-common';\nimport { useServerRequest } from '@shopify/hydrogen/dist/esnext/foundation/ServerRequestProvider';\nimport { ServerComponentRequest } from '@shopify/hydrogen/dist/esnext/framework/Hydration/ServerComponentRequest.server';\n\nexport function setInOkendoRequestContext(request: ServerComponentRequest, key: keyof OkendoRequestContextKeys, value: RequestContextSafeType | RequestContextSafeType[]): void {\n    const okendoRequestContext: OkendoRequestContext = request.ctx.okendoRequestContext || {};\n    okendoRequestContext[key] = value as any;\n    request.ctx.okendoRequestContext = okendoRequestContext;\n}\n\nexport function useOkendoRequestContext(): OkendoRequestContext {\n    const { ctx: { okendoRequestContext } } = useServerRequest();\n    return okendoRequestContext || {};\n}\n\ninterface OkendoRequestContextKeys {\n    setupFailed: boolean;\n}\n\nexport interface OkendoRequestContext extends OkendoRequestContextKeysWithSKO { }\n\ntype OkendoRequestContextKeysWithSKO = OkendoRequestContextKeys & SKO;\n\ntype RequestContextSafeType = string | number | boolean;\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":";;AAEA,qEAAkE;AAElE,kBAAe,GAAG,EAAE;IAChB,OAAO;QACH,IAAA,+CAAsB,GAAE;KACf,CAAC;AAClB,CAAC,CAAC","sourcesContent":["import type { Plugin } from 'vite';\n\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.4",
+    "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",