cx/commerce
4
0
Fork 0
forked from crowetic/commerce
Code Pull Requests Activity

merge master

Browse Source
This commit is contained in:
Franco Arza 2020-10-21 18:09:42 -03:00
commit 4f3fe0cc7e
43 changed files with 631 additions and 228 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
codegen.json
View File

@ -8,7 +8,7 @@
},
"documents": [
{
"./lib/bigcommerce/api/{operations,fragments}/**/*.ts": {
"./lib/bigcommerce/api/**/*.ts": {
"noRequire": true
}
}

6
components/core/Navbar/Navbar.tsx
View File

@ -20,7 +20,7 @@ const Navbar: FC<Props> = ({ className }) => {
<Logo />
</a>
</Link>
<nav className="space-x-4 ml-6 sm:hidden lg:block">
<nav className="space-x-4 ml-6 hidden lg:block">
<Link href="/">
<a className={s.link}>All</a>
</Link>
@ -33,7 +33,7 @@ const Navbar: FC<Props> = ({ className }) => {
</nav>
</div>
<div className="lg:flex flex-1 justify-center sm:hidden">
<div className="flex-1 justify-center hidden lg:flex">
<Searchbar />
</div>
@ -48,7 +48,7 @@ const Navbar: FC<Props> = ({ className }) => {
</div>
</div>
<div className="sm:flex pb-4 lg:px-6 lg:hidden">
<div className="flex pb-4 lg:px-6 lg:hidden">
<Searchbar />
</div>
</div>

14
components/core/UserNav/UserNav.module.css
View File

@ -1,4 +1,5 @@
.root {
@apply relative;
}
.list {
@ -15,3 +16,16 @@
@apply mr-0;
}
}
.dropdownMenu {
@apply absolute right-0 mt-2 w-screen max-w-xs sm:px-0 z-50 border border-accents-1 bg-primary;
max-width: 160px;
&.dropdownMenuContainer {
@apply shadow-lg overflow-hidden relative grid py-2;
}
& .link {
@apply px-6 py-3 block space-y-1 hover:bg-accents-1 transition ease-in-out duration-150 text-base leading-6 font-medium text-gray-900;
}
}

26
components/core/UserNav/UserNav.tsx
View File

@ -1,4 +1,4 @@
import { FC } from 'react'
import { FC, useState } from 'react'
import cn from 'classnames'
import useCart from '@lib/bigcommerce/cart/use-cart'
import { Avatar } from '@components/core'
@ -17,6 +17,7 @@ const countItems = (count: number, items: any[]) =>
const UserNav: FC<Props> = ({ className }) => {
const { data } = useCart()
const [displayDropdown, setDisplayDropdown] = useState(false)
const { openSidebar, closeSidebar, displaySidebar } = useUI()
const itemsCount = Object.values(data?.line_items ?? {}).reduce(countItems, 0)
@ -39,10 +40,31 @@ const UserNav: FC<Props> = ({ className }) => {
<Heart />
</li>
</Link>
<li className={s.item}>
<li
className={s.item}
onClick={() => {
setDisplayDropdown((i) => !i)
}}
>
<Avatar />
</li>
</ul>
{displayDropdown && (
<div className={s.dropdownMenu}>
<nav className={s.dropdownMenuContainer}>
<Link href="#">
<a className={s.link}>My Purchases</a>
</Link>
<Link href="#">
<a className={s.link}>My Account</a>
</Link>
<Link href="#">
<a className={cn(s.link, 'mt-4')}>Logout</a>
</Link>
</nav>
</div>
)}
</nav>
)
}

29
components/product/ProductCard/ProductCard.module.css
View File

@ -65,23 +65,40 @@
@apply transform absolute inset-0 z-0 bg-secondary;
}
.squareBg.gray {
@apply bg-gray-300 !important;
.simple {
& .squareBg {
@apply bg-gray-300 !important;
}
& .productTitle {
width: 18vw;
margin-top: -7px;
font-size: 1rem;
}
& .productPrice {
@apply text-sm;
}
}
.productTitle {
line-height: 40px;
width: 18vw;
@apply pt-4 leading-8;
width: 400px;
font-size: 2rem;
letter-spacing: 0.4px;
& span {
@apply inline text-2xl leading-6 p-4 bg-primary text-primary font-bold;
@apply inline p-4 bg-primary text-primary font-bold;
font-size: inherit;
letter-spacing: inherit;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
}
.productPrice {
@apply px-3 py-1 pb-2 bg-primary text-base font-semibold inline-block text-sm leading-6;
@apply py-4 px-4 bg-primary text-base font-semibold inline-block text-sm leading-6;
letter-spacing: 0.4px;
}
.wishlistButton {

12
components/product/ProductCard/ProductCard.tsx
View File

@ -31,19 +31,21 @@ const ProductCard: FC<Props> = ({ className, product: p, variant }) => {
return (
<Link href={`product${p.path}`}>
<a className={cn(s.root, className)}>
<a
className={cn(s.root, { [s.simple]: variant === 'simple' }, className)}
>
<div className="absolute z-10 inset-0 flex items-center justify-center">
<img
className="w-full object-cover"
src={p.images.edges?.[0]?.node.urlXL}
/>
</div>
<div className={cn(s.squareBg, { [s.gray]: variant === 'simple' })} />
<div className={s.squareBg} />
<div className="flex flex-row justify-between box-border w-full z-10 relative">
<div className="">
<p className={s.productTitle}>
<div className="absolute top-0 left-0">
<h3 className={s.productTitle}>
<span>{p.name}</span>
</p>
</h3>
<span className={s.productPrice}>${p.prices?.price.value}</span>
</div>
<div className={s.wishlistButton}>

4
components/product/ProductView/ProductView.module.css
View File

@ -37,7 +37,9 @@
@apply absolute top-6 left-0 z-50;
& .name {
@apply px-6 py-2 bg-primary text-primary font-bold text-3xl;
@apply px-6 py-2 bg-primary text-primary font-bold;
font-size: 2rem;
letter-spacing: 0.4px;
}
& .price {

2
components/ui/Container/Container.tsx
View File

@ -8,7 +8,7 @@ interface Props {
}
const Container: FC<Props> = ({ children, className, el = 'div' }) => {
const rootClassName = cn('mx-auto max-w-7xl px-6 md:px-12', className)
const rootClassName = cn('mx-auto max-w-7xl px-3 md:px-6', className)
let Component: React.ComponentType<React.HTMLAttributes<
HTMLDivElement

2
components/ui/Grid/Grid.module.css
View File

@ -20,7 +20,7 @@
}
.layoutNormal {
@apply gap-6;
@apply gap-3;
& > * {
min-height: 325px;

6
lib/bigcommerce/api/cart/index.ts
View File

@ -80,19 +80,19 @@ const cartApi: BigcommerceApiHandler<Cart, CartHandlers> = async (
// Create or add an item to the cart
if (req.method === 'POST') {
const body = { cartId, ...req.body }
const body = { ...req.body, cartId }
return await handlers['addItem']({ req, res, config, body })
}
// Update item in cart
if (req.method === 'PUT') {
const body = { cartId, ...req.body }
const body = { ...req.body, cartId }
return await handlers['updateItem']({ req, res, config, body })
}
// Remove an item from the cart
if (req.method === 'DELETE') {
const body = { cartId, ...req.body }
const body = { ...req.body, cartId }
return await handlers['removeItem']({ req, res, config, body })
}
} catch (error) {

67
lib/bigcommerce/api/customers/handlers/create-customer.ts
View File

@ -1,67 +0,0 @@
import { BigcommerceApiError } from '../../utils/errors'
import login from '../../operations/login'
import type { CustomersHandlers } from '..'
const createCustomer: CustomersHandlers['createCustomer'] = async ({
res,
body: { firstName, lastName, email, password },
config,
}) => {
// TODO: Add proper validations with something like Ajv
if (!(firstName && lastName && email && password)) {
return res.status(400).json({
data: null,
errors: [{ message: 'Invalid request' }],
})
}
// TODO: validate the password and email
// Passwords must be at least 7 characters and contain both alphabetic
// and numeric characters.
let result: { data?: any } = {}
try {
result = await config.storeApiFetch('/v3/customers', {
method: 'POST',
body: JSON.stringify([
{
first_name: firstName,
last_name: lastName,
email,
authentication: {
new_password: password,
},
},
]),
})
} catch (error) {
if (error instanceof BigcommerceApiError && error.status === 422) {
const hasEmailError = '0.email' in error.data?.errors
// If there's an error with the email, it most likely means it's duplicated
if (hasEmailError) {
return res.status(400).json({
data: null,
errors: [
{
message: 'The email is already in use',
code: 'duplicated_email',
},
],
})
}
}
throw error
}
console.log('DATA', result.data)
const loginData = await login({ variables: { email, password }, config })
console.log('LOGIN DATA', loginData)
res.status(200).json({ data: result.data ?? null })
}
export default createCustomer

44
lib/bigcommerce/api/customers/handlers/get-logged-in-customer.ts Normal file
View File

@ -0,0 +1,44 @@
import { GetLoggedInCustomerQuery } from '@lib/bigcommerce/schema'
import type { CustomersHandlers } from '..'
export const getLoggedInCustomerQuery = /* GraphQL */ `
query getLoggedInCustomer {
customer {
entityId
firstName
lastName
email
company
customerGroupId
notes
phone
addressCount
attributeCount
storeCredit {
value
currencyCode
}
}
}
`
const getLoggedInCustomer: CustomersHandlers['getLoggedInCustomer'] = async ({
res,
config,
}) => {
const data = await config.fetch<GetLoggedInCustomerQuery>(
getLoggedInCustomerQuery
)
const { customer } = data
if (!customer) {
return res.status(400).json({
data: null,
errors: [{ message: 'Customer not found', code: 'not_found' }],
})
}
res.status(200).json({ data: { customer } })
}
export default getLoggedInCustomer

26
lib/bigcommerce/api/customers/handlers/login.ts Normal file
View File

@ -0,0 +1,26 @@
import login from '../../operations/login'
import type { LoginHandlers } from '../login'
const loginHandler: LoginHandlers['login'] = async ({
res,
body: { email, password },
config,
}) => {
// TODO: Add proper validations with something like Ajv
if (!(email && password)) {
return res.status(400).json({
data: null,
errors: [{ message: 'Invalid request' }],
})
}
// TODO: validate the password and email
// Passwords must be at least 7 characters and contain both alphabetic
// and numeric characters.
// TODO: Currently not working, fix this asap.
const loginData = await login({ variables: { email, password }, config })
res.status(200).json({ data: null })
}
export default loginHandler

68
lib/bigcommerce/api/customers/handlers/signup.ts Normal file
View File

@ -0,0 +1,68 @@
import { BigcommerceApiError } from '../../utils/errors'
import login from '../../operations/login'
import { SignupHandlers } from '../signup'
const signup: SignupHandlers['signup'] = async ({
res,
body: { firstName, lastName, email, password },
config,
}) => {
// TODO: Add proper validations with something like Ajv
if (!(firstName && lastName && email && password)) {
return res.status(400).json({
data: null,
errors: [{ message: 'Invalid request' }],
})
}
// TODO: validate the password and email
// Passwords must be at least 7 characters and contain both alphabetic
// and numeric characters.
let result: { data?: any } = {}
// try {
// result = await config.storeApiFetch('/v3/customers', {
// method: 'POST',
// body: JSON.stringify([
// {
// first_name: firstName,
// last_name: lastName,
// email,
// authentication: {
// new_password: password,
// },
// },
// ]),
// })
// } catch (error) {
// if (error instanceof BigcommerceApiError && error.status === 422) {
// const hasEmailError = '0.email' in error.data?.errors
// // If there's an error with the email, it most likely means it's duplicated
// if (hasEmailError) {
// return res.status(400).json({
// data: null,
// errors: [
// {
// message: 'The email is already in use',
// code: 'duplicated_email',
// },
// ],
// })
// }
// }
// throw error
// }
console.log('DATA', result.data)
// TODO: Currently not working, fix this asap.
const loginData = await login({ variables: { email, password }, config })
console.log('LOGIN DATA', loginData)
res.status(200).json({ data: result.data ?? null })
}
export default signup

40
lib/bigcommerce/api/customers/index.ts
View File

@ -4,42 +4,30 @@ import createApiHandler, {
} from '../utils/create-api-handler'
import isAllowedMethod from '../utils/is-allowed-method'
import { BigcommerceApiError } from '../utils/errors'
import createCustomer from './handlers/create-customer'
import getLoggedInCustomer from './handlers/get-logged-in-customer'
type Body<T> = Partial<T> | undefined
export type Customer = any
export type Customer = null
export type CreateCustomerBody = {
firstName: string
lastName: string
email: string
password: string
export type CustomerData = {
customer: Customer
}
export type CustomersHandlers = {
createCustomer: BigcommerceHandler<
Customer,
{ cartId?: string } & Body<CreateCustomerBody>
>
getLoggedInCustomer: BigcommerceHandler<CustomerData, null>
}
const METHODS = ['POST']
const METHODS = ['GET']
const customersApi: BigcommerceApiHandler<Customer, CustomersHandlers> = async (
req,
res,
config
) => {
const customersApi: BigcommerceApiHandler<
CustomerData,
CustomersHandlers
> = async (req, res, config, handlers) => {
if (!isAllowedMethod(req, res, METHODS)) return
const { cookies } = req
const cartId = cookies[config.cartCookie]
try {
if (req.method === 'POST') {
const body = { cartId, ...req.body }
return await handlers['createCustomer']({ req, res, config, body })
if (req.method === 'GET') {
const body = null
return await handlers['getLoggedInCustomer']({ req, res, config, body })
}
} catch (error) {
console.error(error)
@ -53,6 +41,6 @@ const customersApi: BigcommerceApiHandler<Customer, CustomersHandlers> = async (
}
}
const handlers = { createCustomer }
const handlers = { getLoggedInCustomer }
export default createApiHandler(customersApi, handlers, {})

45
lib/bigcommerce/api/customers/login.ts Normal file
View File

@ -0,0 +1,45 @@
import createApiHandler, {
BigcommerceApiHandler,
BigcommerceHandler,
} from '../utils/create-api-handler'
import isAllowedMethod from '../utils/is-allowed-method'
import { BigcommerceApiError } from '../utils/errors'
import login from './handlers/login'
export type LoginBody = {
email: string
password: string
}
export type LoginHandlers = {
login: BigcommerceHandler<null, Partial<LoginBody>>
}
const METHODS = ['POST']
const loginApi: BigcommerceApiHandler<null, LoginHandlers> = async (
req,
res,
config,
handlers
) => {
if (!isAllowedMethod(req, res, METHODS)) return
try {
const body = req.body ?? {}
return await handlers['login']({ req, res, config, body })
} catch (error) {
console.error(error)
const message =
error instanceof BigcommerceApiError
? 'An unexpected error ocurred with the Bigcommerce API'
: 'An unexpected error ocurred'
res.status(500).json({ data: null, errors: [{ message }] })
}
}
const handlers = { login }
export default createApiHandler(loginApi, handlers, {})

50
lib/bigcommerce/api/customers/signup.ts Normal file
View File

@ -0,0 +1,50 @@
import createApiHandler, {
BigcommerceApiHandler,
BigcommerceHandler,
} from '../utils/create-api-handler'
import isAllowedMethod from '../utils/is-allowed-method'
import { BigcommerceApiError } from '../utils/errors'
import signup from './handlers/signup'
export type SignupBody = {
firstName: string
lastName: string
email: string
password: string
}
export type SignupHandlers = {
signup: BigcommerceHandler<null, { cartId?: string } & Partial<SignupBody>>
}
const METHODS = ['POST']
const signupApi: BigcommerceApiHandler<null, SignupHandlers> = async (
req,
res,
config,
handlers
) => {
if (!isAllowedMethod(req, res, METHODS)) return
const { cookies } = req
const cartId = cookies[config.cartCookie]
try {
const body = { ...req.body, cartId }
return await handlers['signup']({ req, res, config, body })
} catch (error) {
console.error(error)
const message =
error instanceof BigcommerceApiError
? 'An unexpected error ocurred with the Bigcommerce API'
: 'An unexpected error ocurred'
res.status(500).json({ data: null, errors: [{ message }] })
}
}
const handlers = { signup }
export default createApiHandler(signupApi, handlers, {})

12
lib/bigcommerce/api/utils/fetch-graphql-api.ts
View File

@ -20,6 +20,8 @@ export default async function fetchGraphqlApi<Q, V = any>(
}),
})
// console.log('HEADERS', getRawHeaders(res))
const json = await res.json()
if (json.errors) {
console.error(json.errors)
@ -27,3 +29,13 @@ export default async function fetchGraphqlApi<Q, V = any>(
}
return json.data
}
function getRawHeaders(res: Response) {
const headers: { [key: string]: string } = {}
res.headers.forEach((value, key) => {
headers[key] = value
})
return headers
}

9
lib/bigcommerce/api/wishlist/handlers/get-all-wishlists.ts
View File

@ -1,5 +1,4 @@
import { BigcommerceApiError } from '../../utils/errors'
import type { WishlistList, WishlistHandlers } from '..'
import type { Wishlist, WishlistHandlers } from '..'
// Return all wishlists
const getAllWishlists: WishlistHandlers['getAllWishlists'] = async ({
@ -7,10 +6,12 @@ const getAllWishlists: WishlistHandlers['getAllWishlists'] = async ({
body: { customerId },
config,
}) => {
let result: { data?: WishlistList } = {}
let result: { data?: Wishlist[] } = {}
try {
result = await config.storeApiFetch(`/v3/wishlists/customer_id=${customerId}`)
result = await config.storeApiFetch(
`/v3/wishlists/customer_id=${customerId}`
)
} catch (error) {
throw error
}

13
lib/bigcommerce/api/wishlist/index.ts
View File

@ -44,10 +44,8 @@ export type Wishlist = {
// TODO: add missing fields
}
export type WishlistList = Wishlist[]
export type WishlistHandlers = {
getAllWishlists: BigcommerceHandler<WishlistList, { customerId?: string }>
getAllWishlists: BigcommerceHandler<Wishlist[], { customerId?: string }>
getWishlist: BigcommerceHandler<Wishlist, { wishlistId?: string }>
addWishlist: BigcommerceHandler<
Wishlist,
@ -57,7 +55,10 @@ export type WishlistHandlers = {
Wishlist,
{ wishlistId: string } & Body<AddWishlistBody>
>
addItem: BigcommerceHandler<Wishlist, { wishlistId: string } & Body<AddItemBody>>
addItem: BigcommerceHandler<
Wishlist,
{ wishlistId: string } & Body<AddItemBody>
>
removeItem: BigcommerceHandler<
Wishlist,
{ wishlistId: string } & Body<RemoveItemBody>
@ -86,13 +87,13 @@ const wishlistApi: BigcommerceApiHandler<Wishlist, WishlistHandlers> = async (
// Add an item to the wishlist
if (req.method === 'POST' && wishlistId) {
const body = { wishlistId, ...req.body }
const body = { ...req.body, wishlistId }
return await handlers['addItem']({ req, res, config, body })
}
// Update a wishlist
if (req.method === 'PUT' && wishlistId) {
const body = { wishlistId, ...req.body }
const body = { ...req.body, wishlistId }
return await handlers['updateWishlist']({ req, res, config, body })
}

4
lib/bigcommerce/cart/use-add-item.tsx
View File

@ -26,8 +26,8 @@ export const fetcher: HookFetcher<Cart, AddItemBody> = (
}
return fetch({
url: options?.url ?? defaultOpts.url,
method: options?.method ?? defaultOpts.method,
...defaultOpts,
...options,
body: { item },
})
}

8
lib/bigcommerce/cart/use-cart.tsx
View File

@ -5,6 +5,7 @@ import type { Cart } from '../api/cart'
const defaultOpts = {
url: '/api/bigcommerce/cart',
method: 'GET',
}
export type { Cart }
@ -14,12 +15,7 @@ export const fetcher: HookFetcher<Cart | null, CartInput> = (
{ cartId },
fetch
) => {
return cartId
? fetch({
url: options?.url,
query: options?.query,
})
: null
return cartId ? fetch({ ...defaultOpts, ...options }) : null
}
export function extendHook(

4
lib/bigcommerce/cart/use-remove-item.tsx
View File

@ -19,8 +19,8 @@ export const fetcher: HookFetcher<Cart | null, RemoveItemBody> = (
fetch
) => {
return fetch({
url: options?.url ?? defaultOpts.url,
method: options?.method ?? defaultOpts.method,
...defaultOpts,
...options,
body: { itemId },
})
}

4
lib/bigcommerce/cart/use-update-item.tsx
View File

@ -28,8 +28,8 @@ export const fetcher: HookFetcher<Cart | null, UpdateItemBody> = (
}
return fetch({
url: options?.url ?? defaultOpts.url,
method: options?.method ?? defaultOpts.method,
...defaultOpts,
...options,
body: { itemId, item },
})
}

24
lib/bigcommerce/schema.d.ts vendored
View File

@ -1653,6 +1653,30 @@ export enum CurrencyCode {
Zwr = 'ZWR',
}
export type GetLoggedInCustomerQueryVariables = Exact<{ [key: string]: never }>
export type GetLoggedInCustomerQuery = { __typename?: 'Query' } & {
customer?: Maybe<
{ __typename?: 'Customer' } & Pick<
Customer,
| 'entityId'
| 'firstName'
| 'lastName'
| 'email'
| 'company'
| 'customerGroupId'
| 'notes'
| 'phone'
| 'addressCount'
| 'attributeCount'
> & {
storeCredit: Array<
{ __typename?: 'Money' } & Pick<Money, 'value' | 'currencyCode'>
>
}
>
}
export type CategoryTreeItemFragment = {
__typename?: 'CategoryTreeItem'
} & Pick<

41
lib/bigcommerce/use-customer.tsx Normal file
View File

@ -0,0 +1,41 @@
import { ConfigInterface } from 'swr'
import { HookFetcher } from '@lib/commerce/utils/types'
import useCommerceCustomer, { CustomerInput } from '@lib/commerce/use-customer'
import type { Customer, CustomerData } from './api/customers'
const defaultOpts = {
url: '/api/bigcommerce/customer',
method: 'GET',
}
export type { Customer }
export const fetcher: HookFetcher<CustomerData | null, CustomerInput> = (
options,
{ cartId },
fetch
) => {
return cartId ? fetch({ ...defaultOpts, ...options }) : null
}
export function extendHook(
customFetcher: typeof fetcher,
swrOptions?: ConfigInterface
) {
const useCustomer = () => {
const cart = useCommerceCustomer<CustomerData | null>(
defaultOpts,
[],
customFetcher,
{ revalidateOnFocus: false, ...swrOptions }
)
return cart
}
useCustomer.extend = extendHook
return useCustomer
}
export default extendHook(fetcher)

49
lib/bigcommerce/use-login.tsx Normal file
View File

@ -0,0 +1,49 @@
import { useCallback } from 'react'
import { HookFetcher } from '@lib/commerce/utils/types'
import useCommerceLogin from '@lib/commerce/use-login'
import type { LoginBody } from './api/customers/login'
const defaultOpts = {
url: '/api/bigcommerce/customers/login',
method: 'POST',
}
export type LoginInput = LoginBody
export const fetcher: HookFetcher<null, LoginBody> = (
options,
{ email, password },
fetch
) => {
if (!(email && password)) {
throw new Error(
'A first name, last name, email and password are required to login'
)
}
return fetch({
...defaultOpts,
...options,
body: { email, password },
})
}
export function extendHook(customFetcher: typeof fetcher) {
const useLogin = () => {
const fn = useCommerceLogin<null, LoginInput>(defaultOpts, customFetcher)
return useCallback(
async function login(input: LoginInput) {
const data = await fn(input)
return data
},
[fn]
)
}
useLogin.extend = extendHook
return useLogin
}
export default extendHook(fetcher)

49
lib/bigcommerce/use-signup.tsx Normal file
View File

@ -0,0 +1,49 @@
import { useCallback } from 'react'
import { HookFetcher } from '@lib/commerce/utils/types'
import useCommerceSignup from '@lib/commerce/use-signup'
import type { SignupBody } from './api/customers/signup'
const defaultOpts = {
url: '/api/bigcommerce/customers/signup',
method: 'POST',
}
export type SignupInput = SignupBody
export const fetcher: HookFetcher<null, SignupBody> = (
options,
{ firstName, lastName, email, password },
fetch
) => {
if (!(firstName && lastName && email && password)) {
throw new Error(
'A first name, last name, email and password are required to signup'
)
}
return fetch({
...defaultOpts,
...options,
body: { firstName, lastName, email, password },
})
}
export function extendHook(customFetcher: typeof fetcher) {
const useSignup = () => {
const fn = useCommerceSignup<null, SignupInput>(defaultOpts, customFetcher)
return useCallback(
async function signup(input: SignupInput) {
const data = await fn(input)
return data
},
[fn]
)
}
useSignup.extend = extendHook
return useSignup
}
export default extendHook(fetcher)

4
lib/bigcommerce/wishlist/use-add-item.tsx
View File

@ -17,8 +17,8 @@ export const fetcher: HookFetcher<Wishlist, AddItemBody> = (
fetch
) => {
return fetch({
url: options?.url ?? defaultOpts.url,
method: options?.method ?? defaultOpts.method,
...defaultOpts,
...options,
body: { wishlistId, item },
})
}

4
lib/bigcommerce/wishlist/use-remove-item.tsx
View File

@ -19,8 +19,8 @@ export const fetcher: HookFetcher<Wishlist | null, RemoveItemBody> = (
fetch
) => {
return fetch({
url: options?.url ?? defaultOpts.url,
method: options?.method ?? defaultOpts.method,
...defaultOpts,
...options,
body: { wishlistId, itemId },
})
}

4
lib/bigcommerce/wishlist/use-wishlist.tsx
View File

@ -4,6 +4,7 @@ import type { Wishlist } from '../api/wishlist'
const defaultOpts = {
url: '/api/bigcommerce/wishlists',
method: 'GET',
}
export type { Wishlist }
@ -18,7 +19,8 @@ export const fetcher: HookFetcher<Wishlist | null, WishlistInput> = (
fetch
) => {
return fetch({
url: options?.url,
...defaultOpts,
...options,
body: { wishlistId },
})
}

6
lib/commerce/api/index.ts
View File

@ -14,8 +14,4 @@ export interface CommerceAPIFetchOptions<V> {
preview?: boolean
}
// TODO: define interfaces for all the available operations
// export interface CommerceAPI {
// getAllProducts(options?: { query: string }): Promise<any>;
// }
// TODO: define interfaces for all the available operations and API endpoints

30
lib/commerce/use-customer.tsx Normal file
View File

@ -0,0 +1,30 @@
import { responseInterface, ConfigInterface } from 'swr'
import Cookies from 'js-cookie'
import type { HookInput, HookFetcher, HookFetcherOptions } from './utils/types'
import useData from './utils/use-data'
import { useCommerce } from '.'
export type CustomerResponse<T> = responseInterface<T, Error>
export type CustomerInput = {
cartId: string | undefined
}
export default function useCustomer<T>(
options: HookFetcherOptions,
input: HookInput,
fetcherFn: HookFetcher<T | null, CustomerInput>,
swrOptions?: ConfigInterface<T | null>
) {
// TODO: Replace this with the login cookie
const { cartCookie } = useCommerce()
const fetcher: typeof fetcherFn = (options, input, fetch) => {
input.cartId = Cookies.get(cartCookie)
return fetcherFn(options, input, fetch)
}
const response = useData(options, input, fetcher, swrOptions)
return response as CustomerResponse<T>
}

5
lib/commerce/use-login.tsx Normal file
View File

@ -0,0 +1,5 @@
import useAction from './utils/use-action'
const useLogin = useAction
export default useLogin

5
lib/commerce/use-signup.tsx Normal file
View File

@ -0,0 +1,5 @@
import useAction from './utils/use-action'
const useSignup = useAction
export default useSignup

4
lib/commerce/utils/use-action.tsx
View File

@ -9,9 +9,7 @@ export default function useAction<T, Input>(
const { fetcherRef } = useCommerce()
return useCallback(
function addItem(input: Input) {
return fetcher(options, input, fetcherRef.current)
},
(input: Input) => fetcher(options, input, fetcherRef.current),
[fetcher]
)
}

14
lib/commerce/utils/use-data.tsx
View File

@ -9,9 +9,15 @@ export default function useData<T, Input = any>(
swrOptions?: ConfigInterface<T>
) {
const { fetcherRef } = useCommerce()
const fetcher = (url?: string, query?: string, ...args: any[]) => {
const fetcher = (
url?: string,
query?: string,
method?: string,
...args: any[]
) => {
return fetcherFn(
{ url, query },
{ url, query, method },
// Transform the input array into an object
args.reduce((obj, val, i) => {
obj[input[i][0]!] = val
return obj
@ -23,7 +29,9 @@ export default function useData<T, Input = any>(
const response = useSWR(
() => {
const opts = typeof options === 'function' ? options() : options
return opts ? [opts.url, opts.query, ...input.map((e) => e[1])] : null
return opts
? [opts.url, opts.query, opts.method, ...input.map((e) => e[1])]
: null
},
fetcher,
swrOptions

2
package.json
View File

@ -30,7 +30,7 @@
"js-cookie": "^2.2.1",
"lodash.debounce": "^4.0.8",
"lodash.random": "^3.2.0",
"next": "^9.5.6-canary.4",
"next": "^9.5.6-canary.9",
"next-seo": "^4.11.0",
"next-themes": "^0.0.4",
"nextjs-progressbar": "^0.0.6",

0
pages/api/bigcommerce/customers.ts → pages/api/bigcommerce/customers/index.ts
View File

3
pages/api/bigcommerce/customers/login.ts Normal file
View File

@ -0,0 +1,3 @@
import loginApi from '@lib/bigcommerce/api/customers/login'
export default loginApi()

3
pages/api/bigcommerce/customers/signup.ts Normal file
View File

@ -0,0 +1,3 @@
import signupApi from '@lib/bigcommerce/api/customers/signup'
export default signupApi()

3
pages/search.tsx
View File

@ -59,7 +59,7 @@ export default function Search({
return (
<Container>
<div className="grid grid-cols-12 gap-8 mt-3 mb-20">
<div className="grid grid-cols-12 gap-4 mt-3 mb-20">
<div className="col-span-2">
<ul className="mb-10">
<li className="py-1 text-base font-bold tracking-wide">
@ -143,6 +143,7 @@ export default function Search({
<Grid layout="normal">
{data.products.map(({ node }) => (
<ProductCard
variant="simple"
key={node.path}
className="animate__animated animate__fadeIn"
product={node}

112
yarn.lock
View File

@ -1514,20 +1514,20 @@
meow "^7.0.0"
prettier "^2.0.5"
"@next/env@9.5.6-canary.6":
version "9.5.6-canary.6"
resolved "https://registry.yarnpkg.com/@next/env/-/env-9.5.6-canary.6.tgz#1aef358efc8d97ef6279d8539067df1ee4cea8af"
integrity sha512-WeM+gDMDUSDq+AidayYYkYKM9d8tqrpz6NMeM1Ga7zB96iymj72RdYZjEG2du4YcoSZ69m4nRHKUTMO9D2FTfQ==
"@next/env@9.5.6-canary.9":
version "9.5.6-canary.9"
resolved "https://registry.yarnpkg.com/@next/env/-/env-9.5.6-canary.9.tgz#d1f4fbfc424074b791b5e94ed8b1018624d8f588"
integrity sha512-/LQJcKrgWOCMWiEE4V56IQivLeVx8dvEpWLNGdeX5zaWIB9Vqp/peK8VJaz2mZf2+RRwy3GidBCueatAa37SLg==
"@next/polyfill-module@9.5.6-canary.6":
version "9.5.6-canary.6"
resolved "https://registry.yarnpkg.com/@next/polyfill-module/-/polyfill-module-9.5.6-canary.6.tgz#185b659bbc06f75ff221c02a934a342bde181f85"
integrity sha512-rt1XA3RILd4MU+mVI33yeyyCS8qlEaWuRHbX/LTKNNlVY9u3fQKr1ir0EboPj4ovQrZQaPzShgOoeN9Xe5xeaw==
"@next/polyfill-module@9.5.6-canary.9":
version "9.5.6-canary.9"
resolved "https://registry.yarnpkg.com/@next/polyfill-module/-/polyfill-module-9.5.6-canary.9.tgz#1270e7bbeb11c88103f6013794f89c92d7e37d5a"
integrity sha512-X4csjgv4CBcu6hr4XT21fWv9s5CvQw7UlCvTQa4H+No/ELfi4ITCBJJzHa4smCYcYSZXRHkW1J71p+D2HvQ23w==
"@next/react-dev-overlay@9.5.6-canary.6":
version "9.5.6-canary.6"
resolved "https://registry.yarnpkg.com/@next/react-dev-overlay/-/react-dev-overlay-9.5.6-canary.6.tgz#73950f96f2f57b34424988693e4734b3a5c010b6"
integrity sha512-oEY43VgFRdesKzI42Q+gfiagXlBbDtvQ0m8WSuFZS1VqTPFvrOKQ1BqUhOyNciryi5vdNo6QFW0vreeejlccLw==
"@next/react-dev-overlay@9.5.6-canary.9":
version "9.5.6-canary.9"
resolved "https://registry.yarnpkg.com/@next/react-dev-overlay/-/react-dev-overlay-9.5.6-canary.9.tgz#a295117b6837e6c0bd7822fb689a5765e74702b4"
integrity sha512-sqcler8Jl29p4UPdGRUAIfbWO0UwsWUyJ7KY4w5xLNu21z5fu0+cb47JoZAaOfdxYx15ySnkhMqCp5O14/QpUA==
dependencies:
"@babel/code-frame" "7.10.4"
ally.js "1.4.1"
@ -1540,10 +1540,10 @@
stacktrace-parser "0.1.10"
strip-ansi "6.0.0"
"@next/react-refresh-utils@9.5.6-canary.6":
version "9.5.6-canary.6"
resolved "https://registry.yarnpkg.com/@next/react-refresh-utils/-/react-refresh-utils-9.5.6-canary.6.tgz#a81fce1feb00e2ba8bc13e42191b04e4d810c6dd"
integrity sha512-SEVl95GfbwRWBZOkCUkMX9iYnD7EufIsduBs8npFuUfFwqVxGmvL2RmWqKQhloHeLPJELzTzPBxuydJ07MXxog==
"@next/react-refresh-utils@9.5.6-canary.9":
version "9.5.6-canary.9"
resolved "https://registry.yarnpkg.com/@next/react-refresh-utils/-/react-refresh-utils-9.5.6-canary.9.tgz#e552e441a6a61acb94d81e76bea315d88bd12fed"
integrity sha512-i9lbMJ3RTZ3GBVAmgjpRuvr3nxLEdJeAbUD8WDcHJo5Asa2VIsH/+TJgdhZ7Td9eJ6c2A+xmrEVBVvVwZsca+w==
"@nodelib/fs.scandir@2.1.3":
version "2.1.3"
@ -2528,16 +2528,13 @@ acorn@^8.0.3:
resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.0.4.tgz#7a3ae4191466a6984eee0fe3407a4f3aa9db8354"
integrity sha512-XNP0PqF1XD19ZlLKvB7cMmnZswW4C/03pRHgirB30uSJTaS3A3V1/P4sS3HPvFmjoriPCJQs+JDSbm4bL1TxGQ==
adjust-sourcemap-loader@2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/adjust-sourcemap-loader/-/adjust-sourcemap-loader-2.0.0.tgz#6471143af75ec02334b219f54bc7970c52fb29a4"
integrity sha512-4hFsTsn58+YjrU9qKzML2JSSDqKvN8mUGQ0nNIrfPi8hmIONT4L3uUaT6MKdMsZ9AjsU6D2xDkZxCkbQPxChrA==
adjust-sourcemap-loader@3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/adjust-sourcemap-loader/-/adjust-sourcemap-loader-3.0.0.tgz#5ae12fb5b7b1c585e80bbb5a63ec163a1a45e61e"
integrity sha512-YBrGyT2/uVQ/c6Rr+t6ZJXniY03YtHGMJQYal368burRGYKqhx9qGTWqcBU5s1CwYY9E/ri63RYyG1IacMZtqw==
dependencies:
assert "1.4.1"
camelcase "5.0.0"
loader-utils "1.2.3"
object-path "0.11.4"
regex-parser "2.2.10"
loader-utils "^2.0.0"
regex-parser "^2.2.11"
agent-base@6:
version "6.0.1"
@ -2732,13 +2729,6 @@ assert-plus@1.0.0, assert-plus@^1.0.0:
resolved "https://registry.yarnpkg.com/assert-plus/-/assert-plus-1.0.0.tgz#f12e0f3c5d77b0b1cdd9146942e4e96c1e4dd525"
integrity sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=
assert@1.4.1:
version "1.4.1"
resolved "https://registry.yarnpkg.com/assert/-/assert-1.4.1.tgz#99912d591836b5a6f5b345c0f07eefc08fc65d91"
integrity sha1-mZEtWRg2tab1s0XA8H7vwI/GXZE=
dependencies:
util "0.10.3"
assign-symbols@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/assign-symbols/-/assign-symbols-1.0.0.tgz#59667f41fadd4f20ccbc2bb96b8d4f7f78ec0367"
@ -3187,11 +3177,6 @@ camelcase-keys@^6.2.2:
map-obj "^4.0.0"
quick-lru "^4.0.1"
camelcase@5.0.0:
version "5.0.0"
resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.0.0.tgz#03295527d58bd3cd4aa75363f35b2e8d97be2f42"
integrity sha512-faqwZqnWxbxn+F1d399ygeamQNy3lPp/H9H6rNrqYh4FSVCtcY+3cub1MxA8o9mDd55mM8Aghuu/kuyYA6VTsA==
camelcase@5.3.1, camelcase@^5.0.0, camelcase@^5.3.1:
version "5.3.1"
resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320"
@ -4918,11 +4903,6 @@ inherits@2, inherits@^2.0.1, inherits@^2.0.3, inherits@^2.0.4, inherits@~2.0.3,
resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
inherits@2.0.1:
version "2.0.1"
resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.1.tgz#b17d08d326b4423e568eff719f91b0b1cbdf69f1"
integrity sha1-sX0I0ya0Qj5Wjv9xn5GwscvfafE=
ini@~1.3.0:
version "1.3.5"
resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.5.tgz#eee25f56db1c9ec6085e0c22778083f596abf927"
@ -6011,10 +5991,10 @@ next-tick@~1.0.0:
resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.0.0.tgz#ca86d1fe8828169b0120208e3dc8424b9db8342c"
integrity sha1-yobR/ogoFpsBICCOPchCS524NCw=
next@^9.5.6-canary.4:
version "9.5.6-canary.6"
resolved "https://registry.yarnpkg.com/next/-/next-9.5.6-canary.6.tgz#5335a3cd93a3fe85ebfb986c614081885d8e1a2d"
integrity sha512-u54H/v91wHayaJzIx+u9x9mtt8fuPUJpFzLk6VORM9jhwDZbgbtzaFyp7rkq71rECtJhzu+X2KtTHPcEejtX8A==
next@^9.5.6-canary.9:
version "9.5.6-canary.9"
resolved "https://registry.yarnpkg.com/next/-/next-9.5.6-canary.9.tgz#93acf48d395a54269eeff77d67a5bb6b46c87c22"
integrity sha512-i/vNrr4VxqPUiPn5HdR0C2TcAqUmfc5lY6Qj7Hywi4Uit+f9ltWKC+r4WoOw6iIs+TRTej/EzrKnyXEUn5vAcQ==
dependencies:
"@ampproject/toolbox-optimizer" "2.6.0"
"@babel/code-frame" "7.10.4"
@ -6035,10 +6015,10 @@ next@^9.5.6-canary.4:
"@babel/runtime" "7.11.2"
"@babel/types" "7.11.5"
"@hapi/accept" "5.0.1"
"@next/env" "9.5.6-canary.6"
"@next/polyfill-module" "9.5.6-canary.6"
"@next/react-dev-overlay" "9.5.6-canary.6"
"@next/react-refresh-utils" "9.5.6-canary.6"
"@next/env" "9.5.6-canary.9"
"@next/polyfill-module" "9.5.6-canary.9"
"@next/react-dev-overlay" "9.5.6-canary.9"
"@next/react-refresh-utils" "9.5.6-canary.9"
ast-types "0.13.2"
babel-plugin-transform-define "2.0.0"
babel-plugin-transform-react-remove-prop-types "0.4.24"
@ -6064,7 +6044,7 @@ next@^9.5.6-canary.4:
prop-types "15.7.2"
react-is "16.13.1"
react-refresh "0.8.3"
resolve-url-loader "3.1.1"
resolve-url-loader "3.1.2"
sass-loader "10.0.2"
schema-utils "2.7.1"
stream-browserify "3.0.0"
@ -6235,11 +6215,6 @@ object-keys@^1.0.12, object-keys@^1.1.1:
resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
integrity sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==
object-path@0.11.4:
version "0.11.4"
resolved "https://registry.yarnpkg.com/object-path/-/object-path-0.11.4.tgz#370ae752fbf37de3ea70a861c23bba8915691949"
integrity sha1-NwrnUvvzfePqcKhhwju6iRVpGUk=
object-visit@^1.0.0:
version "1.0.1"
resolved "https://registry.yarnpkg.com/object-visit/-/object-visit-1.0.1.tgz#f79c4493af0c5377b59fe39d395e41042dd045bb"
@ -7274,10 +7249,10 @@ regex-not@^1.0.0, regex-not@^1.0.2:
extend-shallow "^3.0.2"
safe-regex "^1.1.0"
regex-parser@2.2.10:
version "2.2.10"
resolved "https://registry.yarnpkg.com/regex-parser/-/regex-parser-2.2.10.tgz#9e66a8f73d89a107616e63b39d4deddfee912b37"
integrity sha512-8t6074A68gHfU8Neftl0Le6KTDwfGAj7IyjPIMSfikI2wJUTHDMaIq42bUsfVnj8mhx0R+45rdUXHGpN164avA==
regex-parser@^2.2.11:
version "2.2.11"
resolved "https://registry.yarnpkg.com/regex-parser/-/regex-parser-2.2.11.tgz#3b37ec9049e19479806e878cabe7c1ca83ccfe58"
integrity sha512-jbD/FT0+9MBU2XAZluI7w2OBs1RBi6p9M83nkoZayQXXU9e8Robt69FcZc7wU4eJD/YFTjn1JdCk3rbMJajz8Q==
regexpu-core@^4.7.1:
version "4.7.1"
@ -7423,12 +7398,12 @@ resolve-from@^4.0.0:
resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==
resolve-url-loader@3.1.1:
version "3.1.1"
resolved "https://registry.yarnpkg.com/resolve-url-loader/-/resolve-url-loader-3.1.1.tgz#28931895fa1eab9be0647d3b2958c100ae3c0bf0"
integrity sha512-K1N5xUjj7v0l2j/3Sgs5b8CjrrgtC70SmdCuZiJ8tSyb5J+uk3FoeZ4b7yTnH6j7ngI+Bc5bldHJIa8hYdu2gQ==
resolve-url-loader@3.1.2:
version "3.1.2"
resolved "https://registry.yarnpkg.com/resolve-url-loader/-/resolve-url-loader-3.1.2.tgz#235e2c28e22e3e432ba7a5d4e305c59a58edfc08"
integrity sha512-QEb4A76c8Mi7I3xNKXlRKQSlLBwjUV/ULFMP+G7n3/7tJZ8MG5wsZ3ucxP1Jz8Vevn6fnJsxDx9cIls+utGzPQ==
dependencies:
adjust-sourcemap-loader "2.0.0"
adjust-sourcemap-loader "3.0.0"
camelcase "5.3.1"
compose-function "3.0.3"
convert-source-map "1.7.0"
@ -8417,13 +8392,6 @@ util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1:
resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
integrity sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=
util@0.10.3:
version "0.10.3"
resolved "https://registry.yarnpkg.com/util/-/util-0.10.3.tgz#7afb1afe50805246489e3db7fe0ed379336ac0f9"
integrity sha1-evsa/lCAUkZInj23/g7TeTNqwPk=
dependencies:
inherits "2.0.1"
uuid@^3.3.2:
version "3.4.0"
resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.4.0.tgz#b23e4358afa8a202fe7a100af1f5f883f02007ee"