@rebuy/rebuy-hydrogen 3.0.0-beta.1 → 3.0.0-beta.11

package/src/utils/convertToRebuyProduct.tsx

@@ -1,319 +0,0 @@
-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

@@ -1,142 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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

@@ -1,183 +0,0 @@
-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;