feat: subscriptions service

examples/password-reset/src/app/(store)/products/[productId]/page.tsx

@@ -5,7 +5,7 @@ import { getProductById } from "../../../../services/products";
 import { notFound } from "next/navigation";
 import { parseProductResponse } from "@elasticpath/react-shopper-hooks";
 import React from "react";
-
+import { getSubscriptionOfferingsByProductId } from "../../../../services/subscriptions";
 
 export const dynamic = "force-dynamic";
 
@@ -32,6 +32,31 @@ export async function generateMetadata({
 export default async function ProductPage({ params }: Props) {
   const client = getServerSideImplicitClient();
   const product = await getProductById(params.productId, client);
+  console.log(`product: ${JSON.stringify(product, null, 2)}`);
+  let productId = params.productId;
+  if (!product.data.attributes.base_product) {
+    productId = product.data.attributes.base_product_id;
+  }
+  console.log(`productId: ${productId}`);
+  const { offerings:subscriptionOfferings, plans } = await getSubscriptionOfferingsByProductId(client, productId);
+  // console.log(`subscriptionOfferings: ${JSON.stringify(subscriptionOfferings, null, 2)}`);
+  // console.log(`plans: ${JSON.stringify(plans, null, 2)}`);
+  subscriptionOfferings.forEach((offering, index) => {
+    console.log(`Offering ${index + 1}:`, {
+      id: offering.id,
+      name: offering.attributes?.name,
+      description: offering.attributes?.description,
+    });
+  });
+  plans.forEach((plan, index) => {
+    console.log(`Plan ${index + 1}:`, {
+      id: plan.id,
+      name: plan.attributes?.name,
+      description: plan.attributes?.description,
+      interval: plan.attributes?.billing_interval_type,
+      price: plan.meta?.display_price.with_tax.currency + " " + plan.meta?.display_price.with_tax.formatted
+    });
+  });
 
   if (!product) {
     notFound();
@@ -45,7 +70,11 @@ export default async function ProductPage({ params }: Props) {
       key={"page_" + params.productId}
     >
       <ProductProvider>
-        <ProductDetailsComponent product={shopperProduct} />
+        <ProductDetailsComponent 
+          product={shopperProduct} 
+          subscriptionOfferings={subscriptionOfferings}
+          plans={plans}
+        />
       </ProductProvider>
     </div>
   );

examples/password-reset/src/app/(store)/products/[productId]/product-display.tsx

@@ -5,7 +5,8 @@ import { VariationProductDetail } from "../../../../components/product/variation
 import BundleProductDetail from "../../../../components/product/bundles/BundleProduct";
 import { ProductContext } from "../../../../lib/product-context";
 import SimpleProductDetail from "../../../../components/product/SimpleProduct";
-
+import { SubscriptionOffering, SubscriptionPlan } from "@elasticpath/js-sdk";
+import { ProductOffering } from "../../../../components/product/subscriptions/ProductOffering";
 export function ProductProvider({
   children,
 }: {
@@ -40,10 +41,23 @@ export function resolveProductDetailComponent(
   }
 }
 
+type ProductDetailsComponentProps = {
+  product: ShopperProduct;
+  subscriptionOfferings?: SubscriptionOffering[];
+  plans?: SubscriptionPlan[];
+};
+
 export function ProductDetailsComponent({
   product,
-}: {
-  product: ShopperProduct;
-}) {
-  return resolveProductDetailComponent(product);
+  subscriptionOfferings,
+  plans,
+}: ProductDetailsComponentProps) {
+  // console.log(`subscriptionOfferings in product-display: ${JSON.stringify(subscriptionOfferings, null, 2)}`);
+
+  return (
+    <div>
+      {resolveProductDetailComponent(product)}
+      <ProductOffering offerings={subscriptionOfferings} plans={plans} />
+    </div>
+  );
 }

examples/password-reset/src/components/product/ProductExtensions.tsx

@@ -18,7 +18,7 @@ const ProductExtensions = ({ extensions }: IProductExtensions): JSX.Element => {
             const extensionKeys = Object.keys(extension);
             return extensionKeys.map((key) => {
               const value = extension[key];
-
+              console.log(extension, key, value);
               const EmptyEntry = (
                 <p key={`${key}`}>Unsupported product key: {key}</p>
               );
@@ -58,6 +58,17 @@ function Extension({
     decoratedValue = value ? "Yes" : "No";
   }
 
+  // Special handling for issubnsave
+  if (extKey.toLowerCase() === 'issubnsave') {
+    return value ? (
+      <>
+        <dt className="font-semibold">Subscribe & Save</dt>
+        <dd className="mb-2">Available for this product</dd>
+      </>
+    ) : null;
+  }
+
+  // Default rendering for other extensions
   return (
     <>
       <dt className="font-semibold capitalize">{extKey}</dt>

examples/password-reset/src/components/product/variations/VariationProduct.tsx

@@ -11,6 +11,7 @@ import ProductSummary from "../ProductSummary";
 import ProductDetails from "../ProductDetails";
 import ProductExtensions from "../ProductExtensions";
 import { StatusButton } from "../../button/StatusButton";
+import { ProductOffering } from "../subscriptions/ProductOffering";
 
 export const VariationProductDetail = ({
   variationProduct,
@@ -44,6 +45,7 @@ export function VariationProductContainer(): JSX.Element {
             <ProductVariations />
             <ProductDetails product={response} />
             {extensions && <ProductExtensions extensions={extensions} />}
+
             <StatusButton
               disabled={product.kind === "base-product"}
               type="button"

examples/password-reset/src/services/subscriptions.ts

@@ -0,0 +1,29 @@
+"use server";
+import { SubscriptionOfferingFilter, SubscriptionOffering } from "@elasticpath/js-sdk";
+import { ElasticPath } from "@elasticpath/js-sdk";
+
+export async function getSubscriptionOfferingsByProductId(client: ElasticPath, productId: string) {
+    if (!client?.SubscriptionOfferings) return [];
+
+    const filter : SubscriptionOfferingFilter = {
+        eq: {
+          "products.external_ref": productId
+        }
+    }
+    try {
+        const response = await client.SubscriptionOfferings
+            .Filter(filter)
+            .With(['plans', 'products'] as const)
+            .All();
+
+        // @ts-ignore - Ignoring type issues as we know the structure is correct
+        return {
+            offerings: response.data || [],
+            plans: response.included?.plans || []
+        };
+    } catch (error) {
+        console.error('Error fetching subscription offerings:', error);
+        return { offerings: [], plans: [] };
+    }
+}
+