* Update CSP in entry.server.tsx to latest as per our NPM docs

* Update Readme.md to add further instructions on running up in dev * Added star ratings to collections page * Bump .nvmrc as Node 21 is now supported
okendo · May 9, 2024 · 1728296 · 1728296
1 parent f2912ca
commit 1728296
Show file tree

Hide file tree

Showing 8 changed files with 7,421 additions and 10,282 deletions.
diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-v18.17.1
+v21.7.3
diff --git a/README.md b/README.md
@@ -16,6 +16,21 @@ This demo store is simply the `demo-store` template [provided by Shopify](https:
 
 ## Start the demo store locally
 
+You will need to create a `.env` file with the following values from your Hydrogen instance:
+```
+SESSION_SECRET=
+PUBLIC_STORE_DOMAIN=
+PRIVATE_STOREFRONT_API_TOKEN=
+PUBLIC_CUSTOMER_ACCOUNT_API_CLIENT_ID=
+PUBLIC_CUSTOMER_ACCOUNT_API_URL=
+PUBLIC_STOREFRONT_API_TOKEN=
+PUBLIC_STOREFRONT_ID=
+```
+
+Replace `'<your-okendo-subscriber-id>'` in `app/root.tsx` with your Okendo subscriber ID.
+
+Your Okendo User ID identifies your Okendo account. You can get this information from the Okendo section in the integration settings of the Okendo app.
+
 ```bash
 npm ci
 npm run dev

diff --git a/app/entry.server.tsx b/app/entry.server.tsx
@@ -10,29 +10,66 @@ export default async function handleRequest(
   responseHeaders: Headers,
   remixContext: EntryContext,
 ) {
-  const {nonce, header, NonceProvider} = createContentSecurityPolicy({
+  const { nonce, header, NonceProvider } = createContentSecurityPolicy({
     defaultSrc: [
       "'self'",
-      'localhost:*',
-      'https://cdn.shopify.com',
-      'https://d3hw6dc1ow8pp2.cloudfront.net',
-      'https://d3g5hqndtiniji.cloudfront.net',
-      'data:',
+      "localhost:*",
+      "https://cdn.shopify.com",
+      "https://d3hw6dc1ow8pp2.cloudfront.net",
+      "https://d3g5hqndtiniji.cloudfront.net",
+      "https://cdn-static.okendo.io",
+      "https://surveys.okendo.io",
+      "data:",
     ],
-    styleSrc: [
+    imgSrc: [
+      "'self'",
+      "https://cdn.shopify.com",
+      "data:",
+      "https://d3hw6dc1ow8pp2.cloudfront.net",
+      "https://d3g5hqndtiniji.cloudfront.net",
+      "https://cdn-static.okendo.io",
+      "https://surveys.okendo.io",
+    ],
+    mediaSrc: [
+      "'self'",
+      "https://d3hw6dc1ow8pp2.cloudfront.net",
+      "https://d3g5hqndtiniji.cloudfront.net",
+      "https://cdn-static.okendo.io"
+    ],
+    styleSrcElem: [
       "'self'",
       "'unsafe-inline'",
-      'https://cdn.shopify.com',
-      'localhost:*',
-      'https://d3hw6dc1ow8pp2.cloudfront.net',
+      "https://cdn.shopify.com",
+      "https://fonts.googleapis.com",
+      "https://fonts.gstatic.com",
+      "https://d3hw6dc1ow8pp2.cloudfront.net",
+      "https://cdn-static.okendo.io",
+      "https://surveys.okendo.io",
+    ],
+    scriptSrc: [
+      "'self'",
+      "https://cdn.shopify.com",
+      "https://d3hw6dc1ow8pp2.cloudfront.net",
+      "https://cdn-static.okendo.io",
+      "https://surveys.okendo.io",
+    ],
+    fontSrc: [
+      "'self'",
+      "https://fonts.gstatic.com",
+      "https://d3hw6dc1ow8pp2.cloudfront.net",
+      "https://cdn.shopify.com",
+      "https://cdn-static.okendo.io",
+      "https://surveys.okendo.io",
     ],
     connectSrc: [
       "'self'",
-      'https://monorail-edge.shopifysvc.com',
-      'localhost:*',
-      'ws://localhost:*',
-      'ws://127.0.0.1:*',
-      'https://api.okendo.io',
+      "https://monorail-edge.shopifysvc.com",
+      "localhost:*",
+      "ws://localhost:*",
+      "ws://127.0.0.1:*",
+      "https://api.okendo.io",
+      "https://cdn-static.okendo.io",
+      "https://surveys.okendo.io",
     ],
   });
 

diff --git a/app/routes/collections.all.tsx b/app/routes/collections.all.tsx
@@ -1,3 +1,4 @@
+import { OkendoStarRating, WithOkendoStarRatingSnippet } from '@okendo/shopify-hydrogen';
 import {Link, useLoaderData, type MetaFunction} from '@remix-run/react';
 import {
   Image,
@@ -70,7 +71,7 @@ function ProductItem({
   product,
   loading,
 }: {
-  product: ProductItemFragment;
+  product: ProductItemFragment & WithOkendoStarRatingSnippet;
   loading?: 'eager' | 'lazy';
 }) {
   const variant = product.variants.nodes[0];
@@ -92,14 +93,30 @@ function ProductItem({
         />
       )}
       <h4>{product.title}</h4>
+      <OkendoStarRating
+        productId={product.id}
+        okendoStarRatingSnippet={product.okendoStarRatingSnippet}
+      />
       <small>
         <Money data={product.priceRange.minVariantPrice} />
       </small>
     </Link>
   );
 }
 
+const OKENDO_PRODUCT_STAR_RATING_FRAGMENT = `#graphql
+	fragment OkendoStarRatingSnippet on Product {
+		okendoStarRatingSnippet: metafield(
+			namespace: "okendo"
+			key: "StarRatingSnippet"
+		) {
+			value
+		}
+	}
+` as const;
+
 const PRODUCT_ITEM_FRAGMENT = `#graphql
+  ${OKENDO_PRODUCT_STAR_RATING_FRAGMENT}
   fragment MoneyProductItem on MoneyV2 {
     amount
     currencyCode
@@ -131,6 +148,7 @@ const PRODUCT_ITEM_FRAGMENT = `#graphql
         }
       }
     }
+    ...OkendoStarRatingSnippet
   }
 ` as const;
 

diff --git a/customer-accountapi.generated.d.ts b/customer-accountapi.generated.d.ts
@@ -1,7 +1,7 @@
 /* eslint-disable eslint-comments/disable-enable-pair */
 /* eslint-disable eslint-comments/no-unlimited-disable */
 /* eslint-disable */
-import * as CustomerAccountAPI from '@shopify/hydrogen/customer-account-api-types';
+import type * as CustomerAccountAPI from '@shopify/hydrogen/customer-account-api-types';
 
 export type CustomerAddressUpdateMutationVariables = CustomerAccountAPI.Exact<{
   address: CustomerAccountAPI.CustomerAddressInput;