@shopify/cli 3.83.0 → 3.83.2

package/dist/assets/hydrogen/starter/.cursor/rules/cookbook-recipe-subscriptions.mdc

@@ -1,921 +0,0 @@
----
-description: Recipe for implementing "Subscriptions (subscriptions)" in a Hydrogen storefront. Add subscription-based products to your Hydrogen storefront.
-globs: *
-alwaysApply: false
----
-
-# Overview
-
-This rule describes how to implement "Subscriptions" in a Hydrogen storefront. Below is a "recipe" that contains the steps to apply to a basic Hydrogen skeleton template to achieve the desired outcome.
-The same logic can be applied to any other Hydrogen storefront project, adapting the implementation details to the specific needs/structure/conventions of the project, but it's up to the developer to do so.
-If there are any prerequisites, the recipe below will explain them; if the user is trying to implement the feature described in this recipe, make sure to prominently mention the prerequisites and any other preliminary instructions, as well as followups.
-If the user is asking on how to implement the feature from scratch, please first describe the feature in a general way before jumping into the implementation details.
-Please note that the recipe steps below are not necessarily ordered in the way they should be executed, as it depends on the user's needs and the specific details of the project. The recipe steps descriptions should allow you to understand what is required to be done in a certain order and what is not. Remember that file names in the recipe are related to the Hydrogen skeleton template, not the user's project, so make sure to adapt the file names to the user's project.
-
-# AI model verification steps
-
-- Never edit generated files (ending with .d.ts) directly; instead, run the `npm run codegen` command to update them.
-
-# Summary
-
-Add subscription-based products to your Hydrogen storefront.
-
-# User Intent Recognition
-
-<user_queries>
-- How do I add subscriptions to my Hydrogen storefront?
-- How do I add selling plans to my Hydrogen storefront?
-- How do I display subscription details on applicable line items in the cart?
-</user_queries>
-
-# Troubleshooting
-
-<troubleshooting>
-- **Issue**: I'm getting an error when I try to add a subscription to my storefront.
-  **Solution**: Make sure you have the Shopify Subscriptions app installed and configured correctly.
-- **Issue**: I'm not seeing the subscription options on my product pages.
-  **Solution**: Make sure you have the Shopify Subscriptions app installed and configured correctly.
-- **Issue**: I'm not seeing the subscription details on my cart line items.
-  **Solution**: Make sure you have the Shopify Subscriptions app installed and configured correctly.
-</troubleshooting>
-
-# Recipe Implementation
-
-Here's the subscriptions recipe for the base Hydrogen skeleton template:
-
-<recipe_implementation>
-
-## Description
-
-This recipe lets you sell subscription-based products on your Hydrogen storefront by implementing [selling plan groups](https://shopify.dev/docs/api/storefront/latest/objects/SellingPlanGroup). Your customers will be able to choose between one-time purchases or recurring subscriptions for any products with available selling plans.
-
-
-In this recipe you'll make the following changes:
-
-
-1. Set up a subscriptions app in your Shopify admin and add selling plans to any products that will be sold as subscriptions.
-2. Modify product detail pages to display subscription options with accurate pricing using the `SellingPlanSelector` component.
-3. Enhance GraphQL fragments to fetch all necessary selling plan data.
-4. Display subscription details on applicable line items in the cart.
-
-
-## Requirements
-
-To implement subscriptions in your own store, you need to install a subscriptions app in your Shopify admin. In this recipe, we'll use the [Shopify Subscriptions app](https://apps.shopify.com/shopify-subscriptions).
-
-
-## New files added to the template by this recipe
-
-### templates/skeleton/app/components/SellingPlanSelector.tsx
-
-The `SellingPlanSelector` component is used to display the available subscription options on product pages.
-
-```tsx
-import type {
-  ProductFragment,
-  SellingPlanGroupFragment,
-  SellingPlanFragment,
-} from 'storefrontapi.generated';
-import {useMemo} from 'react';
-import {useLocation} from '@remix-run/react';
-
-/* Enriched sellingPlan type including isSelected and url */
-export type SellingPlan = SellingPlanFragment & {
-  isSelected: boolean;
-  url: string;
-};
-
-/* Enriched sellingPlanGroup type including enriched SellingPlan nodes */
-export type SellingPlanGroup = Omit<
-  SellingPlanGroupFragment,
-  'sellingPlans'
-> & {
-  sellingPlans: {
-    nodes: SellingPlan[];
-  };
-};
-
-/**
- * A component that simplifies selecting sellingPlans subscription options
- * @example Example use
- * ```ts
- *   <SellingPlanSelector
- *     sellingPlanGroups={sellingPlanGroups}
- *     selectedSellingPlanId={selectedSellingPlanId}
- *   >
- *     {({sellingPlanGroup}) => ( ...your sellingPlanGroup component )}
- *  </SellingPlanSelector>
- *  ```
- **/
-export function SellingPlanSelector({
-  sellingPlanGroups,
-  selectedSellingPlan,
-  children,
-  paramKey = 'selling_plan',
-}: {
-  sellingPlanGroups: ProductFragment['sellingPlanGroups'];
-  selectedSellingPlan: SellingPlanFragment | null;
-  paramKey?: string;
-  children: (params: {
-    sellingPlanGroup: SellingPlanGroup;
-    selectedSellingPlan: SellingPlanFragment | null;
-  }) => React.ReactNode;
-}) {
-  const {search, pathname} = useLocation();
-  const params = new URLSearchParams(search);
-
-  return useMemo(
-    () =>
-      (sellingPlanGroups.nodes as SellingPlanGroup[]).map(
-        (sellingPlanGroup) => {
-          // Augmnet each sellingPlan node with isSelected and url
-          const sellingPlans = sellingPlanGroup.sellingPlans.nodes
-            .map((sellingPlan: SellingPlan) => {
-              if (!sellingPlan?.id) {
-                //eslint-disable-next-line no-console
-                console.warn(
-                  'SellingPlanSelector: sellingPlan.id is missing in the product query',
-                );
-                return null;
-              }
-              if (!sellingPlan.id) return null;
-              params.set(paramKey, sellingPlan.id);
-              sellingPlan.isSelected =
-                selectedSellingPlan?.id === sellingPlan.id;
-              sellingPlan.url = `${pathname}?${params.toString()}`;
-              return sellingPlan;
-            })
-            .filter(Boolean) as SellingPlan[];
-          sellingPlanGroup.sellingPlans.nodes = sellingPlans;
-          return children({sellingPlanGroup, selectedSellingPlan});
-        },
-      ),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [sellingPlanGroups, children, selectedSellingPlan, paramKey, pathname],
-  );
-}
-
-```
-
-### templates/skeleton/app/styles/selling-plan.css
-
-The `selling-plan.css` file is used to style the `SellingPlanSelector` component.
-
-```css
-.selling-plan-group {
-  margin-bottom: 1rem;
-}
-
-.selling-plan-group-title {
-  font-weight: 500;
-  margin-bottom: 0.5rem;
-}
-
-.selling-plan {
-  border: 1px solid;
-  display: inline-block;
-  padding: 1rem;
-  margin-right: 0.5rem;
-  line-height: 1;
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
-  border-bottom-width: 1.5px;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.selling-plan:hover {
-  text-decoration: none;
-}
-
-.selling-plan.selected {
-  border-color: #6b7280; /* Equivalent to 'border-gray-500' */
-}
-
-.selling-plan.unselected {
-  border-color: #fafafa; /* Equivalent to 'border-neutral-50' */
-}
-
-```
-
-## Steps
-
-### Step 1: Set up the Shopify Subscriptions app
-
-1. Install the [Shopify Subscriptions app](https://apps.shopify.com/shopify-subscriptions).
-2. In your Shopify admin, [use the Subscriptions app](https://admin.shopify.com/apps/subscriptions-remix/app) to create one or more subscription plans.
-3. On the [Products](https://admin.shopify.com/products) page, open any products that will be sold as subscriptions and add the relevant subscription plans in the **Purchase options** section.
-The Hydrogen demo storefront comes pre-configured with an example subscription product with the handle `shopify-wax`.
-
-
-### Step 2: Render the selling plan in the cart
-
-1. Update `CartLineItem` to show subscription details when they're available.
-2. Extract `sellingPlanAllocation` from cart line data, display the plan name, and standardize component import paths.
-
-
-#### File: /app/components/CartLineItem.tsx
-
-```diff
-@@ -3,8 +3,8 @@ import type {CartLayout} from '~/components/CartMain';
- import {CartForm, Image, type OptimisticCartLine} from '@shopify/hydrogen';
- import {useVariantUrl} from '~/lib/variants';
- import {Link} from '@remix-run/react';
--import {ProductPrice} from './ProductPrice';
--import {useAside} from './Aside';
-+import {ProductPrice} from '~/components/ProductPrice';
-+import {useAside} from '~/components/Aside';
- import type {CartApiQueryFragment} from 'storefrontapi.generated';
- 
- type CartLine = OptimisticCartLine<CartApiQueryFragment>;
-@@ -20,7 +20,9 @@ export function CartLineItem({
-   layout: CartLayout;
-   line: CartLine;
- }) {
--  const {id, merchandise} = line;
-+  // Get the selling plan allocation
-+  const {id, merchandise, sellingPlanAllocation} = line;
-+
-   const {product, title, image, selectedOptions} = merchandise;
-   const lineItemUrl = useVariantUrl(product.handle, selectedOptions);
-   const {close} = useAside();
-@@ -54,6 +56,12 @@ export function CartLineItem({
-         </Link>
-         <ProductPrice price={line?.cost?.totalAmount} />
-         <ul>
-+          {/* Optionally render the selling plan name if available */}
-+          {sellingPlanAllocation && (
-+            <li key={sellingPlanAllocation.sellingPlan.name}>
-+              <small>{sellingPlanAllocation.sellingPlan.name}</small>
-+            </li>
-+          )}
-           {selectedOptions.map((option) => (
-             <li key={option.name}>
-               <small>
-```
-
-### Step 3: Update `ProductForm` to support subscriptions
-
-1. Add conditional rendering to display either subscription options or standard variant selectors.
-2. Implement `SellingPlanSelector` and `SellingPlanGroup` components to handle subscription plan selection.
-3. Update `AddToCartButton` to include selling plan data when subscriptions are selected.
-
-
-#### File: /app/components/ProductForm.tsx
-
-```diff
-@@ -6,120 +6,169 @@ import type {
- } from '@shopify/hydrogen/storefront-api-types';
- import {AddToCartButton} from './AddToCartButton';
- import {useAside} from './Aside';
--import type {ProductFragment} from 'storefrontapi.generated';
-+import type {
-+  ProductFragment,
-+  SellingPlanFragment,
-+} from 'storefrontapi.generated';
-+import {
-+  SellingPlanSelector,
-+  type SellingPlanGroup,
-+} from '~/components/SellingPlanSelector';
- 
- export function ProductForm({
-   productOptions,
-   selectedVariant,
-+  sellingPlanGroups,
-+  selectedSellingPlan,
- }: {
-   productOptions: MappedProductOptions[];
-   selectedVariant: ProductFragment['selectedOrFirstAvailableVariant'];
-+  selectedSellingPlan: SellingPlanFragment | null;
-+  sellingPlanGroups: ProductFragment['sellingPlanGroups'];
- }) {
-   const navigate = useNavigate();
-   const {open} = useAside();
-   return (
-     <div className="product-form">
--      {productOptions.map((option) => {
--        // If there is only a single value in the option values, don't display the option
--        if (option.optionValues.length === 1) return null;
-+      {sellingPlanGroups.nodes.length > 0 ? (
-+        <>
-+          <SellingPlanSelector
-+            sellingPlanGroups={sellingPlanGroups}
-+            selectedSellingPlan={selectedSellingPlan}
-+          >
-+            {({sellingPlanGroup}) => (
-+              <SellingPlanGroup
-+                key={sellingPlanGroup.name}
-+                sellingPlanGroup={sellingPlanGroup}
-+              />
-+            )}
-+          </SellingPlanSelector>
-+          <br />
-+          <AddToCartButton
-+            disabled={!selectedSellingPlan}
-+            onClick={() => {
-+              open('cart');
-+            }}
-+            lines={
-+              selectedSellingPlan && selectedVariant
-+                ? [
-+                    {
-+                      quantity: 1,
-+                      selectedVariant,
-+                      sellingPlanId: selectedSellingPlan.id,
-+                      merchandiseId: selectedVariant.id,
-+                    },
-+                  ]
-+                : []
-+            }
-+          >
-+            {selectedSellingPlan ? 'Subscribe' : 'Select Subscription'}
-+          </AddToCartButton>
-+        </>
-+      ) : (
-+        productOptions.map((option) => {
-+          // If there is only a single value in the option values, don't display the option
-+          if (option.optionValues.length === 1) return null;
- 
--        return (
--          <div className="product-options" key={option.name}>
--            <h5>{option.name}</h5>
--            <div className="product-options-grid">
--              {option.optionValues.map((value) => {
--                const {
--                  name,
--                  handle,
--                  variantUriQuery,
--                  selected,
--                  available,
--                  exists,
--                  isDifferentProduct,
--                  swatch,
--                } = value;
-+          return (
-+            <div className="product-options" key={option.name}>
-+              <h5>{option.name}</h5>
-+              <div className="product-options-grid">
-+                {option.optionValues.map((value) => {
-+                  const {
-+                    name,
-+                    handle,
-+                    variantUriQuery,
-+                    selected,
-+                    available,
-+                    exists,
-+                    isDifferentProduct,
-+                    swatch,
-+                  } = value;
- 
--                if (isDifferentProduct) {
--                  // SEO
--                  // When the variant is a combined listing child product
--                  // that leads to a different url, we need to render it
--                  // as an anchor tag
--                  return (
--                    <Link
--                      className="product-options-item"
--                      key={option.name + name}
--                      prefetch="intent"
--                      preventScrollReset
--                      replace
--                      to={`/products/${handle}?${variantUriQuery}`}
--                      style={{
--                        border: selected
--                          ? '1px solid black'
--                          : '1px solid transparent',
--                        opacity: available ? 1 : 0.3,
--                      }}
--                    >
--                      <ProductOptionSwatch swatch={swatch} name={name} />
--                    </Link>
--                  );
--                } else {
--                  // SEO
--                  // When the variant is an update to the search param,
--                  // render it as a button with javascript navigating to
--                  // the variant so that SEO bots do not index these as
--                  // duplicated links
--                  return (
--                    <button
--                      type="button"
--                      className={`product-options-item${
--                        exists && !selected ? ' link' : ''
--                      }`}
--                      key={option.name + name}
--                      style={{
--                        border: selected
--                          ? '1px solid black'
--                          : '1px solid transparent',
--                        opacity: available ? 1 : 0.3,
--                      }}
--                      disabled={!exists}
--                      onClick={() => {
--                        if (!selected) {
--                          navigate(`?${variantUriQuery}`, {
--                            replace: true,
--                            preventScrollReset: true,
--                          });
--                        }
--                      }}
--                    >
--                      <ProductOptionSwatch swatch={swatch} name={name} />
--                    </button>
--                  );
-+                  if (isDifferentProduct) {
-+                    // SEO
-+                    // When the variant is a combined listing child product
-+                    // that leads to a different url, we need to render it
-+                    // as an anchor tag
-+                    return (
-+                      <Link
-+                        className="product-options-item"
-+                        key={option.name + name}
-+                        prefetch="intent"
-+                        preventScrollReset
-+                        replace
-+                        to={`/products/${handle}?${variantUriQuery}`}
-+                        style={{
-+                          border: selected
-+                            ? '1px solid black'
-+                            : '1px solid transparent',
-+                          opacity: available ? 1 : 0.3,
-+                        }}
-+                      >
-+                        <ProductOptionSwatch swatch={swatch} name={name} />
-+                      </Link>
-+                    );
-+                  } else {
-+                    // SEO
-+                    // When the variant is an update to the search param,
-+                    // render it as a button with javascript navigating to
-+                    // the variant so that SEO bots do not index these as
-+                    // duplicated links
-+                    return (
-+                      <button
-+                        type="button"
-+                        className={`product-options-item${
-+                          exists && !selected ? ' link' : ''
-+                        }`}
-+                        key={option.name + name}
-+                        style={{
-+                          border: selected
-+                            ? '1px solid black'
-+                            : '1px solid transparent',
-+                          opacity: available ? 1 : 0.3,
-+                        }}
-+                        disabled={!exists}
-+                        onClick={() => {
-+                          if (!selected) {
-+                            navigate(`?${variantUriQuery}`, {
-+                              replace: true,
-+                              preventScrollReset: true,
-+                            });
-+                          }
-+                        }}
-+                      >
-+                        <ProductOptionSwatch swatch={swatch} name={name} />
-+                      </button>
-+                    );
-+                  }
-+                })}
-+              </div>
-+              <AddToCartButton
-+                disabled={!selectedVariant || !selectedVariant.availableForSale}
-+                onClick={() => {
-+                  open('cart');
-+                }}
-+                lines={
-+                  selectedVariant
-+                    ? [
-+                        {
-+                          merchandiseId: selectedVariant.id,
-+                          quantity: 1,
-+                          selectedVariant,
-+                        },
-+                      ]
-+                    : []
-                 }
--              })}
-+              >
-+                {selectedVariant?.availableForSale ? 'Add to cart' : 'Sold out'}
-+              </AddToCartButton>
-+
-+              <br />
-             </div>
--            <br />
--          </div>
--        );
--      })}
--      <AddToCartButton
--        disabled={!selectedVariant || !selectedVariant.availableForSale}
--        onClick={() => {
--          open('cart');
--        }}
--        lines={
--          selectedVariant
--            ? [
--                {
--                  merchandiseId: selectedVariant.id,
--                  quantity: 1,
--                  selectedVariant,
--                },
--              ]
--            : []
--        }
--      >
--        {selectedVariant?.availableForSale ? 'Add to cart' : 'Sold out'}
--      </AddToCartButton>
-+          );
-+        })
-+      )}
-     </div>
-   );
- }
-@@ -148,3 +197,38 @@ function ProductOptionSwatch({
-     </div>
-   );
- }
-+
-+// Update as you see fit to match your design and requirements
-+function SellingPlanGroup({
-+  sellingPlanGroup,
-+}: {
-+  sellingPlanGroup: SellingPlanGroup;
-+}) {
-+  return (
-+    <div className="selling-plan-group" key={sellingPlanGroup.name}>
-+      <p className="selling-plan-group-title">
-+        <strong>{sellingPlanGroup.name}:</strong>
-+      </p>
-+      {sellingPlanGroup.sellingPlans.nodes.map((sellingPlan) => {
-+        return (
-+          <Link
-+            key={sellingPlan.id}
-+            prefetch="intent"
-+            to={sellingPlan.url}
-+            className={`selling-plan ${
-+              sellingPlan.isSelected ? 'selected' : 'unselected'
-+            }`}
-+            preventScrollReset
-+            replace
-+          >
-+            <p>
-+              {sellingPlan.options.map(
-+                (option) => `${option.name} ${option.value}`,
-+              )}
-+            </p>
-+          </Link>
-+        );
-+      })}
-+    </div>
-+  );
-+}
-```
-
-### Step 4: Update `ProductPrice` to display subscription pricing
-
-1. Add a `SellingPlanPrice` function to calculate adjusted prices based on subscription plan type (fixed amount, fixed price, or percentage).
-2. Add logic to handle different price adjustment types and render the appropriate subscription price when a selling plan is selected.
-
-
-#### File: /app/components/ProductPrice.tsx
-
-```diff
-@@ -1,13 +1,31 @@
-+import type {CurrencyCode} from '@shopify/hydrogen/customer-account-api-types';
-+import type {
-+  ProductFragment,
-+  SellingPlanFragment,
-+} from 'storefrontapi.generated';
- import {Money} from '@shopify/hydrogen';
- import type {MoneyV2} from '@shopify/hydrogen/storefront-api-types';
- 
- export function ProductPrice({
-   price,
-   compareAtPrice,
-+  selectedSellingPlan,
-+  selectedVariant,
- }: {
-   price?: MoneyV2;
-   compareAtPrice?: MoneyV2 | null;
-+  selectedVariant?: ProductFragment['selectedOrFirstAvailableVariant'];
-+  selectedSellingPlan?: SellingPlanFragment | null;
- }) {
-+  if (selectedSellingPlan) {
-+    return (
-+      <SellingPlanPrice
-+        selectedSellingPlan={selectedSellingPlan}
-+        selectedVariant={selectedVariant}
-+      />
-+    );
-+  }
-+
-   return (
-     <div className="product-price">
-       {compareAtPrice ? (
-@@ -25,3 +43,74 @@ export function ProductPrice({
-     </div>
-   );
- }
-+
-+type SellingPlanPrice = {
-+  amount: number;
-+  currencyCode: CurrencyCode;
-+};
-+
-+/*
-+  Render the selected selling plan price is available
-+*/
-+function SellingPlanPrice({
-+  selectedSellingPlan,
-+  selectedVariant,
-+}: {
-+  selectedSellingPlan: SellingPlanFragment;
-+  selectedVariant: ProductFragment['selectedOrFirstAvailableVariant'];
-+}) {
-+  if (!selectedVariant) {
-+    return null;
-+  }
-+
-+  const sellingPlanPriceAdjustments = selectedSellingPlan?.priceAdjustments;
-+
-+  if (!sellingPlanPriceAdjustments?.length) {
-+    return selectedVariant ? <Money data={selectedVariant.price} /> : null;
-+  }
-+
-+  const selectedVariantPrice: SellingPlanPrice = {
-+    amount: parseFloat(selectedVariant.price.amount),
-+    currencyCode: selectedVariant.price.currencyCode,
-+  };
-+
-+  const sellingPlanPrice: SellingPlanPrice = sellingPlanPriceAdjustments.reduce(
-+    (acc, adjustment) => {
-+      switch (adjustment.adjustmentValue.__typename) {
-+        case 'SellingPlanFixedAmountPriceAdjustment':
-+          return {
-+            amount:
-+              acc.amount +
-+              parseFloat(adjustment.adjustmentValue.adjustmentAmount.amount),
-+            currencyCode: acc.currencyCode,
-+          };
-+        case 'SellingPlanFixedPriceAdjustment':
-+          return {
-+            amount: parseFloat(adjustment.adjustmentValue.price.amount),
-+            currencyCode: acc.currencyCode,
-+          };
-+        case 'SellingPlanPercentagePriceAdjustment':
-+          return {
-+            amount:
-+              acc.amount *
-+              (1 - adjustment.adjustmentValue.adjustmentPercentage / 100),
-+            currencyCode: acc.currencyCode,
-+          };
-+        default:
-+          return acc;
-+      }
-+    },
-+    selectedVariantPrice,
-+  );
-+
-+  return (
-+    <div className="selling-plan-price">
-+      <Money
-+        data={{
-+          amount: `${sellingPlanPrice.amount}`,
-+          currencyCode: sellingPlanPrice.currencyCode,
-+        }}
-+      />
-+    </div>
-+  );
-+}
-```
-
-### Step 5: Add selling plan data to cart queries
-
-Add a `sellingPlanAllocation` field with the plan name to the standard and componentizable cart line GraphQL fragments. This displays subscription details in the cart.
-
-
-#### File: /app/lib/fragments.ts
-
-```diff
-@@ -54,6 +54,11 @@ export const CART_QUERY_FRAGMENT = `#graphql
-         }
-       }
-     }
-+    sellingPlanAllocation {
-+      sellingPlan {
-+         name
-+      }
-+    }
-   }
-   fragment CartLineComponent on ComponentizableCartLine {
-     id
-@@ -104,6 +109,11 @@ export const CART_QUERY_FRAGMENT = `#graphql
-         }
-       }
-     }
-+    sellingPlanAllocation {
-+      sellingPlan {
-+         name
-+      }
-+    }
-   }
-   fragment CartApiQuery on Cart {
-     updatedAt
-```
-
-### Step 6: Add `SellingPlanSelector` to product pages
-
-1. Add the `SellingPlanSelector` component to display subscription options on product pages.
-2. Add logic to handle pricing adjustments, maintain selection state using URL parameters, and update the add-to-cart functionality.
-3. Fetch subscription data through the updated cart GraphQL fragments.
-
-
-#### File: /app/routes/products.$handle.tsx
-
-```diff
-@@ -1,3 +1,5 @@
-+import type {SellingPlanFragment} from 'storefrontapi.generated';
-+import type {LinksFunction} from '@remix-run/node';
- import {redirect, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
- import {useLoaderData, type MetaFunction} from '@remix-run/react';
- import {
-@@ -13,6 +15,12 @@ import {ProductImage} from '~/components/ProductImage';
- import {ProductForm} from '~/components/ProductForm';
- import {redirectIfHandleIsLocalized} from '~/lib/redirect';
- 
-+import sellingPanStyle from '~/styles/selling-plan.css?url';
-+
-+export const links: LinksFunction = () => [
-+  {rel: 'stylesheet', href: sellingPanStyle},
-+];
-+
- export const meta: MetaFunction<typeof loader> = ({data}) => {
-   return [
-     {title: `Hydrogen | ${data?.product.title ?? ''}`},
-@@ -63,8 +71,34 @@ async function loadCriticalData({
-   // The API handle might be localized, so redirect to the localized handle
-   redirectIfHandleIsLocalized(request, {handle, data: product});
- 
-+  // Initialize the selectedSellingPlan to null
-+  let selectedSellingPlan = null;
-+
-+  // Get the selected selling plan id from the request url
-+  const selectedSellingPlanId =
-+    new URL(request.url).searchParams.get('selling_plan') ?? null;
-+
-+  // Get the selected selling plan bsed on the selectedSellingPlanId
-+  if (selectedSellingPlanId) {
-+    const selectedSellingPlanGroup =
-+      product.sellingPlanGroups.nodes?.find((sellingPlanGroup) => {
-+        return sellingPlanGroup.sellingPlans.nodes?.find(
-+          (sellingPlan: SellingPlanFragment) =>
-+            sellingPlan.id === selectedSellingPlanId,
-+        );
-+      }) ?? null;
-+
-+    if (selectedSellingPlanGroup) {
-+      selectedSellingPlan =
-+        selectedSellingPlanGroup.sellingPlans.nodes.find((sellingPlan) => {
-+          return sellingPlan.id === selectedSellingPlanId;
-+        }) ?? null;
-+    }
-+  }
-+
-   return {
-     product,
-+    selectedSellingPlan,
-   };
- }
- 
-@@ -81,7 +115,7 @@ function loadDeferredData({context, params}: LoaderFunctionArgs) {
- }
- 
- export default function Product() {
--  const {product} = useLoaderData<typeof loader>();
-+  const {product, selectedSellingPlan} = useLoaderData<typeof loader>();
- 
-   // Optimistically selects a variant with given available variant information
-   const selectedVariant = useOptimisticVariant(
-@@ -99,7 +133,7 @@ export default function Product() {
-     selectedOrFirstAvailableVariant: selectedVariant,
-   });
- 
--  const {title, descriptionHtml} = product;
-+  const {title, descriptionHtml, sellingPlanGroups} = product;
- 
-   return (
-     <div className="product">
-@@ -109,11 +143,15 @@ export default function Product() {
-         <ProductPrice
-           price={selectedVariant?.price}
-           compareAtPrice={selectedVariant?.compareAtPrice}
-+          selectedSellingPlan={selectedSellingPlan}
-+          selectedVariant={selectedVariant}
-         />
-         <br />
-         <ProductForm
-           productOptions={productOptions}
-           selectedVariant={selectedVariant}
-+          selectedSellingPlan={selectedSellingPlan}
-+          sellingPlanGroups={sellingPlanGroups}
-         />
-         <br />
-         <br />
-@@ -180,6 +218,73 @@ const PRODUCT_VARIANT_FRAGMENT = `#graphql
-   }
- ` as const;
- 
-+const SELLING_PLAN_FRAGMENT = `#graphql
-+  fragment SellingPlanMoney on MoneyV2 {
-+    amount
-+    currencyCode
-+  }
-+  fragment SellingPlan on SellingPlan {
-+    id
-+    options {
-+      name
-+      value
-+    }
-+    priceAdjustments {
-+      adjustmentValue {
-+        ... on SellingPlanFixedAmountPriceAdjustment {
-+          __typename
-+          adjustmentAmount {
-+            ... on MoneyV2 {
-+               ...SellingPlanMoney
-+            }
-+          }
-+        }
-+        ... on SellingPlanFixedPriceAdjustment {
-+          __typename
-+          price {
-+            ... on MoneyV2 {
-+              ...SellingPlanMoney
-+            }
-+          }
-+        }
-+        ... on SellingPlanPercentagePriceAdjustment {
-+          __typename
-+          adjustmentPercentage
-+        }
-+      }
-+      orderCount
-+    }
-+    recurringDeliveries
-+    checkoutCharge {
-+      type
-+      value {
-+        ... on MoneyV2 {
-+          ...SellingPlanMoney
-+        }
-+        ... on SellingPlanCheckoutChargePercentageValue {
-+          percentage
-+        }
-+      }
-+    }
-+ }
-+` as const;
-+
-+const SELLING_PLAN_GROUP_FRAGMENT = `#graphql
-+  fragment SellingPlanGroup on SellingPlanGroup {
-+    name
-+    options {
-+      name
-+      values
-+    }
-+    sellingPlans(first:10) {
-+      nodes {
-+        ...SellingPlan
-+      }
-+    }
-+  }
-+  ${SELLING_PLAN_FRAGMENT}
-+` as const;
-+
- const PRODUCT_FRAGMENT = `#graphql
-   fragment Product on Product {
-     id
-@@ -207,6 +312,11 @@ const PRODUCT_FRAGMENT = `#graphql
-         }
-       }
-     }
-+    sellingPlanGroups(first:10) {
-+      nodes {
-+        ...SellingPlanGroup
-+      }
-+    }
-     selectedOrFirstAvailableVariant(selectedOptions: $selectedOptions, ignoreUnknownOptions: true, caseInsensitiveMatch: true) {
-       ...ProductVariant
-     }
-@@ -218,6 +328,7 @@ const PRODUCT_FRAGMENT = `#graphql
-       title
-     }
-   }
-+  ${SELLING_PLAN_GROUP_FRAGMENT}
-   ${PRODUCT_VARIANT_FRAGMENT}
- ` as const;
-```
-
-</recipe_implementation>