@rebuy/rebuy-hydrogen 1.0.3 → 2.1.0

package/RebuyProductRecommendations.client.jsx

@@ -0,0 +1,63 @@
+import { AddToCartButton, ProductOptionsProvider } from '@shopify/hydrogen';
+import { Section } from '~/components';
+import { ProductCard } from '~/components/cards';
+import { Button } from '~/components/elements';
+
+const AddToCartMarkup = ({ product }) => {
+    const selectedVariant = product.variants.nodes[0];
+    const isOutOfStock = !selectedVariant.availableForSale;
+
+    return (
+        <div className="space-y-2 mb-8">
+            <AddToCartButton
+                disabled={isOutOfStock}
+                product={product}
+                variantId={selectedVariant?.id}
+                quantity={1}
+                accessibleAddingToCartLabel="Adding item to your cart"
+                type="button"
+                attributes={[
+                    { key: '_source', value: 'Rebuy' },
+                    { key: '_attribution', value: 'Product Recommendations' },
+                ]}
+            >
+                <Button
+                    width="full"
+                    variant={isOutOfStock ? 'secondary' : 'primary'}
+                    as="span"
+                >
+                    {isOutOfStock ? 'Out of stock' : 'Add to bag'}
+                </Button>
+            </AddToCartButton>
+        </div>
+    );
+};
+
+export const RebuyProductRecommendations = ({ product, products }) => {
+    const title = `Like ${product.title}? You may also like:`;
+
+    return (
+        products.length > 0 && (
+            <Section heading={title} padding="y">
+                <ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 px-6 md:px-8 lg:px-12">
+                    {products.map((product) => (
+                        <li key={product.id}>
+                            <ProductOptionsProvider
+                                data={product}
+                                initialVariantId={product.variants.nodes[0].id}
+                            >
+                                <ProductCard
+                                    product={product}
+                                    className={'w-100'}
+                                />
+                                <AddToCartMarkup product={product} />
+                            </ProductOptionsProvider>
+                        </li>
+                    ))}
+                </ul>
+            </Section>
+        )
+    );
+};
+
+export default RebuyProductRecommendations;

package/RebuyProductViewed.client.jsx

@@ -1,42 +1,62 @@
-import React, { useState, useEffect } from 'react';
-
+import { RebuyClient } from '@rebuy/rebuy';
 import * as Utilities from '@rebuy/rebuy/utilities';
-import RebuyClient from '@rebuy/rebuy/client';
+import { useEffect, useMemo, useState } from 'react';
 
 const REBUY_API_KEY = import.meta.env.PUBLIC_REBUY_API_KEY;
 
-export default function RebuyProductViewed(props) {
-    const { product, productId, productHandle, children } = props;
+export const RebuyProductViewed = ({ children, ...props }) => {
+    const { product, productId, productHandle } = props;
 
+    // eslint-disable-next-line no-unused-vars
     const [event, setEvent] = useState(null);
+    const [Rebuy, setRebuy] = useState(null);
+    const [initialized, setInitialized] = useState(false);
+    const shopifyProductId = product?.id ?? productId ?? null;
+
+    const request = useMemo(() => {
+        const request = {
+            parameters: {},
+        };
+
+        if (shopifyProductId) {
+            request.parameters.shopify_product_id = Utilities.getIdFromGraphUrl(
+                shopifyProductId,
+                'Product'
+            );
+        } else if (productHandle) {
+            request.parameters.shopify_product_handle = productHandle;
+        }
+
+        return request;
+    }, [productHandle, shopifyProductId]);
 
-    const Rebuy = new RebuyClient(REBUY_API_KEY);
+    useEffect(() => {
+        const recordView = async () => {
+            const response = await Rebuy.trackProductViewed(request.parameters);
 
-    const request = {
-        parameters: {},
-    };
+            setEvent(response.data);
+        };
 
-    if (product) {
-        request.parameters.shopify_product_id = Utilities.getIdFromGraphUrl(product.id, 'Product');
-    } else if (productId) {
-        request.parameters.shopify_product_id = Utilities.getIdFromGraphUrl(productId, 'Product');
-    } else if (productHandle) {
-        request.parameters.shopify_product_handle = productHandle;
-    }
+        if (!initialized) {
+            const client = new RebuyClient(REBUY_API_KEY);
 
-    if (Object.keys(request.parameters).length == 0) {
-        console.log('No parameters!');
-        return;
-    }
+            setRebuy(client);
+            setInitialized(true);
 
-    useEffect(() => {
+            // Abort
+            return;
+        }
+
+        // Initialized
         recordView();
-    }, []);
+    }, [Rebuy, request, initialized]);
+
+    if (Object.keys(request.parameters).length === 0) {
+        console.warn('No parameters!');
+        return;
+    }
 
-    const recordView = async () => {
-        const response = await Rebuy.trackProductViewed(request.parameters);
-        setEvent(response.data);
-    };
+    return children;
+};
 
-    return <>{children}</>;
-}
+export default RebuyProductViewed;

package/RebuyRecentlyViewedProducts.client.jsx

@@ -0,0 +1,65 @@
+import { AddToCartButton, ProductOptionsProvider } from '@shopify/hydrogen';
+import { Section } from '~/components';
+import { ProductCard } from '~/components/cards';
+import { Button } from '~/components/elements';
+
+const AddToCartMarkup = ({ product }) => {
+    const selectedVariant = product.variants.nodes[0];
+    const isOutOfStock = !selectedVariant.availableForSale;
+
+    return (
+        <div className="space-y-2 mb-8">
+            <AddToCartButton
+                disabled={isOutOfStock}
+                product={product}
+                variantId={selectedVariant?.id}
+                quantity={1}
+                accessibleAddingToCartLabel="Adding item to your cart"
+                type="button"
+                attributes={[
+                    { key: '_source', value: 'Rebuy' },
+                    { key: '_attribution', value: 'Recently Viewed Product' },
+                ]}
+            >
+                <Button
+                    width="full"
+                    variant={isOutOfStock ? 'secondary' : 'primary'}
+                    as="span"
+                >
+                    {isOutOfStock ? 'Out of stock' : 'Add to bag'}
+                </Button>
+            </AddToCartButton>
+        </div>
+    );
+};
+
+export const RebuyRecentlyViewedProducts = ({ product, products }) => {
+    const title = 'Recently Viewed';
+    // Filter current product from recently viewed
+    const filtered = products.filter((recent) => recent.id !== product.id);
+
+    return (
+        filtered.length > 0 && (
+            <Section heading={title} padding="y">
+                <ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16 px-6 md:px-8 lg:px-12">
+                    {filtered.map((product) => (
+                        <li key={product.id}>
+                            <ProductOptionsProvider
+                                data={product}
+                                initialVariantId={product.variants.nodes[0].id}
+                            >
+                                <ProductCard
+                                    product={product}
+                                    className={'w-100'}
+                                />
+                                <AddToCartMarkup product={product} />
+                            </ProductOptionsProvider>
+                        </li>
+                    ))}
+                </ul>
+            </Section>
+        )
+    );
+};
+
+export default RebuyRecentlyViewedProducts;

package/RebuyWidgetContainer.client.jsx

@@ -1,97 +1,136 @@
-import React, { useState, useEffect, useContext } from 'react';
-import { RebuyContext } from './RebuyContextProvider.client';
-import { flattenConnection } from '@shopify/hydrogen';
-
+import { RebuyClient } from '@rebuy/rebuy';
+import { RebuyContext } from '@rebuy/rebuy-hydrogen/RebuyContexts.client';
 import * as Utilities from '@rebuy/rebuy/utilities';
-import RebuyClient from '@rebuy/rebuy/client';
+import { flattenConnection, useCart } from '@shopify/hydrogen';
+import React, { useContext, useEffect, useMemo, useState } from 'react';
 
 const REBUY_API_KEY = import.meta.env.PUBLIC_REBUY_API_KEY;
 
-export default function RebuyWidgetContainer(props) {
-    const { product, productId, variant, variantId, collection, collectionId, dataSource, limit, options, children } =
-        props;
+export const RebuyWidgetContainer = ({ children, ...props }) => {
+    const {
+        collection,
+        collectionId,
+        dataSource,
+        limit,
+        options,
+        product,
+        productId,
+        variant,
+        variantId,
+    } = props;
 
-    const contextParameters = useContext(RebuyContext);
+    const cart = useCart();
+    const { contextParameters } = useContext(RebuyContext);
     const [products, setProducts] = useState([]);
-    const [metadata, setMetadata] = useState([]);
-
-    const Rebuy = new RebuyClient(REBUY_API_KEY);
-
-    Rebuy.setContextParameters(contextParameters);
-
-    const request = {
-        url: '/api/v1/products/recommended',
-        parameters: {},
-    };
-
-    if (dataSource) {
-        request.url = dataSource;
-    }
-
-    if (product) {
-        request.parameters.shopify_product_ids = Utilities.getIdFromGraphUrl(product.id, 'Product');
-    } else if (productId) {
-        request.parameters.shopify_product_ids = Utilities.getIdFromGraphUrl(productId, 'Product');
-    }
-
-    if (variant) {
-        request.parameters.shopify_variant_ids = Utilities.getIdFromGraphUrl(variant.id, 'ProductVariant');
-    } else if (variantId) {
-        request.parameters.shopify_variant_ids = Utilities.getIdFromGraphUrl(variantId, 'ProductVariant');
-    }
-
-    if (collection) {
-        request.parameters.shopify_collection_ids = Utilities.getIdFromGraphUrl(collection.id, 'Collection');
-    } else if (collectionId) {
-        request.parameters.shopify_collection_ids = Utilities.getIdFromGraphUrl(collectionId, 'Collection');
-    }
+    const [metadata, setMetadata] = useState({});
+    const [Rebuy, setRebuy] = useState(null);
+    const [initialized, setInitialized] = useState(false);
+    const isCartReady = ['uninitialized', 'idle'].includes(cart.status); // uninitialized, creating, fetching, updating, idle
+    const shopifyProductId = product?.id ?? productId ?? null;
+    const shopifyVariantId = variant?.id ?? variantId ?? null;
+    const shopifyCollectionId = collection?.id ?? collectionId ?? null;
+
+    // Initialize Rebuy API client
+    useEffect(() => {
+        if (!Rebuy) {
+            const client = new RebuyClient(REBUY_API_KEY);
+            client.setContextParameters(contextParameters);
 
-    if (limit) {
-        request.parameters.limit = limit;
-    }
+            if (options) {
+                client.setDefaultParameters(options);
+            }
 
-    if (options) {
-        Rebuy.setDefaultParameters(options);
-    }
+            setRebuy(client);
+            setInitialized(true);
+        }
+    }, [Rebuy, contextParameters, options]);
 
+    // Update context params
     useEffect(() => {
-        fetchData();
+        if (!Rebuy) return;
+
+        Rebuy.setContextParameters(contextParameters);
+    }, [Rebuy, contextParameters]);
+
+    // Memoize request object on prop changes (e.g. product)
+    const request = useMemo(() => {
+        const request = {
+            url: dataSource || '/api/v1/products/recommended',
+            parameters: {},
+        };
+
+        if (shopifyProductId) {
+            request.parameters.shopify_product_ids =
+                Utilities.getIdFromGraphUrl(shopifyProductId, 'Product');
+        }
+
+        if (shopifyVariantId) {
+            request.parameters.shopify_variant_ids =
+                Utilities.getIdFromGraphUrl(shopifyVariantId, 'ProductVariant');
+        }
+
+        if (shopifyCollectionId) {
+            request.parameters.shopify_collection_ids =
+                Utilities.getIdFromGraphUrl(shopifyCollectionId, 'Collection');
+        }
+
+        if (limit) {
+            request.parameters.limit = limit;
+        }
+
+        return request;
     }, [
-        product,
-        productId,
-        variant,
-        variantId,
-        collection,
-        collectionId,
         dataSource,
         limit,
-        options,
+        shopifyCollectionId,
+        shopifyProductId,
+        shopifyVariantId,
     ]);
 
-    const fetchData = async () => {
-        const response = await Rebuy.getStorefrontData(request.url, request.parameters);
+    // Update product recommendations on cart or request change
+    useEffect(() => {
+        let ignore = false;
+
+        // Initializing...
+        if (!initialized || !Rebuy || !isCartReady) return;
+
+        const fetchData = async () => {
+            const { data, metadata } = await Rebuy.getStorefrontData(
+                request.url,
+                request.parameters
+            );
+
+            data.forEach((product) => {
+                product.variants = {
+                    nodes: flattenConnection(product.variants),
+                };
+            });
+
+            // Set state only if mounted
+            if (!ignore) {
+                setProducts(data);
+                setMetadata(metadata);
+            }
+        };
+
+        fetchData();
 
-        const { data, metadata } = response;
-        data.forEach((product) => {
-            product.variants = {
-                nodes: flattenConnection(product.variants),
-            };
-        });
+        // Unmounted?
+        return () => {
+            ignore = true;
+        };
+    }, [Rebuy, initialized, request, isCartReady]);
 
-        setProducts(data);
-        setMetadata(metadata);
-    };
+    const childrenWithProps = (props) =>
+        React.Children.map(children, (child) =>
+            React.isValidElement(child)
+                ? React.cloneElement(child, props)
+                : child
+        );
 
-    const childrenWithProps = (data) => {
-        return React.Children.map(children, (child) => {
-            if (React.isValidElement(child)) {
-                return React.cloneElement(child, data);
-            }
-            return child;
-        });
-    };
+    const childProps = { ...props, products, metadata, key: product.id };
 
-    const data = Object.assign({}, props, { products, metadata });
+    return childrenWithProps(childProps);
+};
 
-    return <>{childrenWithProps(data)}</>;
-}
+export default RebuyWidgetContainer;

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@rebuy/rebuy-hydrogen",
     "description": "This is the default library for Rebuy + Shopify Hydrogen",
-    "version": "1.0.3",
+    "version": "2.1.0",
     "license": "MIT",
     "author": "Rebuy, Inc.",
     "type": "module",
@@ -10,10 +10,12 @@
     },
     "files": [
         "README.md",
+        "**/*.js",
         "**/*.jsx"
     ],
     "scripts": {
-        "lint": "eslint . --ext .js,.jsx",
+        "format": "npm run lint -- --fix",
+        "lint": "eslint . --ext .js,.jsx,.json",
         "prepare": "husky install",
         "test": "echo \"Error: no test specified\" && exit 1"
     },
@@ -34,26 +36,39 @@
     },
     "homepage": "https://bitbucket.org/rebuyengine/npm-rebuy-hydrogen#readme",
     "devDependencies": {
-        "@commitlint/cli": "^17.0.2",
-        "@commitlint/config-conventional": "^17.0.2",
+        "@commitlint/cli": "^17.2.0",
+        "@commitlint/config-conventional": "^17.2.0",
         "@semantic-release/changelog": "^6.0.1",
         "@semantic-release/commit-analyzer": "^9.0.2",
         "@semantic-release/git": "^10.0.1",
         "@semantic-release/npm": "^9.0.1",
         "@semantic-release/release-notes-generator": "^10.0.3",
-        "@shopify/hydrogen": "^1.0.1",
+        "@shopify/hydrogen": "^1.6.1",
         "conventional-changelog-eslint": "^3.0.9",
         "cz-conventional-changelog": "^3.3.0",
-        "cz-customizable": "^6.3.0",
-        "eslint": "^8.17.0",
-        "eslint-plugin-react": "^7.30.0",
+        "cz-customizable": "^6.9.2",
+        "eslint": "^8.26.0",
+        "eslint-config-prettier": "^8.5.0",
+        "eslint-plugin-import": "^2.26.0",
+        "eslint-plugin-json": "^3.1.0",
+        "eslint-plugin-prettier": "^4.2.1",
+        "eslint-plugin-react": "^7.31.10",
+        "eslint-plugin-react-hooks": "^4.6.0",
         "husky": "^8.0.1",
-        "semantic-release": "^19.0.3"
+        "lint-staged": "^13.0.3",
+        "prettier": "^2.7.1",
+        "semantic-release": "^19.0.5"
     },
     "dependencies": {
-        "@rebuy/rebuy": "^1.0.1"
+        "@rebuy/rebuy": "^1.3.9"
     },
     "peerDependencies": {
-        "@shopify/hydrogen": "^1.0.1"
+        "@shopify/hydrogen": "^1.6.1"
+    },
+    "lint-staged": {
+        "**/*.{js,jsx,json}": [
+            "npm run format",
+            "prettier --write"
+        ]
     }
 }