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

package/src/types/rebuyCustom.ts

@@ -0,0 +1,263 @@
+import type {
+    Attribute,
+    CartLine,
+    Collection,
+    ComponentizableCartLine,
+    MoneyV2,
+    Product,
+    ProductVariant,
+    SelectedOption,
+} from '@shopify/hydrogen-react/storefront-api-types';
+import type { SmartCart } from '~/types/rebuySmartCart';
+import type {
+    HydrogenCollection,
+    HydrogenProduct,
+    HydrogenProductVariant,
+} from '~/types/shopify';
+
+export type RebuyContextProps = {
+    cacheKey?: string;
+    cartAttributes?: Attribute[];
+    cartId?: string;
+    // Depending on where the cart is coming from hydrogen or hydrogen-react the objects are very differetn and this is the only way to account for that
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    cartLines?: (CartLine | ComponentizableCartLine)[] | any;
+    cartLinesLength?: number;
+    cartNote?: string;
+    cartSubtotal?: string;
+    cartTotalQuantity?: number;
+    isHydrogenReact: boolean;
+    queryObject: Record<string, string>;
+    windowUrl: string;
+};
+
+export type RebuyConfig = {
+    shop: RebuyShop | null;
+    smart_cart: SmartCart | null;
+    smart_flows: unknown[]; // TODO: Define type for smart_flows still in beta development
+};
+
+export type RebuyResponse = {
+    data: RebuyConfig;
+    response: unknown;
+};
+
+export type ContextParameters = {
+    cache_key?: string;
+    cart?: CartContext;
+    cart_count: number;
+    cart_item_count: number;
+    cart_line_count: number;
+    cart_subtotal: number;
+    cart_token?: string;
+    isHydrogenReact: boolean; // This detemines if a user is using just Hydrogen or Hydrogen-React. It will determine how we get the cart info
+    time: string;
+    url: string;
+};
+
+type RebuyShopIntegrations = {
+    attentive: boolean;
+    judgeme: boolean;
+    junip: boolean;
+    klaviyo: boolean;
+    loox: boolean;
+    okendo: boolean;
+    opinew: boolean;
+    recharge: boolean;
+    reviewsio: boolean;
+    stamped: boolean;
+    yotpo: boolean;
+};
+
+type RebuyShop = {
+    active_experiments: unknown[];
+    api_key: string;
+    cache_key: string;
+    carousel: string;
+    currency: string;
+    currency_symbol: string;
+    domain: string;
+    enabled_presentment_currencies: string[];
+    has_smart_collections_enabled: boolean;
+    has_smart_search_enabled: boolean;
+    id: string;
+    integrations: RebuyShopIntegrations;
+    money_format: string;
+    myshopify_domain: string;
+    primary_locale: string;
+    product_groups_enabled: string;
+    rebuy_assistant: boolean;
+    recharge_custom_domain: string | null;
+    selling_plans_enabled: boolean;
+    shop_id: number;
+    shop_name: string;
+    shopify_selling_plans_enabled: boolean;
+    storefront_access_token: string | null;
+};
+
+export type CartContext = {
+    attributes: string;
+    item_count: number;
+    items: CartItem[];
+    line_count: number;
+    note: string;
+    subtotal: number;
+    token: string;
+};
+
+export type CartItem = {
+    attributes: Attribute[];
+    product_id: string;
+    properties: string;
+    quantity: number;
+    variant_id: string;
+};
+
+export type RebuyWidgetContainerProps = {
+    children?: React.ReactNode;
+    collection?: Collection | HydrogenCollection;
+    collectionId?: string;
+    dataSource?: string;
+    limit?: number;
+    // wasn't to sure of how we wanted to handle this type. It's my understanding that clients could create their own endpoints so I'm not sure we want to lock down the type
+    options?: object;
+    product?: Product | HydrogenProduct;
+    productId?: string;
+    variant?: ProductVariant | HydrogenProductVariant;
+    variantId?: string;
+};
+
+export type RebuyProduct = {
+    collections: { nodes: { handle: string }[] };
+    compareAtPriceRange: {
+        maxVariantCompareAtPrice: MoneyV2 | null;
+        minVariantCompareAtPrice: MoneyV2 | null;
+    };
+    description: string;
+    descriptionHtml: string;
+    featuredImage: {
+        altText: string | null;
+        height: number;
+        id: string;
+        url: string;
+        width: number;
+    };
+    handle: string;
+    id: string;
+    images: {
+        altText: string | null;
+        height: number;
+        id: string;
+        url: string;
+        width: number;
+    }[];
+    media: unknown[];
+    metafields: unknown[];
+    options: {
+        name: string;
+        values: string[];
+    }[];
+    priceRange: {
+        maxVariantPrice: MoneyV2;
+        minVariantPrice: MoneyV2;
+    };
+    selected: boolean;
+    selectedOptions: Record<string, string>;
+    selectedSellingPlan: unknown;
+    selectedSellingPlanAllocation: unknown;
+    selectedVariant: RebuyProductVariant;
+    sellingPlanGroups: unknown[];
+    seo: {
+        description: string | null;
+        title: string | null;
+    };
+    title: string;
+    variants: {
+        nodes: RebuyProductVariant[];
+    };
+    vendor: string;
+};
+
+export type RebuyProductVariant = {
+    availableForSale: boolean;
+    compareAtPriceV2: MoneyV2 | null;
+    id: string;
+    image?: {
+        altText: string | null;
+        height: number;
+        id: string;
+        url: string;
+        width: number;
+    };
+    priceV2: MoneyV2;
+    product: {
+        handle: string;
+        id: string;
+        title: string;
+        vendor: string;
+    };
+    selectedOptions: Pick<SelectedOption, 'name' | 'value'>[];
+    sku: string;
+    title: string;
+};
+
+export type RebuyWidgetMetadata = {
+    also_bot_tracking_ids?: number[];
+    cache_info?: {
+        cache_key: string;
+        cache_key_readable: string;
+        cached_at_time: number | string;
+    };
+    purchased_quantity?: string;
+    shopify_customer: Customer;
+    top_sellers_filled?: boolean;
+    trending_products_filled?: boolean;
+};
+
+export type Customer = {
+    accepts_marketing: boolean;
+    accepts_marketing_updated_at: string;
+    addresses: Address[];
+    admin_graphql_api_id: string;
+    created_at: string;
+    currency: string;
+    default_address: Address;
+    email: string;
+    first_name: string;
+    id: number;
+    last_name: string;
+    last_order_id: string;
+    last_order_name: string;
+    marketing_opt_in_level: string;
+    multipass_identifier: string;
+    note: string;
+    orders_count: number;
+    phone: string;
+    state: string;
+    tags: string;
+    tax_exempt: boolean;
+    tax_exemptions: unknown[];
+    total_spent: string;
+    updated_at: string;
+    verified_email: boolean;
+};
+
+export type Address = {
+    address1: string;
+    address2: string;
+    city: string;
+    company: string;
+    country: string;
+    country_code: string;
+    country_name: string;
+    customer_id: number;
+    default: boolean;
+    first_name: string;
+    id: number;
+    last_name: string;
+    name: string;
+    phone: string;
+    province: string;
+    province_code: string;
+    zip: string;
+};

package/src/types/rebuySmartCart.ts

@@ -0,0 +1,188 @@
+export type ProgressBarTier = {
+    id: number;
+    minimum: number | null;
+    presentment_currencies: {
+        enabled: boolean;
+    };
+    product_amount_reached_label: boolean;
+    product_amount_reached_label_text: string;
+    product_amount_remaining_label: boolean;
+    product_amount_remaining_label_text: string;
+    products: unknown[];
+    type: string;
+};
+
+export type ProgressBar = {
+    country_codes: string[];
+    exclude_discount: boolean;
+    free_shipping_enabled: boolean;
+    free_shipping_on_all_products: boolean;
+    free_shipping_on_subscription: boolean;
+    geolocation_enabled: boolean;
+    id: number;
+    layout: string;
+    name: string;
+    tiers: ProgressBarTier[];
+};
+
+export type SmartCartLanguage = {
+    bmsm_discount_message: string;
+    bmsm_discount_success: string;
+    cart_title: string;
+    checking_out_label: string;
+    checkout_label: string;
+    continue_shopping_label: string;
+    discount_button_label: string;
+    discount_code_label: string;
+    discount_invalid_message: string;
+    discount_label: string;
+    empty_cart: string;
+    free_shipping_helper: string;
+    free_shipping_reached: string;
+    free_shipping_remaining: string;
+    notes_label: string;
+    notes_placeholder: string;
+    notes_remaining_characters: string;
+    subtotal_plural_text: string;
+    subtotal_singular_text: string;
+    view_cart_label: string;
+    view_cart_working_label: string;
+};
+
+export type SmartCartComponent = {
+    always_visible?: boolean;
+    hidden?: boolean;
+    id: string;
+    settings?: unknown;
+    static?: boolean;
+    title: string;
+    type: string;
+};
+
+export type SmartCartAnchor = {
+    components: string[];
+    id: string;
+    title: string;
+};
+
+export type SmartCart = {
+    accelerated_checkout: {
+        enabled: boolean;
+    };
+    accessibility: {
+        heading: string;
+    };
+    anchorData: {
+        anchorOrder: string[];
+        anchors: {
+            [key: string]: SmartCartAnchor;
+        };
+        components: {
+            [key: string]: SmartCartComponent;
+        };
+    };
+    announcement_bar: {
+        enabled: boolean;
+        messages: string[];
+    };
+    apps: unknown[];
+    attribution_tracking_disabled: boolean;
+    buy_more_save_more: {
+        discount_products: unknown[];
+        discount_type: string;
+        display_type: string;
+        enabled: boolean;
+        language: {
+            bmsm_discount_message: string;
+            bmsm_discount_success: string;
+        };
+        tiers: {
+            discount: number;
+            quantity: number;
+        }[];
+    };
+    callbacks: {
+        [key: string]: {
+            enabled: boolean;
+            function: string;
+        };
+    };
+    cart_page_checkout_override: {
+        enabled: boolean;
+    };
+    checkout_button: {
+        enabled: boolean;
+        routing: string;
+        routing_link: string;
+    };
+    continue_shopping_button: {
+        enabled: boolean;
+    };
+    cross_sells: string[];
+    custom_css: string;
+    disable_cart_page: boolean;
+    discount: {
+        enabled: boolean;
+        use_message_only: boolean;
+    };
+    enable_product_metafields: boolean;
+    has_legacy_shipping: boolean;
+    installments: {
+        enabled: boolean;
+        payment_count: number;
+        provider: string;
+        terms_url: string;
+    };
+    integrations: {
+        code: string;
+        enabled: boolean;
+    };
+    language: SmartCartLanguage;
+    layout: string;
+    name: string;
+    notes: {
+        enabled: boolean;
+        limit_characters: boolean;
+        max_length: number;
+    };
+    pre_purchase: {
+        enabled: boolean;
+        id: string;
+    };
+    preview_mode: boolean;
+    product_form_redirect: string;
+    progress_bar: {
+        bars: ProgressBar[];
+        enabled: boolean;
+    };
+    selectors: {
+        cart_subtotal: string;
+        item_count: string;
+    };
+    shop_pay: {
+        enabled: boolean;
+    };
+    switch_to_subscription: {
+        disable_downgrade: boolean;
+        enabled: boolean;
+        language: {
+            downgrading_label: string;
+            onetime_option_group_label: string;
+            onetime_option_label: string;
+            subscription_option_group_label: string;
+            subscription_option_label: string;
+            upgrade_to_subscription_default_frequency: string;
+            upgrade_to_subscription_label: string;
+            upgrade_to_subscription_without_discount_label: string;
+            upgrading_label: string;
+        };
+    };
+    terms: {
+        disclaimer: string;
+        enabled: boolean;
+    };
+    version: number;
+    view_cart_button: {
+        enabled: boolean;
+    };
+};

package/src/types/shopify.ts

@@ -0,0 +1,142 @@
+import type {
+    Collection,
+    Image,
+    Maybe,
+    MoneyV2,
+    PageInfo,
+    Product,
+    ProductOption,
+    ProductOptionValue,
+    ProductOptionValueSwatch,
+    ProductVariant,
+    SelectedOption,
+    Seo,
+} from '@shopify/hydrogen-react/storefront-api-types';
+import type { RebuyProductVariant } from './rebuyCustom';
+
+export type HydrogenProduct = Pick<
+    Product,
+    | 'id'
+    | 'title'
+    | 'vendor'
+    | 'handle'
+    | 'descriptionHtml'
+    | 'description'
+    | 'encodedVariantExistence'
+    | 'encodedVariantAvailability'
+> & {
+    adjacentVariants: (Pick<
+        ProductVariant,
+        'availableForSale' | 'id' | 'sku' | 'title'
+    > & {
+        compareAtPrice?: Maybe<Pick<MoneyV2, 'amount' | 'currencyCode'>>;
+        image?: Maybe<
+            { __typename: 'Image' } & Pick<
+                Image,
+                'id' | 'url' | 'altText' | 'width' | 'height'
+            >
+        >;
+        price: Pick<MoneyV2, 'amount' | 'currencyCode'>;
+        product: Pick<Product, 'title' | 'handle'>;
+        selectedOptions: Pick<SelectedOption, 'name' | 'value'>[];
+        unitPrice?: Maybe<Pick<MoneyV2, 'amount' | 'currencyCode'>>;
+    })[];
+    collections: {
+        nodes: {
+            handle: string;
+        }[];
+    };
+    featuredImage?: {
+        altText: string | null;
+        height: number;
+        id: string;
+        url: string;
+        width: number;
+    };
+    images: {
+        altText: string | null;
+        height: number;
+        id: string;
+        url: string;
+        width: number;
+    }[];
+    options: (Pick<ProductOption, 'name'> & {
+        optionValues: (Pick<ProductOptionValue, 'name'> & {
+            firstSelectableVariant?: Maybe<
+                Pick<
+                    ProductVariant,
+                    'availableForSale' | 'id' | 'sku' | 'title'
+                > & {
+                    compareAtPrice?: Maybe<
+                        Pick<MoneyV2, 'amount' | 'currencyCode'>
+                    >;
+                    image?: Maybe<
+                        { __typename: 'Image' } & Pick<
+                            Image,
+                            'id' | 'url' | 'altText' | 'width' | 'height'
+                        >
+                    >;
+                    price: Pick<MoneyV2, 'amount' | 'currencyCode'>;
+                    product: Pick<Product, 'title' | 'handle'>;
+                    selectedOptions: Pick<SelectedOption, 'name' | 'value'>[];
+                    unitPrice?: Maybe<Pick<MoneyV2, 'amount' | 'currencyCode'>>;
+                }
+            >;
+            swatch?: Maybe<
+                Pick<ProductOptionValueSwatch, 'color'> & {
+                    image?: Maybe<{
+                        previewImage?: Maybe<Pick<Image, 'url'>>;
+                    }>;
+                }
+            >;
+        })[];
+    })[];
+    priceRange: {
+        maxVariantPrice: MoneyV2;
+        minVariantPrice: MoneyV2;
+    };
+    selectedOrFirstAvailableVariant?: HydrogenProductVariant;
+    selectedVariant?: HydrogenProductVariant;
+    seo: Pick<Seo, 'description' | 'title'>;
+    variants?: {
+        nodes: RebuyProductVariant[];
+    };
+};
+
+export type HydrogenProductVariant = Pick<
+    ProductVariant,
+    'availableForSale' | 'id' | 'sku' | 'title'
+> & {
+    compareAtPrice?: Maybe<Pick<MoneyV2, 'amount' | 'currencyCode'>>;
+    image?: Maybe<
+        { __typename: 'Image' } & Pick<
+            Image,
+            'id' | 'url' | 'altText' | 'width' | 'height'
+        >
+    >;
+    price: Pick<MoneyV2, 'amount' | 'currencyCode'>;
+    product: Pick<Product, 'title' | 'handle'>;
+    selectedOptions: Pick<SelectedOption, 'name' | 'value'>[];
+    unitPrice?: Maybe<Pick<MoneyV2, 'amount' | 'currencyCode'>>;
+};
+
+export type HydrogenCollection = Pick<
+    Collection,
+    'id' | 'handle' | 'title' | 'description'
+> & {
+    products: {
+        nodes: (Pick<Product, 'id' | 'handle' | 'title'> & {
+            featuredImage?: Maybe<
+                Pick<Image, 'id' | 'altText' | 'url' | 'width' | 'height'>
+            >;
+            priceRange: {
+                maxVariantPrice: Pick<MoneyV2, 'amount' | 'currencyCode'>;
+                minVariantPrice: Pick<MoneyV2, 'amount' | 'currencyCode'>;
+            };
+        })[];
+        pageInfo: Pick<
+            PageInfo,
+            'hasPreviousPage' | 'hasNextPage' | 'endCursor' | 'startCursor'
+        >;
+    };
+};

package/src/types/widgets.ts

@@ -0,0 +1,29 @@
+import type { HydrogenProduct } from '~/types/shopify';
+
+import {
+    RebuyProduct,
+    RebuyProductVariant,
+    RebuyWidgetMetadata,
+} from '~/types/rebuyCustom';
+
+// Internal type with all props from container
+export type WidgetContainerProvidedProps = {
+    dataSource: string;
+    isHydrogenReact: boolean;
+    key: string;
+    limit: number;
+    metadata: RebuyWidgetMetadata;
+    options: Record<string, unknown>;
+    product: HydrogenProduct;
+    productId: string;
+    products: RebuyProduct[];
+    variant: RebuyProductVariant;
+    variantId: string;
+};
+
+export type WidgetChildProps = {
+    addToCartCallback?: () => void;
+    customTitle?: string;
+    customTitleLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    customTitleStyle?: React.CSSProperties;
+} & Partial<WidgetContainerProvidedProps>;