From f571d7fab383c94cf2fa59fd05633e5bb2884724 Mon Sep 17 00:00:00 2001 From: Samantha Kellow Date: Wed, 13 Sep 2023 21:02:59 +0100 Subject: [PATCH] Fix sos page --- app/sos/NewProductHelpComponent.tsx | 83 ++++++++++++++++++++++++ app/sos/page.tsx | 97 +---------------------------- components/layout/footer.tsx | 8 +-- components/store/themeContext.tsx | 62 ++++++++++++++++++ constants/sku.tsx | 12 ++-- lib/constants.ts | 2 +- lib/helpers/skus.tsx | 10 +-- 7 files changed, 161 insertions(+), 113 deletions(-) create mode 100644 app/sos/NewProductHelpComponent.tsx create mode 100644 components/store/themeContext.tsx diff --git a/app/sos/NewProductHelpComponent.tsx b/app/sos/NewProductHelpComponent.tsx new file mode 100644 index 000000000..f4d379415 --- /dev/null +++ b/app/sos/NewProductHelpComponent.tsx @@ -0,0 +1,83 @@ +"use client" + +import { Input } from "@/components/ui/input"; +import { Combox } from "components/combox"; +import { ProductSKUs } from "components/product/sku-generator"; +import { collectionsSKUs, garmentHandleKeys } from "constants/sku"; +import { capitalizeFirstLetter, copyText } from "lib/helpers/actions"; +import { useMemo, useState } from "react"; + + + +// type SKUSelectorState = { +// garment?: keyof typeof garmentHandleKeys, +// collection?: keyof typeof collectionsSKUs, +// }; + +export function NewProductHelpComponent() { + // const [open, setOpen] = useState(false) + const [collection, setCollection] = useState(null); + // TODO: preselect tshirt + const [garment, setGarment] = useState(null); + // const [title, setTitle] = useState(null); + const [number, setNumber] = useState(null); + + const title = useMemo(() => { + const title = collection && garment && `${capitalizeFirstLetter(collection)}scape No.${number} ${garment}`; + console.log("🍓🍋🍊 title", title); + return title; + }, [collection, garment, number]); + + const garmentOptions = Object.entries(garmentHandleKeys).map(([fullGarmentName, garmentHandle]) => ({ + label: fullGarmentName as keyof typeof garmentHandleKeys, + key: fullGarmentName as keyof typeof garmentHandleKeys, + })) + const collectionOptions = Object.entries(collectionsSKUs).map(([scape, scapeNumber]) => ({ + label: scape as keyof typeof collectionsSKUs, + key: scape as keyof typeof collectionsSKUs + })) + + return ( +
+
+
+

New Product Creator

+
+
+ setCollection(key as keyof typeof collectionsSKUs)} + currentKey={collection || null} /> +
+
+ setNumber(e.target.value)} /> +
+
+ setGarment(key as keyof typeof garmentHandleKeys)} + currentKey={garment || null} /> +
+ + {garment && collection && number && title && + <> +
+
copyText(title)} + > + {title} +
+
+
+ +
+ } +
+
+ ); +} diff --git a/app/sos/page.tsx b/app/sos/page.tsx index 35875df7f..bb9cf0ad2 100644 --- a/app/sos/page.tsx +++ b/app/sos/page.tsx @@ -1,97 +1,6 @@ -// make a page where you can select from garment types, collection types and numbers to create a copyable name -"use client" - -import { Input } from "@/components/ui/input"; -import { Combox } from "components/combox"; -import { ProductSKUs } from "components/product/sku-generator"; -import { collectionsSKUs, garmentHandleKeys } from "constants/sku"; -import { capitalizeFirstLetter, copyText } from "lib/helpers/actions"; -import { useEffect, useState } from "react"; - -// type SKUSelectorState = { -// garment?: keyof typeof garmentHandleKeys, -// collection?: keyof typeof collectionsSKUs, -// }; +import { NewProductHelpComponent } from "./NewProductHelpComponent" export default async function NewProductHelpPage() { - // const [open, setOpen] = useState(false) - const [collection, setCollection] = useState(null) - const [garment, setGarment] = useState(null) - const [title, setTitle] = useState(null) - const [number, setNumber] = useState(null) + return +} - useEffect(() => { - const title = createTitle() - console.log("🍓🍋🍊 title", title); - - }, [collection, garment]) - - const garmentValues = Object.keys(garmentHandleKeys) - const collectionValues = Object.keys(collectionsSKUs) - - const optionsMapper = (keys: {}, values: string[]) => { - return values.map(value => { - return { - key: keys[value as keyof typeof keys], - label: value, - } - }) - } - - const garmentOptions = optionsMapper(garmentHandleKeys, garmentValues); - const collectionOptions = optionsMapper(collectionsSKUs, collectionValues); - - const createTitle = () => { - setTitle(collection && garment && `${capitalizeFirstLetter(collection)}scape No.${number} ${garment}`) - } - - - - return ( -
-
-
-

New Product Creator

-
-
- setCollection(key as keyof typeof collectionsSKUs)} - currentKey={collection || null} - /> -
-
- setNumber(e.target.value)} - /> -
-
- setGarment(key as keyof typeof garmentHandleKeys)} - currentKey={garment || null} - /> -
- - {garment && collection && number && title && - <> -
-
copyText(title)} - > - {title} -
-
-
- -
- - } -
-
- ) -} \ No newline at end of file diff --git a/components/layout/footer.tsx b/components/layout/footer.tsx index 814726764..10a68490e 100644 --- a/components/layout/footer.tsx +++ b/components/layout/footer.tsx @@ -49,16 +49,16 @@ export default async function Footer() { */}
-
+

© {copyrightDate} {copyrightName} {copyrightName.length && !copyrightName.endsWith('.') ? '.' : ''} All rights reserved.

-
-

Designed in England

+ {/*
*/} + {/*

Designed in England

*/}

Crafted by{' '} - + Sammii Sparkle

diff --git a/components/store/themeContext.tsx b/components/store/themeContext.tsx new file mode 100644 index 000000000..c1c108a11 --- /dev/null +++ b/components/store/themeContext.tsx @@ -0,0 +1,62 @@ +import { createContext, ReactElement, useEffect, useState } from "react"; + +const ThemeContext = createContext({ + isDarkTheme: true, + toggleThemeHandler: () => {}, +}); + +interface ThemePropsInterface { + children?: JSX.Element | Array; +} + +export function MyThemeContextProvider( + props: ThemePropsInterface +): ReactElement { + const [isDarkTheme, setIsDarkTheme] = useState(true); + useEffect(() => initialThemeHandler()); + + function isLocalStorageEmpty(): boolean { + return !localStorage.getItem("isDarkTheme"); + } + + function initialThemeHandler(): void { + if (isLocalStorageEmpty()) { + localStorage.setItem("isDarkTheme", `true`); + document!.querySelector("body")!.classList.add("dark"); + setIsDarkTheme(true); + } else { + const isDarkTheme: boolean = JSON.parse( + localStorage.getItem("isDarkTheme")! + ); + isDarkTheme && document!.querySelector("body")!.classList.add("dark"); + setIsDarkTheme(() => { + return isDarkTheme; + }); + } + } + + function toggleThemeHandler(): void { + const isDarkTheme: boolean = JSON.parse( + localStorage.getItem("isDarkTheme")! + ); + setIsDarkTheme(!isDarkTheme); + toggleDarkClassToBody(); + setValueToLocalStorage(); + } + + function toggleDarkClassToBody(): void { + document!.querySelector("body")!.classList.toggle("dark"); + } + + function setValueToLocalStorage(): void { + localStorage.setItem("isDarkTheme", `${!isDarkTheme}`); + } + + return ( + + {props.children} + + ); +} + +export default ThemeContext; diff --git a/constants/sku.tsx b/constants/sku.tsx index a7911a987..f42863d10 100644 --- a/constants/sku.tsx +++ b/constants/sku.tsx @@ -3,12 +3,12 @@ export const baseArtworkNumber = '000'; export const sizes = [ 'xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl', 'xxxl' ]; export const garmentTypes = { - tshirt: 'tshirt', - cropT: 'cropT', - hoodie: 'hoodie', - zipHood: 'zipHood', - crew: 'crew', - cropCrew: 'cropCrew', + tshirt: 'tshirt' as const, + cropT: 'cropT' as const, + hoodie: 'hoodie' as const, + zipHood: 'zipHood' as const, + crew: 'crew' as const, + cropCrew: 'cropCrew' as const, }; export const garmentHandleKeys = { diff --git a/lib/constants.ts b/lib/constants.ts index 99711221a..bcb27c5d9 100644 --- a/lib/constants.ts +++ b/lib/constants.ts @@ -25,6 +25,6 @@ export const TAGS = { products: 'products' }; -export const HIDDEN_PRODUCT_TAG = 'nextjs-frontend-hidden'; +export const HIDDEN_PRODUCT_TAG = 'hidden-product'; export const DEFAULT_OPTION = 'Default Title'; export const SHOPIFY_GRAPHQL_API_ENDPOINT = '/api/2023-01/graphql.json'; diff --git a/lib/helpers/skus.tsx b/lib/helpers/skus.tsx index f57400355..e1df3f82a 100644 --- a/lib/helpers/skus.tsx +++ b/lib/helpers/skus.tsx @@ -1,13 +1,7 @@ -import { baseArtworkNumber, collectionsSKUs, colorSKUs, customisationSKUs, garmentHandleKeys, garmentSKUs, garmentSizes, sizeSKUs } from "constants/sku"; +import { collectionsSKUs, colorSKUs, customisationSKUs, garmentHandleKeys, garmentSKUs, garmentSizes, sizeSKUs } from "constants/sku"; type TitleInfo = Awaited>; -const artworkNumberCompiler = (artworkNumber: string) => { - const length = artworkNumber.length - const slice = baseArtworkNumber.slice(0, length + 1) - return slice + artworkNumber -} - const garmentHandleKeyMapper = (garmentKeys: string[]) => { const garmentTitle = garmentKeys.join(' '); const garmentKey = garmentHandleKeys[garmentTitle as keyof typeof garmentHandleKeys] @@ -30,7 +24,7 @@ const extractInfoFromTitle = (productTitle: string) => { const collectionSKUMapper = (titleInfo: TitleInfo) => { const collectionSKU = collectionsSKUs[titleInfo.collectionKey as keyof typeof collectionsSKUs]; - const artworkSKU = artworkNumberCompiler(titleInfo.artworkNumber!); + const artworkSKU = titleInfo.artworkNumber!.padStart(4, "0"); const garmentSKU = garmentHandleKeyMapper(titleInfo.garmentKeys); return `SCSQ${collectionSKU}${artworkSKU}_${garmentSKU}`;