diff --git a/components/checkout/PaymentMethodView/PaymentMethodView.tsx b/components/checkout/PaymentMethodView/PaymentMethodView.tsx index 972073756..aad386d36 100644 --- a/components/checkout/PaymentMethodView/PaymentMethodView.tsx +++ b/components/checkout/PaymentMethodView/PaymentMethodView.tsx @@ -1,7 +1,7 @@ import { FC } from 'react' import cn from 'classnames' -import useAddCard from '@framework/customer/card/use-add-item' +// import useAddCard from '@framework/customer/card/use-add-item' import { Button, Text } from '@components/ui' import { useUI } from '@components/ui/context' import SidebarLayout from '@components/common/SidebarLayout' @@ -24,24 +24,24 @@ interface Form extends HTMLFormElement { const PaymentMethodView: FC = () => { const { setSidebarView } = useUI() - const addCard = useAddCard() + // const addCard = useAddCard() async function handleSubmit(event: React.ChangeEvent
) { event.preventDefault() - await addCard({ - cardHolder: event.target.cardHolder.value, - cardNumber: event.target.cardNumber.value, - cardExpireDate: event.target.cardExpireDate.value, - cardCvc: event.target.cardCvc.value, - firstName: event.target.firstName.value, - lastName: event.target.lastName.value, - company: event.target.company.value, - streetNumber: event.target.streetNumber.value, - zipCode: event.target.zipCode.value, - city: event.target.city.value, - country: event.target.country.value, - }) + // await addCard({ + // cardHolder: event.target.cardHolder.value, + // cardNumber: event.target.cardNumber.value, + // cardExpireDate: event.target.cardExpireDate.value, + // cardCvc: event.target.cardCvc.value, + // firstName: event.target.firstName.value, + // lastName: event.target.lastName.value, + // company: event.target.company.value, + // streetNumber: event.target.streetNumber.value, + // zipCode: event.target.zipCode.value, + // city: event.target.city.value, + // country: event.target.country.value, + // }) setSidebarView('CHECKOUT_VIEW') } @@ -49,14 +49,14 @@ const PaymentMethodView: FC = () => { return ( setSidebarView('CHECKOUT_VIEW')}> -
+
Payment Method
-
+
@@ -74,8 +74,8 @@ const PaymentMethodView: FC = () => {
-
-
+
+
@@ -99,7 +99,7 @@ const PaymentMethodView: FC = () => {
-
+
@@ -117,7 +117,7 @@ const PaymentMethodView: FC = () => {
-
+
diff --git a/components/checkout/ShippingView/ShippingView.tsx b/components/checkout/ShippingView/ShippingView.tsx index ed82bc8a2..d886445d7 100644 --- a/components/checkout/ShippingView/ShippingView.tsx +++ b/components/checkout/ShippingView/ShippingView.tsx @@ -4,7 +4,7 @@ import cn from 'classnames' import Button from '@components/ui/Button' import { useUI } from '@components/ui/context' import SidebarLayout from '@components/common/SidebarLayout' -import useAddAddress from '@framework/customer/address/use-add-item' +// import useAddAddress from '@framework/customer/address/use-add-item' import s from './ShippingView.module.css' @@ -24,22 +24,22 @@ interface Form extends HTMLFormElement { const PaymentMethodView: FC = () => { const { setSidebarView } = useUI() - const addAddress = useAddAddress() + // const addAddress = useAddAddress() async function handleSubmit(event: React.ChangeEvent) { event.preventDefault() - await addAddress({ - type: event.target.type.value, - firstName: event.target.firstName.value, - lastName: event.target.lastName.value, - company: event.target.company.value, - streetNumber: event.target.streetNumber.value, - apartments: event.target.streetNumber.value, - zipCode: event.target.zipCode.value, - city: event.target.city.value, - country: event.target.country.value, - }) + // await addAddress({ + // type: event.target.type.value, + // firstName: event.target.firstName.value, + // lastName: event.target.lastName.value, + // company: event.target.company.value, + // streetNumber: event.target.streetNumber.value, + // apartments: event.target.streetNumber.value, + // zipCode: event.target.zipCode.value, + // city: event.target.city.value, + // country: event.target.country.value, + // }) setSidebarView('CHECKOUT_VIEW') } @@ -47,23 +47,23 @@ const PaymentMethodView: FC = () => { return ( setSidebarView('CHECKOUT_VIEW')}> -
-

+
+

Shipping

-
+
Same as billing address
-
+
Use a different shipping address
-
-
+
+
@@ -87,7 +87,7 @@ const PaymentMethodView: FC = () => {
-
+
@@ -105,7 +105,7 @@ const PaymentMethodView: FC = () => {
-
+
diff --git a/framework/woocommerce/customer/address/use-add-item.tsx.t b/framework/woocommerce/customer/address/use-add-item.tsx.t new file mode 100644 index 000000000..bb32f3816 --- /dev/null +++ b/framework/woocommerce/customer/address/use-add-item.tsx.t @@ -0,0 +1,21 @@ +// import type { HookFetcherFn, MutationHook } from '../../utils/types' +// import type { AddItemHook } from '../../types/customer/address' +// import type { WooCommerceProvider } from '../..' + +// import { useHook, useMutationHook } from '../../utils/use-hook' +// import { mutationFetcher } from '../../utils/default-fetcher' + +// export type UseAddItem< +// H extends MutationHook> = MutationHook +// > = ReturnType + +// export const fetcher: HookFetcherFn = mutationFetcher + +// const fn = (provider: WooCommerceProvider) => provider.customer?.address?.useAddItem! + +// const useAddItem: UseAddItem = (...args) => { +// const hook = useHook(fn) +// return useMutationHook({ fetcher, ...hook })(...args) +// } + +// export default useAddItem diff --git a/framework/woocommerce/customer/address/use-addresses.tsx.t b/framework/woocommerce/customer/address/use-addresses.tsx.t new file mode 100644 index 000000000..7fc12924c --- /dev/null +++ b/framework/woocommerce/customer/address/use-addresses.tsx.t @@ -0,0 +1,34 @@ +import type { SWRHook, HookFetcherFn } from '../../utils/types' +import type { GetAddressesHook } from '../../types/customer/address' + +import Cookies from 'js-cookie' + +import { useHook, useSWRHook } from '../../utils/use-hook' +import { Provider, useCommerce } from '../..' + +export type UseAddresses< + H extends SWRHook> = SWRHook +> = ReturnType + +export const fetcher: HookFetcherFn = async ({ + options, + input: { cartId }, + fetch, +}) => { + return cartId ? await fetch(options) : null +} + +const fn = (provider: Provider) => provider.customer?.address?.useAddresses! + +const useAddresses: UseAddresses = (input) => { + const hook = useHook(fn) + const { cartCookie } = useCommerce() + const fetcherFn = hook.fetcher ?? fetcher + const wrapper: typeof fetcher = (context) => { + context.input.cartId = Cookies.get(cartCookie) + return fetcherFn(context) + } + return useSWRHook({ ...hook, fetcher: wrapper })(input) +} + +export default useAddresses diff --git a/framework/woocommerce/customer/address/use-remove-item.tsx.t b/framework/woocommerce/customer/address/use-remove-item.tsx.t new file mode 100644 index 000000000..820a65dad --- /dev/null +++ b/framework/woocommerce/customer/address/use-remove-item.tsx.t @@ -0,0 +1,21 @@ +import type { HookFetcherFn, MutationHook } from '../../utils/types' +import type { RemoveItemHook } from '../../types/customer/address' +import type { Provider } from '../..' + +import { useHook, useMutationHook } from '../../utils/use-hook' +import { mutationFetcher } from '../../utils/default-fetcher' + +export type UseRemoveItem< + H extends MutationHook> = MutationHook +> = ReturnType + +export const fetcher: HookFetcherFn = mutationFetcher + +const fn = (provider: Provider) => provider.customer?.address?.useRemoveItem! + +const useRemoveItem: UseRemoveItem = (input) => { + const hook = useHook(fn) + return useMutationHook({ fetcher, ...hook })(input) +} + +export default useRemoveItem diff --git a/framework/woocommerce/customer/address/use-update-item.tsx.t b/framework/woocommerce/customer/address/use-update-item.tsx.t new file mode 100644 index 000000000..d05882296 --- /dev/null +++ b/framework/woocommerce/customer/address/use-update-item.tsx.t @@ -0,0 +1,21 @@ +import type { HookFetcherFn, MutationHook } from '../../utils/types' +import type { UpdateItemHook } from '../../types/customer/address' +import type { Provider } from '../..' + +import { useHook, useMutationHook } from '../../utils/use-hook' +import { mutationFetcher } from '../../utils/default-fetcher' + +export type UseUpdateItem< + H extends MutationHook> = MutationHook +> = ReturnType + +export const fetcher: HookFetcherFn = mutationFetcher + +const fn = (provider: Provider) => provider.customer?.address?.useUpdateItem! + +const useUpdateItem: UseUpdateItem = (input) => { + const hook = useHook(fn) + return useMutationHook({ fetcher, ...hook })(input) +} + +export default useUpdateItem diff --git a/framework/woocommerce/customer/card/use-add-item.tsx.t b/framework/woocommerce/customer/card/use-add-item.tsx.t new file mode 100644 index 000000000..7b4ffdb17 --- /dev/null +++ b/framework/woocommerce/customer/card/use-add-item.tsx.t @@ -0,0 +1,21 @@ +import type { HookFetcherFn, MutationHook } from '../../utils/types' +import type { AddItemHook } from '../../types/customer/card' +import type { Provider } from '../..' + +import { useHook, useMutationHook } from '../../utils/use-hook' +import { mutationFetcher } from '../../utils/default-fetcher' + +export type UseAddItem< + H extends MutationHook> = MutationHook +> = ReturnType + +export const fetcher: HookFetcherFn = mutationFetcher + +const fn = (provider: Provider) => provider.customer?.card?.useAddItem! + +const useAddItem: UseAddItem = (...args) => { + const hook = useHook(fn) + return useMutationHook({ fetcher, ...hook })(...args) +} + +export default useAddItem diff --git a/framework/woocommerce/customer/card/use-cards.tsx.t b/framework/woocommerce/customer/card/use-cards.tsx.t new file mode 100644 index 000000000..57099504f --- /dev/null +++ b/framework/woocommerce/customer/card/use-cards.tsx.t @@ -0,0 +1,34 @@ +import type { SWRHook, HookFetcherFn } from '../../utils/types' +import type { GetCardsHook } from '../../types/customer/card' + +import Cookies from 'js-cookie' + +import { useHook, useSWRHook } from '../../utils/use-hook' +import { Provider, useCommerce } from '../..' + +export type UseCards< + H extends SWRHook> = SWRHook +> = ReturnType + +export const fetcher: HookFetcherFn = async ({ + options, + input: { cartId }, + fetch, +}) => { + return cartId ? await fetch(options) : null +} + +const fn = (provider: Provider) => provider.customer?.card?.useCards! + +const useCards: UseCards = (input) => { + const hook = useHook(fn) + const { cartCookie } = useCommerce() + const fetcherFn = hook.fetcher ?? fetcher + const wrapper: typeof fetcher = (context) => { + context.input.cartId = Cookies.get(cartCookie) + return fetcherFn(context) + } + return useSWRHook({ ...hook, fetcher: wrapper })(input) +} + +export default useCards diff --git a/framework/woocommerce/customer/card/use-remove-item.tsx.t b/framework/woocommerce/customer/card/use-remove-item.tsx.t new file mode 100644 index 000000000..1d85fa636 --- /dev/null +++ b/framework/woocommerce/customer/card/use-remove-item.tsx.t @@ -0,0 +1,21 @@ +import type { HookFetcherFn, MutationHook } from '../../utils/types' +import type { RemoveItemHook } from '../../types/customer/card' +import type { Provider } from '../..' + +import { useHook, useMutationHook } from '../../utils/use-hook' +import { mutationFetcher } from '../../utils/default-fetcher' + +export type UseRemoveItem< + H extends MutationHook> = MutationHook +> = ReturnType + +export const fetcher: HookFetcherFn = mutationFetcher + +const fn = (provider: Provider) => provider.customer?.card?.useRemoveItem! + +const useRemoveItem: UseRemoveItem = (input) => { + const hook = useHook(fn) + return useMutationHook({ fetcher, ...hook })(input) +} + +export default useRemoveItem diff --git a/framework/woocommerce/customer/card/use-update-item.tsx.t b/framework/woocommerce/customer/card/use-update-item.tsx.t new file mode 100644 index 000000000..cd8837d7f --- /dev/null +++ b/framework/woocommerce/customer/card/use-update-item.tsx.t @@ -0,0 +1,21 @@ +import type { HookFetcherFn, MutationHook } from '../../utils/types' +import type { UpdateItemHook } from '../../types/customer/card' +import type { Provider } from '../..' + +import { useHook, useMutationHook } from '../../utils/use-hook' +import { mutationFetcher } from '../../utils/default-fetcher' + +export type UseUpdateItem< + H extends MutationHook> = MutationHook +> = ReturnType + +export const fetcher: HookFetcherFn = mutationFetcher + +const fn = (provider: Provider) => provider?.customer?.card?.useUpdateItem! + +const useUpdateItem: UseUpdateItem = (input) => { + const hook = useHook(fn) + return useMutationHook({ fetcher, ...hook })(input) +} + +export default useUpdateItem diff --git a/framework/woocommerce/types/customer.ts b/framework/woocommerce/types/customer.ts deleted file mode 100644 index 427bc0b03..000000000 --- a/framework/woocommerce/types/customer.ts +++ /dev/null @@ -1,5 +0,0 @@ -import * as Core from '@commerce/types/customer' - -export * from '@commerce/types/customer' - -export type CustomerSchema = Core.CustomerSchema diff --git a/framework/woocommerce/types/customer/address.ts b/framework/woocommerce/types/customer/address.ts new file mode 100644 index 000000000..5b6ca4b49 --- /dev/null +++ b/framework/woocommerce/types/customer/address.ts @@ -0,0 +1,93 @@ +export interface Address { + id: string; + mask: string; +} + +export interface AddressFields { + type: string; + firstName: string; + lastName: string; + company: string; + streetNumber: string; + apartments: string; + zipCode: string; + city: string; + country: string; +} + +export type CustomerAddressTypes = { + address?: Address; + fields: AddressFields; +} + +export type GetAddressesHook = { + data: T['address'] | null + input: {} + fetcherInput: { cartId?: string } + swrState: { isEmpty: boolean } +} + +export type AddItemHook = { + data: T['address'] + input?: T['fields'] + fetcherInput: T['fields'] + body: { item: T['fields'] } + actionInput: T['fields'] +} + +export type UpdateItemHook = { + data: T['address'] | null + input: { item?: T['fields']; wait?: number } + fetcherInput: { itemId: string; item: T['fields'] } + body: { itemId: string; item: T['fields'] } + actionInput: T['fields'] & { id: string } +} + +export type RemoveItemHook = { + data: T['address'] | null + input: { item?: T['fields'] } + fetcherInput: { itemId: string } + body: { itemId: string } + actionInput: { id: string } +} + +export type CustomerAddressHooks = { + getAddresses: GetAddressesHook + addItem: AddItemHook + updateItem: UpdateItemHook + removeItem: RemoveItemHook +} + +export type AddresssHandler = GetAddressesHook & { + body: { cartId?: string } +} + +export type AddItemHandler = AddItemHook & { + body: { cartId: string } +} + +export type UpdateItemHandler = + UpdateItemHook & { + data: T['address'] + body: { cartId: string } + } + +export type RemoveItemHandler = + RemoveItemHook & { + body: { cartId: string } + } + + +export type CustomerAddressHandlers = { + getAddresses: GetAddressesHook + addItem: AddItemHandler + updateItem: UpdateItemHandler + removeItem: RemoveItemHandler +} + +export type CustomerAddressSchema = { + endpoint: { + options: {} + handlers: CustomerAddressHandlers + } +} diff --git a/framework/woocommerce/types/customer/card.ts b/framework/woocommerce/types/customer/card.ts new file mode 100644 index 000000000..a8731411f --- /dev/null +++ b/framework/woocommerce/types/customer/card.ts @@ -0,0 +1,96 @@ +export interface Card { + id: string; + mask: string; + provider: string; +} + +export interface CardFields { + cardHolder: string; + cardNumber: string; + cardExpireDate: string; + cardCvc: string; + firstName: string; + lastName: string; + company: string; + streetNumber: string; + zipCode: string; + city: string; + country: string; +} + +export type CustomerCardTypes = { + card?: Card; + fields: CardFields; +} + +export type GetCardsHook = { + data: T['card'] | null + input: {} + fetcherInput: { cartId?: string } + swrState: { isEmpty: boolean } +} + +export type AddItemHook = { + data: T['card'] + input?: T['fields'] + fetcherInput: T['fields'] + body: { item: T['fields'] } + actionInput: T['fields'] +} + +export type UpdateItemHook = { + data: T['card'] | null + input: { item?: T['fields']; wait?: number } + fetcherInput: { itemId: string; item: T['fields'] } + body: { itemId: string; item: T['fields'] } + actionInput: T['fields'] & { id: string } +} + +export type RemoveItemHook = { + data: T['card'] | null + input: { item?: T['fields'] } + fetcherInput: { itemId: string } + body: { itemId: string } + actionInput: { id: string } +} + +export type CustomerCardHooks = { + getCards: GetCardsHook + addItem: AddItemHook + updateItem: UpdateItemHook + removeItem: RemoveItemHook +} + +export type CardsHandler = GetCardsHook & { + body: { cartId?: string } +} + +export type AddItemHandler = AddItemHook & { + body: { cartId: string } +} + +export type UpdateItemHandler = + UpdateItemHook & { + data: T['card'] + body: { cartId: string } + } + +export type RemoveItemHandler = + RemoveItemHook & { + body: { cartId: string } + } + + +export type CustomerCardHandlers = { + getCards: GetCardsHook + addItem: AddItemHandler + updateItem: UpdateItemHandler + removeItem: RemoveItemHandler +} + +export type CustomerCardSchema = { + endpoint: { + options: {} + handlers: CustomerCardHandlers + } +} diff --git a/framework/woocommerce/types/customer/index.ts b/framework/woocommerce/types/customer/index.ts new file mode 100644 index 000000000..70c437c29 --- /dev/null +++ b/framework/woocommerce/types/customer/index.ts @@ -0,0 +1,25 @@ +export * as Card from "./card" +export * as Address from "./address" + +// TODO: define this type +export type Customer = any + +export type CustomerTypes = { + customer: Customer +} + +export type CustomerHook = { + data: T['customer'] | null + fetchData: { customer: T['customer'] } | null +} + +export type CustomerSchema = { + endpoint: { + options: {} + handlers: { + getLoggedInCustomer: { + data: { customer: T['customer'] } | null + } + } + } +}