@rebuy/rebuy-hydrogen 3.0.0-beta.19 → 3.0.0-beta.20

package/README.md

@@ -28,12 +28,10 @@ This distinction is important as different hooks/functions are used in each case
 
 ### Prerequisites
 
-
 - "@shopify/hydrogen": ">=2025.5.0",
 - If you are also using hydrogen-react along with just hydrogen: "@shopify/hydrogen-react": ">=2025.4.0"
 - Smart Cart V2. Legacy Smart Carts are not supported
 
-
 ### Installation Steps
 
 1. Install the beta version of our package from npm:
@@ -276,18 +274,40 @@ Dynamic widget that can be set up to display a widget that you have created in t
 | `variant`           | The selected variant object.                                                                                                                  |
 | `variantId`         | The selected variant ID.                                                                                                                      |
 
+### RebuyGiftWithPurchase
+
+A headless widget that automatically manages Gift With Purchase functionality. This component monitors cart state and automatically adds/removes free gifts based on data source rules configured in the Rebuy Admin. No UI is rendered - all gift management happens automatically in the background.
+
+**Properties:**
+
+| Property   | Description                                                                 |
+| :--------- | :-------------------------------------------------------------------------- |
+| `widgetId` | The widget ID for the gift with purchase widget (found in the Rebuy Admin). |
+
+**Usage Example:**
+
+```typescript
+// Place in your root layout
+<RebuyGiftWithPurchase widgetId="12345" />
+```
+
+**Notes:**
+
+- This component is best suited for single-variant gift products.
+- If your gift qualifier is the cart subtotal, we recommend using the Tiered Progress Bar as it can be used for selectable multi-variant gifts.
+
 ### RebuyProductViewed
 
 Place this component on any page or element where you would like to record that a customer has viewed one of your products. You will need to pass in either the entire product object, productID, or just the productHandle. This component will generate a UUID for registering the viewed products if a customerId is not passed along as well. To record a customer viewing a product and have that record attached to their customerID you will need to pass in the customerId as a sting.
 
 **Properties:**
 
-| Property | Description |
-| :---- | :---- |
-| `productId` | The Shopify product ID |
-| `product` | The entire product object |
-| `productHandle` | The product's handle |
-| `customerId` | The ID of the customer viewing the product. If no customerId is passed a UUID will be used locally instead. |
+| Property        | Description                                                                                                 |
+| :-------------- | :---------------------------------------------------------------------------------------------------------- |
+| `productId`     | The Shopify product ID                                                                                      |
+| `product`       | The entire product object                                                                                   |
+| `productHandle` | The product's handle                                                                                        |
+| `customerId`    | The ID of the customer viewing the product. If no customerId is passed a UUID will be used locally instead. |
 
 ### RebuyRecentlyViewedProducts
 
@@ -295,12 +315,12 @@ Component returns a list of the products that a customer has recently viewed bas
 
 **Properties:**
 
-| `customTitleLevel` | Sets the initial title level (e.g., if set to `h2`, other titles in the component will adjust to `h3` accordingly) |
-| :---- | :---- |
-| `customTitleStyle` | An object of custom styles for the title (e.g., text color, text align) |
-| `addToCartCallBack` | A callback function for custom functionality when items are added to the cart |
-| `addToCartBtnText` | Custom text for the Add To Cart button |
-| `productId` | If you pass in a shopify productId, then that product will be excluded from the list of returned products. Use case would be if on a product page and you do not want the product on that page also displaying in the recently viewed products component. |
+| `customTitleLevel`  | Sets the initial title level (e.g., if set to `h2`, other titles in the component will adjust to `h3` accordingly)                                                                                                                                        |
+| :------------------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `customTitleStyle`  | An object of custom styles for the title (e.g., text color, text align)                                                                                                                                                                                   |
+| `addToCartCallBack` | A callback function for custom functionality when items are added to the cart                                                                                                                                                                             |
+| `addToCartBtnText`  | Custom text for the Add To Cart button                                                                                                                                                                                                                    |
+| `productId`         | If you pass in a shopify productId, then that product will be excluded from the list of returned products. Use case would be if on a product page and you do not want the product on that page also displaying in the recently viewed products component. |
 
 ### Using useRebuyWidget in Custom Components
 
@@ -335,21 +355,21 @@ const MyCustomComponent = () => {
 
 **Available Context Properties:**
 
-| Property | Type | Description |
-| :------- | :--- | :---------- |
-| `products` | `RebuyProduct[]` | Array of recommended products |
-| `isHydrogenReact` | `boolean` | Whether the app is using Hydrogen React |
-| `metadata` | `RebuyWidgetMetadata` | Widget metadata from Rebuy |
-| `product` | `HydrogenProduct \| undefined` | The main product if provided |
-| `variant` | `RebuyProductVariant \| undefined` | The selected variant if provided |
-| `productId` | `string \| undefined` | The product ID if provided |
-| `variantId` | `string \| undefined` | The variant ID if provided |
-| `dataSource` | `string` | The Rebuy API endpoint being used |
-| `limit` | `number` | Maximum number of products to return |
-| `options` | `Record<string, unknown>` | Additional Rebuy API options |
-| `key` | `string` | Unique key for the widget instance |
-| `cacheKey` | `string \| undefined` | The shop's cache key for Rebuy |
-| `apiKey` | `string \| undefined` | The Rebuy API key for the shop |
+| Property          | Type                               | Description                             |
+| :---------------- | :--------------------------------- | :-------------------------------------- |
+| `products`        | `RebuyProduct[]`                   | Array of recommended products           |
+| `isHydrogenReact` | `boolean`                          | Whether the app is using Hydrogen React |
+| `metadata`        | `RebuyWidgetMetadata`              | Widget metadata from Rebuy              |
+| `product`         | `HydrogenProduct \| undefined`     | The main product if provided            |
+| `variant`         | `RebuyProductVariant \| undefined` | The selected variant if provided        |
+| `productId`       | `string \| undefined`              | The product ID if provided              |
+| `variantId`       | `string \| undefined`              | The variant ID if provided              |
+| `dataSource`      | `string`                           | The Rebuy API endpoint being used       |
+| `limit`           | `number`                           | Maximum number of products to return    |
+| `options`         | `Record<string, unknown>`          | Additional Rebuy API options            |
+| `key`             | `string`                           | Unique key for the widget instance      |
+| `cacheKey`        | `string \| undefined`              | The shop's cache key for Rebuy          |
+| `apiKey`          | `string \| undefined`              | The Rebuy API key for the shop          |
 
 ---
 
@@ -383,6 +403,7 @@ To replace Hydrogen's native cart drawer with Rebuy's Smart Cart, follow these s
 In your root layout file (`app/root.tsx`), add the `enableSmartCart` prop to your context provider and include the `RebuySmartCart` component:
 
 **For Hydrogen-only Applications:**
+
 ```typescript
 <RebuyHydrogenContextProvider
   cart={data.cart}
@@ -396,6 +417,7 @@ In your root layout file (`app/root.tsx`), add the `enableSmartCart` prop to you
 ```
 
 **For Hydrogen React Applications:**
+
 ```typescript
 <RebuyHydrogenReactContextProvider
   publicPrimaryDomain="example.com"
@@ -426,6 +448,7 @@ Comment out or remove the native `CartAside` component in your layout file (typi
 Replace the native cart toggle functionality with Rebuy's Smart Cart:
 
 **In your Header component:**
+
 ```typescript
 import { useSmartCart } from '@rebuy/rebuy-hydrogen';
 
@@ -454,13 +477,13 @@ After successful add to cart actions, open the Smart Cart:
 import { useSmartCart } from '@rebuy/rebuy-hydrogen';
 
 export function ProductForm() {
-  const { toggleCart } = useSmartCart();
+    const { toggleCart } = useSmartCart();
 
-  // After successful add to cart
-  const handleAddToCart = async () => {
-    // ... add to cart logic
-    toggleCart(); // Opens Smart Cart after adding item
-  };
+    // After successful add to cart
+    const handleAddToCart = async () => {
+        // ... add to cart logic
+        toggleCart(); // Opens Smart Cart after adding item
+    };
 }
 ```
 
@@ -469,6 +492,7 @@ export function ProductForm() {
 Here's a complete example of converting a cart badge component:
 
 **Before (Hydrogen):**
+
 ```typescript
 function CartBadge() {
   const { open } = useAside();
@@ -485,6 +509,7 @@ function CartBadge() {
 ```
 
 **After (Rebuy Smart Cart):**
+
 ```typescript
 import { useSmartCart } from '@rebuy/rebuy-hydrogen';
 

package/dist/index.css

@@ -11,7 +11,7 @@
   clip: rect(0, 0, 0, 0);
 }
 
-/* ../../../../../tmp/tmp-165-PG4yN66KHu8v/opt/atlassian/pipelines/agent/build/src/smart-cart/components/AnnouncementBar/AnnouncementBar.css */
+/* ../../../../../tmp/tmp-165-6JKzb4aIuevv/opt/atlassian/pipelines/agent/build/src/smart-cart/components/AnnouncementBar/AnnouncementBar.css */
 .AnnouncementBar_rebuy-announcement-bar__container {
   position: relative;
   background-color: var(--rb-color-banner-background);
@@ -47,7 +47,7 @@
   overflow-wrap: break-word;
 }
 
-/* ../../../../../tmp/tmp-165-PG4yN66KHu8v/opt/atlassian/pipelines/agent/build/src/smart-cart/components/CartItem/CartItem.css */
+/* ../../../../../tmp/tmp-165-6JKzb4aIuevv/opt/atlassian/pipelines/agent/build/src/smart-cart/components/CartItem/CartItem.css */
 .CartItem_rebuy-cart-item {
   display: flex;
   position: relative;
@@ -562,7 +562,7 @@
   opacity: 0.5;
 }
 
-/* ../../../../../tmp/tmp-165-PG4yN66KHu8v/opt/atlassian/pipelines/agent/build/src/smart-cart/components/EmptyCart/EmptyCart.css */
+/* ../../../../../tmp/tmp-165-6JKzb4aIuevv/opt/atlassian/pipelines/agent/build/src/smart-cart/components/EmptyCart/EmptyCart.css */
 .EmptyCart_rebuy-empty-cart-message {
   flex: 0 0 auto;
   margin: 0;
@@ -583,7 +583,7 @@
   text-decoration: var(--rb-empty-cart-message-link-text-decoration-hover);
 }
 
-/* ../../../../../tmp/tmp-165-PG4yN66KHu8v/opt/atlassian/pipelines/agent/build/src/smart-cart/components/CartItemList/CartItemList.css */
+/* ../../../../../tmp/tmp-165-6JKzb4aIuevv/opt/atlassian/pipelines/agent/build/src/smart-cart/components/CartItemList/CartItemList.css */
 .CartItemList_rebuy-cart-item-list__container {
   display: flex;
   flex-flow: column nowrap;
@@ -605,7 +605,7 @@
   min-height: var(--rb-cart-item-list-min-height);
 }
 
-/* ../../../../../tmp/tmp-165-PG4yN66KHu8v/opt/atlassian/pipelines/agent/build/src/smart-cart/components/CartNoteInput/CartNoteInput.css */
+/* ../../../../../tmp/tmp-165-6JKzb4aIuevv/opt/atlassian/pipelines/agent/build/src/smart-cart/components/CartNoteInput/CartNoteInput.css */
 .CartNoteInput_rebuy-cart-note-input {
   display: flex;
   flex-direction: column;
@@ -815,7 +815,7 @@
   gap: var(--rb-cart-note-input-gap);
 }
 
-/* ../../../../../tmp/tmp-165-PG4yN66KHu8v/opt/atlassian/pipelines/agent/build/src/smart-cart/components/CartSubtotal/CartSubtotal.css */
+/* ../../../../../tmp/tmp-165-6JKzb4aIuevv/opt/atlassian/pipelines/agent/build/src/smart-cart/components/CartSubtotal/CartSubtotal.css */
 .CartSubtotal_rebuy-cart-subtotal {
   display: flex;
   margin: 0;
@@ -931,7 +931,7 @@
   font-weight: var(--rb-cart-subtotal-discount-summary-item-amount-font-weight);
 }
 
-/* ../../../../../tmp/tmp-165-PG4yN66KHu8v/opt/atlassian/pipelines/agent/build/src/smart-cart/components/CartTitleBar/CartTitleBar.css */
+/* ../../../../../tmp/tmp-165-6JKzb4aIuevv/opt/atlassian/pipelines/agent/build/src/smart-cart/components/CartTitleBar/CartTitleBar.css */
 .CartTitleBar_rebuy-cart-title-bar {
   flex-grow: var(--rb-cart-title-bar-flex-grow);
   margin: 0;
@@ -947,7 +947,7 @@
   font-weight: var(--rb-cart-title-bar-font-weight);
 }
 
-/* ../../../../../tmp/tmp-165-PG4yN66KHu8v/opt/atlassian/pipelines/agent/build/src/smart-cart/components/CheckoutArea/CheckoutArea.css */
+/* ../../../../../tmp/tmp-165-6JKzb4aIuevv/opt/atlassian/pipelines/agent/build/src/smart-cart/components/CheckoutArea/CheckoutArea.css */
 .CheckoutArea_rebuy-checkout-area {
   display: flex;
   flex-flow: column nowrap;
@@ -1138,7 +1138,7 @@
   text-decoration: none;
 }
 
-/* ../../../../../tmp/tmp-165-PG4yN66KHu8v/opt/atlassian/pipelines/agent/build/src/components/AddToCartBtn/AddToCartBtn.css */
+/* ../../../../../tmp/tmp-165-6JKzb4aIuevv/opt/atlassian/pipelines/agent/build/src/components/AddToCartBtn/AddToCartBtn.css */
 .AddToCartBtn_rebuy-cart-button {
   padding: var(--rb-spacing-unit-2x, 8px) var(--rb-spacing-unit-4x, 16px);
   border-radius: var(--rb-border-radius-button, 4px);
@@ -1190,7 +1190,7 @@
   max-width: 100%;
 }
 
-/* ../../../../../tmp/tmp-165-PG4yN66KHu8v/opt/atlassian/pipelines/agent/build/src/components/ProductPrice/ProductPrice.css */
+/* ../../../../../tmp/tmp-165-6JKzb4aIuevv/opt/atlassian/pipelines/agent/build/src/components/ProductPrice/ProductPrice.css */
 .ProductPrice_rebuy-product-price {
   display: flex;
   align-items: baseline;
@@ -1212,7 +1212,7 @@
   font-size: var(--rb-font-size-small, 0.875em);
 }
 
-/* ../../../../../tmp/tmp-165-PG4yN66KHu8v/opt/atlassian/pipelines/agent/build/src/components/QuantityInput/QuantityInput.css */
+/* ../../../../../tmp/tmp-165-6JKzb4aIuevv/opt/atlassian/pipelines/agent/build/src/components/QuantityInput/QuantityInput.css */
 .QuantityInput_rebuy-quantity__container {
   display: flex;
   align-items: center;
@@ -1230,7 +1230,7 @@
   appearance: auto;
 }
 
-/* ../../../../../tmp/tmp-165-PG4yN66KHu8v/opt/atlassian/pipelines/agent/build/src/components/VariantSelect/VariantSelect.css */
+/* ../../../../../tmp/tmp-165-6JKzb4aIuevv/opt/atlassian/pipelines/agent/build/src/components/VariantSelect/VariantSelect.css */
 .VariantSelect_rebuy-variant__container {
   position: relative;
 }
@@ -1296,7 +1296,7 @@
   border-color: #999;
 }
 
-/* ../../../../../tmp/tmp-165-PG4yN66KHu8v/opt/atlassian/pipelines/agent/build/src/components/Title/Title.css */
+/* ../../../../../tmp/tmp-165-6JKzb4aIuevv/opt/atlassian/pipelines/agent/build/src/components/Title/Title.css */
 .Title_rebuy-title {
   font-family: var(--rb-font-family-base);
   font-weight: var(--rb-font-weight-bold);
@@ -1306,7 +1306,7 @@
   padding: 0;
 }
 
-/* ../../../../../tmp/tmp-165-PG4yN66KHu8v/opt/atlassian/pipelines/agent/build/src/components/ProductCard/ProductCard.css */
+/* ../../../../../tmp/tmp-165-6JKzb4aIuevv/opt/atlassian/pipelines/agent/build/src/components/ProductCard/ProductCard.css */
 :root {
   --rb-product-card-gap: var(--rb-spacing-unit-2x, 8px);
   --rb-product-card-padding: var(--rb-spacing-unit-3x, 12px);
@@ -1546,7 +1546,7 @@
   margin-top: var(--rb-spacing-unit-1x, 0.5em);
 }
 
-/* ../../../../../tmp/tmp-165-PG4yN66KHu8v/opt/atlassian/pipelines/agent/build/src/components/ProductCarousel/ProductCarousel.css */
+/* ../../../../../tmp/tmp-165-6JKzb4aIuevv/opt/atlassian/pipelines/agent/build/src/components/ProductCarousel/ProductCarousel.css */
 .ProductCarousel_rebuy-carousel {
   position: relative;
   overflow: hidden;
@@ -1629,7 +1629,7 @@
   flex: 0 0 calc(16.66% - 1.25em);
 }
 
-/* ../../../../../tmp/tmp-165-PG4yN66KHu8v/opt/atlassian/pipelines/agent/build/src/components/Timer/Timer.css */
+/* ../../../../../tmp/tmp-165-6JKzb4aIuevv/opt/atlassian/pipelines/agent/build/src/components/Timer/Timer.css */
 .Timer_rebuy-timer__container {
   margin: 0 auto;
   padding: 10px;
@@ -1690,7 +1690,7 @@
   }
 }
 
-/* ../../../../../tmp/tmp-165-PG4yN66KHu8v/opt/atlassian/pipelines/agent/build/src/widgets/RebuyWidget/RebuyWidget.css */
+/* ../../../../../tmp/tmp-165-6JKzb4aIuevv/opt/atlassian/pipelines/agent/build/src/widgets/RebuyWidget/RebuyWidget.css */
 .RebuyWidget_rebuy-widget__container {
   width: 100%;
   padding: 0;
@@ -1793,7 +1793,7 @@
   align-items: flex-start;
 }
 
-/* ../../../../../tmp/tmp-165-PG4yN66KHu8v/opt/atlassian/pipelines/agent/build/src/smart-cart/components/DiscountCodeInput/DiscountCodeInput.css */
+/* ../../../../../tmp/tmp-165-6JKzb4aIuevv/opt/atlassian/pipelines/agent/build/src/smart-cart/components/DiscountCodeInput/DiscountCodeInput.css */
 .DiscountCodeInput_rebuy-discount-code-input {
   display: flex;
   flex-flow: row wrap;
@@ -2007,7 +2007,7 @@
   font-weight: var(--rb-discount-code-input-total-discount-amount-font-weight);
 }
 
-/* ../../../../../tmp/tmp-165-PG4yN66KHu8v/opt/atlassian/pipelines/agent/build/src/smart-cart/components/LoginButton/LoginButton.css */
+/* ../../../../../tmp/tmp-165-6JKzb4aIuevv/opt/atlassian/pipelines/agent/build/src/smart-cart/components/LoginButton/LoginButton.css */
 .LoginButton_rebuy-login-button {
   appearance: none;
   box-sizing: border-box;
@@ -2049,7 +2049,7 @@
   color: var(--rb-login-button-text-color-active);
 }
 
-/* ../../../../../tmp/tmp-165-PG4yN66KHu8v/opt/atlassian/pipelines/agent/build/src/smart-cart/components/TieredProgressBar/TieredProgressBar.css */
+/* ../../../../../tmp/tmp-165-6JKzb4aIuevv/opt/atlassian/pipelines/agent/build/src/smart-cart/components/TieredProgressBar/TieredProgressBar.css */
 .TieredProgressBar_rebuy-tiered-progress-bar {
   display: flex;
   flex-direction: column;
@@ -2324,7 +2324,7 @@
   border-color: var(--rb-tiered-progress-bar-gift-item-select-border-color-hover);
 }
 
-/* ../../../../../tmp/tmp-165-PG4yN66KHu8v/opt/atlassian/pipelines/agent/build/src/smart-cart/components/_Layouts/LayoutStyles.css */
+/* ../../../../../tmp/tmp-165-6JKzb4aIuevv/opt/atlassian/pipelines/agent/build/src/smart-cart/components/_Layouts/LayoutStyles.css */
 .LayoutStyles_rebuy-smart-cart-layout__anchor-goal-box {
   display: flex;
   flex-flow: column nowrap;
@@ -2459,7 +2459,7 @@ body.rebuy-smart-cart-open {
   box-sizing: border-box !important;
 }
 
-/* ../../../../../tmp/tmp-165-PG4yN66KHu8v/opt/atlassian/pipelines/agent/build/src/smart-cart/components/SmartCartContainer/SmartCartContainer.css */
+/* ../../../../../tmp/tmp-165-6JKzb4aIuevv/opt/atlassian/pipelines/agent/build/src/smart-cart/components/SmartCartContainer/SmartCartContainer.css */
 .SmartCartContainer_rebuy-smart-cart,
 .SmartCartContainer_rebuy-smart-cart *,
 .SmartCartContainer_rebuy-smart-cart *::before,
@@ -2613,7 +2613,7 @@ body.rebuy-smart-cart-open {
   }
 }
 
-/* ../../../../../tmp/tmp-165-PG4yN66KHu8v/opt/atlassian/pipelines/agent/build/src/widgets/RebuyCompleteTheLook/RebuyCompleteTheLook.css */
+/* ../../../../../tmp/tmp-165-6JKzb4aIuevv/opt/atlassian/pipelines/agent/build/src/widgets/RebuyCompleteTheLook/RebuyCompleteTheLook.css */
 .RebuyCompleteTheLook_container {
   padding: 32px 1em;
   margin: 1em 0;
@@ -2640,7 +2640,7 @@ body.rebuy-smart-cart-open {
   width: 100%;
 }
 
-/* ../../../../../tmp/tmp-165-PG4yN66KHu8v/opt/atlassian/pipelines/agent/build/src/widgets/RebuyDynamicBundleProducts/RebuyDynamicBundleProducts.css */
+/* ../../../../../tmp/tmp-165-6JKzb4aIuevv/opt/atlassian/pipelines/agent/build/src/widgets/RebuyDynamicBundleProducts/RebuyDynamicBundleProducts.css */
 .RebuyDynamicBundleProducts_container {
   padding: 32px 16px;
   background-color: #f0f4f8;
@@ -2729,7 +2729,7 @@ body.rebuy-smart-cart-open {
   opacity: 0.5;
 }
 
-/* ../../../../../tmp/tmp-165-PG4yN66KHu8v/opt/atlassian/pipelines/agent/build/src/widgets/RebuyProductAddOns/RebuyProductAddOns.css */
+/* ../../../../../tmp/tmp-165-6JKzb4aIuevv/opt/atlassian/pipelines/agent/build/src/widgets/RebuyProductAddOns/RebuyProductAddOns.css */
 .RebuyProductAddOns_container {
   display: flex;
   flex-direction: column;
@@ -2839,7 +2839,7 @@ body.rebuy-smart-cart-open {
   justify-content: center;
 }
 
-/* ../../../../../tmp/tmp-165-PG4yN66KHu8v/opt/atlassian/pipelines/agent/build/src/widgets/RebuyProductRecommendations/RebuyProductRecommendations.css */
+/* ../../../../../tmp/tmp-165-6JKzb4aIuevv/opt/atlassian/pipelines/agent/build/src/widgets/RebuyProductRecommendations/RebuyProductRecommendations.css */
 .RebuyProductRecommendations_container {
   padding: 32px 16px;
   background-color: #f0f4f8;
@@ -2857,7 +2857,7 @@ body.rebuy-smart-cart-open {
   list-style: none;
 }
 
-/* ../../../../../tmp/tmp-165-PG4yN66KHu8v/opt/atlassian/pipelines/agent/build/src/widgets/RebuyRecentlyViewedProducts/RebuyRecentlyViewedProducts.css */
+/* ../../../../../tmp/tmp-165-6JKzb4aIuevv/opt/atlassian/pipelines/agent/build/src/widgets/RebuyRecentlyViewedProducts/RebuyRecentlyViewedProducts.css */
 .RebuyRecentlyViewedProducts_rebuy-recently-viewed-products-container {
   padding: 32px 16px;
   background-color: #f0f4f8;