From 12f0d90e91e93c7f8b5608b5455e4726dd6282e9 Mon Sep 17 00:00:00 2001 From: cond0r Date: Thu, 27 May 2021 17:08:25 +0300 Subject: [PATCH] Update api endpoints, types & fixes --- components/cart/CartItem/CartItem.tsx | 2 +- components/common/Footer/Footer.tsx | 2 +- .../HomeAllProductsGrid.tsx | 2 +- components/common/Layout/Layout.tsx | 2 +- components/common/UserNav/UserNav.tsx | 2 +- .../product/ProductCard/ProductCard.tsx | 2 +- .../product/ProductView/ProductView.tsx | 4 +- components/product/Swatch/Swatch.module.css | 6 ++- components/product/Swatch/Swatch.tsx | 3 +- components/product/helpers.ts | 2 +- .../WishlistButton/WishlistButton.tsx | 2 +- .../wishlist/WishlistCard/WishlistCard.tsx | 5 +- .../bigcommerce/api/operations/get-page.ts | 3 +- framework/bigcommerce/cart/use-add-item.tsx | 2 +- framework/bigcommerce/cart/use-cart.tsx | 2 +- .../bigcommerce/cart/use-remove-item.tsx | 4 +- .../bigcommerce/cart/use-update-item.tsx | 2 +- framework/bigcommerce/lib/normalize.ts | 12 +++++ framework/bigcommerce/types/page.ts | 4 +- framework/commerce/index.tsx | 51 ++++++++----------- framework/commerce/types/cart.ts | 14 ++++- framework/commerce/types/page.ts | 15 +++++- framework/commerce/types/product.ts | 5 +- framework/shopify/api/endpoints/cart.ts | 1 + .../shopify/api/endpoints/catalog/products.ts | 1 + framework/shopify/api/endpoints/checkout.ts | 1 + framework/shopify/api/endpoints/customer.ts | 1 + framework/shopify/api/endpoints/login.ts | 1 + framework/shopify/api/endpoints/logout.ts | 1 + framework/shopify/api/endpoints/signup.ts | 1 + framework/shopify/api/endpoints/wishlist.ts | 1 + framework/shopify/api/operations/get-page.ts | 12 +++-- .../shopify/api/operations/get-product.ts | 36 +++++++++---- framework/shopify/auth/use-login.tsx | 33 +++++------- framework/shopify/auth/use-logout.tsx | 3 +- framework/shopify/auth/use-signup.tsx | 23 ++++----- framework/shopify/cart/use-remove-item.tsx | 2 +- framework/shopify/customer/get-customer-id.ts | 27 ---------- framework/shopify/index.tsx | 2 +- framework/shopify/provider.ts | 2 +- framework/shopify/types/page.ts | 4 +- framework/shopify/utils/checkout-to-cart.ts | 2 +- framework/shopify/utils/normalize.ts | 9 ++-- .../utils/queries/get-checkout-query.ts | 4 ++ lib/colors.ts | 4 +- pages/search.tsx | 3 +- 46 files changed, 174 insertions(+), 148 deletions(-) create mode 100644 framework/shopify/api/endpoints/cart.ts create mode 100644 framework/shopify/api/endpoints/catalog/products.ts create mode 100644 framework/shopify/api/endpoints/checkout.ts create mode 100644 framework/shopify/api/endpoints/customer.ts create mode 100644 framework/shopify/api/endpoints/login.ts create mode 100644 framework/shopify/api/endpoints/logout.ts create mode 100644 framework/shopify/api/endpoints/signup.ts create mode 100644 framework/shopify/api/endpoints/wishlist.ts delete mode 100644 framework/shopify/customer/get-customer-id.ts diff --git a/components/cart/CartItem/CartItem.tsx b/components/cart/CartItem/CartItem.tsx index db886b7a7..bc614722f 100644 --- a/components/cart/CartItem/CartItem.tsx +++ b/components/cart/CartItem/CartItem.tsx @@ -5,7 +5,7 @@ import Link from 'next/link' import s from './CartItem.module.css' import { Trash, Plus, Minus } from '@components/icons' import { useUI } from '@components/ui/context' -import type { LineItem } from '@framework/types/cart' +import type { LineItem } from '@commerce/types/cart' import usePrice from '@framework/product/use-price' import useUpdateItem from '@framework/cart/use-update-item' import useRemoveItem from '@framework/cart/use-remove-item' diff --git a/components/common/Footer/Footer.tsx b/components/common/Footer/Footer.tsx index af14b150b..a15cfdc2d 100644 --- a/components/common/Footer/Footer.tsx +++ b/components/common/Footer/Footer.tsx @@ -2,7 +2,7 @@ import { FC } from 'react' import cn from 'classnames' import Link from 'next/link' import { useRouter } from 'next/router' -import type { Page } from '@framework/types/page' +import type { Page } from '@commerce/types/page' import getSlug from '@lib/get-slug' import { Github, Vercel } from '@components/icons' import { Logo, Container } from '@components/ui' diff --git a/components/common/HomeAllProductsGrid/HomeAllProductsGrid.tsx b/components/common/HomeAllProductsGrid/HomeAllProductsGrid.tsx index 422458a95..8d8ea1adf 100644 --- a/components/common/HomeAllProductsGrid/HomeAllProductsGrid.tsx +++ b/components/common/HomeAllProductsGrid/HomeAllProductsGrid.tsx @@ -1,6 +1,6 @@ import { FC } from 'react' import Link from 'next/link' -import type { Product } from '@framework/types/product' +import type { Product } from '@commerce/types/product' import { Grid } from '@components/ui' import { ProductCard } from '@components/product' import s from './HomeAllProductsGrid.module.css' diff --git a/components/common/Layout/Layout.tsx b/components/common/Layout/Layout.tsx index d162aae75..37f5933e7 100644 --- a/components/common/Layout/Layout.tsx +++ b/components/common/Layout/Layout.tsx @@ -11,7 +11,7 @@ import CartSidebarView from '@components/cart/CartSidebarView' import LoginView from '@components/auth/LoginView' import { CommerceProvider } from '@framework' -import type { Page } from '@framework/types/page' +import type { Page } from '@commerce/types/page' const Loading = () => (
diff --git a/components/common/UserNav/UserNav.tsx b/components/common/UserNav/UserNav.tsx index 7a13f86bf..83422a8cf 100644 --- a/components/common/UserNav/UserNav.tsx +++ b/components/common/UserNav/UserNav.tsx @@ -1,7 +1,7 @@ import { FC } from 'react' import Link from 'next/link' import cn from 'classnames' -import type { LineItem } from '@framework/types/cart' +import type { LineItem } from '@commerce/types/cart' import useCart from '@framework/cart/use-cart' import useCustomer from '@framework/customer/use-customer' import { Avatar } from '@components/common' diff --git a/components/product/ProductCard/ProductCard.tsx b/components/product/ProductCard/ProductCard.tsx index 0b0ad3df0..f23b01d35 100644 --- a/components/product/ProductCard/ProductCard.tsx +++ b/components/product/ProductCard/ProductCard.tsx @@ -1,7 +1,7 @@ import { FC } from 'react' import cn from 'classnames' import Link from 'next/link' -import type { Product } from '@framework/types/product' +import type { Product } from '@commerce/types/product' import s from './ProductCard.module.css' import Image, { ImageProps } from 'next/image' import WishlistButton from '@components/wishlist/WishlistButton' diff --git a/components/product/ProductView/ProductView.tsx b/components/product/ProductView/ProductView.tsx index 96cad2e92..efa82a5db 100644 --- a/components/product/ProductView/ProductView.tsx +++ b/components/product/ProductView/ProductView.tsx @@ -5,7 +5,7 @@ import { FC, useEffect, useState } from 'react' import s from './ProductView.module.css' import { Swatch, ProductSlider } from '@components/product' import { Button, Container, Text, useUI } from '@components/ui' -import type { Product } from '@framework/types/product' +import type { Product } from '@commerce/types/product' import usePrice from '@framework/product/use-price' import { useAddItem } from '@framework/cart' import { getVariant, SelectedOptions } from '../helpers' @@ -18,6 +18,8 @@ interface Props { } const ProductView: FC = ({ product }) => { + // TODO: fix this missing argument issue + /* @ts-ignore */ const addItem = useAddItem() const { price } = usePrice({ amount: product.price.value, diff --git a/components/product/Swatch/Swatch.module.css b/components/product/Swatch/Swatch.module.css index 051435afd..58a42a27b 100644 --- a/components/product/Swatch/Swatch.module.css +++ b/components/product/Swatch/Swatch.module.css @@ -1,8 +1,10 @@ .root { composes: root from 'components/ui/Button/Button.module.css'; - @apply h-12 w-12 bg-primary text-primary rounded-full mr-3 inline-flex + @apply h-12 py-0 px-3 bg-primary text-primary rounded-full mr-3 inline-flex items-center justify-center cursor-pointer transition duration-150 ease-in-out - p-0 shadow-none border-gray-200 border box-border; + shadow-none border-gray-200 border box-border; + + min-width: 3em; & > span { @apply absolute; diff --git a/components/product/Swatch/Swatch.tsx b/components/product/Swatch/Swatch.tsx index c38803b5b..82d0b4e27 100644 --- a/components/product/Swatch/Swatch.tsx +++ b/components/product/Swatch/Swatch.tsx @@ -28,7 +28,7 @@ const Swatch: FC & Props> = ({ s.root, { [s.active]: active, - [s.size]: variant === 'size', + [s.size]: variant !== 'color', [s.color]: color, [s.dark]: color ? isDark(color) : false, }, @@ -40,6 +40,7 @@ const Swatch: FC & Props> = ({ className={rootClassName} style={color ? { backgroundColor: color } : {}} aria-label="Variant Swatch" + {...(variant === 'color' && { title: label })} {...props} > {variant === 'color' && active && ( diff --git a/components/product/helpers.ts b/components/product/helpers.ts index 4e9d0f591..19ec2a171 100644 --- a/components/product/helpers.ts +++ b/components/product/helpers.ts @@ -1,4 +1,4 @@ -import type { Product } from '@framework/types/product' +import type { Product } from '@commerce/types/product' export type SelectedOptions = Record export function getVariant(product: Product, opts: SelectedOptions) { diff --git a/components/wishlist/WishlistButton/WishlistButton.tsx b/components/wishlist/WishlistButton/WishlistButton.tsx index 7f91e39c0..5841de11e 100644 --- a/components/wishlist/WishlistButton/WishlistButton.tsx +++ b/components/wishlist/WishlistButton/WishlistButton.tsx @@ -6,7 +6,7 @@ import useAddItem from '@framework/wishlist/use-add-item' import useCustomer from '@framework/customer/use-customer' import useWishlist from '@framework/wishlist/use-wishlist' import useRemoveItem from '@framework/wishlist/use-remove-item' -import type { Product, ProductVariant } from '@framework/types/product' +import type { Product, ProductVariant } from '@commerce/types/product' type Props = { productId: Product['id'] diff --git a/components/wishlist/WishlistCard/WishlistCard.tsx b/components/wishlist/WishlistCard/WishlistCard.tsx index 84d2698e2..52b17e6da 100644 --- a/components/wishlist/WishlistCard/WishlistCard.tsx +++ b/components/wishlist/WishlistCard/WishlistCard.tsx @@ -7,7 +7,7 @@ import { Trash } from '@components/icons' import { Button, Text } from '@components/ui' import { useUI } from '@components/ui/context' -import type { Product } from '@framework/types/product' +import type { Product } from '@commerce/types/product' import usePrice from '@framework/product/use-price' import useAddItem from '@framework/cart/use-add-item' import useRemoveItem from '@framework/wishlist/use-remove-item' @@ -26,6 +26,9 @@ const WishlistCard: FC = ({ product }) => { const removeItem = useRemoveItem({ wishlist: { includeProducts: true } }) const [loading, setLoading] = useState(false) const [removing, setRemoving] = useState(false) + + // TODO: fix this missing argument issue + /* @ts-ignore */ const addItem = useAddItem() const { openSidebar } = useUI() diff --git a/framework/bigcommerce/api/operations/get-page.ts b/framework/bigcommerce/api/operations/get-page.ts index e8f852e92..6a1fea9d0 100644 --- a/framework/bigcommerce/api/operations/get-page.ts +++ b/framework/bigcommerce/api/operations/get-page.ts @@ -5,6 +5,7 @@ import type { import type { GetPageOperation, Page } from '../../types/page' import type { RecursivePartial, RecursiveRequired } from '../utils/types' import type { BigcommerceConfig, Provider } from '..' +import { normalizePage } from '../../lib/normalize' export default function getPageOperation({ commerce, @@ -44,7 +45,7 @@ export default function getPageOperation({ const page = firstPage as RecursiveRequired if (preview || page?.is_visible) { - return { page } + return { page: normalizePage(page as any) } } return {} } diff --git a/framework/bigcommerce/cart/use-add-item.tsx b/framework/bigcommerce/cart/use-add-item.tsx index de6ee226c..627697db6 100644 --- a/framework/bigcommerce/cart/use-add-item.tsx +++ b/framework/bigcommerce/cart/use-add-item.tsx @@ -2,7 +2,7 @@ import { useCallback } from 'react' import type { MutationHook } from '@commerce/utils/types' import { CommerceError } from '@commerce/utils/errors' import useAddItem, { UseAddItem } from '@commerce/cart/use-add-item' -import type { AddItemHook } from '../types/cart' +import type { AddItemHook } from '@commerce/types/cart' import useCart from './use-cart' export default useAddItem as UseAddItem diff --git a/framework/bigcommerce/cart/use-cart.tsx b/framework/bigcommerce/cart/use-cart.tsx index b32f2d2ec..9e8cfc9a1 100644 --- a/framework/bigcommerce/cart/use-cart.tsx +++ b/framework/bigcommerce/cart/use-cart.tsx @@ -1,7 +1,7 @@ import { useMemo } from 'react' import { SWRHook } from '@commerce/utils/types' import useCart, { UseCart } from '@commerce/cart/use-cart' -import type { GetCartHook } from '../types/cart' +import type { GetCartHook } from '@commerce/types/cart' export default useCart as UseCart diff --git a/framework/bigcommerce/cart/use-remove-item.tsx b/framework/bigcommerce/cart/use-remove-item.tsx index 44f8cadd5..605fbe74e 100644 --- a/framework/bigcommerce/cart/use-remove-item.tsx +++ b/framework/bigcommerce/cart/use-remove-item.tsx @@ -5,11 +5,11 @@ import type { } from '@commerce/utils/types' import { ValidationError } from '@commerce/utils/errors' import useRemoveItem, { UseRemoveItem } from '@commerce/cart/use-remove-item' -import type { Cart, LineItem, RemoveItemHook } from '../types/cart' +import type { Cart, LineItem, RemoveItemHook } from '@commerce/types/cart' import useCart from './use-cart' export type RemoveItemFn = T extends LineItem - ? (input?: RemoveItemActionInput) => Promise + ? (input?: RemoveItemActionInput) => Promise : (input: RemoveItemActionInput) => Promise export type RemoveItemActionInput = T extends LineItem diff --git a/framework/bigcommerce/cart/use-update-item.tsx b/framework/bigcommerce/cart/use-update-item.tsx index 3ae2af02a..0c97d3762 100644 --- a/framework/bigcommerce/cart/use-update-item.tsx +++ b/framework/bigcommerce/cart/use-update-item.tsx @@ -6,7 +6,7 @@ import type { } from '@commerce/utils/types' import { ValidationError } from '@commerce/utils/errors' import useUpdateItem, { UseUpdateItem } from '@commerce/cart/use-update-item' -import type { LineItem, UpdateItemHook } from '../types/cart' +import type { LineItem, UpdateItemHook } from '@commerce/types/cart' import { handler as removeItemHandler } from './use-remove-item' import useCart from './use-cart' diff --git a/framework/bigcommerce/lib/normalize.ts b/framework/bigcommerce/lib/normalize.ts index 44b00ced6..5e5ebc8e4 100644 --- a/framework/bigcommerce/lib/normalize.ts +++ b/framework/bigcommerce/lib/normalize.ts @@ -1,6 +1,8 @@ import type { Product } from '../types/product' import type { Cart, BigcommerceCart, LineItem } from '../types/cart' +import type { Page } from '../types/page' import update from './immutability' +import { definitions } from '../api/definitions/store-content' function normalizeProductOption(productOption: any) { const { @@ -69,6 +71,16 @@ export function normalizeProduct(productNode: any): Product { }) } +export function normalizePage(page: definitions['page_Full']): Page { + return { + id: String(page.id), + name: page.name, + is_visible: page.is_visible, + sort_order: page.sort_order, + body: page.body, + } +} + export function normalizeCart(data: BigcommerceCart): Cart { return { id: data.id, diff --git a/framework/bigcommerce/types/page.ts b/framework/bigcommerce/types/page.ts index 8f1adeb24..2bccfade2 100644 --- a/framework/bigcommerce/types/page.ts +++ b/framework/bigcommerce/types/page.ts @@ -1,9 +1,7 @@ import * as Core from '@commerce/types/page' -import { definitions } from '../api/definitions/store-content' - export * from '@commerce/types/page' -export type Page = definitions['page_Full'] +export type Page = Core.Page export type PageTypes = { page: Page diff --git a/framework/commerce/index.tsx b/framework/commerce/index.tsx index 5c006f976..7ecb44dc1 100644 --- a/framework/commerce/index.tsx +++ b/framework/commerce/index.tsx @@ -8,51 +8,42 @@ import { } from 'react' import type { - AddItemHook, - GetCartHook, - RemoveItemHook, - UpdateItemHook, -} from '@framework/types/cart' + Customer, + Wishlist, + Cart, + Product, + Signup, + Login, + Logout, +} from '@commerce/types' -import { - AddItemHook as WishlistAddItemHook, - GetWishlistHook, - RemoveItemHook as WishlistRemoveItemHook, -} from '@framework/types/wishlist' - -import { CustomerHook } from '@framework/types/customer' -import { LoginHook } from '@framework/types/login' -import { LogoutHook } from '@framework/types/logout' -import { SearchProductsHook } from '@framework/types/product' -import { SignupHook } from '@framework/types/signup' - -import { Fetcher, SWRHook, MutationHook } from './utils/types' +import type { Fetcher, SWRHook, MutationHook } from './utils/types' const Commerce = createContext | {}>({}) export type Provider = CommerceConfig & { fetcher: Fetcher cart?: { - useCart?: SWRHook - useAddItem?: MutationHook - useUpdateItem?: MutationHook - useRemoveItem?: MutationHook + useCart?: SWRHook + useAddItem?: MutationHook + useUpdateItem?: MutationHook + useRemoveItem?: MutationHook } wishlist?: { - useWishlist?: SWRHook - useAddItem?: MutationHook - useRemoveItem?: MutationHook + useWishlist?: SWRHook + useAddItem?: MutationHook + useRemoveItem?: MutationHook } customer?: { - useCustomer?: SWRHook + useCustomer?: SWRHook } products?: { - useSearch?: SWRHook + useSearch?: SWRHook } auth?: { - useSignup?: MutationHook - useLogin?: MutationHook - useLogout?: MutationHook + useSignup?: MutationHook + useLogin?: MutationHook + useLogout?: MutationHook } } diff --git a/framework/commerce/types/cart.ts b/framework/commerce/types/cart.ts index 3ab6eb867..81fd8a2e6 100644 --- a/framework/commerce/types/cart.ts +++ b/framework/commerce/types/cart.ts @@ -1,5 +1,14 @@ import type { Discount, Measurement, Image } from './common' +export type SelectedOption = { + // The option's id. + id?: string + // The product option’s name. + name: string + /// The product option’s value. + value: string +} + export type LineItem = { id: string variantId: string @@ -10,6 +19,7 @@ export type LineItem = { // A human-friendly unique string automatically generated from the product’s name path: string variant: ProductVariant + options?: SelectedOption[] } export type ProductVariant = { @@ -86,7 +96,7 @@ export type CartItemBody = { */ export type CartTypes = { - cart: Cart + cart?: Cart item: LineItem itemBody: CartItemBody } @@ -117,7 +127,7 @@ export type UpdateItemHook = { data: T['cart'] | null input: { item?: T['item']; wait?: number } fetchInput: { itemId: string; item: T['itemBody'] } - body: { itemId: string; item: T['itemBody'] } + body: { itemId: string; item?: T['itemBody'] } actionInput: T['itemBody'] & { id: string } } diff --git a/framework/commerce/types/page.ts b/framework/commerce/types/page.ts index 334c81521..89f82c1a6 100644 --- a/framework/commerce/types/page.ts +++ b/framework/commerce/types/page.ts @@ -1,5 +1,18 @@ // TODO: define this type -export type Page = any +export type Page = { + // ID of the Web page. + id: string + // Page name, as displayed on the storefront. + name: string + // Relative URL on the storefront for this page. + url?: string + // HTML or variable that populates this page’s `` element, in default/desktop view. Required in POST if page type is `raw`. + body: string + // If true, this page appears in the storefront’s navigation menu. + is_visible?: boolean + // Order in which this page should display on the storefront. (Lower integers specify earlier display.) + sort_order?: number +} export type PageTypes = { page: Page diff --git a/framework/commerce/types/product.ts b/framework/commerce/types/product.ts index 26b57f49c..a8e422bc7 100644 --- a/framework/commerce/types/product.ts +++ b/framework/commerce/types/product.ts @@ -58,7 +58,10 @@ export type ProductTypes = { } export type SearchProductsHook = { - data: T['product'][] + data: { + products: T['product'][] + found: boolean + } body: T['searchBody'] input: T['searchBody'] fetchInput: T['searchBody'] diff --git a/framework/shopify/api/endpoints/cart.ts b/framework/shopify/api/endpoints/cart.ts new file mode 100644 index 000000000..d09c976c3 --- /dev/null +++ b/framework/shopify/api/endpoints/cart.ts @@ -0,0 +1 @@ +export default function (_commerce: any) {} diff --git a/framework/shopify/api/endpoints/catalog/products.ts b/framework/shopify/api/endpoints/catalog/products.ts new file mode 100644 index 000000000..d09c976c3 --- /dev/null +++ b/framework/shopify/api/endpoints/catalog/products.ts @@ -0,0 +1 @@ +export default function (_commerce: any) {} diff --git a/framework/shopify/api/endpoints/checkout.ts b/framework/shopify/api/endpoints/checkout.ts new file mode 100644 index 000000000..d09c976c3 --- /dev/null +++ b/framework/shopify/api/endpoints/checkout.ts @@ -0,0 +1 @@ +export default function (_commerce: any) {} diff --git a/framework/shopify/api/endpoints/customer.ts b/framework/shopify/api/endpoints/customer.ts new file mode 100644 index 000000000..d09c976c3 --- /dev/null +++ b/framework/shopify/api/endpoints/customer.ts @@ -0,0 +1 @@ +export default function (_commerce: any) {} diff --git a/framework/shopify/api/endpoints/login.ts b/framework/shopify/api/endpoints/login.ts new file mode 100644 index 000000000..d09c976c3 --- /dev/null +++ b/framework/shopify/api/endpoints/login.ts @@ -0,0 +1 @@ +export default function (_commerce: any) {} diff --git a/framework/shopify/api/endpoints/logout.ts b/framework/shopify/api/endpoints/logout.ts new file mode 100644 index 000000000..d09c976c3 --- /dev/null +++ b/framework/shopify/api/endpoints/logout.ts @@ -0,0 +1 @@ +export default function (_commerce: any) {} diff --git a/framework/shopify/api/endpoints/signup.ts b/framework/shopify/api/endpoints/signup.ts new file mode 100644 index 000000000..d09c976c3 --- /dev/null +++ b/framework/shopify/api/endpoints/signup.ts @@ -0,0 +1 @@ +export default function (_commerce: any) {} diff --git a/framework/shopify/api/endpoints/wishlist.ts b/framework/shopify/api/endpoints/wishlist.ts new file mode 100644 index 000000000..d09c976c3 --- /dev/null +++ b/framework/shopify/api/endpoints/wishlist.ts @@ -0,0 +1 @@ +export default function (_commerce: any) {} diff --git a/framework/shopify/api/operations/get-page.ts b/framework/shopify/api/operations/get-page.ts index 1a8dc9481..cf71bc635 100644 --- a/framework/shopify/api/operations/get-page.ts +++ b/framework/shopify/api/operations/get-page.ts @@ -2,8 +2,13 @@ import type { OperationContext, OperationOptions, } from '@commerce/api/operations' +import { normalizePage } from '@framework/utils' import type { ShopifyConfig, Provider } from '..' -import { GetPageQuery, GetPageQueryVariables, Page } from '../../schema' +import { + GetPageQuery, + GetPageQueryVariables, + Page as ShopifyPage, +} from '../../schema' import { GetPageOperation } from '../../types/page' import getPageQuery from '../../utils/queries/get-page-query' @@ -28,14 +33,13 @@ export default function getPageOperation({ query = getPageQuery, variables, config, - preview, }: { query?: string variables: T['variables'] config?: Partial preview?: boolean }): Promise { - const { fetch, locale } = commerce.getConfig(config) + const { fetch, locale = 'en-US' } = commerce.getConfig(config) const { data: { node: page }, @@ -53,7 +57,7 @@ export default function getPageOperation({ } ) - return page ? { page } : {} + return page ? { page: normalizePage(page as ShopifyPage, locale) } : {} } return getPage diff --git a/framework/shopify/api/operations/get-product.ts b/framework/shopify/api/operations/get-product.ts index f7d6b05e0..447b5c792 100644 --- a/framework/shopify/api/operations/get-product.ts +++ b/framework/shopify/api/operations/get-product.ts @@ -1,26 +1,40 @@ -import type { OperationContext } from '@commerce/api/operations' +import type { + OperationContext, + OperationOptions, +} from '@commerce/api/operations' import { GetProductOperation } from '../../types/product' import { normalizeProduct, getProductQuery } from '../../utils' import type { ShopifyConfig, Provider } from '..' -import { - GetProductBySlugQuery, - GetProductBySlugQueryVariables, - Product as ShopifyProduct, -} from '../../schema' +import { GetProductBySlugQuery, Product as ShopifyProduct } from '../../schema' export default function getProductOperation({ commerce, }: OperationContext) { + async function getProduct(opts: { + variables: T['variables'] + config?: Partial + preview?: boolean + }): Promise + + async function getProduct( + opts: { + variables: T['variables'] + config?: Partial + preview?: boolean + } & OperationOptions + ): Promise + async function getProduct({ query = getProductQuery, - config, variables, + config: cfg, }: { query?: string - config?: ShopifyConfig - variables?: GetProductBySlugQueryVariables - } = {}): Promise { - const { fetch, locale } = commerce.getConfig(config) + variables: T['variables'] + config?: Partial + preview?: boolean + }): Promise { + const { fetch, locale } = commerce.getConfig(cfg) const { data: { productByHandle }, diff --git a/framework/shopify/auth/use-login.tsx b/framework/shopify/auth/use-login.tsx index 7993822cd..e90dbf730 100644 --- a/framework/shopify/auth/use-login.tsx +++ b/framework/shopify/auth/use-login.tsx @@ -1,29 +1,20 @@ import { useCallback } from 'react' import type { MutationHook } from '@commerce/utils/types' -import { CommerceError, ValidationError } from '@commerce/utils/errors' -import useCustomer from '../customer/use-customer' -import createCustomerAccessTokenMutation from '../utils/mutations/customer-access-token-create' -import { - CustomerAccessTokenCreateInput, - CustomerUserError, - Mutation, - MutationCheckoutCreateArgs, -} from '../schema' +import { CommerceError } from '@commerce/utils/errors' import useLogin, { UseLogin } from '@commerce/auth/use-login' -import { setCustomerToken, throwUserErrors } from '../utils' +import type { LoginHook } from '../types/login' +import useCustomer from '../customer/use-customer' + +import createCustomerAccessTokenMutation from '../utils/mutations/customer-access-token-create' +import { setCustomerToken, throwUserErrors } from '@framework/utils' +import { + Mutation, + MutationCustomerAccessTokenCreateArgs, +} from '@framework/schema' export default useLogin as UseLogin -const getErrorMessage = ({ code, message }: CustomerUserError) => { - switch (code) { - case 'UNIDENTIFIED_CUSTOMER': - message = 'Cannot find an account that matches the provided credentials' - break - } - return message -} - -export const handler: MutationHook = { +export const handler: MutationHook = { fetchOptions: { query: createCustomerAccessTokenMutation, }, @@ -37,7 +28,7 @@ export const handler: MutationHook = { const { customerAccessTokenCreate } = await fetch< Mutation, - MutationCheckoutCreateArgs + MutationCustomerAccessTokenCreateArgs >({ ...options, variables: { diff --git a/framework/shopify/auth/use-logout.tsx b/framework/shopify/auth/use-logout.tsx index 81a3b8cdd..30074b8d5 100644 --- a/framework/shopify/auth/use-logout.tsx +++ b/framework/shopify/auth/use-logout.tsx @@ -1,13 +1,14 @@ import { useCallback } from 'react' import type { MutationHook } from '@commerce/utils/types' import useLogout, { UseLogout } from '@commerce/auth/use-logout' +import type { LogoutHook } from '../types/logout' import useCustomer from '../customer/use-customer' import customerAccessTokenDeleteMutation from '../utils/mutations/customer-access-token-delete' import { getCustomerToken, setCustomerToken } from '../utils/customer-token' export default useLogout as UseLogout -export const handler: MutationHook = { +export const handler: MutationHook = { fetchOptions: { query: customerAccessTokenDeleteMutation, }, diff --git a/framework/shopify/auth/use-signup.tsx b/framework/shopify/auth/use-signup.tsx index 9ca5c682f..abcc36a9c 100644 --- a/framework/shopify/auth/use-signup.tsx +++ b/framework/shopify/auth/use-signup.tsx @@ -1,25 +1,20 @@ import { useCallback } from 'react' import type { MutationHook } from '@commerce/utils/types' -import { CommerceError, ValidationError } from '@commerce/utils/errors' +import { CommerceError } from '@commerce/utils/errors' import useSignup, { UseSignup } from '@commerce/auth/use-signup' +import type { SignupHook } from '../types/signup' import useCustomer from '../customer/use-customer' -import { - CustomerCreateInput, - Mutation, - MutationCustomerCreateArgs, -} from '../schema' +import { Mutation, MutationCustomerCreateArgs } from '../schema' -import { customerCreateMutation } from '../utils/mutations' -import { handleAutomaticLogin, throwUserErrors } from '../utils' +import { + handleAutomaticLogin, + throwUserErrors, + customerCreateMutation, +} from '@framework/utils' export default useSignup as UseSignup -export const handler: MutationHook< - null, - {}, - CustomerCreateInput, - CustomerCreateInput -> = { +export const handler: MutationHook = { fetchOptions: { query: customerCreateMutation, }, diff --git a/framework/shopify/cart/use-remove-item.tsx b/framework/shopify/cart/use-remove-item.tsx index 25b78dcf9..bf9fb2d95 100644 --- a/framework/shopify/cart/use-remove-item.tsx +++ b/framework/shopify/cart/use-remove-item.tsx @@ -9,7 +9,7 @@ import type { Cart, LineItem, RemoveItemHook } from '../types/cart' import useCart from './use-cart' export type RemoveItemFn = T extends LineItem - ? (input?: RemoveItemActionInput) => Promise + ? (input?: RemoveItemActionInput) => Promise : (input: RemoveItemActionInput) => Promise export type RemoveItemActionInput = T extends LineItem diff --git a/framework/shopify/customer/get-customer-id.ts b/framework/shopify/customer/get-customer-id.ts deleted file mode 100644 index 4f38f1c72..000000000 --- a/framework/shopify/customer/get-customer-id.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { getConfig, ShopifyConfig } from '../api' -import getCustomerIdQuery from '../utils/queries/get-customer-id-query' -import Cookies from 'js-cookie' -import { GetCustomerIdQuery } from '../schema' - -async function getCustomerId({ - customerToken: customerAccesToken, - config, -}: { - customerToken: string - config?: ShopifyConfig -}): Promise { - config = getConfig(config) - - const { - data: { customer }, - } = await config.fetch(getCustomerIdQuery, { - variables: { - customerAccesToken: - customerAccesToken || Cookies.get(config.customerCookie), - }, - }) - - return customer?.id -} - -export default getCustomerId diff --git a/framework/shopify/index.tsx b/framework/shopify/index.tsx index 5b25d6b21..13ff9d1f8 100644 --- a/framework/shopify/index.tsx +++ b/framework/shopify/index.tsx @@ -36,4 +36,4 @@ export function CommerceProvider({ children, ...config }: ShopifyProps) { ) } -export const useCommerce = () => useCoreCommerce() +export const useCommerce = () => useCoreCommerce() diff --git a/framework/shopify/provider.ts b/framework/shopify/provider.ts index 3cd24817b..00db5c1d3 100644 --- a/framework/shopify/provider.ts +++ b/framework/shopify/provider.ts @@ -24,4 +24,4 @@ export const shopifyProvider = { auth: { useLogin, useLogout, useSignup }, } -export type ShopifyProvider = any +export type ShopifyProvider = typeof shopifyProvider diff --git a/framework/shopify/types/page.ts b/framework/shopify/types/page.ts index 8f1adeb24..2bccfade2 100644 --- a/framework/shopify/types/page.ts +++ b/framework/shopify/types/page.ts @@ -1,9 +1,7 @@ import * as Core from '@commerce/types/page' -import { definitions } from '../api/definitions/store-content' - export * from '@commerce/types/page' -export type Page = definitions['page_Full'] +export type Page = Core.Page export type PageTypes = { page: Page diff --git a/framework/shopify/utils/checkout-to-cart.ts b/framework/shopify/utils/checkout-to-cart.ts index 63e4a18ab..e2531cc78 100644 --- a/framework/shopify/utils/checkout-to-cart.ts +++ b/framework/shopify/utils/checkout-to-cart.ts @@ -1,4 +1,4 @@ -import { Cart } from '../types' +import type { Cart } from '../types/cart' import { CommerceError } from '@commerce/utils/errors' import { diff --git a/framework/shopify/utils/normalize.ts b/framework/shopify/utils/normalize.ts index b05344bca..9fe9816dc 100644 --- a/framework/shopify/utils/normalize.ts +++ b/framework/shopify/utils/normalize.ts @@ -14,6 +14,7 @@ import { Page as ShopifyPage, PageEdge, } from '../schema' +import { colorMap } from '@lib/colors' const money = ({ amount, currencyCode }: MoneyV2) => { return { @@ -30,7 +31,7 @@ const normalizeProductOption = ({ return { __typename: 'MultipleChoiceOption', id, - displayName, + displayName: displayName.toLowerCase(), values: values.map((value) => { let output: any = { label: value, @@ -38,7 +39,7 @@ const normalizeProductOption = ({ if (displayName.match(/colou?r/gi)) { output = { ...output, - hexColors: [value], + hexColors: [colorMap[value] || value], } } return output @@ -152,9 +153,7 @@ function normalizeLineItem({ }, path: String(variant?.product?.handle), discounts: [], - options: - // By default Shopify adds a default variant with default names, we're removing it. https://community.shopify.com/c/Shopify-APIs-SDKs/Adding-new-product-variant-is-automatically-adding-quot-Default/td-p/358095 - variant?.title == 'Default Title' ? [] : variant?.selectedOptions, + options: variant?.title == 'Default Title' ? [] : variant?.selectedOptions, } } diff --git a/framework/shopify/utils/queries/get-checkout-query.ts b/framework/shopify/utils/queries/get-checkout-query.ts index f4f6f33c2..9969e67c0 100644 --- a/framework/shopify/utils/queries/get-checkout-query.ts +++ b/framework/shopify/utils/queries/get-checkout-query.ts @@ -30,6 +30,10 @@ export const checkoutDetailsFragment = /* GraphQL */ ` id sku title + selectedOptions { + name + value + } image { originalSrc altText diff --git a/lib/colors.ts b/lib/colors.ts index 139cda23d..3013de956 100644 --- a/lib/colors.ts +++ b/lib/colors.ts @@ -42,7 +42,7 @@ function hexToRgb(hex: string = '') { return [r, g, b] } -const colorMap: Record = { +export const colorMap: Record = { aliceblue: '#F0F8FF', antiquewhite: '#FAEBD7', aqua: '#00FFFF', @@ -56,6 +56,8 @@ const colorMap: Record = { blueviolet: '#8A2BE2', brown: '#A52A2A', burlywood: '#DEB887', + burgandy: '#800020', + burgundy: '#800020', cadetblue: '#5F9EA0', chartreuse: '#7FFF00', chocolate: '#D2691E', diff --git a/pages/search.tsx b/pages/search.tsx index f37b3ef0d..ef7c2ba8f 100644 --- a/pages/search.tsx +++ b/pages/search.tsx @@ -18,7 +18,8 @@ import { getDesignerPath, useSearchMeta, } from '@lib/search' -import type { Product } from '@framework/types/product' + +import type { Product } from '@commerce/types/product' // TODO(bc) Remove this. This should come from the API import getSlug from '@lib/get-slug'