feat: add bundles to schematic (#88)

* feat: copied over updates for bundles support in d2c output

* chore: changeset

* chore: added volta node version pin

* test: fixed tests after update

* chore: generated latest examples

* feat: version bump moltin sdk

---------

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>

.changeset/fluffy-birds-battle.md

@@ -0,0 +1,8 @@
+---
+"@elasticpath/react-shopper-hooks": patch
+"@elasticpath/composable-common": patch
+"composable-cli": patch
+"@elasticpath/d2c-schematics": patch
+---
+
+- bumped moltin sdk version

.changeset/tasty-kiwis-change.md

@@ -0,0 +1,6 @@
+---
+"@elasticpath/d2c-schematics": minor
+---
+
+- Added bundles support to d2c output
+- Refactored product components to use the latest react shopper hooks

examples/algolia/package.json

@@ -24,7 +24,7 @@
     "@elasticpath/react-shopper-hooks": "^0.3.2",
     "@headlessui/react": "^1.7.17",
     "@heroicons/react": "^2.0.18",
-    "@moltin/sdk": "^23.3.0",
+    "@moltin/sdk": "^25.0.2",
     "algoliasearch": "^4.14.2",
     "clsx": "^1.2.1",
     "cookies-next": "^2.1.1",
@@ -40,7 +40,9 @@
     "react-instantsearch-hooks-server": "6.38.1",
     "react-instantsearch-hooks-web": "6.38.1",
     "react-toastify": "^9.1.3",
-    "yup": "^1.3.0"
+    "yup": "^1.3.0",
+    "zod": "^3.22.4",
+    "zod-formik-adapter": "^1.2.0"
   },
   "devDependencies": {
     "@babel/core": "^7.18.10",

examples/algolia/src/components/cart/Promotion.tsx

@@ -12,7 +12,7 @@ export const Promotion = (): JSX.Element => {
     promoCode: "",
   };
 
-  const { handleSubmit, handleChange, values, errors } = useFormik({
+  const { handleSubmit, handleChange, values } = useFormik({
     initialValues,
     onSubmit: async (values) => {
       await addPromotionToCart(values.promoCode);

examples/algolia/src/components/product-modal/Product.tsx

@@ -1,22 +1,22 @@
 import type { NextPage } from "next";
 import { ProductModalContext } from "../../lib/product-util";
 import { useEffect, useState } from "react";
-import type { IProduct } from "../../lib/types/product-types";
-import BaseProductDetail from "./BaseProduct";
-import ChildProductDetail from "./ChildProduct";
-import SimpleProductDetail from "./SimpleProduct";
+import type { ShopperProduct } from "@elasticpath/react-shopper-hooks";
+import BundleProductDetail from "../product/bundles/BundleProduct";
+import SimpleProductDetail from "../product/SimpleProduct";
+import { VariationProductDetail } from "../product/variations/VariationProduct";
 
 interface ModalProductProps {
   onSkuIdChange: (id: string) => void;
 }
 
-export const Product: NextPage<IProduct & ModalProductProps> = (
-  props: IProduct & ModalProductProps,
+export const Product: NextPage<ShopperProduct & ModalProductProps> = (
+  props: ShopperProduct & ModalProductProps,
 ) => {
   const [isChangingSku, setIsChangingSku] = useState(false);
   const [changedSkuId, setChangedSkuId] = useState("");
 
-  const { product } = props;
+  const { response } = props;
 
   useEffect(() => {
     if (changedSkuId && props.onSkuIdChange) {
@@ -25,7 +25,7 @@ export const Product: NextPage<IProduct & ModalProductProps> = (
   }, [changedSkuId, props]);
 
   return (
-    <div className="max-w-base-max-width" key={"page_" + product.id}>
+    <div className="max-w-base-max-width" key={"page_" + response.id}>
       <ProductModalContext.Provider
         value={{
           isChangingSku,
@@ -40,14 +40,16 @@ export const Product: NextPage<IProduct & ModalProductProps> = (
   );
 };
 
-function resolveProductDetailComponent(props: IProduct): JSX.Element {
-  switch (props.kind) {
+function resolveProductDetailComponent(product: ShopperProduct): JSX.Element {
+  switch (product.kind) {
     case "base-product":
-      return <BaseProductDetail baseProduct={props} />;
+      return <VariationProductDetail variationProduct={product} />;
     case "child-product":
-      return <ChildProductDetail childProduct={props} />;
+      return <VariationProductDetail variationProduct={product} />;
     case "simple-product":
-      return <SimpleProductDetail simpleProduct={props} />;
+      return <SimpleProductDetail simpleProduct={product} />;
+    case "bundle-product":
+      return <BundleProductDetail bundleProduct={product} />;
   }
 }