forked from crowetic/commerce
* Custom Checkout Progress * Updates to Checkout * Custom Checkout Progress * Adding tabs * Adding Collapse * Adding Collapse * Improving Sidebar Scroll * Modif footer * Changes * More design updates * sidebar cart * More design updates * More design updates * More design updates * More design updates * Types * Types * Design Updates * More changes * More changes * More changes * Changes * Changes * Changes * New tailwind required changes * Sidebar Styling issues with Mobile * Latest changes - Normalizing cart * Styling Fixes * New changes * Changes * latest * Refactor and Renaming some UI Props * Adding Quantity Component * Adding Rating Component * Rating Component * More updates * User Select disabled, plus hidding horizontal scroll bars * Changes * Adding ProductOptions Component and more helpers * Styling updates * Styling updates * Fix for slim tags * Missmatch with RightArrow * Footer updates and some styles * Latest Updates * Latest Updates * Latest Updates * Removing Portal, since it's not needed. We might add it later I'd rather not to. * Removing Portal, since it's not needed. We might add it later I'd rather not to. * Sam backdrop filter * General UI Improvements * General UI Improvements * Search now with Geist Colors * Now with Geist Colors * Changes * Scroll for Mobile on IOs devises * LoadingDots Working (: * Changes * More Changes * Perf changes * More perf changes * Fade to the Nametags in the ProductCard * changes * Search issue ui * Search issue ui * Make sure to only refresh navbar and modals when required * Index revalidate * Fixed image issue * hide album scroll on windows * Fix scrollbar * Changing * Adding 404 with Layout * Removing Toast * Adding Assets * Adding Assets * Progress with LocalProvider * New productTag * Only images for the drop * changes * Empty SWRhooks * Adding Local Provider * Working local * Working view of a LocalProvider * More updates * Changes * Removed react-ticker * default to local if no env available * default to local if no env available * add missing `@` to css import * rewrite search rewrites to multiple pages * allow requests in getStaticProps to execute in parallel * make type import explicit * add a tsconfig.js file * use local provider in tsconfig.js * avoid a circular dependency * Saleor was not in the providers list * avoid circular dependency in bigcommerce * Adding more to the Local Provider (#366) * Adding more data * Adding more data * optimize assets (#370) * Optimize assets (#372) * optimize assets * remove assets * remove assets * cart enabled * Adding saleor * Changes with Webpack * Changes Co-authored-by: Luis Alvarez <luis@vercel.com> Co-authored-by: Tobias Koppers <tobias.koppers@googlemail.com> Co-authored-by: Shu Ding <g@shud.in>
198 lines
4.7 KiB
TypeScript
198 lines
4.7 KiB
TypeScript
import type { Page } from '../types/page'
|
|
import type { Product } from '../types/product'
|
|
import type { Cart, LineItem } from '../types/cart'
|
|
import type { Category } from '../types/site'
|
|
|
|
import {
|
|
Product as ShopifyProduct,
|
|
Checkout,
|
|
CheckoutLineItemEdge,
|
|
SelectedOption,
|
|
ImageConnection,
|
|
ProductVariantConnection,
|
|
MoneyV2,
|
|
ProductOption,
|
|
Page as ShopifyPage,
|
|
PageEdge,
|
|
Collection,
|
|
} from '../schema'
|
|
import { colorMap } from '@lib/colors'
|
|
|
|
const money = ({ amount, currencyCode }: MoneyV2) => {
|
|
return {
|
|
value: +amount,
|
|
currencyCode,
|
|
}
|
|
}
|
|
|
|
const normalizeProductOption = ({
|
|
id,
|
|
name: displayName,
|
|
values,
|
|
}: ProductOption) => {
|
|
return {
|
|
__typename: 'MultipleChoiceOption',
|
|
id,
|
|
displayName: displayName.toLowerCase(),
|
|
values: values.map((value) => {
|
|
let output: any = {
|
|
label: value,
|
|
}
|
|
if (displayName.match(/colou?r/gi)) {
|
|
const mapedColor = colorMap[value.toLowerCase().replace(/ /g, '')]
|
|
if (mapedColor) {
|
|
output = {
|
|
...output,
|
|
hexColors: [mapedColor],
|
|
}
|
|
}
|
|
}
|
|
return output
|
|
}),
|
|
}
|
|
}
|
|
|
|
const normalizeProductImages = ({ edges }: ImageConnection) =>
|
|
edges?.map(({ node: { originalSrc: url, ...rest } }) => ({
|
|
url,
|
|
...rest,
|
|
}))
|
|
|
|
const normalizeProductVariants = ({ edges }: ProductVariantConnection) => {
|
|
return edges?.map(
|
|
({
|
|
node: {
|
|
id,
|
|
selectedOptions,
|
|
sku,
|
|
title,
|
|
priceV2,
|
|
compareAtPriceV2,
|
|
requiresShipping,
|
|
availableForSale,
|
|
},
|
|
}) => {
|
|
return {
|
|
id,
|
|
name: title,
|
|
sku: sku ?? id,
|
|
price: +priceV2.amount,
|
|
listPrice: +compareAtPriceV2?.amount,
|
|
requiresShipping,
|
|
availableForSale,
|
|
options: selectedOptions.map(({ name, value }: SelectedOption) => {
|
|
const options = normalizeProductOption({
|
|
id,
|
|
name,
|
|
values: [value],
|
|
})
|
|
|
|
return options
|
|
}),
|
|
}
|
|
}
|
|
)
|
|
}
|
|
|
|
export function normalizeProduct({
|
|
id,
|
|
title: name,
|
|
vendor,
|
|
images,
|
|
variants,
|
|
description,
|
|
descriptionHtml,
|
|
handle,
|
|
priceRange,
|
|
options,
|
|
metafields,
|
|
...rest
|
|
}: ShopifyProduct): Product {
|
|
return {
|
|
id,
|
|
name,
|
|
vendor,
|
|
path: `/${handle}`,
|
|
slug: handle?.replace(/^\/+|\/+$/g, ''),
|
|
price: money(priceRange?.minVariantPrice),
|
|
images: normalizeProductImages(images),
|
|
variants: variants ? normalizeProductVariants(variants) : [],
|
|
options: options
|
|
? options
|
|
.filter((o) => o.name !== 'Title') // By default Shopify adds a 'Title' name when there's only one option. We don't need it. https://community.shopify.com/c/Shopify-APIs-SDKs/Adding-new-product-variant-is-automatically-adding-quot-Default/td-p/358095
|
|
.map((o) => normalizeProductOption(o))
|
|
: [],
|
|
...(description && { description }),
|
|
...(descriptionHtml && { descriptionHtml }),
|
|
...rest,
|
|
}
|
|
}
|
|
|
|
export function normalizeCart(checkout: Checkout): Cart {
|
|
return {
|
|
id: checkout.id,
|
|
url: checkout.webUrl,
|
|
customerId: '',
|
|
email: '',
|
|
createdAt: checkout.createdAt,
|
|
currency: {
|
|
code: checkout.totalPriceV2?.currencyCode,
|
|
},
|
|
taxesIncluded: checkout.taxesIncluded,
|
|
lineItems: checkout.lineItems?.edges.map(normalizeLineItem),
|
|
lineItemsSubtotalPrice: +checkout.subtotalPriceV2?.amount,
|
|
subtotalPrice: +checkout.subtotalPriceV2?.amount,
|
|
totalPrice: checkout.totalPriceV2?.amount,
|
|
discounts: [],
|
|
}
|
|
}
|
|
|
|
function normalizeLineItem({
|
|
node: { id, title, variant, quantity },
|
|
}: CheckoutLineItemEdge): LineItem {
|
|
return {
|
|
id,
|
|
variantId: String(variant?.id),
|
|
productId: String(variant?.id),
|
|
name: `${title}`,
|
|
quantity,
|
|
variant: {
|
|
id: String(variant?.id),
|
|
sku: variant?.sku ?? '',
|
|
name: variant?.title!,
|
|
image: {
|
|
url: variant?.image?.originalSrc || '/product-img-placeholder.svg',
|
|
},
|
|
requiresShipping: variant?.requiresShipping ?? false,
|
|
price: variant?.priceV2?.amount,
|
|
listPrice: variant?.compareAtPriceV2?.amount,
|
|
},
|
|
path: String(variant?.product?.handle),
|
|
discounts: [],
|
|
options: variant?.title == 'Default Title' ? [] : variant?.selectedOptions,
|
|
}
|
|
}
|
|
|
|
export const normalizePage = (
|
|
{ title: name, handle, ...page }: ShopifyPage,
|
|
locale: string = 'en-US'
|
|
): Page => ({
|
|
...page,
|
|
url: `/${locale}/${handle}`,
|
|
name,
|
|
})
|
|
|
|
export const normalizePages = (edges: PageEdge[], locale?: string): Page[] =>
|
|
edges?.map((edge) => normalizePage(edge.node, locale))
|
|
|
|
export const normalizeCategory = ({
|
|
title: name,
|
|
handle,
|
|
id,
|
|
}: Collection): Category => ({
|
|
id,
|
|
name,
|
|
slug: handle,
|
|
path: `/${handle}`,
|
|
})
|