Add Okendo's widgets (#23)

* Add Okendo's widgets

Note: the demo store for Hydrogen 1 has been archived in the branch `hydrogen-1-archive` in this repository. Because the demo store for Hydrogen 2 is completely different, the `master` branch as been recreated as orphan (empty).

* Import GraphQL fragments from the library

* Update ReadMe

* Update `@okendo/shopify-hydrogen`

README.md

@@ -1,6 +1,18 @@
 > **Note**
 > This demo store is built on Hydrogen v2, based on Remix. If you are using a store built with the now deprecated Hydrogen 1, please see [here](https://github.com/okendo/okendo-shopify-hydrogen-demo/tree/hydrogen-1-archive).
 
-## 🛠️ Work in Progress 🛠️
+# Demo store for the Okendo Hydrogen components
 
-### We are building Okendo's widgets for Hydrogen 2. They're comming soon!
+Please read the [documentation of the `@okendo/shopify-hydrogen` library](https://www.npmjs.com/package/@okendo/shopify-hydrogen).
+
+This demo store is simply the `demo-store` template [provided by Shopify](https://shopify.dev/docs/custom-storefronts/hydrogen/getting-started/quickstart), to which the Okendo components have been added. You can look at the commit history to see exactly what changes have been made.
+
+## Requirements
+
+- Node.js version 16.14.0 or higher.
+
+## Start the demo store locally
+
+```bash
+npm run dev
+```

app/components/ProductCard.tsx

@@ -11,6 +11,10 @@ import {Text, Link, AddToCartButton} from '~/components';
 import {isDiscounted, isNewArrival} from '~/lib/utils';
 import {getProductPlaceholder} from '~/lib/placeholders';
 import type {MoneyV2, Product} from '@shopify/hydrogen/storefront-api-types';
+import {
+  OkendoStarRating,
+  WithOkendoStarRatingSnippet,
+} from '@okendo/shopify-hydrogen';
 
 export function ProductCard({
   product,
@@ -20,7 +24,7 @@ export function ProductCard({
   onClick,
   quickAdd,
 }: {
-  product: SerializeFrom<Product>;
+  product: SerializeFrom<Product & WithOkendoStarRatingSnippet>;
   label?: string;
   className?: string;
   loading?: HTMLImageElement['loading'];
@@ -97,6 +101,10 @@ export function ProductCard({
             >
               {product.title}
             </Text>
+            <OkendoStarRating
+              productId={product.id}
+              okendoStarRatingSnippet={product.okendoStarRatingSnippet}
+            />
             <div className="flex gap-4">
               <Text className="flex gap-4">
                 <Money withoutTrailingZeros data={price!} />

app/data/fragments.ts

@@ -1,3 +1,5 @@
+import {OKENDO_PRODUCT_STAR_RATING_FRAGMENT} from '@okendo/shopify-hydrogen';
+
 export const MEDIA_FRAGMENT = `#graphql
   fragment Media on Media {
     __typename
@@ -37,11 +39,13 @@ export const MEDIA_FRAGMENT = `#graphql
 `;
 
 export const PRODUCT_CARD_FRAGMENT = `#graphql
+  ${OKENDO_PRODUCT_STAR_RATING_FRAGMENT}
   fragment ProductCard on Product {
     id
     title
     publishedAt
     handle
+    ...OkendoStarRatingSnippet
     variants(first: 1) {
       nodes {
         id

app/root.tsx

@@ -26,6 +26,7 @@ import {DEFAULT_LOCALE, parseMenu, type EnhancedMenu} from './lib/utils';
 import invariant from 'tiny-invariant';
 import {Shop, Cart} from '@shopify/hydrogen/storefront-api-types';
 import {useAnalytics} from './hooks/useAnalytics';
+import {OkendoProvider, getOkendoProviderData} from '@okendo/shopify-hydrogen';
 
 export const links: LinksFunction = () => {
   return [
@@ -45,6 +46,7 @@ export const links: LinksFunction = () => {
 export const meta: MetaFunction = () => ({
   charset: 'utf-8',
   viewport: 'width=device-width,initial-scale=1',
+  'oke:subscriber_id': '<your-okendo-subscriber-id>',
 });
 
 export async function loader({request, context}: LoaderArgs) {
@@ -66,6 +68,10 @@ export async function loader({request, context}: LoaderArgs) {
       shopId: layout.shop.id,
     },
     seo,
+    okendoProviderData: await getOkendoProviderData({
+      context,
+      subscriberId: '<your-okendo-subscriber-id>',
+    }),
   });
 }
 
@@ -84,6 +90,7 @@ export default function App() {
         <Links />
       </head>
       <body>
+        <OkendoProvider okendoProviderData={data.okendoProviderData} />
         <Layout
           layout={data.layout as LayoutData}
           key={`${locale.language}-${locale.country}`}

app/routes/($lang)/products/$productHandle.tsx

@@ -44,6 +44,14 @@ import {MEDIA_FRAGMENT, PRODUCT_CARD_FRAGMENT} from '~/data/fragments';
 import type {Storefront} from '~/lib/type';
 import type {Product} from 'schema-dts';
 import {routeHeaders, CACHE_SHORT} from '~/data/cache';
+import {
+  OkendoReviews,
+  OkendoStarRating,
+  WithOkendoStarRatingSnippet,
+  WithOkendoReviewsSnippet,
+  OKENDO_PRODUCT_STAR_RATING_FRAGMENT,
+  OKENDO_PRODUCT_REVIEWS_FRAGMENT,
+} from '@okendo/shopify-hydrogen';
 
 export const headers = routeHeaders;
 
@@ -59,7 +67,10 @@ export async function loader({params, request, context}: LoaderArgs) {
   });
 
   const {shop, product} = await context.storefront.query<{
-    product: ProductType & {selectedVariant?: ProductVariant};
+    product: ProductType & {
+      selectedVariant?: ProductVariant;
+    } & WithOkendoStarRatingSnippet &
+      WithOkendoReviewsSnippet;
     shop: Shop;
   }>(PRODUCT_QUERY, {
     variables: {
@@ -134,6 +145,10 @@ export default function Product() {
                 <Heading as="h1" className="whitespace-normal">
                   {title}
                 </Heading>
+                <OkendoStarRating
+                  productId={product.id}
+                  okendoStarRatingSnippet={product.okendoStarRatingSnippet}
+                />
                 {vendor && (
                   <Text className={'opacity-50 font-medium'}>{vendor}</Text>
                 )}
@@ -165,6 +180,10 @@ export default function Product() {
           </div>
         </div>
       </Section>
+      <OkendoReviews
+        productId={product.id}
+        okendoReviewsSnippet={product.okendoReviewsSnippet}
+      />
       <Suspense fallback={<Skeleton className="h-32" />}>
         <Await
           errorElement="There was a problem loading related products"
@@ -540,7 +559,9 @@ const PRODUCT_VARIANT_FRAGMENT = `#graphql
 const PRODUCT_QUERY = `#graphql
   ${MEDIA_FRAGMENT}
   ${PRODUCT_VARIANT_FRAGMENT}
-  query Product(
+  ${OKENDO_PRODUCT_STAR_RATING_FRAGMENT}
+  ${OKENDO_PRODUCT_REVIEWS_FRAGMENT}
+query Product(
     $country: CountryCode
     $language: LanguageCode
     $handle: String!
@@ -553,6 +574,8 @@ const PRODUCT_QUERY = `#graphql
       handle
       descriptionHtml
       description
+      ...OkendoStarRatingSnippet
+      ...OkendoReviewsSnippet
       options {
         name
         values

package.json

@@ -16,6 +16,7 @@
   "prettier": "@shopify/prettier-config",
   "dependencies": {
     "@headlessui/react": "^1.7.2",
+    "@okendo/shopify-hydrogen": "^2.0.0",
     "@remix-run/react": "1.14.0",
     "@shopify/cli": "3.29.0",
     "@shopify/cli-hydrogen": "^4.0.9",