feat: update examples use latest hooks (#204)

* build: bump moltin sdk and fix the version * feat: update schematics to use latest shopper hooks * chore: add changesets * chore: update examples
elasticpath · May 1, 2024 · f890d84 · f890d84
1 parent cacbd3a
commit f890d84
Show file tree

Hide file tree

Showing 51 changed files with 146 additions and 137 deletions.
diff --git a/.changeset/fresh-bulldogs-shake.md b/.changeset/fresh-bulldogs-shake.md
@@ -0,0 +1,6 @@
+---
+"@elasticpath/react-shopper-hooks": minor
+"@elasticpath/shopper-common": minor
+---
+
+Bump and fix moltin sdk dependency
diff --git a/.changeset/nice-dolphins-agree.md b/.changeset/nice-dolphins-agree.md
@@ -0,0 +1,5 @@
+---
+"@elasticpath/d2c-schematics": minor
+---
+
+Use latest shopper hooks in schematics
diff --git a/.changeset/rich-planets-work.md b/.changeset/rich-planets-work.md
@@ -0,0 +1,9 @@
+---
+"@elasticpath/react-shopper-hooks": minor
+"@elasticpath/composable-common": minor
+"composable-cli": minor
+"@elasticpath/d2c-schematics": minor
+"@elasticpath/shopper-common": minor
+---
+
+Bump moltin version and fix it
diff --git a/examples/algolia/package.json b/examples/algolia/package.json
@@ -27,7 +27,7 @@
     "@heroicons/react": "^2.0.18",
     "@hookform/error-message": "^2.0.1",
     "@hookform/resolvers": "^3.3.2",
-    "@moltin/sdk": "^27.6.0",
+    "@moltin/sdk": "28.12.0",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.5",

diff --git a/examples/algolia/src/app/(checkout)/checkout/checkout-provider.tsx b/examples/algolia/src/app/(checkout)/checkout/checkout-provider.tsx
@@ -10,6 +10,7 @@ import {
   CartState,
   useAuthedAccountMember,
   useCart,
+  useCartClear,
 } from "@elasticpath/react-shopper-hooks";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Form } from "../../../components/form/Form";
@@ -35,9 +36,9 @@ type CheckoutProviderProps = {
 };
 
 export function CheckoutProvider({ children }: CheckoutProviderProps) {
-  const { state, useClearCart } = useCart();
+  const { state } = useCart();
 
-  const { mutateAsync: mutateClearCart } = useClearCart();
+  const { mutateAsync: mutateClearCart } = useCartClear();
 
   const [confirmationData, setConfirmationData] =
     useState<ReturnType<typeof usePaymentComplete>["data"]>(undefined);

diff --git a/examples/algolia/src/app/(store)/cart/CartItem.tsx b/examples/algolia/src/app/(store)/cart/CartItem.tsx
@@ -1,5 +1,5 @@
 "use client";
-import { useCart } from "@elasticpath/react-shopper-hooks";
+import { useCartRemoveItem } from "@elasticpath/react-shopper-hooks";
 import { ProductThumbnail } from "../account/orders/[orderId]/ProductThumbnail";
 import { NumberInput } from "../../../components/number-input/NumberInput";
 import Link from "next/link";
@@ -11,8 +11,7 @@ export type CartItemProps = {
 };
 
 export function CartItem({ item }: CartItemProps) {
-  const { useScopedRemoveCartItem } = useCart();
-  const { mutate, isPending } = useScopedRemoveCartItem();
+  const { mutate, isPending } = useCartRemoveItem();
 
   return (
     <div className="flex gap-5">

diff --git a/examples/algolia/src/app/(store)/cart/CartItemWide.tsx b/examples/algolia/src/app/(store)/cart/CartItemWide.tsx
@@ -1,14 +1,13 @@
 "use client";
-import { useCart } from "@elasticpath/react-shopper-hooks";
+import { useCartRemoveItem } from "@elasticpath/react-shopper-hooks";
 import { ProductThumbnail } from "../account/orders/[orderId]/ProductThumbnail";
 import Link from "next/link";
 import { NumberInput } from "../../../components/number-input/NumberInput";
 import { CartItemProps } from "./CartItem";
 import { LoadingDots } from "../../../components/LoadingDots";
 
 export function CartItemWide({ item }: CartItemProps) {
-  const { useScopedRemoveCartItem } = useCart();
-  const { mutate, isPending } = useScopedRemoveCartItem();
+  const { mutate, isPending } = useCartRemoveItem();
 
   return (
     <div className="flex gap-5 self-stretch">

diff --git a/examples/algolia/src/components/cart/CartDiscounts.tsx b/examples/algolia/src/components/cart/CartDiscounts.tsx
@@ -2,7 +2,10 @@
 
 import { forwardRef, Fragment, HTMLAttributes } from "react";
 import { Separator } from "../separator/Separator";
-import { PromotionCartItem, useCart } from "@elasticpath/react-shopper-hooks";
+import {
+  PromotionCartItem,
+  useCartRemoveItem,
+} from "@elasticpath/react-shopper-hooks";
 import { LoadingDots } from "../LoadingDots";
 import { XMarkIcon } from "@heroicons/react/24/solid";
 import * as React from "react";
@@ -13,8 +16,7 @@ export function CartDiscounts({
 }: {
   promotions: PromotionCartItem[];
 }) {
-  const { useScopedRemoveCartItem } = useCart();
-  const { mutate, isPending } = useScopedRemoveCartItem();
+  const { mutate, isPending } = useCartRemoveItem();
 
   return (
     promotions &&

diff --git a/examples/algolia/src/components/cart/CartSheet.tsx b/examples/algolia/src/components/cart/CartSheet.tsx
@@ -11,7 +11,7 @@ import {
 import { Button } from "../button/Button";
 import { LockClosedIcon, XMarkIcon } from "@heroicons/react/24/solid";
 import { CartItem } from "../../app/(store)/cart/CartItem";
-import { useCart } from "@elasticpath/react-shopper-hooks";
+import { useCart, useCartRemoveItem } from "@elasticpath/react-shopper-hooks";
 import { Separator } from "../separator/Separator";
 import { ShoppingBagIcon } from "@heroicons/react/24/outline";
 import { Fragment } from "react";
@@ -20,11 +20,11 @@ import Link from "next/link";
 import { LoadingDots } from "../LoadingDots";
 
 export function Cart() {
-  const { state, useScopedRemoveCartItem } = useCart();
+  const { state } = useCart();
 
   const { items, __extended } = state ?? {};
 
-  const { mutate, isPending } = useScopedRemoveCartItem();
+  const { mutate, isPending } = useCartRemoveItem();
 
   const discountedValues = (
     state?.meta?.display_price as

diff --git a/examples/algolia/src/components/number-input/EditQuantityButton.tsx b/examples/algolia/src/components/number-input/EditQuantityButton.tsx
@@ -4,7 +4,7 @@ import { cn } from "../../lib/cn";
 import { MinusIcon, PlusIcon } from "@heroicons/react/24/outline";
 import { LoadingDots } from "../LoadingDots";
 import type { CartItem } from "@moltin/sdk";
-import { useCart } from "@elasticpath/react-shopper-hooks";
+import { useCartUpdateItem } from "@elasticpath/react-shopper-hooks";
 
 export function EditItemQuantityButton({
   item,
@@ -13,8 +13,7 @@ export function EditItemQuantityButton({
   item: CartItem;
   type: "plus" | "minus";
 }) {
-  const { useScopedUpdateCartItem } = useCart();
-  const { mutate, isPending } = useScopedUpdateCartItem();
+  const { mutate, isPending } = useCartUpdateItem();
 
   return (
     <>

diff --git a/examples/algolia/src/components/product/SimpleProduct.tsx b/examples/algolia/src/components/product/SimpleProduct.tsx
@@ -2,7 +2,7 @@
 import type { SimpleProduct } from "@elasticpath/react-shopper-hooks";
 import {
   SimpleProductProvider,
-  useCart,
+  useCartAddProduct,
   useSimpleProduct,
 } from "@elasticpath/react-shopper-hooks";
 import ProductCarousel from "./carousel/ProductCarousel";
@@ -27,8 +27,7 @@ function SimpleProductDetail({
 
 function SimpleProductContainer(): JSX.Element {
   const { product } = useSimpleProduct();
-  const { useScopedAddProductToCart } = useCart();
-  const { mutate, isPending } = useScopedAddProductToCart();
+  const { mutate, isPending } = useCartAddProduct();
 
   const { main_image, response, otherImages } = product;
   const { extensions } = response.attributes;

diff --git a/examples/algolia/src/components/product/bundles/BundleProduct.tsx b/examples/algolia/src/components/product/bundles/BundleProduct.tsx
@@ -5,7 +5,7 @@ import {
   BundleProduct,
   BundleProductProvider,
   useBundle,
-  useCart,
+  useCartAddBundleItem,
 } from "@elasticpath/react-shopper-hooks";
 import { useCallback, useMemo } from "react";
 import {
@@ -37,9 +37,8 @@ const BundleProductDetail = ({
 
 function BundleProductContainer(): JSX.Element {
   const { configuredProduct, selectedOptions, components } = useBundle();
-  const { useScopedAddBundleProductToCart } = useCart();
 
-  const { mutate, isPending } = useScopedAddBundleProductToCart();
+  const { mutate, isPending } = useCartAddBundleItem();
 
   const submit = useCallback(
     async (values: { selectedOptions: FormSelectedOptions }) => {

diff --git a/examples/algolia/src/components/product/variations/VariationProduct.tsx b/examples/algolia/src/components/product/variations/VariationProduct.tsx
@@ -1,6 +1,6 @@
 "use client";
 import {
-  useCart,
+  useCartAddProduct,
   useVariationProduct,
   VariationProduct,
   VariationProductProvider,
@@ -26,8 +26,7 @@ export const VariationProductDetail = ({
 
 export function VariationProductContainer(): JSX.Element {
   const { product } = useVariationProduct();
-  const { useScopedAddProductToCart } = useCart();
-  const { mutate, isPending } = useScopedAddProductToCart();
+  const { mutate, isPending } = useCartAddProduct();
 
   const { response, main_image, otherImages } = product;
   const { extensions } = response.attributes;

diff --git a/examples/payments/package.json b/examples/payments/package.json
@@ -26,7 +26,7 @@
     "@heroicons/react": "^2.0.18",
     "@hookform/error-message": "^2.0.1",
     "@hookform/resolvers": "^3.3.2",
-    "@moltin/sdk": "^27.6.0",
+    "@moltin/sdk": "28.12.0",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.5",

diff --git a/examples/payments/src/app/(checkout)/checkout/checkout-provider.tsx b/examples/payments/src/app/(checkout)/checkout/checkout-provider.tsx
@@ -10,6 +10,7 @@ import {
   CartState,
   useAuthedAccountMember,
   useCart,
+  useCartClear,
 } from "@elasticpath/react-shopper-hooks";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Form } from "../../../components/form/Form";
@@ -47,9 +48,9 @@ type CheckoutProviderProps = {
 };
 
 export function StripeCheckoutProvider({ children }: CheckoutProviderProps) {
-  const { state, useClearCart } = useCart();
+  const { state } = useCart();
 
-  const { mutateAsync: mutateClearCart } = useClearCart();
+  const { mutateAsync: mutateClearCart } = useCartClear();
 
   const [confirmationData, setConfirmationData] =
     useState<ReturnType<typeof usePaymentComplete>["data"]>(undefined);

diff --git a/examples/payments/src/app/(store)/cart/CartItem.tsx b/examples/payments/src/app/(store)/cart/CartItem.tsx
@@ -1,5 +1,5 @@
 "use client";
-import { useCart } from "@elasticpath/react-shopper-hooks";
+import { useCartRemoveItem } from "@elasticpath/react-shopper-hooks";
 import { ProductThumbnail } from "../account/orders/[orderId]/ProductThumbnail";
 import { NumberInput } from "../../../components/number-input/NumberInput";
 import Link from "next/link";
@@ -11,8 +11,7 @@ export type CartItemProps = {
 };
 
 export function CartItem({ item }: CartItemProps) {
-  const { useScopedRemoveCartItem } = useCart();
-  const { mutate, isPending } = useScopedRemoveCartItem();
+  const { mutate, isPending } = useCartRemoveItem();
 
   return (
     <div className="flex gap-5">

diff --git a/examples/payments/src/app/(store)/cart/CartItemWide.tsx b/examples/payments/src/app/(store)/cart/CartItemWide.tsx
@@ -1,14 +1,13 @@
 "use client";
-import { useCart } from "@elasticpath/react-shopper-hooks";
+import { useCartRemoveItem } from "@elasticpath/react-shopper-hooks";
 import { ProductThumbnail } from "../account/orders/[orderId]/ProductThumbnail";
 import Link from "next/link";
 import { NumberInput } from "../../../components/number-input/NumberInput";
 import { CartItemProps } from "./CartItem";
 import { LoadingDots } from "../../../components/LoadingDots";
 
 export function CartItemWide({ item }: CartItemProps) {
-  const { useScopedRemoveCartItem } = useCart();
-  const { mutate, isPending } = useScopedRemoveCartItem();
+  const { mutate, isPending } = useCartRemoveItem();
 
   return (
     <div className="flex gap-5 self-stretch">

diff --git a/examples/payments/src/components/cart/CartDiscounts.tsx b/examples/payments/src/components/cart/CartDiscounts.tsx
@@ -2,7 +2,10 @@
 
 import { forwardRef, Fragment, HTMLAttributes } from "react";
 import { Separator } from "../separator/Separator";
-import { PromotionCartItem, useCart } from "@elasticpath/react-shopper-hooks";
+import {
+  PromotionCartItem,
+  useCartRemoveItem,
+} from "@elasticpath/react-shopper-hooks";
 import { LoadingDots } from "../LoadingDots";
 import { XMarkIcon } from "@heroicons/react/24/solid";
 import * as React from "react";
@@ -13,8 +16,7 @@ export function CartDiscounts({
 }: {
   promotions: PromotionCartItem[];
 }) {
-  const { useScopedRemoveCartItem } = useCart();
-  const { mutate, isPending } = useScopedRemoveCartItem();
+  const { mutate, isPending } = useCartRemoveItem();
 
   return (
     promotions &&

diff --git a/examples/payments/src/components/cart/CartSheet.tsx b/examples/payments/src/components/cart/CartSheet.tsx
@@ -11,7 +11,7 @@ import {
 import { Button } from "../button/Button";
 import { LockClosedIcon, XMarkIcon } from "@heroicons/react/24/solid";
 import { CartItem } from "../../app/(store)/cart/CartItem";
-import { useCart } from "@elasticpath/react-shopper-hooks";
+import { useCart, useCartRemoveItem } from "@elasticpath/react-shopper-hooks";
 import { Separator } from "../separator/Separator";
 import { ShoppingBagIcon } from "@heroicons/react/24/outline";
 import { Fragment } from "react";
@@ -20,11 +20,11 @@ import Link from "next/link";
 import { LoadingDots } from "../LoadingDots";
 
 export function Cart() {
-  const { state, useScopedRemoveCartItem } = useCart();
+  const { state } = useCart();
 
   const { items, __extended } = state ?? {};
 
-  const { mutate, isPending } = useScopedRemoveCartItem();
+  const { mutate, isPending } = useCartRemoveItem();
 
   const discountedValues = (
     state?.meta?.display_price as

diff --git a/examples/payments/src/components/number-input/EditQuantityButton.tsx b/examples/payments/src/components/number-input/EditQuantityButton.tsx
@@ -4,7 +4,7 @@ import { cn } from "../../lib/cn";
 import { MinusIcon, PlusIcon } from "@heroicons/react/24/outline";
 import { LoadingDots } from "../LoadingDots";
 import type { CartItem } from "@moltin/sdk";
-import { useCart } from "@elasticpath/react-shopper-hooks";
+import { useCartUpdateItem } from "@elasticpath/react-shopper-hooks";
 
 export function EditItemQuantityButton({
   item,
@@ -13,8 +13,7 @@ export function EditItemQuantityButton({
   item: CartItem;
   type: "plus" | "minus";
 }) {
-  const { useScopedUpdateCartItem } = useCart();
-  const { mutate, isPending } = useScopedUpdateCartItem();
+  const { mutate, isPending } = useCartUpdateItem();
 
   return (
     <>

diff --git a/examples/payments/src/components/product/SimpleProduct.tsx b/examples/payments/src/components/product/SimpleProduct.tsx
@@ -2,7 +2,7 @@
 import type { SimpleProduct } from "@elasticpath/react-shopper-hooks";
 import {
   SimpleProductProvider,
-  useCart,
+  useCartAddProduct,
   useSimpleProduct,
 } from "@elasticpath/react-shopper-hooks";
 import ProductCarousel from "./carousel/ProductCarousel";
@@ -27,8 +27,7 @@ function SimpleProductDetail({
 
 function SimpleProductContainer(): JSX.Element {
   const { product } = useSimpleProduct();
-  const { useScopedAddProductToCart } = useCart();
-  const { mutate, isPending } = useScopedAddProductToCart();
+  const { mutate, isPending } = useCartAddProduct();
 
   const { main_image, response, otherImages } = product;
   const { extensions } = response.attributes;

diff --git a/examples/payments/src/components/product/bundles/BundleProduct.tsx b/examples/payments/src/components/product/bundles/BundleProduct.tsx
@@ -5,7 +5,7 @@ import {
   BundleProduct,
   BundleProductProvider,
   useBundle,
-  useCart,
+  useCartAddBundleItem,
 } from "@elasticpath/react-shopper-hooks";
 import { useCallback, useMemo } from "react";
 import {
@@ -37,9 +37,8 @@ const BundleProductDetail = ({
 
 function BundleProductContainer(): JSX.Element {
   const { configuredProduct, selectedOptions, components } = useBundle();
-  const { useScopedAddBundleProductToCart } = useCart();
 
-  const { mutate, isPending } = useScopedAddBundleProductToCart();
+  const { mutate, isPending } = useCartAddBundleItem();
 
   const submit = useCallback(
     async (values: { selectedOptions: FormSelectedOptions }) => {

diff --git a/examples/payments/src/components/product/variations/VariationProduct.tsx b/examples/payments/src/components/product/variations/VariationProduct.tsx
@@ -1,6 +1,6 @@
 "use client";
 import {
-  useCart,
+  useCartAddProduct,
   useVariationProduct,
   VariationProduct,
   VariationProductProvider,
@@ -26,8 +26,7 @@ export const VariationProductDetail = ({
 
 export function VariationProductContainer(): JSX.Element {
   const { product } = useVariationProduct();
-  const { useScopedAddProductToCart } = useCart();
-  const { mutate, isPending } = useScopedAddProductToCart();
+  const { mutate, isPending } = useCartAddProduct();
 
   const { response, main_image, otherImages } = product;
   const { extensions } = response.attributes;

diff --git a/examples/simple/package.json b/examples/simple/package.json
@@ -19,7 +19,7 @@
     "start:e2e": "NODE_ENV=test next start"
   },
   "dependencies": {
-    "@moltin/sdk": "^27.6.0",
+    "@moltin/sdk": "28.12.0",
     "@elasticpath/react-shopper-hooks": "workspace:*",
     "@elasticpath/shopper-common": "workspace:*",
     "clsx": "^1.2.1",