@rebuy/rebuy-hydrogen 3.0.0-beta.10 → 3.0.0-beta.2

package/src/utils/convertToRebuyProduct.tsx

@@ -0,0 +1,319 @@
+import type { RebuyProductVariant } from '~/types/rebuyCustom';
+import type { HydrogenProduct } from '~/types/shopify';
+
+export const convertToRebuyProduct = (
+    isHydrogenReact: boolean,
+    product?: HydrogenProduct
+) => {
+    const mainProductVariants: RebuyProductVariant[] = isHydrogenReact
+        ? product?.variants?.nodes?.map((variant) => {
+              return {
+                  ...variant,
+              };
+          }) || []
+        : product?.adjacentVariants.map((variant) => {
+              return {
+                  availableForSale: variant.availableForSale,
+                  compareAtPriceV2: {
+                      amount: variant.compareAtPrice?.amount || '',
+                      currencyCode:
+                          variant.compareAtPrice?.currencyCode || 'USD',
+                  },
+                  id: variant.id,
+                  image: {
+                      altText: variant.image?.altText || '',
+                      height: variant.image?.height || 100,
+                      id: variant.image?.id || '',
+                      url: variant.image?.url || '',
+                      width: variant.image?.width || 100,
+                  },
+                  priceV2: {
+                      amount: variant.price.amount || '',
+                      currencyCode: variant.price.currencyCode || 'USD',
+                  },
+                  product: {
+                      handle: product.handle,
+                      id: product.id,
+                      title: product.title,
+                      vendor: product.vendor,
+                  },
+                  selectedOptions: variant.selectedOptions,
+                  sku: variant.sku || '',
+                  title: variant.title || '',
+              };
+          }) || [];
+
+    return isHydrogenReact
+        ? {
+              collections: {
+                  nodes:
+                      product?.collections.nodes.map((collection) => {
+                          return {
+                              handle: collection.handle,
+                          };
+                      }) || [],
+              },
+              compareAtPriceRange: {
+                  maxVariantCompareAtPrice: null,
+                  minVariantCompareAtPrice: null,
+              },
+              description: product?.description || '',
+              descriptionHtml: product?.descriptionHtml || '',
+              featuredImage: {
+                  altText: product?.featuredImage?.altText || '',
+                  height: product?.featuredImage?.height || 100,
+                  id: product?.featuredImage?.id || '',
+                  url: product?.featuredImage?.url || '',
+                  width: product?.featuredImage?.width || 100,
+              },
+              handle: product?.handle || '',
+              id: product?.id || '',
+              images: [
+                  { altText: '', height: 100, id: '', url: '', width: 100 },
+              ],
+              media: [],
+              metafields: [],
+              options: [],
+              priceRange: product?.priceRange || {
+                  maxVariantPrice: { amount: '0', currencyCode: 'USD' },
+                  minVariantPrice: { amount: '0', currencyCode: 'USD' },
+              },
+              selected: true,
+              selectedOptions:
+                  product?.selectedVariant?.selectedOptions?.reduce(
+                      (acc, option) => {
+                          return { ...acc, [option.name]: option.value };
+                      },
+                      {}
+                  ) || {},
+              selectedSellingPlan: {},
+              selectedSellingPlanAllocation: {},
+              selectedVariant: {
+                  availableForSale:
+                      product?.selectedVariant?.availableForSale || false,
+                  compareAtPriceV2: {
+                      amount:
+                          product?.selectedVariant?.compareAtPrice?.amount ||
+                          '',
+                      currencyCode:
+                          product?.selectedVariant?.compareAtPrice
+                              ?.currencyCode || 'USD',
+                  },
+                  id: product?.selectedVariant?.id || '',
+                  image: {
+                      altText: product?.selectedVariant?.image?.altText || '',
+                      height: product?.selectedVariant?.image?.height || 100,
+                      id: product?.selectedVariant?.image?.id || '',
+                      url: product?.selectedVariant?.image?.url || '',
+                      width: product?.selectedVariant?.image?.width || 100,
+                  },
+                  priceV2: {
+                      amount: product?.selectedVariant?.price.amount || '',
+                      currencyCode:
+                          product?.selectedVariant?.price.currencyCode || 'USD',
+                  },
+                  product: {
+                      handle: product?.handle || '',
+                      id: product?.id || '',
+                      title: product?.title || '',
+                      vendor: product?.vendor || '',
+                  },
+                  selectedOptions:
+                      product?.selectedVariant?.selectedOptions || [],
+                  sku: product?.selectedVariant?.sku || '',
+                  title: product?.selectedVariant?.title || '',
+              },
+              sellingPlanGroups: [],
+              seo: {
+                  description: product?.seo?.description || '',
+                  title: product?.seo?.title || '',
+              },
+              title: product?.title || '',
+              variants: {
+                  nodes: mainProductVariants,
+              },
+              vendor: product?.vendor || '',
+          }
+        : {
+              collections: {
+                  nodes: [],
+              },
+              compareAtPriceRange: {
+                  maxVariantCompareAtPrice: null,
+                  minVariantCompareAtPrice: null,
+              },
+              description: product?.description || '',
+              descriptionHtml: product?.descriptionHtml || '',
+              featuredImage: {
+                  altText:
+                      product?.selectedOrFirstAvailableVariant?.image
+                          ?.altText || '',
+                  height:
+                      product?.selectedOrFirstAvailableVariant?.image?.height ||
+                      100,
+                  id: product?.selectedOrFirstAvailableVariant?.image?.id || '',
+                  url:
+                      product?.selectedOrFirstAvailableVariant?.image?.url ||
+                      '',
+                  width:
+                      product?.selectedOrFirstAvailableVariant?.image?.width ||
+                      100,
+              },
+              handle: product?.handle || '',
+              id: product?.id || '',
+              images: [
+                  {
+                      altText:
+                          product?.selectedOrFirstAvailableVariant?.image
+                              ?.altText || '',
+                      height:
+                          product?.selectedOrFirstAvailableVariant?.image
+                              ?.height || 100,
+                      id:
+                          product?.selectedOrFirstAvailableVariant?.image?.id ||
+                          '',
+                      url:
+                          product?.selectedOrFirstAvailableVariant?.image
+                              ?.url || '',
+                      width:
+                          product?.selectedOrFirstAvailableVariant?.image
+                              ?.width || 100,
+                  },
+              ],
+              media: [],
+              metafields: [],
+              options: [],
+              priceRange: product?.priceRange || {
+                  maxVariantPrice: { amount: '0', currencyCode: 'USD' },
+                  minVariantPrice: { amount: '0', currencyCode: 'USD' },
+              },
+              selected: true,
+              selectedOptions:
+                  product?.selectedOrFirstAvailableVariant?.selectedOptions?.reduce(
+                      (acc, option) => {
+                          return { ...acc, [option.name]: option.value };
+                      },
+                      {}
+                  ) || {},
+              selectedSellingPlan: {},
+              selectedSellingPlanAllocation: {},
+              selectedVariant: {
+                  availableForSale:
+                      product?.selectedOrFirstAvailableVariant
+                          ?.availableForSale || false,
+                  compareAtPriceV2: {
+                      amount:
+                          product?.selectedOrFirstAvailableVariant
+                              ?.compareAtPrice?.amount || '',
+                      currencyCode:
+                          product?.selectedOrFirstAvailableVariant
+                              ?.compareAtPrice?.currencyCode || 'USD',
+                  },
+                  id: product?.selectedOrFirstAvailableVariant?.id || '',
+                  image: {
+                      altText:
+                          product?.selectedOrFirstAvailableVariant?.image
+                              ?.altText || '',
+                      height:
+                          product?.selectedOrFirstAvailableVariant?.image
+                              ?.height || 100,
+                      id:
+                          product?.selectedOrFirstAvailableVariant?.image?.id ||
+                          '',
+                      url:
+                          product?.selectedOrFirstAvailableVariant?.image
+                              ?.url || '',
+                      width:
+                          product?.selectedOrFirstAvailableVariant?.image
+                              ?.width || 100,
+                  },
+                  priceV2: {
+                      amount:
+                          product?.selectedOrFirstAvailableVariant?.price
+                              .amount || '',
+                      currencyCode:
+                          product?.selectedOrFirstAvailableVariant?.price
+                              .currencyCode || 'USD',
+                  },
+                  product: {
+                      handle: product?.handle || '',
+                      id: product?.id || '',
+                      title: product?.title || '',
+                      vendor: product?.vendor || '',
+                  },
+                  selectedOptions:
+                      product?.selectedOrFirstAvailableVariant
+                          ?.selectedOptions || [],
+                  sku: product?.selectedOrFirstAvailableVariant?.sku || '',
+                  title: product?.selectedOrFirstAvailableVariant?.title || '',
+              },
+              sellingPlanGroups: [],
+              seo: {
+                  description: null,
+                  title: null,
+              },
+              title: product?.title || '',
+              variants: {
+                  nodes: [
+                      {
+                          availableForSale:
+                              product?.selectedOrFirstAvailableVariant
+                                  ?.availableForSale || false,
+                          compareAtPriceV2: {
+                              amount:
+                                  product?.selectedOrFirstAvailableVariant
+                                      ?.compareAtPrice?.amount || '',
+                              currencyCode:
+                                  product?.selectedOrFirstAvailableVariant
+                                      ?.compareAtPrice?.currencyCode || 'USD',
+                          },
+                          id:
+                              product?.selectedOrFirstAvailableVariant?.id ||
+                              '',
+                          image: {
+                              altText:
+                                  product?.selectedOrFirstAvailableVariant
+                                      ?.image?.altText || '',
+                              height:
+                                  product?.selectedOrFirstAvailableVariant
+                                      ?.image?.height || 100,
+                              id:
+                                  product?.selectedOrFirstAvailableVariant
+                                      ?.image?.id || '',
+                              url:
+                                  product?.selectedOrFirstAvailableVariant
+                                      ?.image?.url || '',
+                              width:
+                                  product?.selectedOrFirstAvailableVariant
+                                      ?.image?.width || 100,
+                          },
+                          priceV2: {
+                              amount:
+                                  product?.selectedOrFirstAvailableVariant
+                                      ?.price.amount || '',
+                              currencyCode:
+                                  product?.selectedOrFirstAvailableVariant
+                                      ?.price.currencyCode || 'USD',
+                          },
+                          product: {
+                              handle: product?.handle || '',
+                              id: product?.id || '',
+                              title: product?.title || '',
+                              vendor: product?.vendor || '',
+                          },
+                          selectedOptions:
+                              product?.selectedOrFirstAvailableVariant
+                                  ?.selectedOptions || [],
+                          sku:
+                              product?.selectedOrFirstAvailableVariant?.sku ||
+                              '',
+                          title:
+                              product?.selectedOrFirstAvailableVariant?.title ||
+                              '',
+                      },
+                      ...mainProductVariants,
+                  ],
+              },
+              vendor: product?.vendor || '',
+          };
+};

package/src/utils/createContextParameters.ts

@@ -0,0 +1,142 @@
+import * as Utilities from '@rebuy/rebuy/utilities';
+
+import type { Attribute } from '@shopify/hydrogen-react/storefront-api-types';
+import type {
+    CartContext,
+    CartItem,
+    ContextParameters,
+    RebuyContextProps,
+} from '~/types/rebuyCustom';
+
+import { getEncodedAttributes } from '~/utils/getEncodedAttributes';
+
+export const createContextParameters = ({
+    cacheKey,
+    cartAttributes,
+    cartId,
+    cartLines,
+    cartLinesLength,
+    cartNote,
+    cartSubtotal,
+    cartTotalQuantity,
+    isHydrogenReact,
+    queryObject,
+    windowUrl,
+}: RebuyContextProps) => {
+    const contextParameters: ContextParameters = {
+        cache_key: cacheKey,
+        cart_count: 0,
+        cart_item_count: 0,
+        cart_line_count: 0,
+        cart_subtotal: 0,
+        isHydrogenReact,
+        time: '',
+        url: windowUrl,
+    };
+
+    const cartContext: CartContext = {
+        attributes: '',
+        item_count: 0,
+        items: [],
+        line_count: 0,
+        note: '',
+        subtotal: 0,
+        token: '',
+    };
+    if (Object.prototype.hasOwnProperty.call(queryObject, 'time')) {
+        contextParameters.time = queryObject.time;
+    }
+
+    // Set Cart: token
+    if (cartId) {
+        cartContext.token = Utilities.getIdFromGraphUrl(cartId, 'Cart');
+        contextParameters.cart_token = Utilities.getIdFromGraphUrl(
+            cartId,
+            'Cart'
+        );
+    }
+
+    // Set Cart: subtotal
+    if (cartSubtotal) {
+        cartContext.subtotal = Utilities.amountToCents(
+            parseFloat(cartSubtotal)
+        );
+        contextParameters.cart_subtotal = Utilities.amountToCents(
+            parseFloat(cartSubtotal)
+        );
+    }
+
+    // Set Cart: line count
+    if (cartLinesLength) {
+        const totalLines = cartLinesLength;
+        cartContext.line_count = totalLines;
+        contextParameters.cart_count = totalLines;
+        contextParameters.cart_line_count = totalLines;
+    }
+
+    // Set Cart: item count
+    if (cartTotalQuantity) {
+        cartContext.item_count = cartTotalQuantity;
+        contextParameters.cart_item_count = cartTotalQuantity;
+    }
+
+    if (cartLines) {
+        cartContext.items = [];
+
+        for (const cartItem of cartLines) {
+            const item: CartItem = {
+                attributes: [],
+                product_id: '',
+                properties: '',
+                quantity: cartItem?.quantity,
+                variant_id: '',
+            };
+
+            if (cartItem?.merchandise?.product?.id) {
+                item.product_id = Utilities.getIdFromGraphUrl(
+                    cartItem.merchandise.product.id,
+                    'Product'
+                );
+            }
+
+            if (cartItem?.merchandise?.id) {
+                item.variant_id = Utilities.getIdFromGraphUrl(
+                    cartItem.merchandise.id,
+                    'ProductVariant'
+                );
+            }
+
+            if (cartItem?.attributes?.length) {
+                const validAttributes = cartItem.attributes.filter(
+                    (attr: Attribute) =>
+                        attr !== undefined &&
+                        typeof attr.key === 'string' &&
+                        typeof attr.value === 'string'
+                );
+                item.properties = getEncodedAttributes(validAttributes);
+            }
+            cartContext.items.push(item);
+        }
+    }
+
+    // Set Cart: attributes
+    if (cartAttributes) {
+        const validAttributes = cartAttributes.filter(
+            (attr): attr is Attribute =>
+                attr !== undefined &&
+                typeof attr.key === 'string' &&
+                typeof attr.value === 'string'
+        );
+        cartContext.attributes = getEncodedAttributes(validAttributes);
+    }
+
+    // Set Cart: notes
+    if (cartNote) {
+        cartContext.note = cartNote;
+    }
+
+    // Set cart
+    contextParameters.cart = cartContext;
+
+    return contextParameters;
+};

package/src/utils/getEncodedAttributes.ts

@@ -0,0 +1,11 @@
+import type { Attribute } from '@shopify/hydrogen-react/storefront-api-types';
+
+export const getEncodedAttributes = (attributes: Attribute[]) =>
+    encodeURIComponent(
+        JSON.stringify(
+            attributes.reduce(
+                (merged, { key, value }) => ({ ...merged, [key]: value }),
+                {}
+            )
+        )
+    );

package/src/utils/getRebuyConfig.ts

@@ -0,0 +1,31 @@
+import { RebuyClient } from '@rebuy/rebuy';
+import type { RebuyConfig, RebuyResponse } from '~/types/rebuyCustom';
+
+export const getRebuyConfig = async (
+    rebuyKey: string,
+    storeDomain: string
+): Promise<RebuyConfig> => {
+    try {
+        const request = {
+            parameters: { shop: storeDomain },
+            url: `/api/v1/user/config`,
+        };
+
+        const { data: rebuy, ...response } = (await new RebuyClient(
+            rebuyKey
+        ).getShieldedAsset(request.url, request.parameters)) as RebuyResponse;
+
+        if (!rebuy?.shop) {
+            throw new Error(
+                'Rebuy configuration is not properly set up - missing shop',
+                { cause: response }
+            );
+        }
+        return rebuy;
+    } catch (error: unknown) {
+        const err = error as Error;
+        console.warn('Error fetching Rebuy shop config');
+        console.error(err, err.cause);
+        throw err;
+    }
+};

package/src/widgetContainer/RebuyWidgetContainer.tsx

@@ -0,0 +1,183 @@
+import { RebuyClient } from '@rebuy/rebuy';
+import * as Utilities from '@rebuy/rebuy/utilities';
+import { flattenConnection } from '@shopify/hydrogen';
+import React, {
+    ComponentType,
+    useContext,
+    useEffect,
+    useMemo,
+    useState,
+} from 'react';
+
+import type {
+    RebuyProduct,
+    RebuyWidgetContainerProps,
+    RebuyWidgetMetadata,
+} from '~/types/rebuyCustom';
+
+import { RebuyContext } from '~/context/RebuyContext';
+
+type RebuyWidgetContainerComponent = {
+    (props: RebuyWidgetContainerProps): JSX.Element;
+} & ComponentType<RebuyWidgetContainerProps>;
+
+const RebuyWidgetContainerBase = ({
+    children,
+    ...props
+}: RebuyWidgetContainerProps) => {
+    const {
+        collection,
+        collectionId,
+        dataSource,
+        limit,
+        options,
+        product,
+        productId,
+        variant,
+        variantId,
+    } = props;
+
+    const contextParameters = useContext(RebuyContext);
+
+    const [Rebuy, setRebuy] = useState<RebuyClient | null>(null);
+    const [initialized, setInitialized] = useState(false);
+    const shopifyProductId = product?.id ?? productId ?? null;
+    const shopifyVariantId = variant?.id ?? variantId ?? null;
+    const shopifyCollectionId = collection?.id ?? collectionId ?? null;
+    const [products, setProducts] = useState<RebuyProduct[]>([]);
+    const [metadata, setMetadata] = useState<RebuyWidgetMetadata>();
+
+    const REBUY_API_KEY = import.meta.env.PUBLIC_REBUY_API_KEY;
+
+    // Initialize Rebuy API client
+    useEffect(() => {
+        if (!Rebuy) {
+            const client = new RebuyClient(REBUY_API_KEY);
+            client.setContextParameters(
+                contextParameters as Record<string, unknown> // TODO: fix this type when @rebuy/rebuy is moved to typescript
+            );
+
+            if (options) {
+                client.setDefaultParameters(options as Record<string, unknown>); // TODO: fix this type when @rebuy/rebuy is moved to typescript
+            }
+
+            setRebuy(client);
+            setInitialized(true);
+        }
+    }, [REBUY_API_KEY, Rebuy, contextParameters, options]);
+
+    useEffect(() => {
+        if (!Rebuy) return;
+
+        Rebuy.setContextParameters(
+            contextParameters as Record<string, unknown> // TODO: fix this type when @rebuy/rebuy is moved to typescript
+        );
+    }, [Rebuy, contextParameters]);
+
+    // Memoize request object on prop changes (e.g. product)
+    const request = useMemo(() => {
+        const request = {
+            endpoint: dataSource || '/api/v1/products/recommended',
+            params: {} as Record<string, string | number>, // Keeping this object generic to allow for custom endpoints
+        };
+
+        if (shopifyProductId) {
+            request.params.shopify_product_ids = Utilities.getIdFromGraphUrl(
+                shopifyProductId,
+                'Product'
+            );
+        }
+
+        if (shopifyProductId) {
+            request.params.shopify_product_ids = Utilities.getIdFromGraphUrl(
+                shopifyProductId,
+                'Product'
+            );
+        }
+
+        if (shopifyVariantId) {
+            request.params.shopify_variant_ids = Utilities.getIdFromGraphUrl(
+                shopifyVariantId,
+                'ProductVariant'
+            );
+        }
+
+        if (shopifyCollectionId) {
+            request.params.shopify_collection_ids = Utilities.getIdFromGraphUrl(
+                shopifyCollectionId,
+                'Collection'
+            );
+        }
+
+        if (limit) {
+            request.params.limit = limit;
+        }
+
+        return request;
+    }, [
+        dataSource,
+        shopifyProductId,
+        shopifyVariantId,
+        shopifyCollectionId,
+        limit,
+    ]);
+
+    // Update product recommendations on cart or request change
+    useEffect(() => {
+        let isMounted = true;
+        if (!Rebuy || !initialized) return;
+
+        const fetchData = async () => {
+            const { data, metadata } = (await Rebuy.getStorefrontData(
+                request.endpoint,
+                request.params
+            )) as {
+                data: RebuyProduct[];
+                metadata: RebuyWidgetMetadata;
+            };
+
+            // Set state only if mounted
+            if (isMounted) {
+                setProducts(
+                    Array.isArray(data)
+                        ? data.map((product) => ({
+                              ...product,
+                              variants: {
+                                  nodes: product.variants
+                                      ? flattenConnection(product.variants)
+                                      : [],
+                              },
+                          }))
+                        : []
+                );
+                setMetadata(metadata);
+            }
+        };
+
+        fetchData();
+        // Unmounted?
+        return () => {
+            isMounted = false;
+        };
+    }, [Rebuy, initialized, request]);
+
+    const childrenWithProps = (props: RebuyWidgetContainerProps) =>
+        React.Children.map(children, (child) =>
+            React.isValidElement(child)
+                ? React.cloneElement(child, props)
+                : child
+        );
+
+    const childProps = {
+        ...props,
+        isHydrogenReact: contextParameters?.contextParameters?.isHydrogenReact,
+        key: product?.id,
+        metadata,
+        products,
+    };
+
+    return childrenWithProps(childProps);
+};
+
+export const RebuyWidgetContainer =
+    RebuyWidgetContainerBase as RebuyWidgetContainerComponent;