diff --git a/components/auth/ForgotPassword.tsx b/components/auth/ForgotPassword.tsx deleted file mode 100644 index dbac371c7..000000000 --- a/components/auth/ForgotPassword.tsx +++ /dev/null @@ -1,78 +0,0 @@ -import { FC, useEffect, useState, useCallback } from 'react' -import { validate } from 'email-validator' -import { useUI } from '@components/ui/context' -import { Logo, Button, Input } from '@components/ui' - -interface Props {} - -const ForgotPassword: FC = () => { - // Form State - const [email, setEmail] = useState('') - const [loading, setLoading] = useState(false) - const [message, setMessage] = useState('') - const [dirty, setDirty] = useState(false) - const [disabled, setDisabled] = useState(false) - - const { setModalView, closeModal } = useUI() - - const handleResetPassword = async (e: React.SyntheticEvent) => { - e.preventDefault() - - if (!dirty && !disabled) { - setDirty(true) - handleValidation() - } - } - - const handleValidation = useCallback(() => { - // Unable to send form unless fields are valid. - if (dirty) { - setDisabled(!validate(email)) - } - }, [email, dirty]) - - useEffect(() => { - handleValidation() - }, [handleValidation]) - - return ( -
-
- -
-
- {message && ( -
{message}
- )} - - -
- -
- - - Do you have an account? - {` `} - setModalView('LOGIN_VIEW')} - > - Log In - - -
-
- ) -} - -export default ForgotPassword diff --git a/components/auth/LoginView.tsx b/components/auth/LoginView.tsx deleted file mode 100644 index 35ff98f66..000000000 --- a/components/auth/LoginView.tsx +++ /dev/null @@ -1,104 +0,0 @@ -import { FC, useEffect, useState, useCallback } from 'react' -import { Logo, Button, Input } from '@components/ui' -import useLogin from '@framework/auth/use-login' -import { useUI } from '@components/ui/context' -import { validate } from 'email-validator' - -interface Props {} - -const LoginView: FC = () => { - // Form State - const [email, setEmail] = useState('') - const [password, setPassword] = useState('') - const [loading, setLoading] = useState(false) - const [message, setMessage] = useState('') - const [dirty, setDirty] = useState(false) - const [disabled, setDisabled] = useState(false) - const { setModalView, closeModal } = useUI() - - const login = useLogin() - - const handleLogin = async (e: React.SyntheticEvent) => { - e.preventDefault() - - if (!dirty && !disabled) { - setDirty(true) - handleValidation() - } - - try { - setLoading(true) - setMessage('') - await login({ - email, - password, - }) - setLoading(false) - closeModal() - } catch ({ errors }) { - setMessage(errors[0].message) - setLoading(false) - } - } - - const handleValidation = useCallback(() => { - // Test for Alphanumeric password - const validPassword = /^(?=.*[a-zA-Z])(?=.*[0-9])/.test(password) - - // Unable to send form unless fields are valid. - if (dirty) { - setDisabled(!validate(email) || password.length < 7 || !validPassword) - } - }, [email, password, dirty]) - - useEffect(() => { - handleValidation() - }, [handleValidation]) - - return ( -
-
- -
-
- {message && ( - - )} - - - - -
- Don't have an account? - {` `} - setModalView('SIGNUP_VIEW')} - > - Sign Up - -
-
-
- ) -} - -export default LoginView diff --git a/components/auth/SignUpView.tsx b/components/auth/SignUpView.tsx deleted file mode 100644 index a85a3bc27..000000000 --- a/components/auth/SignUpView.tsx +++ /dev/null @@ -1,114 +0,0 @@ -import { FC, useEffect, useState, useCallback } from 'react' -import { validate } from 'email-validator' -import { Info } from '@components/icons' -import { useUI } from '@components/ui/context' -import { Logo, Button, Input } from '@components/ui' -import useSignup from '@framework/auth/use-signup' - -interface Props {} - -const SignUpView: FC = () => { - // Form State - const [email, setEmail] = useState('') - const [password, setPassword] = useState('') - const [firstName, setFirstName] = useState('') - const [lastName, setLastName] = useState('') - const [loading, setLoading] = useState(false) - const [message, setMessage] = useState('') - const [dirty, setDirty] = useState(false) - const [disabled, setDisabled] = useState(false) - - const signup = useSignup() - const { setModalView, closeModal } = useUI() - - const handleSignup = async (e: React.SyntheticEvent) => { - e.preventDefault() - - if (!dirty && !disabled) { - setDirty(true) - handleValidation() - } - - try { - setLoading(true) - setMessage('') - await signup({ - email, - firstName, - lastName, - password, - }) - setLoading(false) - closeModal() - } catch ({ errors }) { - setMessage(errors[0].message) - setLoading(false) - } - } - - const handleValidation = useCallback(() => { - // Test for Alphanumeric password - const validPassword = /^(?=.*[a-zA-Z])(?=.*[0-9])/.test(password) - - // Unable to send form unless fields are valid. - if (dirty) { - setDisabled(!validate(email) || password.length < 7 || !validPassword) - } - }, [email, password, dirty]) - - useEffect(() => { - handleValidation() - }, [handleValidation]) - - return ( -
-
- -
-
- {message && ( -
{message}
- )} - - - - - - - - {' '} - - Info: Passwords must be longer than 7 chars and - include numbers.{' '} - - -
- -
- - - Do you have an account? - {` `} - setModalView('LOGIN_VIEW')} - > - Log In - - -
-
- ) -} - -export default SignUpView diff --git a/components/auth/index.ts b/components/auth/index.ts deleted file mode 100644 index 11571fac7..000000000 --- a/components/auth/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -export { default as LoginView } from './LoginView' -export { default as SignUpView } from './SignUpView' -export { default as ForgotPassword } from './ForgotPassword' diff --git a/components/cart/CartItem/CartItem.module.css b/components/cart/CartItem/CartItem.module.css deleted file mode 100644 index dd43314fb..000000000 --- a/components/cart/CartItem/CartItem.module.css +++ /dev/null @@ -1,32 +0,0 @@ -.root { - @apply flex flex-col py-4; -} - -.root:first-child { - padding-top: 0; -} - -.quantity { - appearance: textfield; - @apply w-8 border-accent-2 border mx-3 rounded text-center text-sm text-black; -} - -.quantity::-webkit-outer-spin-button, -.quantity::-webkit-inner-spin-button { - @apply appearance-none m-0; -} - -.productImage { - position: absolute; - transform: scale(1.9); - width: 100%; - height: 100%; - left: 30% !important; - top: 30% !important; - z-index: 1; -} - -.productName { - @apply font-medium cursor-pointer pb-1; - margin-top: -4px; -} diff --git a/components/cart/CartItem/CartItem.tsx b/components/cart/CartItem/CartItem.tsx deleted file mode 100644 index a59024e06..000000000 --- a/components/cart/CartItem/CartItem.tsx +++ /dev/null @@ -1,151 +0,0 @@ -import { ChangeEvent, FocusEventHandler, useEffect, useState } from 'react' -import cn from 'classnames' -import Image from 'next/image' -import Link from 'next/link' -import s from './CartItem.module.css' -import { Trash, Plus, Minus, Cross } from '@components/icons' -import { useUI } from '@components/ui/context' -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' -import Quantity from '@components/ui/Quantity' - -type ItemOption = { - name: string - nameId: number - value: string - valueId: number -} - -const CartItem = ({ - item, - variant = 'default', - currencyCode, - ...rest -}: { - variant?: 'default' | 'display' - item: LineItem - currencyCode: string -}) => { - const { closeSidebarIfPresent } = useUI() - const [removing, setRemoving] = useState(false) - const [quantity, setQuantity] = useState(item.quantity) - const removeItem = useRemoveItem() - const updateItem = useUpdateItem({ item }) - - const { price } = usePrice({ - amount: item.variant.price * item.quantity, - baseAmount: item.variant.listPrice * item.quantity, - currencyCode, - }) - - const handleChange = async ({ - target: { value }, - }: ChangeEvent) => { - setQuantity(Number(value)) - await updateItem({ quantity: Number(value) }) - } - - const increaseQuantity = async (n = 1) => { - const val = Number(quantity) + n - setQuantity(val) - await updateItem({ quantity: val }) - } - - const handleRemove = async () => { - setRemoving(true) - try { - await removeItem(item) - } catch (error) { - setRemoving(false) - } - } - - // TODO: Add a type for this - const options = (item as any).options - - useEffect(() => { - // Reset the quantity state if the item quantity changes - if (item.quantity !== Number(quantity)) { - setQuantity(item.quantity) - } - }, [item.quantity]) - - return ( -
  • -
    -
    - - closeSidebarIfPresent()} - className={s.productImage} - width={150} - height={150} - src={item.variant.image!.url} - alt={item.variant.image!.altText} - unoptimized - /> - -
    -
    - - closeSidebarIfPresent()} - > - {item.name} - - - {options && options.length > 0 && ( -
    - {options.map((option: ItemOption, i: number) => ( -
    - {option.name} - {option.name === 'Color' ? ( - - ) : ( - - {option.value} - - )} - {i === options.length - 1 ? '' : } -
    - ))} -
    - )} - {variant === 'display' && ( -
    {quantity}x
    - )} -
    -
    - {price} -
    -
    - {variant === 'default' && ( - increaseQuantity(1)} - decrease={() => increaseQuantity(-1)} - /> - )} -
    • - ) -} - -export default CartItem diff --git a/components/cart/CartItem/index.ts b/components/cart/CartItem/index.ts deleted file mode 100644 index b5f6dc52f..000000000 --- a/components/cart/CartItem/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './CartItem' diff --git a/components/cart/CartSidebarView/CartSidebarView.module.css b/components/cart/CartSidebarView/CartSidebarView.module.css deleted file mode 100644 index c9ffbed50..000000000 --- a/components/cart/CartSidebarView/CartSidebarView.module.css +++ /dev/null @@ -1,11 +0,0 @@ -.root { - min-height: 100vh; -} - -.root.empty { - @apply bg-secondary text-secondary; -} - -.lineItemsList { - @apply py-4 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-accent-2 border-accent-2; -} diff --git a/components/cart/CartSidebarView/CartSidebarView.tsx b/components/cart/CartSidebarView/CartSidebarView.tsx deleted file mode 100644 index 128b928a8..000000000 --- a/components/cart/CartSidebarView/CartSidebarView.tsx +++ /dev/null @@ -1,129 +0,0 @@ -import cn from 'classnames' -import Link from 'next/link' -import { FC } from 'react' -import s from './CartSidebarView.module.css' -import CartItem from '../CartItem' -import { Button, Text } from '@components/ui' -import { useUI } from '@components/ui/context' -import { Bag, Cross, Check } from '@components/icons' -import useCart from '@framework/cart/use-cart' -import usePrice from '@framework/product/use-price' -import SidebarLayout from '@components/common/SidebarLayout' - -const CartSidebarView: FC = () => { - const { closeSidebar, setSidebarView } = useUI() - const { data, isLoading, isEmpty } = useCart() - - const { price: subTotal } = usePrice( - data && { - amount: Number(data.subtotalPrice), - currencyCode: data.currency.code, - } - ) - const { price: total } = usePrice( - data && { - amount: Number(data.totalPrice), - currencyCode: data.currency.code, - } - ) - const handleClose = () => closeSidebar() - const goToCheckout = () => setSidebarView('CHECKOUT_VIEW') - - const error = null - const success = null - - return ( - - {isLoading || isEmpty ? ( -
    - - - -

    - Your cart is empty -

    -

    - Biscuit oat cake wafer icing ice cream tiramisu pudding cupcake. -

    -
    - ) : error ? ( -
    - - - -

    - We couldn’t process the purchase. Please check your card information - and try again. -

    -
    - ) : success ? ( -
    - - - -

    - Thank you for your order. -

    -
    - ) : ( - <> -
    - - - My Cart - - -
      - {data!.lineItems.map((item: any) => ( - - ))} -
    -
    - -
    -
      -
    • - Subtotal - {subTotal} -
      • -
    • - Taxes - Calculated at checkout -
      • -
    • - Shipping - FREE -
      • -
    -
    - Total - {total} -
    -
    - {process.env.COMMERCE_CUSTOMCHECKOUT_ENABLED ? ( - - ) : ( - - )} -
    -
    - - )} -     - ) -} - -export default CartSidebarView diff --git a/components/cart/CartSidebarView/index.ts b/components/cart/CartSidebarView/index.ts deleted file mode 100644 index 0262e448e..000000000 --- a/components/cart/CartSidebarView/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './CartSidebarView' diff --git a/components/cart/index.ts b/components/cart/index.ts deleted file mode 100644 index 3e53fa34a..000000000 --- a/components/cart/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default as CartSidebarView } from './CartSidebarView' -export { default as CartItem } from './CartItem' diff --git a/components/checkout/CheckoutSidebarView/CheckoutSidebarView.module.css b/components/checkout/CheckoutSidebarView/CheckoutSidebarView.module.css deleted file mode 100644 index 34c1b487c..000000000 --- a/components/checkout/CheckoutSidebarView/CheckoutSidebarView.module.css +++ /dev/null @@ -1,7 +0,0 @@ -.root { - min-height: calc(100vh - 322px); -} - -.lineItemsList { - @apply py-4 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-accent-2 border-accent-2; -} diff --git a/components/checkout/CheckoutSidebarView/CheckoutSidebarView.tsx b/components/checkout/CheckoutSidebarView/CheckoutSidebarView.tsx deleted file mode 100644 index fb562e7af..000000000 --- a/components/checkout/CheckoutSidebarView/CheckoutSidebarView.tsx +++ /dev/null @@ -1,89 +0,0 @@ -import cn from 'classnames' -import Link from 'next/link' -import { FC } from 'react' -import CartItem from '@components/cart/CartItem' -import { Button, Text } from '@components/ui' -import { useUI } from '@components/ui/context' -import useCart from '@framework/cart/use-cart' -import usePrice from '@framework/product/use-price' -import ShippingWidget from '../ShippingWidget' -import PaymentWidget from '../PaymentWidget' -import SidebarLayout from '@components/common/SidebarLayout' -import s from './CheckoutSidebarView.module.css' - -const CheckoutSidebarView: FC = () => { - const { setSidebarView } = useUI() - const { data } = useCart() - - const { price: subTotal } = usePrice( - data && { - amount: Number(data.subtotalPrice), - currencyCode: data.currency.code, - } - ) - const { price: total } = usePrice( - data && { - amount: Number(data.totalPrice), - currencyCode: data.currency.code, - } - ) - - return ( - setSidebarView('CART_VIEW')} - > -
    - - Checkout - - - setSidebarView('PAYMENT_VIEW')} /> - setSidebarView('SHIPPING_VIEW')} /> - -
      - {data!.lineItems.map((item: any) => ( - - ))} -
    -
    - -
    -
      -
    • - Subtotal - {subTotal} -
      • -
    • - Taxes - Calculated at checkout -
      • -
    • - Shipping - FREE -
      • -
    -
    - Total - {total} -
    -
    - {/* Once data is correcly filled */} - {/* */} - -
    -
    -     - ) -} - -export default CheckoutSidebarView diff --git a/components/checkout/CheckoutSidebarView/index.ts b/components/checkout/CheckoutSidebarView/index.ts deleted file mode 100644 index 168bc58f4..000000000 --- a/components/checkout/CheckoutSidebarView/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './CheckoutSidebarView' diff --git a/components/checkout/PaymentMethodView/PaymentMethodView.module.css b/components/checkout/PaymentMethodView/PaymentMethodView.module.css deleted file mode 100644 index f3880c72c..000000000 --- a/components/checkout/PaymentMethodView/PaymentMethodView.module.css +++ /dev/null @@ -1,17 +0,0 @@ -.fieldset { - @apply flex flex-col my-3; -} - -.fieldset .label { - @apply text-accent-7 uppercase text-xs font-medium mb-2; -} - -.fieldset .input, -.fieldset .select { - @apply p-2 border border-accent-2 w-full text-sm font-normal; -} - -.fieldset .input:focus, -.fieldset .select:focus { - @apply outline-none shadow-outline-normal; -} diff --git a/components/checkout/PaymentMethodView/PaymentMethodView.tsx b/components/checkout/PaymentMethodView/PaymentMethodView.tsx deleted file mode 100644 index a5f6f4b51..000000000 --- a/components/checkout/PaymentMethodView/PaymentMethodView.tsx +++ /dev/null @@ -1,84 +0,0 @@ -import { FC } from 'react' -import cn from 'classnames' -import { Button, Text } from '@components/ui' -import { useUI } from '@components/ui/context' -import s from './PaymentMethodView.module.css' -import SidebarLayout from '@components/common/SidebarLayout' - -const PaymentMethodView: FC = () => { - const { setSidebarView } = useUI() - - return ( - setSidebarView('CHECKOUT_VIEW')}> -
    - Payment Method -
    -
    - - -
    -
    -
    - - -
    -
    - - -
    -
    - - -
    -
    -
    -
    -
    - - -
    -
    - - -
    -
    -
    - - -
    -
    - - -
    -
    - - -
    -
    -
    - - -
    -
    - - -
    -
    -
    - - -
    -
    -
    -
    - -
    -     - ) -} - -export default PaymentMethodView diff --git a/components/checkout/PaymentMethodView/index.ts b/components/checkout/PaymentMethodView/index.ts deleted file mode 100644 index 951b3c318..000000000 --- a/components/checkout/PaymentMethodView/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './PaymentMethodView' diff --git a/components/checkout/PaymentWidget/PaymentWidget.module.css b/components/checkout/PaymentWidget/PaymentWidget.module.css deleted file mode 100644 index 38dcab0c0..000000000 --- a/components/checkout/PaymentWidget/PaymentWidget.module.css +++ /dev/null @@ -1,4 +0,0 @@ -.root { - @apply border border-accent-2 px-6 py-5 mb-4 text-center - flex items-center cursor-pointer hover:border-accent-4; -} diff --git a/components/checkout/PaymentWidget/PaymentWidget.tsx b/components/checkout/PaymentWidget/PaymentWidget.tsx deleted file mode 100644 index e1892934e..000000000 --- a/components/checkout/PaymentWidget/PaymentWidget.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import { FC } from 'react' -import s from './PaymentWidget.module.css' -import { ChevronRight, CreditCard } from '@components/icons' - -interface ComponentProps { - onClick?: () => any -} - -const PaymentWidget: FC = ({ onClick }) => { - /* Shipping Address - Only available with checkout set to true - - This means that the provider does offer checkout functionality. */ - return ( -
    -
    - - - Add Payment Method - - {/* VISA #### #### #### 2345 */} -
    -
    - -
    -
    - ) -} - -export default PaymentWidget diff --git a/components/checkout/PaymentWidget/index.ts b/components/checkout/PaymentWidget/index.ts deleted file mode 100644 index 18cadea57..000000000 --- a/components/checkout/PaymentWidget/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './PaymentWidget' diff --git a/components/checkout/ShippingView/ShippingView.module.css b/components/checkout/ShippingView/ShippingView.module.css deleted file mode 100644 index 157d3174e..000000000 --- a/components/checkout/ShippingView/ShippingView.module.css +++ /dev/null @@ -1,21 +0,0 @@ -.fieldset { - @apply flex flex-col my-3; -} - -.fieldset .label { - @apply text-accent-7 uppercase text-xs font-medium mb-2; -} - -.fieldset .input, -.fieldset .select { - @apply p-2 border border-accent-2 w-full text-sm font-normal; -} - -.fieldset .input:focus, -.fieldset .select:focus { - @apply outline-none shadow-outline-normal; -} - -.radio { - @apply bg-black; -} diff --git a/components/checkout/ShippingView/ShippingView.tsx b/components/checkout/ShippingView/ShippingView.tsx deleted file mode 100644 index 1d03a2aac..000000000 --- a/components/checkout/ShippingView/ShippingView.tsx +++ /dev/null @@ -1,78 +0,0 @@ -import { FC } from 'react' -import cn from 'classnames' -import s from './ShippingView.module.css' -import Button from '@components/ui/Button' -import { useUI } from '@components/ui/context' -import SidebarLayout from '@components/common/SidebarLayout' - -const PaymentMethodView: FC = () => { - const { setSidebarView } = useUI() - - return ( - setSidebarView('CHECKOUT_VIEW')}> -
    -

    - Shipping -

    -
    -
    - - Same as billing address -
    -
    - - - Use a different shipping address - -
    -
    -
    -
    - - -
    -
    - - -
    -
    -
    - - -
    -
    - - -
    -
    - - -
    -
    -
    - - -
    -
    - - -
    -
    -
    - - -
    -
    -
    -
    - -
    -     - ) -} - -export default PaymentMethodView diff --git a/components/checkout/ShippingView/index.ts b/components/checkout/ShippingView/index.ts deleted file mode 100644 index 428e7e4fe..000000000 --- a/components/checkout/ShippingView/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './ShippingView' diff --git a/components/checkout/ShippingWidget/ShippingWidget.module.css b/components/checkout/ShippingWidget/ShippingWidget.module.css deleted file mode 100644 index 38dcab0c0..000000000 --- a/components/checkout/ShippingWidget/ShippingWidget.module.css +++ /dev/null @@ -1,4 +0,0 @@ -.root { - @apply border border-accent-2 px-6 py-5 mb-4 text-center - flex items-center cursor-pointer hover:border-accent-4; -} diff --git a/components/checkout/ShippingWidget/ShippingWidget.tsx b/components/checkout/ShippingWidget/ShippingWidget.tsx deleted file mode 100644 index b072178b0..000000000 --- a/components/checkout/ShippingWidget/ShippingWidget.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import { FC } from 'react' -import s from './ShippingWidget.module.css' -import { ChevronRight, MapPin } from '@components/icons' -import cn from 'classnames' - -interface ComponentProps { - onClick?: () => any -} - -const ShippingWidget: FC = ({ onClick }) => { - /* Shipping Address - Only available with checkout set to true - - This means that the provider does offer checkout functionality. */ - return ( -
    -
    - - - Add Shipping Address - - {/* - 1046 Kearny Street.
    - San Franssisco, California -     */} -
    -
    - -
    -
    - ) -} - -export default ShippingWidget diff --git a/components/checkout/ShippingWidget/index.ts b/components/checkout/ShippingWidget/index.ts deleted file mode 100644 index 88e6dca4b..000000000 --- a/components/checkout/ShippingWidget/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './ShippingWidget' diff --git a/components/common/Avatar/Avatar.tsx b/components/common/Avatar/Avatar.tsx deleted file mode 100644 index 663538450..000000000 --- a/components/common/Avatar/Avatar.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import { FC, useRef, useEffect } from 'react' -import { useUserAvatar } from '@lib/hooks/useUserAvatar' - -interface Props { - className?: string - children?: any -} - -const Avatar: FC = ({}) => { - let ref = useRef() as React.MutableRefObject - let { userAvatar } = useUserAvatar() - - return ( -
    - {/* Add an image - We're generating a gradient as placeholder */} -
    - ) -} - -export default Avatar diff --git a/components/common/Avatar/index.ts b/components/common/Avatar/index.ts deleted file mode 100644 index a4600ec77..000000000 --- a/components/common/Avatar/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './Avatar' diff --git a/components/common/FeatureBar/FeatureBar.module.css b/components/common/FeatureBar/FeatureBar.module.css deleted file mode 100644 index a3cb61cd2..000000000 --- a/components/common/FeatureBar/FeatureBar.module.css +++ /dev/null @@ -1,7 +0,0 @@ -.root { - @apply text-center p-6 bg-primary text-sm flex-row justify-center items-center font-medium fixed bottom-0 w-full z-30 transition-all duration-300 ease-out; - - @screen md { - @apply flex text-left; - } -} diff --git a/components/common/FeatureBar/FeatureBar.tsx b/components/common/FeatureBar/FeatureBar.tsx deleted file mode 100644 index 8923a721e..000000000 --- a/components/common/FeatureBar/FeatureBar.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import cn from 'classnames' -import s from './FeatureBar.module.css' - -interface FeatureBarProps { - className?: string - title: string - description?: string - hide?: boolean - action?: React.ReactNode -} - -const FeatureBar: React.FC = ({ - title, - description, - className, - action, - hide, -}) => { - const rootClassName = cn( - s.root, - { - transform: true, - 'translate-y-0 opacity-100': !hide, - 'translate-y-full opacity-0': hide, - }, - className - ) - return ( -
    - {title} - - {description} - - {action && action} -
    - ) -} - -export default FeatureBar diff --git a/components/common/FeatureBar/index.ts b/components/common/FeatureBar/index.ts deleted file mode 100644 index d78bc9d20..000000000 --- a/components/common/FeatureBar/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './FeatureBar' diff --git a/components/common/Footer/Footer.module.css b/components/common/Footer/Footer.module.css deleted file mode 100644 index 2ba492086..000000000 --- a/components/common/Footer/Footer.module.css +++ /dev/null @@ -1,13 +0,0 @@ -.root { - @apply border-t border-accent-2; -} - -.link { - & > svg { - @apply transform duration-75 ease-linear; - } - - &:hover > svg { - @apply scale-110; - } -} diff --git a/components/common/Footer/Footer.tsx b/components/common/Footer/Footer.tsx deleted file mode 100644 index 04b80404e..000000000 --- a/components/common/Footer/Footer.tsx +++ /dev/null @@ -1,117 +0,0 @@ -import { FC } from 'react' -import cn from 'classnames' -import Link from 'next/link' -import { useRouter } from 'next/router' -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' -import { I18nWidget } from '@components/common' -import s from './Footer.module.css' - -interface Props { - className?: string - children?: any - pages?: Page[] -} - -const links = [ - { - name: 'Home', - url: '/', - }, -] - -const Footer: FC = ({ className, pages }) => { - const { sitePages } = usePages(pages) - const rootClassName = cn(s.root, className) - - return ( - - ) -} - -function usePages(pages?: Page[]) { - const { locale } = useRouter() - const sitePages: Page[] = [] - - if (pages) { - pages.forEach((page) => { - const slug = page.url && getSlug(page.url) - if (!slug) return - if (locale && !slug.startsWith(`${locale}/`)) return - sitePages.push(page) - }) - } - - return { - sitePages: sitePages.sort(bySortOrder), - } -} - -// Sort pages by the sort order assigned in the BC dashboard -function bySortOrder(a: Page, b: Page) { - return (a.sort_order ?? 0) - (b.sort_order ?? 0) -} - -export default Footer diff --git a/components/common/Footer/index.ts b/components/common/Footer/index.ts deleted file mode 100644 index 5d06e9b71..000000000 --- a/components/common/Footer/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './Footer' diff --git a/components/common/Head/Head.tsx b/components/common/Head/Head.tsx deleted file mode 100644 index b2c0c997b..000000000 --- a/components/common/Head/Head.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { FC } from 'react' -import NextHead from 'next/head' -import { DefaultSeo } from 'next-seo' -import config from '@config/seo.json' - -const Head: FC = () => { - return ( - <> - - - - - - - ) -} - -export default Head diff --git a/components/common/Head/index.ts b/components/common/Head/index.ts deleted file mode 100644 index b317a124b..000000000 --- a/components/common/Head/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './Head' diff --git a/components/common/HomeAllProductsGrid/HomeAllProductsGrid.module.css b/components/common/HomeAllProductsGrid/HomeAllProductsGrid.module.css deleted file mode 100644 index 91d1fdc60..000000000 --- a/components/common/HomeAllProductsGrid/HomeAllProductsGrid.module.css +++ /dev/null @@ -1,7 +0,0 @@ -.root { - @apply flex flex-col w-full; - - @screen md { - @apply flex-row; - } -} diff --git a/components/common/HomeAllProductsGrid/HomeAllProductsGrid.tsx b/components/common/HomeAllProductsGrid/HomeAllProductsGrid.tsx deleted file mode 100644 index d0fac461f..000000000 --- a/components/common/HomeAllProductsGrid/HomeAllProductsGrid.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import { FC } from 'react' -import Link from 'next/link' -import type { Product } from '@commerce/types/product' -import { Grid } from '@components/ui' -import { ProductCard } from '@components/product' -import s from './HomeAllProductsGrid.module.css' -import { getCategoryPath, getDesignerPath } from '@lib/search' -import { Category } from '@commerce/types/site' - -interface Props { - categories?: Category[] - brands?: any - products?: Product[] -} - -const HomeAllProductsGrid: FC = ({ - categories = [], - brands, - products = [], -}) => { - return ( -
    -
    - {categories.map((category) => ( -
    -
    {category.name}
    -
    - {products.slice(0, 4).map((product) => ( - - ))} -
    -
    - ))} -
    -
    - ) -} - -export default HomeAllProductsGrid diff --git a/components/common/HomeAllProductsGrid/index.ts b/components/common/HomeAllProductsGrid/index.ts deleted file mode 100644 index 31d313d16..000000000 --- a/components/common/HomeAllProductsGrid/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './HomeAllProductsGrid' diff --git a/components/common/I18nWidget/I18nWidget.module.css b/components/common/I18nWidget/I18nWidget.module.css deleted file mode 100644 index 269aa5f61..000000000 --- a/components/common/I18nWidget/I18nWidget.module.css +++ /dev/null @@ -1,46 +0,0 @@ -.root { - @apply relative; -} - -.button { - @apply h-10 px-2 rounded-md border border-accent-2 flex items-center justify-center transition-colors ease-linear; -} - -.button:hover { - @apply border-accent-3 shadow-sm; -} - -.button:focus { - @apply outline-none; -} - -.dropdownMenu { - @apply fixed right-0 top-12 mt-2 origin-top-right outline-none bg-primary z-40 w-full h-full; - - @screen lg { - @apply absolute border border-accent-1 shadow-lg w-56 h-auto; - } -} - -.closeButton { - @screen md { - @apply hidden; - } -} - -.item { - @apply flex cursor-pointer px-6 py-3 transition ease-in-out duration-150 text-primary leading-6 font-medium items-center; - text-transform: capitalize; -} - -.item:hover { - @apply bg-accent-1; -} - -.icon { - transition: transform 0.2s ease; -} - -.icon.active { - transform: rotate(180deg); -} diff --git a/components/common/I18nWidget/I18nWidget.tsx b/components/common/I18nWidget/I18nWidget.tsx deleted file mode 100644 index 58135f12a..000000000 --- a/components/common/I18nWidget/I18nWidget.tsx +++ /dev/null @@ -1,101 +0,0 @@ -import cn from 'classnames' -import Link from 'next/link' -import { FC, useState } from 'react' -import { useRouter } from 'next/router' -import s from './I18nWidget.module.css' -import { Cross, ChevronUp } from '@components/icons' -import ClickOutside from '@lib/click-outside' -interface LOCALE_DATA { - name: string - img: { - filename: string - alt: string - } -} - -const LOCALES_MAP: Record = { - es: { - name: 'Español', - img: { - filename: 'flag-es-co.svg', - alt: 'Bandera Colombiana', - }, - }, - 'en-US': { - name: 'English', - img: { - filename: 'flag-en-us.svg', - alt: 'US Flag', - }, - }, -} - -const I18nWidget: FC = () => { - const [display, setDisplay] = useState(false) - const { - locale, - locales, - defaultLocale = 'en-US', - asPath: currentPath, - } = useRouter() - - const options = locales?.filter((val) => val !== locale) - const currentLocale = locale || defaultLocale - - return ( - setDisplay(false)}> - - - ) -} - -export default I18nWidget diff --git a/components/common/I18nWidget/index.ts b/components/common/I18nWidget/index.ts deleted file mode 100644 index 46525c3d4..000000000 --- a/components/common/I18nWidget/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './I18nWidget' diff --git a/components/common/Layout/Layout.module.css b/components/common/Layout/Layout.module.css deleted file mode 100644 index bb90675a6..000000000 --- a/components/common/Layout/Layout.module.css +++ /dev/null @@ -1,4 +0,0 @@ -.root { - @apply h-full bg-primary mx-auto transition-colors duration-150; - max-width: 2460px; -} diff --git a/components/common/Layout/Layout.tsx b/components/common/Layout/Layout.tsx deleted file mode 100644 index ff6d72aaf..000000000 --- a/components/common/Layout/Layout.tsx +++ /dev/null @@ -1,126 +0,0 @@ -import cn from 'classnames' -import React, { FC } from 'react' -import dynamic from 'next/dynamic' -import { useRouter } from 'next/router' -import { CommerceProvider } from '@framework' -import { useUI } from '@components/ui/context' -import type { Page } from '@commerce/types/page' -import { Navbar, Footer } from '@components/common' -import type { Category } from '@commerce/types/site' -import ShippingView from '@components/checkout/ShippingView' -import CartSidebarView from '@components/cart/CartSidebarView' -import { useAcceptCookies } from '@lib/hooks/useAcceptCookies' -import { Sidebar, Button, Modal, LoadingDots } from '@components/ui' -import PaymentMethodView from '@components/checkout/PaymentMethodView' -import CheckoutSidebarView from '@components/checkout/CheckoutSidebarView' - -import LoginView from '@components/auth/LoginView' -import s from './Layout.module.css' - -const Loading = () => ( -
    - -
    -) - -const dynamicProps = { - loading: () => , -} - -const SignUpView = dynamic( - () => import('@components/auth/SignUpView'), - dynamicProps -) - -const ForgotPassword = dynamic( - () => import('@components/auth/ForgotPassword'), - dynamicProps -) - -const FeatureBar = dynamic( - () => import('@components/common/FeatureBar'), - dynamicProps -) - -interface Props { - pageProps: { - pages?: Page[] - categories: Category[] - } -} - -const ModalView: FC<{ modalView: string; closeModal(): any }> = ({ - modalView, - closeModal, -}) => { - return ( - - {modalView === 'LOGIN_VIEW' && } - {modalView === 'SIGNUP_VIEW' && } - {modalView === 'FORGOT_VIEW' && } - - ) -} - -const ModalUI: FC = () => { - const { displayModal, closeModal, modalView } = useUI() - return displayModal ? ( - - ) : null -} - -const SidebarView: FC<{ sidebarView: string; closeSidebar(): any }> = ({ - sidebarView, - closeSidebar, -}) => { - return ( - - {sidebarView === 'CART_VIEW' && } - {sidebarView === 'CHECKOUT_VIEW' && } - {sidebarView === 'PAYMENT_VIEW' && } - {sidebarView === 'SHIPPING_VIEW' && } - - ) -} - -const SidebarUI: FC = () => { - const { displaySidebar, closeSidebar, sidebarView } = useUI() - return displaySidebar ? ( - - ) : null -} - -const Layout: FC = ({ - children, - pageProps: { categories = [], ...pageProps }, -}) => { - const { acceptedCookies, onAcceptCookies } = useAcceptCookies() - const { locale = 'en-US' } = useRouter() - const navBarlinks = categories.slice(0, 2).map((c) => ({ - label: c.name, - href: `/search/${c.slug}`, - })) - - return ( - -
    - -
    {children}
    -
    - - - onAcceptCookies()}> - Accept cookies - - } - /> -
    -     - ) -} - -export default Layout diff --git a/components/common/Layout/index.ts b/components/common/Layout/index.ts deleted file mode 100644 index 0e2737eee..000000000 --- a/components/common/Layout/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './Layout' diff --git a/components/common/Navbar/Navbar.module.css b/components/common/Navbar/Navbar.module.css deleted file mode 100644 index faa86d156..000000000 --- a/components/common/Navbar/Navbar.module.css +++ /dev/null @@ -1,35 +0,0 @@ -.root { - @apply sticky top-0 bg-primary z-40 transition-all duration-150; - min-height: 74px; -} - -.nav { - @apply relative flex flex-row justify-between py-4 md:py-4; -} - -.navMenu { - @apply hidden ml-6 space-x-4 lg:block; -} - -.link { - @apply inline-flex items-center leading-6 - transition ease-in-out duration-75 cursor-pointer - text-accent-5; -} - -.link:hover { - @apply text-accent-9; -} - -.link:focus { - @apply outline-none text-accent-8; -} - -.logo { - @apply cursor-pointer rounded-full border transform duration-100 ease-in-out; - - &:hover { - @apply shadow-md; - transform: scale(1.05); - } -} diff --git a/components/common/Navbar/Navbar.tsx b/components/common/Navbar/Navbar.tsx deleted file mode 100644 index 2ce5f33b8..000000000 --- a/components/common/Navbar/Navbar.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import { FC } from 'react' -import Link from 'next/link' -import s from './Navbar.module.css' -import NavbarRoot from './NavbarRoot' -import { Logo, Container } from '@components/ui' -import { Searchbar, UserNav } from '@components/common' - -interface Link { - href: string - label: string -} -interface NavbarProps { - links?: Link[] -} - -const Navbar: FC = ({ links }) => ( - - -
    -
    - - - - - - -
    - {process.env.COMMERCE_SEARCH_ENABLED && ( -
    - -
    - )} -
    - -
    -
    -
    - -
    -     -     -) - -export default Navbar diff --git a/components/common/Navbar/NavbarRoot.tsx b/components/common/Navbar/NavbarRoot.tsx deleted file mode 100644 index 2eb8c5429..000000000 --- a/components/common/Navbar/NavbarRoot.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import { FC, useState, useEffect } from 'react' -import throttle from 'lodash.throttle' -import cn from 'classnames' -import s from './Navbar.module.css' - -const NavbarRoot: FC = ({ children }) => { - const [hasScrolled, setHasScrolled] = useState(false) - - useEffect(() => { - const handleScroll = throttle(() => { - const offset = 0 - const { scrollTop } = document.documentElement - const scrolled = scrollTop > offset - - if (hasScrolled !== scrolled) { - setHasScrolled(scrolled) - } - }, 200) - - document.addEventListener('scroll', handleScroll) - return () => { - document.removeEventListener('scroll', handleScroll) - } - }, [hasScrolled]) - - return ( -
    - {children} -
    - ) -} - -export default NavbarRoot diff --git a/components/common/Navbar/index.ts b/components/common/Navbar/index.ts deleted file mode 100644 index e6400ae40..000000000 --- a/components/common/Navbar/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './Navbar' diff --git a/components/common/Searchbar/Searchbar.module.css b/components/common/Searchbar/Searchbar.module.css deleted file mode 100644 index 7f20ed973..000000000 --- a/components/common/Searchbar/Searchbar.module.css +++ /dev/null @@ -1,29 +0,0 @@ -.root { - @apply relative text-sm bg-accent-0 text-base w-full transition-colors duration-150 border border-accent-2; -} - -.input { - @apply bg-transparent px-3 py-2 appearance-none w-full transition duration-150 ease-in-out pr-10; -} - -.input::placeholder { - @apply text-accent-3; -} - -.input:focus { - @apply outline-none shadow-outline-normal; -} - -.iconContainer { - @apply absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none; -} - -.icon { - @apply h-5 w-5; -} - -@screen sm { - .input { - min-width: 300px; - } -} diff --git a/components/common/Searchbar/Searchbar.tsx b/components/common/Searchbar/Searchbar.tsx deleted file mode 100644 index 0fc276d02..000000000 --- a/components/common/Searchbar/Searchbar.tsx +++ /dev/null @@ -1,63 +0,0 @@ -import { FC, InputHTMLAttributes, useEffect, useMemo } from 'react' -import cn from 'classnames' -import s from './Searchbar.module.css' -import { useRouter } from 'next/router' - -interface Props { - className?: string - id?: string -} - -const Searchbar: FC = ({ className, id = 'search' }) => { - const router = useRouter() - - useEffect(() => { - router.prefetch('/search') - }, []) - - const handleKeyUp = (e: React.KeyboardEvent) => { - e.preventDefault() - - if (e.key === 'Enter') { - const q = e.currentTarget.value - - router.push( - { - pathname: `/search`, - query: q ? { q } : {}, - }, - undefined, - { shallow: true } - ) - } - } - - return useMemo( - () => ( -
    - - -
    - - - -
    -
    - ), - [] - ) -} - -export default Searchbar diff --git a/components/common/Searchbar/index.ts b/components/common/Searchbar/index.ts deleted file mode 100644 index e6c0e36c8..000000000 --- a/components/common/Searchbar/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './Searchbar' diff --git a/components/common/SidebarLayout/SidebarLayout.module.css b/components/common/SidebarLayout/SidebarLayout.module.css deleted file mode 100644 index a8940dc52..000000000 --- a/components/common/SidebarLayout/SidebarLayout.module.css +++ /dev/null @@ -1,20 +0,0 @@ -.root { - @apply relative h-full flex flex-col; -} - -.header { - @apply sticky top-0 pl-4 py-4 pr-6 - flex items-center justify-between - bg-accent-0 box-border w-full z-10; - min-height: 66px; -} - -.container { - @apply flex flex-col flex-1 box-border; -} - -@screen lg { - .header { - min-height: 74px; - } -} diff --git a/components/common/SidebarLayout/SidebarLayout.tsx b/components/common/SidebarLayout/SidebarLayout.tsx deleted file mode 100644 index a4e60a758..000000000 --- a/components/common/SidebarLayout/SidebarLayout.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import React, { FC } from 'react' -import { Cross, ChevronLeft } from '@components/icons' -import { UserNav } from '@components/common' -import cn from 'classnames' -import s from './SidebarLayout.module.css' - -type ComponentProps = { className?: string } & ( - | { handleClose: () => any; handleBack?: never } - | { handleBack: () => any; handleClose?: never } -) - -const SidebarLayout: FC = ({ - children, - className, - handleClose, - handleBack, -}) => { - return ( -
    -
    - {handleClose && ( - - )} - {handleBack && ( - - )} - - - -
    -
    {children}
    -
    - ) -} - -export default SidebarLayout diff --git a/components/common/SidebarLayout/index.ts b/components/common/SidebarLayout/index.ts deleted file mode 100644 index 45ded0cf0..000000000 --- a/components/common/SidebarLayout/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './SidebarLayout' diff --git a/components/common/UserNav/DropdownMenu.module.css b/components/common/UserNav/DropdownMenu.module.css deleted file mode 100644 index d6b13ecb5..000000000 --- a/components/common/UserNav/DropdownMenu.module.css +++ /dev/null @@ -1,24 +0,0 @@ -.dropdownMenu { - @apply fixed right-0 mt-2 origin-top-right outline-none bg-primary z-40 w-full h-full; - - @screen lg { - @apply absolute top-10 border border-accent-1 shadow-lg w-56 h-auto; - } -} - -.link { - @apply text-primary flex cursor-pointer px-6 py-3 flex transition ease-in-out duration-150 leading-6 font-medium items-center; - text-transform: capitalize; -} - -.link:hover { - @apply bg-accent-1; -} - -.link.active { - @apply font-bold bg-accent-2; -} - -.off { - @apply hidden; -} diff --git a/components/common/UserNav/DropdownMenu.tsx b/components/common/UserNav/DropdownMenu.tsx deleted file mode 100644 index f79fd5821..000000000 --- a/components/common/UserNav/DropdownMenu.tsx +++ /dev/null @@ -1,125 +0,0 @@ -import cn from 'classnames' -import Link from 'next/link' -import { FC, useRef, useState, useEffect } from 'react' -import { useTheme } from 'next-themes' -import { useRouter } from 'next/router' -import s from './DropdownMenu.module.css' -import { Avatar } from '@components/common' -import { Moon, Sun } from '@components/icons' -import { useUI } from '@components/ui/context' -import ClickOutside from '@lib/click-outside' -import useLogout from '@framework/auth/use-logout' - -import { - disableBodyScroll, - enableBodyScroll, - clearAllBodyScrollLocks, -} from 'body-scroll-lock' - -interface DropdownMenuProps { - open?: boolean -} - -const LINKS = [ - { - name: 'My Orders', - href: '/orders', - }, - { - name: 'My Profile', - href: '/profile', - }, - { - name: 'My Cart', - href: '/cart', - }, -] - -const DropdownMenu: FC = ({ open = false }) => { - const logout = useLogout() - const { pathname } = useRouter() - const { theme, setTheme } = useTheme() - const [display, setDisplay] = useState(false) - const { closeSidebarIfPresent } = useUI() - const ref = useRef() as React.MutableRefObject - - useEffect(() => { - if (ref.current) { - if (display) { - disableBodyScroll(ref.current) - } else { - enableBodyScroll(ref.current) - } - } - return () => { - clearAllBodyScrollLocks() - } - }, [display]) - - return ( - setDisplay(false)}> - - - ) -} - -export default DropdownMenu diff --git a/components/common/UserNav/UserNav.module.css b/components/common/UserNav/UserNav.module.css deleted file mode 100644 index 92f62c10d..000000000 --- a/components/common/UserNav/UserNav.module.css +++ /dev/null @@ -1,40 +0,0 @@ -.root { - @apply relative; -} - -.list { - @apply flex flex-row items-center justify-items-end h-full; -} - -.item { - @apply mr-6 cursor-pointer relative transition ease-in-out duration-100 flex items-center outline-none text-primary; - - &:hover { - @apply text-accent-6 transition scale-110 duration-100; - } - - &:last-child { - @apply mr-0; - } - - &:focus, - &:active { - @apply outline-none; - } -} - -.bagCount { - @apply border border-accent-1 bg-secondary text-secondary absolute rounded-full right-3 top-3 flex items-center justify-center font-bold text-xs; - padding-left: 2.5px; - padding-right: 2.5px; - min-width: 1.25rem; - min-height: 1.25rem; -} - -.avatarButton { - @apply inline-flex justify-center rounded-full; -} - -.avatarButton:focus { - @apply outline-none; -} diff --git a/components/common/UserNav/UserNav.tsx b/components/common/UserNav/UserNav.tsx deleted file mode 100644 index 5d7d28df3..000000000 --- a/components/common/UserNav/UserNav.tsx +++ /dev/null @@ -1,63 +0,0 @@ -import { FC } from 'react' -import Link from 'next/link' -import cn from 'classnames' -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' -import { Heart, Bag } from '@components/icons' -import { useUI } from '@components/ui/context' -import DropdownMenu from './DropdownMenu' -import s from './UserNav.module.css' - -interface Props { - className?: string -} - -const countItem = (count: number, item: LineItem) => count + item.quantity - -const UserNav: FC = ({ className }) => { - const { data } = useCart() - const { data: customer } = useCustomer() - const { toggleSidebar, closeSidebarIfPresent, openModal } = useUI() - const itemsCount = data?.lineItems.reduce(countItem, 0) ?? 0 - - return ( - - ) -} - -export default UserNav diff --git a/components/common/UserNav/index.ts b/components/common/UserNav/index.ts deleted file mode 100644 index 9e35ac018..000000000 --- a/components/common/UserNav/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './UserNav' diff --git a/components/common/index.ts b/components/common/index.ts deleted file mode 100644 index 98dd3394b..000000000 --- a/components/common/index.ts +++ /dev/null @@ -1,9 +0,0 @@ -export { default as Avatar } from './Avatar' -export { default as FeatureBar } from './FeatureBar' -export { default as Footer } from './Footer' -export { default as Layout } from './Layout' -export { default as Navbar } from './Navbar' -export { default as Searchbar } from './Searchbar' -export { default as UserNav } from './UserNav' -export { default as Head } from './Head' -export { default as I18nWidget } from './I18nWidget' diff --git a/components/icons/ArrowLeft.tsx b/components/icons/ArrowLeft.tsx deleted file mode 100644 index 8cc1e1294..000000000 --- a/components/icons/ArrowLeft.tsx +++ /dev/null @@ -1,27 +0,0 @@ -const ArrowLeft = ({ ...props }) => { - return ( - - - - - ) -} - -export default ArrowLeft diff --git a/components/icons/ArrowRight.tsx b/components/icons/ArrowRight.tsx deleted file mode 100644 index e644951d9..000000000 --- a/components/icons/ArrowRight.tsx +++ /dev/null @@ -1,28 +0,0 @@ -const ArrowRight = ({ ...props }) => { - return ( - - - - - ) -} - -export default ArrowRight diff --git a/components/icons/Bag.tsx b/components/icons/Bag.tsx deleted file mode 100644 index de2cde0d1..000000000 --- a/components/icons/Bag.tsx +++ /dev/null @@ -1,33 +0,0 @@ -const Bag = ({ ...props }) => { - return ( - - - - - - ) -} - -export default Bag diff --git a/components/icons/Check.tsx b/components/icons/Check.tsx deleted file mode 100644 index 89c91a1e3..000000000 --- a/components/icons/Check.tsx +++ /dev/null @@ -1,21 +0,0 @@ -const Check = ({ ...props }) => { - return ( - - - - ) -} - -export default Check diff --git a/components/icons/ChevronDown.tsx b/components/icons/ChevronDown.tsx deleted file mode 100644 index 542e8056d..000000000 --- a/components/icons/ChevronDown.tsx +++ /dev/null @@ -1,20 +0,0 @@ -const ChevronDown = ({ ...props }) => { - return ( - - - - ) -} - -export default ChevronDown diff --git a/components/icons/ChevronLeft.tsx b/components/icons/ChevronLeft.tsx deleted file mode 100644 index 4efb6a522..000000000 --- a/components/icons/ChevronLeft.tsx +++ /dev/null @@ -1,20 +0,0 @@ -const ChevronLeft = ({ ...props }) => { - return ( - - - - ) -} - -export default ChevronLeft diff --git a/components/icons/ChevronRight.tsx b/components/icons/ChevronRight.tsx deleted file mode 100644 index d72b77a32..000000000 --- a/components/icons/ChevronRight.tsx +++ /dev/null @@ -1,20 +0,0 @@ -const ChevronUp = ({ ...props }) => { - return ( - - - - ) -} - -export default ChevronUp diff --git a/components/icons/ChevronUp.tsx b/components/icons/ChevronUp.tsx deleted file mode 100644 index 69b9959b8..000000000 --- a/components/icons/ChevronUp.tsx +++ /dev/null @@ -1,20 +0,0 @@ -const ChevronUp = ({ ...props }) => { - return ( - - - - ) -} - -export default ChevronUp diff --git a/components/icons/CreditCard.tsx b/components/icons/CreditCard.tsx deleted file mode 100644 index 958c31193..000000000 --- a/components/icons/CreditCard.tsx +++ /dev/null @@ -1,21 +0,0 @@ -const CreditCard = ({ ...props }) => { - return ( - - - - - ) -} - -export default CreditCard diff --git a/components/icons/Cross.tsx b/components/icons/Cross.tsx deleted file mode 100644 index 12e115ac9..000000000 --- a/components/icons/Cross.tsx +++ /dev/null @@ -1,21 +0,0 @@ -const Cross = ({ ...props }) => { - return ( - - - - - ) -} - -export default Cross diff --git a/components/icons/DoubleChevron.tsx b/components/icons/DoubleChevron.tsx deleted file mode 100644 index 198c30464..000000000 --- a/components/icons/DoubleChevron.tsx +++ /dev/null @@ -1,22 +0,0 @@ -const DoubleChevron = ({ ...props }) => { - return ( - - - - ) -} - -export default DoubleChevron diff --git a/components/icons/Github.tsx b/components/icons/Github.tsx deleted file mode 100644 index 1195a3c3a..000000000 --- a/components/icons/Github.tsx +++ /dev/null @@ -1,20 +0,0 @@ -const Github = ({ ...props }) => { - return ( - - - - ) -} - -export default Github diff --git a/components/icons/Heart.tsx b/components/icons/Heart.tsx deleted file mode 100644 index afa2f6aaa..000000000 --- a/components/icons/Heart.tsx +++ /dev/null @@ -1,22 +0,0 @@ -const Heart = ({ ...props }) => { - return ( - - - - ) -} - -export default Heart diff --git a/components/icons/Info.tsx b/components/icons/Info.tsx deleted file mode 100644 index 67c79cf27..000000000 --- a/components/icons/Info.tsx +++ /dev/null @@ -1,22 +0,0 @@ -const Info = ({ ...props }) => { - return ( - - - - - - ) -} - -export default Info diff --git a/components/icons/MapPin.tsx b/components/icons/MapPin.tsx deleted file mode 100644 index 6323b9c1c..000000000 --- a/components/icons/MapPin.tsx +++ /dev/null @@ -1,20 +0,0 @@ -const MapPin = ({ ...props }) => { - return ( - - - - - ) -} - -export default MapPin diff --git a/components/icons/Minus.tsx b/components/icons/Minus.tsx deleted file mode 100644 index 1e9411dda..000000000 --- a/components/icons/Minus.tsx +++ /dev/null @@ -1,15 +0,0 @@ -const Minus = ({ ...props }) => { - return ( - - - - ) -} - -export default Minus diff --git a/components/icons/Moon.tsx b/components/icons/Moon.tsx deleted file mode 100644 index e02f2a30d..000000000 --- a/components/icons/Moon.tsx +++ /dev/null @@ -1,20 +0,0 @@ -const Moon = ({ ...props }) => { - return ( - - - - ) -} - -export default Moon diff --git a/components/icons/Plus.tsx b/components/icons/Plus.tsx deleted file mode 100644 index ad030b92e..000000000 --- a/components/icons/Plus.tsx +++ /dev/null @@ -1,22 +0,0 @@ -const Plus = ({ ...props }) => { - return ( - - - - - ) -} - -export default Plus diff --git a/components/icons/Star.tsx b/components/icons/Star.tsx deleted file mode 100644 index d98f55e1d..000000000 --- a/components/icons/Star.tsx +++ /dev/null @@ -1,16 +0,0 @@ -const Star = ({ ...props }) => { - return ( - - - - ) -} - -export default Star diff --git a/components/icons/Sun.tsx b/components/icons/Sun.tsx deleted file mode 100644 index d3684bcb9..000000000 --- a/components/icons/Sun.tsx +++ /dev/null @@ -1,28 +0,0 @@ -const Sun = ({ ...props }) => { - return ( - - - - - - - - - - - - ) -} - -export default Sun diff --git a/components/icons/Trash.tsx b/components/icons/Trash.tsx deleted file mode 100644 index b005ea892..000000000 --- a/components/icons/Trash.tsx +++ /dev/null @@ -1,43 +0,0 @@ -const Trash = ({ ...props }) => { - return ( - - - - - - - ) -} - -export default Trash diff --git a/components/icons/Vercel.tsx b/components/icons/Vercel.tsx deleted file mode 100644 index 96e619fdf..000000000 --- a/components/icons/Vercel.tsx +++ /dev/null @@ -1,40 +0,0 @@ -const Vercel = ({ ...props }) => { - return ( - - - - - - - - - - ) -} - -export default Vercel diff --git a/components/icons/index.ts b/components/icons/index.ts deleted file mode 100644 index 97eef6d58..000000000 --- a/components/icons/index.ts +++ /dev/null @@ -1,22 +0,0 @@ -export { default as Bag } from './Bag' -export { default as Heart } from './Heart' -export { default as Trash } from './Trash' -export { default as Cross } from './Cross' -export { default as Plus } from './Plus' -export { default as Minus } from './Minus' -export { default as Check } from './Check' -export { default as Sun } from './Sun' -export { default as Moon } from './Moon' -export { default as Github } from './Github' -export { default as Info } from './Info' -export { default as Vercel } from './Vercel' -export { default as MapPin } from './MapPin' -export { default as Star } from './Star' -export { default as ArrowLeft } from './ArrowLeft' -export { default as ArrowRight } from './ArrowRight' -export { default as CreditCard } from './CreditCard' -export { default as ChevronUp } from './ChevronUp' -export { default as ChevronLeft } from './ChevronLeft' -export { default as ChevronDown } from './ChevronDown' -export { default as ChevronRight } from './ChevronRight' -export { default as DoubleChevron } from './DoubleChevron' diff --git a/components/product/ProductCard/ProductCard.module.css b/components/product/ProductCard/ProductCard.module.css deleted file mode 100644 index d5d441fea..000000000 --- a/components/product/ProductCard/ProductCard.module.css +++ /dev/null @@ -1,114 +0,0 @@ -.root { - @apply relative max-h-full w-full box-border overflow-hidden - bg-no-repeat bg-center bg-cover transition-transform - ease-linear cursor-pointer inline-block bg-accent-1; - height: 100% !important; -} - -.root:hover { - & .productImage { - transform: scale(1.2625); - } - - & .header .name span, - & .header .price, - & .wishlistButton { - @apply bg-secondary text-secondary; - } - - &:nth-child(6n + 1) .header .name span, - &:nth-child(6n + 1) .header .price, - &:nth-child(6n + 1) .wishlistButton { - @apply bg-violet text-white; - } - - &:nth-child(6n + 5) .header .name span, - &:nth-child(6n + 5) .header .price, - &:nth-child(6n + 5) .wishlistButton { - @apply bg-blue text-white; - } - - &:nth-child(6n + 3) .header .name span, - &:nth-child(6n + 3) .header .price, - &:nth-child(6n + 3) .wishlistButton { - @apply bg-pink text-white; - } - - &:nth-child(6n + 6) .header .name span, - &:nth-child(6n + 6) .header .price, - &:nth-child(6n + 6) .wishlistButton { - @apply bg-cyan text-white; - } -} - -.header { - @apply transition-colors ease-in-out duration-500 - absolute top-0 left-0 z-20 pr-16; -} - -.header .name { - @apply pt-0 max-w-full w-full leading-extra-loose - transition-colors ease-in-out duration-500; - font-size: 2rem; - letter-spacing: 0.4px; -} - -.header .name span { - @apply py-4 px-6 bg-primary text-primary font-bold - transition-colors ease-in-out duration-500; - font-size: inherit; - letter-spacing: inherit; - box-decoration-break: clone; - -webkit-box-decoration-break: clone; -} - -.header .price { - @apply pt-2 px-6 pb-4 text-sm bg-primary text-accent-9 - font-semibold inline-block tracking-wide - transition-colors ease-in-out duration-500; -} - -.imageContainer { - @apply flex items-center justify-center overflow-hidden; -} - -.imageContainer > div { - min-width: 100%; -} - -.imageContainer .productImage { - @apply transform transition-transform duration-500 - object-cover scale-120; -} - -.root .wishlistButton { - @apply top-0 right-0 z-30 absolute; -} - -/* Variant Simple */ -.simple .header .name { - @apply pt-2 text-lg leading-10 -mt-1; -} - -.simple .header .price { - @apply text-sm; -} - -/* Variant Slim */ -.slim { - @apply bg-transparent relative overflow-hidden - box-border; -} - -.slim .header { - @apply absolute inset-0 flex items-center justify-end mr-8 z-20; -} - -.slim span { - @apply bg-accent-9 text-accent-0 inline-block p-3 - font-bold text-xl break-words; -} - -.root:global(.secondary) .header span { - @apply bg-accent-0 text-accent-9; -} diff --git a/components/product/ProductCard/ProductCard.tsx b/components/product/ProductCard/ProductCard.tsx deleted file mode 100644 index 39c19db00..000000000 --- a/components/product/ProductCard/ProductCard.tsx +++ /dev/null @@ -1,132 +0,0 @@ -import { FC } from 'react' -import cn from 'classnames' -import Link from 'next/link' -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' -import usePrice from '@framework/product/use-price' -import ProductTag from '../ProductTag' -interface Props { - className?: string - product: Product - noNameTag?: boolean - imgProps?: Omit - variant?: 'default' | 'slim' | 'simple' -} - -const placeholderImg = '/product-img-placeholder.svg' - -const ProductCard: FC = ({ - product, - imgProps, - className, - noNameTag = false, - variant = 'default', - ...props -}) => { - const { price } = usePrice({ - amount: product.price.value, - baseAmount: product.price.retailPrice, - currencyCode: product.price.currencyCode!, - }) - - const rootClassName = cn( - s.root, - { [s.slim]: variant === 'slim', [s.simple]: variant === 'simple' }, - className - ) - - return ( - - - {variant === 'slim' && ( - <> -
    - {product.name} -
    - {product?.images && ( - {product.name - )} - - )} - - {variant === 'simple' && ( - <> - {process.env.COMMERCE_WISHLIST_ENABLED && ( - - )} - {!noNameTag && ( -
    -

    - {product.name} -

    -
    - {`${price} ${product.price?.currencyCode}`} -
    -
    - )} -
    - {product?.images && ( - {product.name - )} -
    - - )} - - {variant === 'default' && ( - <> - {process.env.COMMERCE_WISHLIST_ENABLED && ( - - )} - -
    - {product?.images && ( - {product.name - )} -
    - - )} -     - - ) -} - -export default ProductCard diff --git a/components/product/ProductCard/index.ts b/components/product/ProductCard/index.ts deleted file mode 100644 index 4559faa14..000000000 --- a/components/product/ProductCard/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './ProductCard' diff --git a/components/product/ProductOptions/ProductOptions.tsx b/components/product/ProductOptions/ProductOptions.tsx deleted file mode 100644 index 9261406bc..000000000 --- a/components/product/ProductOptions/ProductOptions.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import { Swatch } from '@components/product' -import type { ProductOption } from '@commerce/types/product' -import { SelectedOptions } from '../helpers' -import React from 'react' -interface ProductOptionsProps { - options: ProductOption[] - selectedOptions: SelectedOptions - setSelectedOptions: React.Dispatch> -} - -const ProductOptions: React.FC = React.memo( - ({ options, selectedOptions, setSelectedOptions }) => { - return ( -
    - {options.map((opt) => ( -
    -

    - {opt.displayName} -

    -
    - {opt.values.map((v, i: number) => { - const active = selectedOptions[opt.displayName.toLowerCase()] - return ( - { - setSelectedOptions((selectedOptions) => { - return { - ...selectedOptions, - [opt.displayName.toLowerCase()]: - v.label.toLowerCase(), - } - }) - }} - /> - ) - })} -
    -
    - ))} -
    - ) - } -) - -export default ProductOptions diff --git a/components/product/ProductOptions/index.ts b/components/product/ProductOptions/index.ts deleted file mode 100644 index 252415ab7..000000000 --- a/components/product/ProductOptions/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './ProductOptions' diff --git a/components/product/ProductSidebar/ProductSidebar.module.css b/components/product/ProductSidebar/ProductSidebar.module.css deleted file mode 100644 index b6ecc2b77..000000000 --- a/components/product/ProductSidebar/ProductSidebar.module.css +++ /dev/null @@ -1,84 +0,0 @@ -.root { - @apply relative grid items-start gap-1 grid-cols-1 overflow-x-hidden; - min-height: auto; -} - -.main { - @apply relative px-0 pb-0 box-border flex flex-col col-span-1; - min-height: 500px; -} - -.header { - @apply transition-colors ease-in-out duration-500 - absolute top-0 left-0 z-20 pr-16; -} - -.header .name { - @apply pt-0 max-w-full w-full leading-extra-loose; - font-size: 2rem; - letter-spacing: 0.4px; -} - -.header .name span { - @apply py-4 px-6 bg-primary text-primary font-bold; - font-size: inherit; - letter-spacing: inherit; - box-decoration-break: clone; - -webkit-box-decoration-break: clone; -} - -.header .price { - @apply pt-2 px-6 pb-4 text-sm bg-primary text-accent-9 - font-semibold inline-block tracking-wide; -} - -.sidebar { - @apply flex flex-col col-span-1 mx-auto max-w-8xl px-6 py-6 w-full h-full; -} - -.sliderContainer { - @apply flex items-center justify-center overflow-x-hidden bg-violet; -} - -.imageContainer { - @apply text-center; -} - -.imageContainer > div, -.imageContainer > div > div { - @apply h-full; -} - -.sliderContainer .img { - @apply w-full h-auto max-h-full object-cover; -} - -.button { - width: 100%; -} - -.wishlistButton { - @apply absolute z-30 top-0 right-0; -} - -.relatedProductsGrid { - @apply grid grid-cols-2 py-2 gap-2 md:grid-cols-4 md:gap-7; -} - -@screen lg { - .root { - @apply grid-cols-12; - } - - .main { - @apply mx-0 col-span-8; - } - - .sidebar { - @apply col-span-4 py-6; - } - - .imageContainer { - max-height: 600px; - } -} diff --git a/components/product/ProductSidebar/ProductSidebar.tsx b/components/product/ProductSidebar/ProductSidebar.tsx deleted file mode 100644 index fe8a71aa5..000000000 --- a/components/product/ProductSidebar/ProductSidebar.tsx +++ /dev/null @@ -1,89 +0,0 @@ -import s from './ProductSidebar.module.css' -import { useAddItem } from '@framework/cart' -import { FC, useEffect, useState } from 'react' -import { ProductOptions } from '@components/product' -import type { Product } from '@commerce/types/product' -import { Button, Text, Rating, Collapse, useUI } from '@components/ui' -import { - getProductVariant, - selectDefaultOptionFromProduct, - SelectedOptions, -} from '../helpers' - -interface ProductSidebarProps { - product: Product - className?: string -} - -const ProductSidebar: FC = ({ product, className }) => { - const addItem = useAddItem() - const { openSidebar } = useUI() - const [loading, setLoading] = useState(false) - const [selectedOptions, setSelectedOptions] = useState({}) - - useEffect(() => { - selectDefaultOptionFromProduct(product, setSelectedOptions) - }, []) - - const variant = getProductVariant(product, selectedOptions) - const addToCart = async () => { - setLoading(true) - try { - await addItem({ - productId: String(product.id), - variantId: String(variant ? variant.id : product.variants[0].id), - }) - openSidebar() - setLoading(false) - } catch (err) { - setLoading(false) - } - } - - return ( -
    - - -
    - -
    36 reviews
    -
    -
    - {process.env.COMMERCE_CART_ENABLED && ( - - )} -
    -
    - - This is a limited edition production run. Printing starts when the - drop ends. - - - This is a limited edition production run. Printing starts when the - drop ends. Reminder: Bad Boys For Life. Shipping may take 10+ days due - to COVID-19. - -
    -
    - ) -} - -export default ProductSidebar diff --git a/components/product/ProductSidebar/index.ts b/components/product/ProductSidebar/index.ts deleted file mode 100644 index 7e00359c4..000000000 --- a/components/product/ProductSidebar/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './ProductSidebar' diff --git a/components/product/ProductSlider/ProductSlider.module.css b/components/product/ProductSlider/ProductSlider.module.css deleted file mode 100644 index 8d7265eb8..000000000 --- a/components/product/ProductSlider/ProductSlider.module.css +++ /dev/null @@ -1,64 +0,0 @@ -.root { - @apply relative w-full h-full select-none; - overflow: hidden; -} - -.slider { - @apply relative h-full transition-opacity duration-150; - opacity: 0; -} - -.slider.show { - opacity: 1; -} - -.thumb { - @apply transition-transform transition-colors - ease-linear duration-75 overflow-hidden inline-block - cursor-pointer h-full; - width: 125px; - width: calc(100% / 3); -} - -.thumb.selected { - @apply bg-white; -} - -.thumb img { - height: 85% !important; -} - -.album { - width: 100%; - height: 100%; - @apply bg-violet-dark; - box-sizing: content-box; - overflow-y: hidden; - overflow-x: auto; - white-space: nowrap; - height: 125px; - scrollbar-width: none; -} - -/* Hide scrollbar for Chrome, Safari and Opera */ -.album::-webkit-scrollbar { - display: none; -} - -@screen md { - .thumb:hover { - transform: scale(1.02); - background-color: rgba(255, 255, 255, 0.08); - } - - .thumb.selected { - @apply bg-white; - } - - .album { - height: 182px; - } - .thumb { - width: 235px; - } -} diff --git a/components/product/ProductSlider/ProductSlider.tsx b/components/product/ProductSlider/ProductSlider.tsx deleted file mode 100644 index 8c3441906..000000000 --- a/components/product/ProductSlider/ProductSlider.tsx +++ /dev/null @@ -1,136 +0,0 @@ -import { useKeenSlider } from 'keen-slider/react' -import React, { - Children, - FC, - isValidElement, - useState, - useRef, - useEffect, -} from 'react' -import cn from 'classnames' -import { a } from '@react-spring/web' -import s from './ProductSlider.module.css' -import ProductSliderControl from '../ProductSliderControl' - -interface ProductSliderProps { - children: React.ReactNode[] - className?: string -} - -const ProductSlider: React.FC = ({ - children, - className = '', -}) => { - const [currentSlide, setCurrentSlide] = useState(0) - const [isMounted, setIsMounted] = useState(false) - const sliderContainerRef = useRef(null) - const thumbsContainerRef = useRef(null) - - const [ref, slider] = useKeenSlider({ - loop: true, - slidesPerView: 1, - mounted: () => setIsMounted(true), - slideChanged(s) { - const slideNumber = s.details().relativeSlide - setCurrentSlide(slideNumber) - - if (thumbsContainerRef.current) { - const $el = document.getElementById( - `thumb-${s.details().relativeSlide}` - ) - if (slideNumber >= 3) { - thumbsContainerRef.current.scrollLeft = $el!.offsetLeft - } else { - thumbsContainerRef.current.scrollLeft = 0 - } - } - }, - }) - - // Stop the history navigation gesture on touch devices - useEffect(() => { - const preventNavigation = (event: TouchEvent) => { - // Center point of the touch area - const touchXPosition = event.touches[0].pageX - // Size of the touch area - const touchXRadius = event.touches[0].radiusX || 0 - - // We set a threshold (10px) on both sizes of the screen, - // if the touch area overlaps with the screen edges - // it's likely to trigger the navigation. We prevent the - // touchstart event in that case. - if ( - touchXPosition - touchXRadius < 10 || - touchXPosition + touchXRadius > window.innerWidth - 10 - ) - event.preventDefault() - } - - sliderContainerRef.current!.addEventListener( - 'touchstart', - preventNavigation - ) - - return () => { - if (sliderContainerRef.current) { - sliderContainerRef.current!.removeEventListener( - 'touchstart', - preventNavigation - ) - } - } - }, []) - - const onPrev = React.useCallback(() => slider.prev(), [slider]) - const onNext = React.useCallback(() => slider.next(), [slider]) - - return ( -
    -
    - {slider && } - {Children.map(children, (child) => { - // Add the keen-slider__slide className to children - if (isValidElement(child)) { - return { - ...child, - props: { - ...child.props, - className: `${ - child.props.className ? `${child.props.className} ` : '' - }keen-slider__slide`, - }, - } - } - return child - })} -
    - - - {slider && - Children.map(children, (child, idx) => { - if (isValidElement(child)) { - return { - ...child, - props: { - ...child.props, - className: cn(child.props.className, s.thumb, { - [s.selected]: currentSlide === idx, - }), - id: `thumb-${idx}`, - onClick: () => { - slider.moveToSlideRelative(idx) - }, - }, - } - } - return child - })} - -
    - ) -} - -export default ProductSlider diff --git a/components/product/ProductSlider/index.ts b/components/product/ProductSlider/index.ts deleted file mode 100644 index 504440410..000000000 --- a/components/product/ProductSlider/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './ProductSlider' diff --git a/components/product/ProductSliderControl/ProductSliderControl.module.css b/components/product/ProductSliderControl/ProductSliderControl.module.css deleted file mode 100644 index c744e7598..000000000 --- a/components/product/ProductSliderControl/ProductSliderControl.module.css +++ /dev/null @@ -1,29 +0,0 @@ -.control { - @apply bg-violet absolute bottom-10 right-10 flex flex-row - border-accent-0 border text-accent-0 z-30 shadow-xl select-none; - height: 48px; -} - -.leftControl, -.rightControl { - @apply px-9 cursor-pointer; - transition: background-color 0.2s ease; -} - -.leftControl:hover, -.rightControl:hover { - background-color: var(--violet-dark); -} - -.leftControl:focus, -.rightControl:focus { - @apply outline-none; -} - -.rightControl { - @apply border-l border-accent-0; -} - -.leftControl { - margin-right: -1px; -} diff --git a/components/product/ProductSliderControl/ProductSliderControl.tsx b/components/product/ProductSliderControl/ProductSliderControl.tsx deleted file mode 100644 index 4e767b5db..000000000 --- a/components/product/ProductSliderControl/ProductSliderControl.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import cn from 'classnames' -import React from 'react' -import s from './ProductSliderControl.module.css' -import { ArrowLeft, ArrowRight } from '@components/icons' - -interface ProductSliderControl { - onPrev: React.MouseEventHandler - onNext: React.MouseEventHandler -} - -const ProductSliderControl: React.FC = React.memo( - ({ onPrev, onNext }) => ( -
    - - -
    - ) -) -export default ProductSliderControl diff --git a/components/product/ProductSliderControl/index.ts b/components/product/ProductSliderControl/index.ts deleted file mode 100644 index 5b63c466f..000000000 --- a/components/product/ProductSliderControl/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './ProductSliderControl' diff --git a/components/product/ProductTag/ProductTag.module.css b/components/product/ProductTag/ProductTag.module.css deleted file mode 100644 index faf2fd97f..000000000 --- a/components/product/ProductTag/ProductTag.module.css +++ /dev/null @@ -1,30 +0,0 @@ -.root { - @apply transition-colors ease-in-out duration-500 - absolute top-0 left-0 z-20 pr-16; -} - -.root .name { - @apply pt-0 max-w-full w-full leading-extra-loose; - font-size: 2rem; - letter-spacing: 0.4px; - line-height: 2.2em; -} - -.root .name span { - @apply py-4 px-6 bg-primary text-primary font-bold; - min-height: 70px; - font-size: inherit; - letter-spacing: inherit; - box-decoration-break: clone; - -webkit-box-decoration-break: clone; -} - -.root .name span.fontsizing { - display: flex; - padding-top: 1.5rem; -} - -.root .price { - @apply pt-2 px-6 pb-4 text-sm bg-primary text-accent-9 - font-semibold inline-block tracking-wide; -} diff --git a/components/product/ProductTag/ProductTag.tsx b/components/product/ProductTag/ProductTag.tsx deleted file mode 100644 index 2bc80b878..000000000 --- a/components/product/ProductTag/ProductTag.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import cn from 'classnames' -import { inherits } from 'util' -import s from './ProductTag.module.css' - -interface ProductTagProps { - className?: string - name: string - price: string - fontSize?: number -} - -const ProductTag: React.FC = ({ - name, - price, - className = '', - fontSize = 32, -}) => { - return ( -
    -

    - - {name} - -

    -
    {price}
    -
    - ) -} - -export default ProductTag diff --git a/components/product/ProductTag/index.ts b/components/product/ProductTag/index.ts deleted file mode 100644 index cb345e8bd..000000000 --- a/components/product/ProductTag/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './ProductTag' diff --git a/components/product/ProductView/ProductView.module.css b/components/product/ProductView/ProductView.module.css deleted file mode 100644 index 0b3ebf564..000000000 --- a/components/product/ProductView/ProductView.module.css +++ /dev/null @@ -1,60 +0,0 @@ -.root { - @apply relative grid items-start gap-1 grid-cols-1 overflow-x-hidden; - min-height: auto; -} - -.main { - @apply relative px-0 pb-0 box-border flex flex-col col-span-1; - min-height: 500px; -} - -.sidebar { - @apply flex flex-col col-span-1 mx-auto max-w-8xl px-6 py-6 w-full h-full; -} - -.sliderContainer { - @apply flex items-center justify-center overflow-x-hidden bg-violet; -} - -.imageContainer { - @apply text-center; -} - -.imageContainer > div, -.imageContainer > div > div { - @apply h-full; -} - -.sliderContainer .img { - @apply w-full h-auto max-h-full object-cover; -} - -.button { - width: 100%; -} - -.wishlistButton { - @apply absolute z-30 top-0 right-0; -} - -.relatedProductsGrid { - @apply grid grid-cols-2 py-2 gap-2 md:grid-cols-4 md:gap-7; -} - -@screen lg { - .root { - @apply grid-cols-12; - } - - .main { - @apply mx-0 col-span-8; - } - - .sidebar { - @apply col-span-4 py-6; - } - - .imageContainer { - max-height: 600px; - } -} diff --git a/components/product/ProductView/ProductView.tsx b/components/product/ProductView/ProductView.tsx deleted file mode 100644 index cfe26983a..000000000 --- a/components/product/ProductView/ProductView.tsx +++ /dev/null @@ -1,109 +0,0 @@ -import cn from 'classnames' -import Image from 'next/image' -import { NextSeo } from 'next-seo' -import s from './ProductView.module.css' -import { FC } from 'react' -import type { Product } from '@commerce/types/product' -import usePrice from '@framework/product/use-price' -import { ProductSlider, ProductCard } from '@components/product' -import { Container, Text } from '@components/ui' -import ProductSidebar from '../ProductSidebar' -import ProductTag from '../ProductTag' -import { WishlistButton } from '@components/wishlist' -interface ProductViewProps { - product: Product - relatedProducts: Product[] -} - -const ProductView: FC = ({ product, relatedProducts }) => { - const { price } = usePrice({ - amount: product.price.value, - baseAmount: product.price.retailPrice, - currencyCode: product.price.currencyCode!, - }) - - return ( - <> - -
    -
    - -
    - - {product.images.map((image, i) => ( -
    - {image.alt -
    - ))} -     -
    - {process.env.COMMERCE_WISHLIST_ENABLED && ( - - )} -
    - - -
    -
    -
    - Related Products -
    - {relatedProducts.map((p) => ( -
    - -
    - ))} -
    -
    -     - - - ) -} - -export default ProductView diff --git a/components/product/ProductView/index.ts b/components/product/ProductView/index.ts deleted file mode 100644 index 9ac144801..000000000 --- a/components/product/ProductView/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './ProductView' diff --git a/components/product/Swatch/Swatch.module.css b/components/product/Swatch/Swatch.module.css deleted file mode 100644 index 79a69e548..000000000 --- a/components/product/Swatch/Swatch.module.css +++ /dev/null @@ -1,54 +0,0 @@ -.swatch { - box-sizing: border-box; - composes: root from '@components/ui/Button/Button.module.css'; - @apply h-10 w-10 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-accent-3 border box-border select-none; - margin-right: calc(0.75rem - 1px); - overflow: hidden; - width: 48px; - height: 48px; -} - -.swatch::before, -.swatch::after { - box-sizing: border-box; -} - -.swatch:hover { - @apply transform scale-110 bg-hover; -} - -.swatch > span { - @apply absolute; -} - -.color { - @apply text-black transition duration-150 ease-in-out; -} - -.color :hover { - @apply text-black; -} - -.color.dark, -.color.dark:hover { - color: white !important; -} - -.active { - @apply border-accent-9 border-2; - padding-right: 1px; - padding-left: 1px; -} - -.textLabel { - @apply w-auto px-4; - min-width: 3rem; -} - -.active.textLabel { - @apply border-accent-9 border-2; - padding-right: calc(1rem - 1px); - padding-left: calc(1rem - 1px); -} diff --git a/components/product/Swatch/Swatch.tsx b/components/product/Swatch/Swatch.tsx deleted file mode 100644 index d04e77a78..000000000 --- a/components/product/Swatch/Swatch.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import cn from 'classnames' -import React from 'react' -import s from './Swatch.module.css' -import { Check } from '@components/icons' -import Button, { ButtonProps } from '@components/ui/Button' -import { isDark } from '@lib/colors' -interface SwatchProps { - active?: boolean - children?: any - className?: string - variant?: 'size' | 'color' | string - color?: string - label?: string | null -} - -const Swatch: React.FC & SwatchProps> = React.memo( - ({ - active, - className, - color = '', - label = null, - variant = 'size', - ...props - }) => { - variant = variant?.toLowerCase() - - if (label) { - label = label?.toLowerCase() - } - - const swatchClassName = cn( - s.swatch, - { - [s.color]: color, - [s.active]: active, - [s.size]: variant === 'size', - [s.dark]: color ? isDark(color) : false, - [s.textLabel]: !color && label && label.length > 3, - }, - className - ) - - return ( - - ) - } -) - -export default Swatch diff --git a/components/product/Swatch/index.ts b/components/product/Swatch/index.ts deleted file mode 100644 index c8a795498..000000000 --- a/components/product/Swatch/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './Swatch' diff --git a/components/product/helpers.ts b/components/product/helpers.ts deleted file mode 100644 index d3fbd5ef5..000000000 --- a/components/product/helpers.ts +++ /dev/null @@ -1,32 +0,0 @@ -import type { Product } from '@commerce/types/product' -export type SelectedOptions = Record -import { Dispatch, SetStateAction } from 'react' - -export function getProductVariant(product: Product, opts: SelectedOptions) { - const variant = product.variants.find((variant) => { - return Object.entries(opts).every(([key, value]) => - variant.options.find((option) => { - if ( - option.__typename === 'MultipleChoiceOption' && - option.displayName.toLowerCase() === key.toLowerCase() - ) { - return option.values.find((v) => v.label.toLowerCase() === value) - } - }) - ) - }) - return variant -} - -export function selectDefaultOptionFromProduct( - product: Product, - updater: Dispatch> -) { - // Selects the default option - product.variants[0].options?.forEach((v) => { - updater((choices) => ({ - ...choices, - [v.displayName.toLowerCase()]: v.values[0].label.toLowerCase(), - })) - }) -} diff --git a/components/product/index.ts b/components/product/index.ts deleted file mode 100644 index 8b70f8e2e..000000000 --- a/components/product/index.ts +++ /dev/null @@ -1,5 +0,0 @@ -export { default as Swatch } from './Swatch' -export { default as ProductView } from './ProductView' -export { default as ProductCard } from './ProductCard' -export { default as ProductSlider } from './ProductSlider' -export { default as ProductOptions } from './ProductOptions' diff --git a/components/ui/Button/Button.module.css b/components/ui/Button/Button.module.css deleted file mode 100644 index 2ac7544f7..000000000 --- a/components/ui/Button/Button.module.css +++ /dev/null @@ -1,48 +0,0 @@ -.root { - @apply bg-accent-9 text-accent-0 cursor-pointer inline-flex - px-10 py-5 leading-6 transition ease-in-out duration-150 - shadow-sm text-center justify-center uppercase - border border-transparent items-center text-sm font-semibold - tracking-wide; - max-height: 64px; -} - -.root:hover { - @apply border-accent-9 bg-accent-6; -} - -.root:focus { - @apply shadow-outline-normal outline-none; -} - -.root[data-active] { - @apply bg-accent-6; -} - -.loading { - @apply bg-accent-1 text-accent-3 border-accent-2 cursor-not-allowed; -} - -.slim { - @apply py-2 transform-none normal-case; -} - -.ghost { - @apply border border-accent-2 bg-accent-0 text-accent-9 text-sm; -} - -.ghost:hover { - @apply border-accent-9 bg-accent-9 text-accent-0; -} - -.disabled, -.disabled:hover { - @apply text-accent-4 border-accent-2 bg-accent-1 cursor-not-allowed; - filter: grayscale(1); - -webkit-transform: translateZ(0); - -webkit-perspective: 1000; - -webkit-backface-visibility: hidden; -} - -.progress { -} diff --git a/components/ui/Button/Button.tsx b/components/ui/Button/Button.tsx deleted file mode 100644 index b29fb432a..000000000 --- a/components/ui/Button/Button.tsx +++ /dev/null @@ -1,73 +0,0 @@ -import cn from 'classnames' -import React, { - forwardRef, - ButtonHTMLAttributes, - JSXElementConstructor, - useRef, -} from 'react' -import mergeRefs from 'react-merge-refs' -import s from './Button.module.css' -import { LoadingDots } from '@components/ui' - -export interface ButtonProps extends ButtonHTMLAttributes { - href?: string - className?: string - variant?: 'flat' | 'slim' | 'ghost' - active?: boolean - type?: 'submit' | 'reset' | 'button' - Component?: string | JSXElementConstructor - width?: string | number - loading?: boolean - disabled?: boolean -} - -const Button: React.FC = forwardRef((props, buttonRef) => { - const { - className, - variant = 'flat', - children, - active, - width, - loading = false, - disabled = false, - style = {}, - Component = 'button', - ...rest - } = props - const ref = useRef(null) - - const rootClassName = cn( - s.root, - { - [s.ghost]: variant === 'ghost', - [s.slim]: variant === 'slim', - [s.loading]: loading, - [s.disabled]: disabled, - }, - className - ) - - return ( - - {children} - {loading && ( - - - - )} - - ) -}) - -export default Button diff --git a/components/ui/Button/index.ts b/components/ui/Button/index.ts deleted file mode 100644 index aa076c58e..000000000 --- a/components/ui/Button/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './Button' -export * from './Button' diff --git a/components/ui/Collapse/Collapse.module.css b/components/ui/Collapse/Collapse.module.css deleted file mode 100644 index fb4a82a90..000000000 --- a/components/ui/Collapse/Collapse.module.css +++ /dev/null @@ -1,25 +0,0 @@ -.root { - @apply border-b border-accent-2 py-4 flex flex-col outline-none; -} - -.header { - @apply flex flex-row items-center; -} - -.header .label { - @apply text-base font-medium; -} - -.content { - @apply pt-3 overflow-hidden pl-8; -} - -.icon { - @apply mr-3 text-accent-6; - margin-left: -6px; - transition: transform 0.2s ease; -} - -.icon.open { - transform: rotate(90deg); -} diff --git a/components/ui/Collapse/Collapse.tsx b/components/ui/Collapse/Collapse.tsx deleted file mode 100644 index b2f9525ac..000000000 --- a/components/ui/Collapse/Collapse.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import cn from 'classnames' -import React, { FC, ReactNode, useState } from 'react' -import s from './Collapse.module.css' -import { ChevronRight } from '@components/icons' -import { useSpring, a } from '@react-spring/web' -import useMeasure from 'react-use-measure' - -export interface CollapseProps { - title: string - children: ReactNode -} - -const Collapse: FC = React.memo(({ title, children }) => { - const [isActive, setActive] = useState(false) - const [ref, { height: viewHeight }] = useMeasure() - - const animProps = useSpring({ - height: isActive ? viewHeight : 0, - config: { tension: 250, friction: 32, clamp: true, duration: 150 }, - opacity: isActive ? 1 : 0, - }) - - const toggle = () => setActive((x) => !x) - - return ( -
    -
    - - {title} -
    - -
    - {children} -
    -     -
    - ) -}) - -export default Collapse diff --git a/components/ui/Collapse/index.ts b/components/ui/Collapse/index.ts deleted file mode 100644 index 1e584a53b..000000000 --- a/components/ui/Collapse/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './Collapse' -export * from './Collapse' diff --git a/components/ui/Container/Container.tsx b/components/ui/Container/Container.tsx deleted file mode 100644 index 538b1cac7..000000000 --- a/components/ui/Container/Container.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import cn from 'classnames' -import React, { FC } from 'react' - -interface ContainerProps { - className?: string - children?: any - el?: HTMLElement - clean?: boolean -} - -const Container: FC = ({ - children, - className, - el = 'div', - clean, -}) => { - const rootClassName = cn(className, { - 'mx-auto max-w-8xl px-6': !clean, - }) - - let Component: React.ComponentType> = - el as any - - return {children} -} - -export default Container diff --git a/components/ui/Container/index.ts b/components/ui/Container/index.ts deleted file mode 100644 index 9dbd596a8..000000000 --- a/components/ui/Container/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './Container' diff --git a/components/ui/Grid/Grid.module.css b/components/ui/Grid/Grid.module.css deleted file mode 100644 index 27e4c5b19..000000000 --- a/components/ui/Grid/Grid.module.css +++ /dev/null @@ -1,154 +0,0 @@ -.root { - @apply grid grid-cols-1 gap-0; - - @screen lg { - @apply grid-cols-3 grid-rows-2; - } - - & > * { - @apply row-span-1 bg-transparent box-border overflow-hidden; - height: 500px; - max-height: 800px; - - @screen lg { - @apply col-span-1; - height: inherit; - } - } -} - -.default { - & > * { - @apply bg-transparent; - } -} - -.layoutNormal { - @apply gap-3; -} - -@screen md { - .layoutNormal > * { - max-height: min-content !important; - } -} - -@screen lg { - .layoutNormal > * { - max-height: 400px; - } -} - -.layoutA { - & > *:nth-child(6n + 1), - & > *:nth-child(6n + 5) { - @apply row-span-2; - height: var(--row-height); - - @screen lg { - @apply col-span-2; - } - } - - &.filled { - & > *:nth-child(6n + 1) { - @apply bg-violet; - } - - & > *:nth-child(6n + 2) { - @apply bg-accent-8; - } - - & > *:nth-child(6n + 3) { - @apply bg-pink; - } - - & > *:nth-child(6n + 6) { - @apply bg-cyan; - } - } -} - -.layoutB { - & > *:nth-child(6n + 2), - & > *:nth-child(6n + 4) { - @apply row-span-2; - height: var(--row-height); - - @screen lg { - @apply col-span-2; - } - } - - &.filled { - & > *:nth-child(6n + 1) { - @apply bg-violet; - } - - & > *:nth-child(6n + 2) { - @apply bg-accent-8; - } - - & > *:nth-child(6n + 3) { - @apply bg-pink; - } - - & > *:nth-child(6n + 6) { - @apply bg-cyan; - } - } -} - -.layoutC { - & > *:nth-child(12n + 1), - & > *:nth-child(12n + 8) { - @apply row-span-2; - height: var(--row-height); - - @screen lg { - @apply col-span-2; - } - } - - &.filled { - & > *:nth-child(12n + 1) { - @apply bg-violet; - height: var(--row-height); - } - - & > *:nth-child(12n + 8) { - @apply bg-cyan; - height: var(--row-height); - } - - & > *:nth-child(6n + 3) { - @apply bg-pink; - } - } -} - -.layoutD { - & > *:nth-child(12n + 2), - & > *:nth-child(12n + 7) { - @apply row-span-2; - height: var(--row-height); - - @screen lg { - @apply col-span-2; - } - } - - &.filled { - & > *:nth-child(12n + 2) { - @apply bg-violet; - } - - & > *:nth-child(12n + 7) { - @apply bg-cyan; - } - - & > *:nth-child(6n + 3) { - @apply bg-pink; - } - } -} diff --git a/components/ui/Grid/Grid.tsx b/components/ui/Grid/Grid.tsx deleted file mode 100644 index 55ca78277..000000000 --- a/components/ui/Grid/Grid.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import cn from 'classnames' -import { FC, ReactNode, Component } from 'react' -import s from './Grid.module.css' - -interface GridProps { - className?: string - children?: ReactNode[] | Component[] | any[] - layout?: 'A' | 'B' | 'C' | 'D' | 'normal' - variant?: 'default' | 'filled' -} - -const Grid: FC = ({ - className, - layout = 'A', - children, - variant = 'default', -}) => { - const rootClassName = cn( - s.root, - { - [s.layoutA]: layout === 'A', - [s.layoutB]: layout === 'B', - [s.layoutC]: layout === 'C', - [s.layoutD]: layout === 'D', - [s.layoutNormal]: layout === 'normal', - [s.default]: variant === 'default', - [s.filled]: variant === 'filled', - }, - className - ) - return
    {children}
    -} - -export default Grid diff --git a/components/ui/Grid/index.ts b/components/ui/Grid/index.ts deleted file mode 100644 index ddb51299b..000000000 --- a/components/ui/Grid/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './Grid' diff --git a/components/ui/Hero/Hero.module.css b/components/ui/Hero/Hero.module.css deleted file mode 100644 index a0f1798f5..000000000 --- a/components/ui/Hero/Hero.module.css +++ /dev/null @@ -1,30 +0,0 @@ -.root { - @apply flex flex-col py-16 mx-auto; -} - -.title { - @apply text-accent-0 font-extrabold text-4xl leading-none tracking-tight; -} - -.description { - @apply mt-4 text-xl leading-8 text-accent-2 mb-1 lg:max-w-4xl; -} - -@screen lg { - .root { - @apply flex-row items-start justify-center py-32; - } - .title { - @apply text-5xl max-w-xl text-right leading-10 -mt-3; - line-height: 3.5rem; - } - .description { - @apply mt-0 ml-6; - } -} - -@screen xl { - .title { - @apply text-6xl; - } -} diff --git a/components/ui/Hero/Hero.tsx b/components/ui/Hero/Hero.tsx deleted file mode 100644 index 58d13e5de..000000000 --- a/components/ui/Hero/Hero.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import React, { FC } from 'react' -import { Container } from '@components/ui' -import { ArrowRight } from '@components/icons' -import s from './Hero.module.css' -import Link from 'next/link' -interface HeroProps { - className?: string - headline: string - description: string -} - -const Hero: FC = ({ headline, description }) => { - return ( -
    - -
    -

    {headline}

    -
    -

    {description}

    - - - Read it here - - - -
    -
    -     -
    - ) -} - -export default Hero diff --git a/components/ui/Hero/index.ts b/components/ui/Hero/index.ts deleted file mode 100644 index b08fa5ac8..000000000 --- a/components/ui/Hero/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './Hero' diff --git a/components/ui/Input/Input.module.css b/components/ui/Input/Input.module.css deleted file mode 100644 index 34507f445..000000000 --- a/components/ui/Input/Input.module.css +++ /dev/null @@ -1,7 +0,0 @@ -.root { - @apply bg-primary py-2 px-6 w-full appearance-none transition duration-150 ease-in-out pr-10 border border-accent-3 text-accent-6; -} - -.root:focus { - @apply outline-none shadow-outline-normal; -} diff --git a/components/ui/Input/Input.tsx b/components/ui/Input/Input.tsx deleted file mode 100644 index e630728b2..000000000 --- a/components/ui/Input/Input.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import cn from 'classnames' -import s from './Input.module.css' -import React, { InputHTMLAttributes } from 'react' - -export interface InputProps extends InputHTMLAttributes { - className?: string - onChange?: (...args: any[]) => any -} - -const Input: React.FC = (props) => { - const { className, children, onChange, ...rest } = props - - const rootClassName = cn(s.root, {}, className) - - const handleOnChange = (e: any) => { - if (onChange) { - onChange(e.target.value) - } - return null - } - - return ( - - ) -} - -export default Input diff --git a/components/ui/Input/index.ts b/components/ui/Input/index.ts deleted file mode 100644 index aa97178e5..000000000 --- a/components/ui/Input/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './Input' diff --git a/components/ui/Link/Link.tsx b/components/ui/Link/Link.tsx deleted file mode 100644 index 27f30e863..000000000 --- a/components/ui/Link/Link.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import NextLink, { LinkProps as NextLinkProps } from 'next/link' - -const Link: React.FC = ({ href, children, ...props }) => { - return ( - - {children} - - ) -} - -export default Link diff --git a/components/ui/Link/index.ts b/components/ui/Link/index.ts deleted file mode 100644 index 518d37298..000000000 --- a/components/ui/Link/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './Link' diff --git a/components/ui/LoadingDots/LoadingDots.module.css b/components/ui/LoadingDots/LoadingDots.module.css deleted file mode 100644 index 6054de3c7..000000000 --- a/components/ui/LoadingDots/LoadingDots.module.css +++ /dev/null @@ -1,33 +0,0 @@ -.root { - @apply inline-flex text-center items-center leading-7; -} - -.root .dot { - @apply rounded-full h-2 w-2; - background-color: currentColor; - animation-name: blink; - animation-duration: 1.4s; - animation-iteration-count: infinite; - animation-fill-mode: both; - margin: 0 2px; -} - -.root .dot:nth-of-type(2) { - animation-delay: 0.2s; -} - -.root .dot::nth-of-type(3) { - animation-delay: 0.4s; -} - -@keyframes blink { - 0% { - opacity: 0.2; - } - 20% { - opacity: 1; - } - 100% { - opacity: 0.2; - } -} diff --git a/components/ui/LoadingDots/LoadingDots.tsx b/components/ui/LoadingDots/LoadingDots.tsx deleted file mode 100644 index 27ce9f25f..000000000 --- a/components/ui/LoadingDots/LoadingDots.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import s from './LoadingDots.module.css' - -const LoadingDots: React.FC = () => { - return ( - - - - - - ) -} - -export default LoadingDots diff --git a/components/ui/LoadingDots/index.ts b/components/ui/LoadingDots/index.ts deleted file mode 100644 index 63df282bf..000000000 --- a/components/ui/LoadingDots/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './LoadingDots' diff --git a/components/ui/Logo/Logo.tsx b/components/ui/Logo/Logo.tsx deleted file mode 100644 index f15bde40a..000000000 --- a/components/ui/Logo/Logo.tsx +++ /dev/null @@ -1,21 +0,0 @@ -const Logo = ({ className = '', ...props }) => ( - - - - -) - -export default Logo diff --git a/components/ui/Logo/index.ts b/components/ui/Logo/index.ts deleted file mode 100644 index 93dce23b4..000000000 --- a/components/ui/Logo/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './Logo' diff --git a/components/ui/Marquee/Marquee.module.css b/components/ui/Marquee/Marquee.module.css deleted file mode 100644 index e5ecb16ef..000000000 --- a/components/ui/Marquee/Marquee.module.css +++ /dev/null @@ -1,22 +0,0 @@ -.root { - @apply w-full min-w-full relative flex flex-row items-center overflow-hidden py-0; - max-height: 320px; -} - -.root > div { - max-height: 320px; - padding: 0; - margin: 0; -} - -.root > div > * > *:nth-child(2) * { - max-height: 100%; -} - -.primary { - @apply bg-accent-0; -} - -.secondary { - @apply bg-accent-9; -} diff --git a/components/ui/Marquee/Marquee.tsx b/components/ui/Marquee/Marquee.tsx deleted file mode 100644 index ce5ec2338..000000000 --- a/components/ui/Marquee/Marquee.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import cn from 'classnames' -import s from './Marquee.module.css' -import { FC, ReactNode, Component, Children } from 'react' -import { default as FastMarquee } from 'react-fast-marquee' - -interface MarqueeProps { - className?: string - children?: ReactNode[] | Component[] | any[] - variant?: 'primary' | 'secondary' -} - -const Marquee: FC = ({ - className = '', - children, - variant = 'primary', -}) => { - const rootClassName = cn( - s.root, - { - [s.primary]: variant === 'primary', - [s.secondary]: variant === 'secondary', - }, - className - ) - - return ( - - {Children.map(children, (child) => ({ - ...child, - props: { - ...child.props, - className: cn(child.props.className, `${variant}`), - }, - }))} - - ) -} - -export default Marquee diff --git a/components/ui/Marquee/index.ts b/components/ui/Marquee/index.ts deleted file mode 100644 index b59b75568..000000000 --- a/components/ui/Marquee/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './Marquee' diff --git a/components/ui/Modal/Modal.module.css b/components/ui/Modal/Modal.module.css deleted file mode 100644 index f30d7c90a..000000000 --- a/components/ui/Modal/Modal.module.css +++ /dev/null @@ -1,17 +0,0 @@ -.root { - @apply fixed bg-black bg-opacity-40 flex items-center inset-0 z-50 justify-center; - backdrop-filter: blur(0.8px); - -webkit-backdrop-filter: blur(0.8px); -} - -.modal { - @apply bg-primary p-12 border border-accent-2 relative; -} - -.modal:focus { - @apply outline-none; -} - -.close { - @apply hover:text-accent-5 transition ease-in-out duration-150 focus:outline-none absolute right-0 top-0 m-6; -} diff --git a/components/ui/Modal/Modal.tsx b/components/ui/Modal/Modal.tsx deleted file mode 100644 index bb42b3d1b..000000000 --- a/components/ui/Modal/Modal.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import { FC, useRef, useEffect, useCallback } from 'react' -import s from './Modal.module.css' -import FocusTrap from '@lib/focus-trap' -import { Cross } from '@components/icons' -import { - disableBodyScroll, - clearAllBodyScrollLocks, - enableBodyScroll, -} from 'body-scroll-lock' -interface ModalProps { - className?: string - children?: any - onClose: () => void - onEnter?: () => void | null -} - -const Modal: FC = ({ children, onClose }) => { - const ref = useRef() as React.MutableRefObject - - const handleKey = useCallback( - (e: KeyboardEvent) => { - if (e.key === 'Escape') { - return onClose() - } - }, - [onClose] - ) - - useEffect(() => { - if (ref.current) { - disableBodyScroll(ref.current, { reserveScrollBarGap: true }) - window.addEventListener('keydown', handleKey) - } - return () => { - if (ref && ref.current) { - enableBodyScroll(ref.current) - } - clearAllBodyScrollLocks() - window.removeEventListener('keydown', handleKey) - } - }, [handleKey]) - - return ( -
    -
    - - {children} -
    -
    - ) -} - -export default Modal diff --git a/components/ui/Modal/index.ts b/components/ui/Modal/index.ts deleted file mode 100644 index e24753a1e..000000000 --- a/components/ui/Modal/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './Modal' diff --git a/components/ui/Quantity/Quantity.module.css b/components/ui/Quantity/Quantity.module.css deleted file mode 100644 index fa60cc56e..000000000 --- a/components/ui/Quantity/Quantity.module.css +++ /dev/null @@ -1,27 +0,0 @@ -.actions { - @apply flex p-1 border-accent-2 border items-center justify-center - w-12 text-accent-7; - transition-property: border-color, background, color, transform, box-shadow; - - transition-duration: 0.15s; - transition-timing-function: ease; - user-select: none; -} - -.actions:hover { - @apply border bg-accent-1 border-accent-3 text-accent-9; - transition: border-color; - z-index: 10; -} - -.actions:focus { - @apply outline-none; -} - -.actions:disabled { - @apply cursor-not-allowed; -} - -.input { - @apply bg-transparent px-4 w-full h-full focus:outline-none select-none pointer-events-auto; -} diff --git a/components/ui/Quantity/Quantity.tsx b/components/ui/Quantity/Quantity.tsx deleted file mode 100644 index abde145aa..000000000 --- a/components/ui/Quantity/Quantity.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import React, { FC } from 'react' -import s from './Quantity.module.css' -import { Cross, Plus, Minus } from '@components/icons' -import cn from 'classnames' -export interface QuantityProps { - value: number - increase: () => any - decrease: () => any - handleRemove: React.MouseEventHandler - handleChange: React.ChangeEventHandler - max?: number -} - -const Quantity: FC = ({ - value, - increase, - decrease, - handleChange, - handleRemove, - max = 6, -}) => { - return ( -
    - - - - -
    - ) -} - -export default Quantity diff --git a/components/ui/Quantity/index.ts b/components/ui/Quantity/index.ts deleted file mode 100644 index 5ee880cc9..000000000 --- a/components/ui/Quantity/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './Quantity' -export * from './Quantity' diff --git a/components/ui/README.md b/components/ui/README.md deleted file mode 100644 index 5bf4fe510..000000000 --- a/components/ui/README.md +++ /dev/null @@ -1,3 +0,0 @@ -# UI - -Building blocks to build a rich graphical interfaces. Components should be atomic and pure. Serve one purpose. diff --git a/components/ui/Rating/Rating.module.css b/components/ui/Rating/Rating.module.css deleted file mode 100644 index e69de29bb..000000000 diff --git a/components/ui/Rating/Rating.tsx b/components/ui/Rating/Rating.tsx deleted file mode 100644 index 259e642ea..000000000 --- a/components/ui/Rating/Rating.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import React, { FC } from 'react' -import rangeMap from '@lib/range-map' -import { Star } from '@components/icons' -import cn from 'classnames' - -export interface RatingProps { - value: number -} - -const Quantity: React.FC = React.memo(({ value = 5 }) => { - return ( -
    - {rangeMap(5, (i) => ( - = Math.floor(value), - })} - > - - - ))} -
    - ) -}) - -export default Quantity diff --git a/components/ui/Rating/index.ts b/components/ui/Rating/index.ts deleted file mode 100644 index 1354efb25..000000000 --- a/components/ui/Rating/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './Rating' -export * from './Rating' diff --git a/components/ui/Sidebar/Sidebar.module.css b/components/ui/Sidebar/Sidebar.module.css deleted file mode 100644 index f6a49387f..000000000 --- a/components/ui/Sidebar/Sidebar.module.css +++ /dev/null @@ -1,14 +0,0 @@ -.root { - @apply fixed inset-0 h-full z-50 box-border; -} - -.sidebar { - @apply h-full flex flex-col text-base bg-accent-0 shadow-xl overflow-y-auto overflow-x-hidden; - -webkit-overflow-scrolling: touch !important; -} - -.backdrop { - @apply absolute inset-0 bg-black bg-opacity-40 duration-100 ease-linear; - backdrop-filter: blur(0.8px); - -webkit-backdrop-filter: blur(0.8px); -} diff --git a/components/ui/Sidebar/Sidebar.tsx b/components/ui/Sidebar/Sidebar.tsx deleted file mode 100644 index ce0eeefe2..000000000 --- a/components/ui/Sidebar/Sidebar.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import { FC, useEffect, useRef } from 'react' -import s from './Sidebar.module.css' -import cn from 'classnames' -import { - disableBodyScroll, - enableBodyScroll, - clearAllBodyScrollLocks, -} from 'body-scroll-lock' - -interface SidebarProps { - children: any - onClose: () => void -} - -const Sidebar: FC = ({ children, onClose }) => { - const ref = useRef() as React.MutableRefObject - - useEffect(() => { - if (ref.current) { - disableBodyScroll(ref.current, { reserveScrollBarGap: true }) - } - return () => { - if (ref && ref.current) { - enableBodyScroll(ref.current) - } - clearAllBodyScrollLocks() - } - }, []) - - return ( -
    -
    -
    -
    -
    -
    - {children} -
    -
    -
    -
    -
    - ) -} - -export default Sidebar diff --git a/components/ui/Sidebar/index.ts b/components/ui/Sidebar/index.ts deleted file mode 100644 index 877187ca3..000000000 --- a/components/ui/Sidebar/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './Sidebar' diff --git a/components/ui/Skeleton/Skeleton.module.css b/components/ui/Skeleton/Skeleton.module.css deleted file mode 100644 index 37c164de7..000000000 --- a/components/ui/Skeleton/Skeleton.module.css +++ /dev/null @@ -1,48 +0,0 @@ -.skeleton { - @apply block; - background-image: linear-gradient( - 270deg, - var(--accent-0), - var(--accent-2), - var(--accent-0), - var(--accent-1) - ); - background-size: 400% 100%; - animation: loading 8s ease-in-out infinite; -} - -.wrapper { - @apply block relative; - - &:not(.show)::before { - content: none; - } - - &::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - z-index: 100; - background-image: linear-gradient( - 270deg, - var(--accent-0), - var(--accent-2), - var(--accent-0), - var(--accent-1) - ); - background-size: 400% 100%; - animation: loading 8s ease-in-out infinite; - } -} - -@keyframes loading { - 0% { - background-position: 200% 0; - } - 100% { - background-position: -200% 0; - } -} diff --git a/components/ui/Skeleton/Skeleton.tsx b/components/ui/Skeleton/Skeleton.tsx deleted file mode 100644 index 9cef2c1ac..000000000 --- a/components/ui/Skeleton/Skeleton.tsx +++ /dev/null @@ -1,57 +0,0 @@ -import React, { CSSProperties } from 'react' -import cn from 'classnames' -import px from '@lib/to-pixels' -import s from './Skeleton.module.css' - -interface SkeletonProps { - show?: boolean - block?: boolean - className?: string - style?: CSSProperties - width?: string | number - height?: string | number - boxHeight?: string | number -} - -const Skeleton: React.FC = ({ - style, - width, - height, - children, - className, - show = true, - boxHeight = height, -}) => { - // Automatically calculate the size if there are children - // and no fixed sizes are specified - const shouldAutoSize = !!children && !(width || height) - - // Defaults - width = width || 24 - height = height || 24 - boxHeight = boxHeight || height - - return ( - - {children} - - ) -} - -export default Skeleton diff --git a/components/ui/Skeleton/index.ts b/components/ui/Skeleton/index.ts deleted file mode 100644 index 3ec6c0031..000000000 --- a/components/ui/Skeleton/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './Skeleton' diff --git a/components/ui/Text/Text.module.css b/components/ui/Text/Text.module.css deleted file mode 100644 index f572fdf18..000000000 --- a/components/ui/Text/Text.module.css +++ /dev/null @@ -1,15 +0,0 @@ -.body { - @apply text-base leading-7 max-w-6xl mx-auto; -} - -.heading { - @apply text-5xl pt-1 pb-2 font-semibold tracking-wide cursor-pointer mb-2; -} - -.pageHeading { - @apply pt-1 pb-4 text-2xl leading-7 font-bold tracking-wide; -} - -.sectionHeading { - @apply pt-1 pb-2 text-2xl font-bold tracking-wide cursor-pointer mb-2; -} diff --git a/components/ui/Text/Text.tsx b/components/ui/Text/Text.tsx deleted file mode 100644 index 6106c209a..000000000 --- a/components/ui/Text/Text.tsx +++ /dev/null @@ -1,70 +0,0 @@ -import React, { - FunctionComponent, - JSXElementConstructor, - CSSProperties, -} from 'react' -import cn from 'classnames' -import s from './Text.module.css' - -interface TextProps { - variant?: Variant - className?: string - style?: CSSProperties - children?: React.ReactNode | any - html?: string - onClick?: () => any -} - -type Variant = 'heading' | 'body' | 'pageHeading' | 'sectionHeading' - -const Text: FunctionComponent = ({ - style, - className = '', - variant = 'body', - children, - html, - onClick, -}) => { - const componentsMap: { - [P in Variant]: React.ComponentType | string - } = { - body: 'div', - heading: 'h1', - pageHeading: 'h1', - sectionHeading: 'h2', - } - - const Component: - | JSXElementConstructor - | React.ReactElement - | React.ComponentType - | string = componentsMap![variant!] - - const htmlContentProps = html - ? { - dangerouslySetInnerHTML: { __html: html }, - } - : {} - - return ( - - {children} - - ) -} - -export default Text diff --git a/components/ui/Text/index.ts b/components/ui/Text/index.ts deleted file mode 100644 index e1e5fa74e..000000000 --- a/components/ui/Text/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './Text' diff --git a/components/ui/context.tsx b/components/ui/context.tsx deleted file mode 100644 index d2f5aebfd..000000000 --- a/components/ui/context.tsx +++ /dev/null @@ -1,216 +0,0 @@ -import React, { FC, useCallback, useMemo } from 'react' -import { ThemeProvider } from 'next-themes' - -export interface State { - displaySidebar: boolean - displayDropdown: boolean - displayModal: boolean - sidebarView: string - modalView: string - userAvatar: string -} - -const initialState = { - displaySidebar: false, - displayDropdown: false, - displayModal: false, - modalView: 'LOGIN_VIEW', - sidebarView: 'CHECKOUT_VIEW', - userAvatar: '', -} - -type Action = - | { - type: 'OPEN_SIDEBAR' - } - | { - type: 'CLOSE_SIDEBAR' - } - | { - type: 'OPEN_DROPDOWN' - } - | { - type: 'CLOSE_DROPDOWN' - } - | { - type: 'OPEN_MODAL' - } - | { - type: 'CLOSE_MODAL' - } - | { - type: 'SET_MODAL_VIEW' - view: MODAL_VIEWS - } - | { - type: 'SET_SIDEBAR_VIEW' - view: SIDEBAR_VIEWS - } - | { - type: 'SET_USER_AVATAR' - value: string - } - -type MODAL_VIEWS = - | 'SIGNUP_VIEW' - | 'LOGIN_VIEW' - | 'FORGOT_VIEW' - | 'NEW_SHIPPING_ADDRESS' - | 'NEW_PAYMENT_METHOD' - -type SIDEBAR_VIEWS = 'CART_VIEW' | 'CHECKOUT_VIEW' | 'PAYMENT_METHOD_VIEW' - -export const UIContext = React.createContext(initialState) - -UIContext.displayName = 'UIContext' - -function uiReducer(state: State, action: Action) { - switch (action.type) { - case 'OPEN_SIDEBAR': { - return { - ...state, - displaySidebar: true, - } - } - case 'CLOSE_SIDEBAR': { - return { - ...state, - displaySidebar: false, - } - } - case 'OPEN_DROPDOWN': { - return { - ...state, - displayDropdown: true, - } - } - case 'CLOSE_DROPDOWN': { - return { - ...state, - displayDropdown: false, - } - } - case 'OPEN_MODAL': { - return { - ...state, - displayModal: true, - displaySidebar: false, - } - } - case 'CLOSE_MODAL': { - return { - ...state, - displayModal: false, - } - } - case 'SET_MODAL_VIEW': { - return { - ...state, - modalView: action.view, - } - } - case 'SET_SIDEBAR_VIEW': { - return { - ...state, - sidebarView: action.view, - } - } - case 'SET_USER_AVATAR': { - return { - ...state, - userAvatar: action.value, - } - } - } -} - -export const UIProvider: FC = (props) => { - const [state, dispatch] = React.useReducer(uiReducer, initialState) - - const openSidebar = useCallback( - () => dispatch({ type: 'OPEN_SIDEBAR' }), - [dispatch] - ) - const closeSidebar = useCallback( - () => dispatch({ type: 'CLOSE_SIDEBAR' }), - [dispatch] - ) - const toggleSidebar = useCallback( - () => - state.displaySidebar - ? dispatch({ type: 'CLOSE_SIDEBAR' }) - : dispatch({ type: 'OPEN_SIDEBAR' }), - [dispatch, state.displaySidebar] - ) - const closeSidebarIfPresent = useCallback( - () => state.displaySidebar && dispatch({ type: 'CLOSE_SIDEBAR' }), - [dispatch, state.displaySidebar] - ) - - const openDropdown = useCallback( - () => dispatch({ type: 'OPEN_DROPDOWN' }), - [dispatch] - ) - const closeDropdown = useCallback( - () => dispatch({ type: 'CLOSE_DROPDOWN' }), - [dispatch] - ) - - const openModal = useCallback( - () => dispatch({ type: 'OPEN_MODAL' }), - [dispatch] - ) - const closeModal = useCallback( - () => dispatch({ type: 'CLOSE_MODAL' }), - [dispatch] - ) - - const setUserAvatar = useCallback( - (value: string) => dispatch({ type: 'SET_USER_AVATAR', value }), - [dispatch] - ) - - const setModalView = useCallback( - (view: MODAL_VIEWS) => dispatch({ type: 'SET_MODAL_VIEW', view }), - [dispatch] - ) - - const setSidebarView = useCallback( - (view: SIDEBAR_VIEWS) => dispatch({ type: 'SET_SIDEBAR_VIEW', view }), - [dispatch] - ) - - const value = useMemo( - () => ({ - ...state, - openSidebar, - closeSidebar, - toggleSidebar, - closeSidebarIfPresent, - openDropdown, - closeDropdown, - openModal, - closeModal, - setModalView, - setSidebarView, - setUserAvatar, - }), - [state] - ) - - return -} - -export const useUI = () => { - const context = React.useContext(UIContext) - if (context === undefined) { - throw new Error(`useUI must be used within a UIProvider`) - } - return context -} - -export const ManagedUIContext: FC = ({ children }) => ( - - {children} - -) diff --git a/components/ui/index.ts b/components/ui/index.ts deleted file mode 100644 index 47bdbd9ff..000000000 --- a/components/ui/index.ts +++ /dev/null @@ -1,16 +0,0 @@ -export { default as Hero } from './Hero' -export { default as Logo } from './Logo' -export { default as Grid } from './Grid' -export { default as Button } from './Button' -export { default as Sidebar } from './Sidebar' -export { default as Marquee } from './Marquee' -export { default as Container } from './Container' -export { default as LoadingDots } from './LoadingDots' -export { default as Skeleton } from './Skeleton' -export { default as Modal } from './Modal' -export { default as Text } from './Text' -export { default as Input } from './Input' -export { default as Collapse } from './Collapse' -export { default as Quantity } from './Quantity' -export { default as Rating } from './Rating' -export { useUI } from './context' diff --git a/components/wishlist/WishlistButton/WishlistButton.module.css b/components/wishlist/WishlistButton/WishlistButton.module.css deleted file mode 100644 index 3bdf1e710..000000000 --- a/components/wishlist/WishlistButton/WishlistButton.module.css +++ /dev/null @@ -1,33 +0,0 @@ -.root { - transition-duration: 0.2s; - transition-timing-function: ease; - transition-property: color, background-color, opacity; - @apply p-3 text-accent-9 flex items-center - justify-center font-semibold cursor-pointer - bg-accent-0 text-sm; -} - -.root:focus { - @apply outline-none; -} - -.icon { - transition-duration: 0.2s; - transition-timing-function: ease; - transition-property: transform, fill; - color: currentColor; -} - -.icon.loading { - fill: var(--pink-light); -} - -.icon.inWishlist { - fill: var(--pink); -} - -@screen lg { - .root { - @apply p-4; - } -} diff --git a/components/wishlist/WishlistButton/WishlistButton.tsx b/components/wishlist/WishlistButton/WishlistButton.tsx deleted file mode 100644 index a48eac170..000000000 --- a/components/wishlist/WishlistButton/WishlistButton.tsx +++ /dev/null @@ -1,84 +0,0 @@ -import React, { FC, useState } from 'react' -import cn from 'classnames' -import { useUI } from '@components/ui' -import { Heart } from '@components/icons' -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 s from './WishlistButton.module.css' -import type { Product, ProductVariant } from '@commerce/types/product' - -type Props = { - productId: Product['id'] - variant: ProductVariant -} & React.ButtonHTMLAttributes - -const WishlistButton: FC = ({ - productId, - variant, - className, - ...props -}) => { - const { data } = useWishlist() - const addItem = useAddItem() - const removeItem = useRemoveItem() - const { data: customer } = useCustomer() - const { openModal, setModalView } = useUI() - const [loading, setLoading] = useState(false) - - // @ts-ignore Wishlist is not always enabled - const itemInWishlist = data?.items?.find( - // @ts-ignore Wishlist is not always enabled - (item) => - item.product_id === Number(productId) && - (item.variant_id as any) === Number(variant.id) - ) - - const handleWishlistChange = async (e: any) => { - e.preventDefault() - - if (loading) return - - // A login is required before adding an item to the wishlist - if (!customer) { - setModalView('LOGIN_VIEW') - return openModal() - } - - setLoading(true) - - try { - if (itemInWishlist) { - await removeItem({ id: itemInWishlist.id! }) - } else { - await addItem({ - productId, - variantId: variant?.id!, - }) - } - - setLoading(false) - } catch (err) { - setLoading(false) - } - } - - return ( - - ) -} - -export default WishlistButton diff --git a/components/wishlist/WishlistButton/index.ts b/components/wishlist/WishlistButton/index.ts deleted file mode 100644 index 66e88074b..000000000 --- a/components/wishlist/WishlistButton/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './WishlistButton' diff --git a/components/wishlist/index.ts b/components/wishlist/index.ts deleted file mode 100644 index 9fe0a3541..000000000 --- a/components/wishlist/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as WishlistButton } from './WishlistButton' diff --git a/src/components/icons/Minus.tsx b/src/components/icons/Minus.tsx deleted file mode 100644 index 7c3b97d30..000000000 --- a/src/components/icons/Minus.tsx +++ /dev/null @@ -1,18 +0,0 @@ -const ArrowRight = ({ ...props }) => { - return ( - - - - ) -} - -export default ArrowRight diff --git a/src/components/icons/Plus.tsx b/src/components/icons/Plus.tsx deleted file mode 100644 index c8b2fcca3..000000000 --- a/src/components/icons/Plus.tsx +++ /dev/null @@ -1,18 +0,0 @@ -const ArrowLeft = ({ ...props }) => { - return ( - - - - ) -} - -export default ArrowLeft