diff --git a/examples/password-reset/src/app/(store)/products/[productId]/page.tsx b/examples/password-reset/src/app/(store)/products/[productId]/page.tsx
index 8da9a108..bde3ec72 100644
--- a/examples/password-reset/src/app/(store)/products/[productId]/page.tsx
+++ b/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}
>
-
+
);
diff --git a/examples/password-reset/src/app/(store)/products/[productId]/product-display.tsx b/examples/password-reset/src/app/(store)/products/[productId]/product-display.tsx
index 98ab9c15..56a1960d 100644
--- a/examples/password-reset/src/app/(store)/products/[productId]/product-display.tsx
+++ b/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 (
+
+ {resolveProductDetailComponent(product)}
+
+
+ );
}
diff --git a/examples/password-reset/src/components/product/ProductExtensions.tsx b/examples/password-reset/src/components/product/ProductExtensions.tsx
index f09e9fa4..8220dfc6 100644
--- a/examples/password-reset/src/components/product/ProductExtensions.tsx
+++ b/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 = (
Unsupported product key: {key}
);
@@ -58,6 +58,17 @@ function Extension({
decoratedValue = value ? "Yes" : "No";
}
+ // Special handling for issubnsave
+ if (extKey.toLowerCase() === 'issubnsave') {
+ return value ? (
+ <>
+ Subscribe & Save
+ Available for this product
+ >
+ ) : null;
+ }
+
+ // Default rendering for other extensions
return (
<>
{extKey}
diff --git a/examples/password-reset/src/components/product/variations/VariationProduct.tsx b/examples/password-reset/src/components/product/variations/VariationProduct.tsx
index 77fb2bc4..8bd7558c 100644
--- a/examples/password-reset/src/components/product/variations/VariationProduct.tsx
+++ b/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 {
{extensions && }
+