diff --git a/assets/base.css b/assets/base.css index dfdaf1475..8182e5c80 100644 --- a/assets/base.css +++ b/assets/base.css @@ -20,16 +20,20 @@ --blue: #0070f3; --violet: #5f3dc4; --violet-light: #7048e8; - --accents-0: #f8f9fa; - --accents-1: #f1f3f5; - --accents-2: #e9ecef; - --accents-3: #dee2e6; - --accents-4: #ced4da; - --accents-5: #adb5bd; - --accents-6: #868e96; - --accents-7: #495057; - --accents-8: #343a40; - --accents-9: #212529; + + --accent-0: #fff; + --accent-05: #f8f9fa; + --accent-1: #f1f3f5; + --accent-2: #e9ecef; + --accent-3: #dee2e6; + --accent-4: #ced4da; + --accent-5: #adb5bd; + --accent-6: #868e96; + --accent-7: #495057; + --accent-8: #343a40; + --accent-9: #212529; + --accent-10: #000; + --font-sans: -apple-system, system-ui, BlinkMacSystemFont, 'Helvetica Neue', 'Helvetica', sans-serif; } @@ -48,16 +52,18 @@ --text-primary: white; --text-secondary: black; - --accents-0: #212529; - --accents-1: #343a40; - --accents-2: #495057; - --accents-3: #868e96; - --accents-4: #adb5bd; - --accents-5: #ced4da; - --accents-6: #dee2e6; - --accents-7: #e9ecef; - --accents-8: #f1f3f5; - --accents-9: #f8f9fa; + --accent-0: #000; + --accent-05: #212529; + --accent-1: #343a40; + --accent-2: #495057; + --accent-3: #868e96; + --accent-4: #adb5bd; + --accent-5: #ced4da; + --accent-6: #dee2e6; + --accent-7: #e9ecef; + --accent-8: #f1f3f5; + --accent-9: #f8f9fa; + --accent-10: #fff; } *, @@ -127,4 +133,3 @@ a { opacity: 1; } } - diff --git a/components/auth/ForgotPassword.tsx b/components/auth/ForgotPassword.tsx index 597ee328e..dbac371c7 100644 --- a/components/auth/ForgotPassword.tsx +++ b/components/auth/ForgotPassword.tsx @@ -61,7 +61,7 @@ const ForgotPassword: FC = () => { - Do you have an account? + Do you have an account? {` `} = () => { Log In
- Don't have an account? + Don't have an account? {` `} = () => { - + {' '} @@ -97,7 +97,7 @@ const SignUpView: FC = () => {
- Do you have an account? + Do you have an account? {` `} { @@ -49,6 +51,7 @@ const CartItem = ({ setQuantity(Number(e.target.value)) } } + const handleBlur = () => { const val = Number(quantity) @@ -56,6 +59,7 @@ const CartItem = ({ updateQuantity(val) } } + const increaseQuantity = (n = 1) => { const val = Number(quantity) + n @@ -64,6 +68,7 @@ const CartItem = ({ updateQuantity(val) } } + const handleRemove = async () => { setRemoving(true) @@ -87,75 +92,100 @@ const CartItem = ({ return (
  • -
    - - closeSidebarIfPresent()} - className={s.productImage} - width={150} - height={150} - src={item.variant.image!.url} - alt={item.variant.image!.altText} - unoptimized - /> - +
    +
    + + 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 ? '' : } +
    + ))} +
    + ) : null} +
    +
    + {price} +
    -
    - - closeSidebarIfPresent()} - > - {item.name} - - - {options && options.length > 0 ? ( -
    - {options.map((option: ItemOption, i: number) => ( - - {option.value} - {i === options.length - 1 ? '' : ', '} - - ))} -
    - ) : null} -
    - -
    -
    -
    - {price} - -
    + ) : ( +
    x{quantity}
    + )}
    • ) } diff --git a/components/cart/CartSidebarView/CartSidebarView.module.css b/components/cart/CartSidebarView/CartSidebarView.module.css index 9b94021ad..1ad1acdd7 100644 --- a/components/cart/CartSidebarView/CartSidebarView.module.css +++ b/components/cart/CartSidebarView/CartSidebarView.module.css @@ -1,5 +1,5 @@ .root { - @apply h-full flex flex-col; + @apply h-full flex flex-col relative w-full relative; } .root.empty { diff --git a/components/cart/CartSidebarView/CartSidebarView.tsx b/components/cart/CartSidebarView/CartSidebarView.tsx index 326390327..7c46a95d2 100644 --- a/components/cart/CartSidebarView/CartSidebarView.tsx +++ b/components/cart/CartSidebarView/CartSidebarView.tsx @@ -1,8 +1,8 @@ -import { FC } from 'react' import cn from 'classnames' import Link from 'next/link' -import CartItem from '../CartItem' +import { FC } from 'react' import s from './CartSidebarView.module.css' +import CartItem from '../CartItem' import { Button } from '@components/ui' import { UserNav } from '@components/common' import { useUI } from '@components/ui/context' @@ -11,7 +11,7 @@ import useCart from '@framework/cart/use-cart' import usePrice from '@framework/product/use-price' const CartSidebarView: FC = () => { - const { closeSidebar } = useUI() + const { closeSidebar, setSidebarView } = useUI() const { data, isLoading, isEmpty } = useCart() const { price: subTotal } = usePrice( @@ -27,6 +27,7 @@ const CartSidebarView: FC = () => { } ) const handleClose = () => closeSidebar() + const goToCheckout = () => setSidebarView('CHECKOUT_VIEW') const error = null const success = null @@ -43,9 +44,12 @@ const CartSidebarView: FC = () => {
    @@ -62,7 +66,7 @@ const CartSidebarView: FC = () => {

    Your cart is empty

    -

    +

    Biscuit oat cake wafer icing ice cream tiramisu pudding cupcake.

    @@ -90,13 +94,13 @@ const CartSidebarView: FC = () => {

    My Cart

    -
      +
        {data!.lineItems.map((item: any) => ( {
    -
    -
    -
      -
    • - Subtotal - {subTotal} -
      • -
    • - Taxes - Calculated at checkout -
      • -
    • - Estimated Shipping - FREE -
      • -
    -
    - Total - {total} -
    +
    +
      +
    • + Subtotal + {subTotal} +
      • +
    • + Taxes + Calculated at checkout +
      • +
    • + Shipping + FREE +
      • +
    +
    + Total + {total} +
    +
    + {process.env.COMMERCE_CHECKOUT_ENABLED ? ( + + ) : ( + + )}
    -
    )} diff --git a/components/checkout/CheckoutSidebarView/CheckoutSidebarView.module.css b/components/checkout/CheckoutSidebarView/CheckoutSidebarView.module.css new file mode 100644 index 000000000..3f66cb0cc --- /dev/null +++ b/components/checkout/CheckoutSidebarView/CheckoutSidebarView.module.css @@ -0,0 +1,3 @@ +.root { + @apply h-full flex flex-col relative w-full relative; +} diff --git a/components/checkout/CheckoutSidebarView/CheckoutSidebarView.tsx b/components/checkout/CheckoutSidebarView/CheckoutSidebarView.tsx new file mode 100644 index 000000000..c8b8cdf2e --- /dev/null +++ b/components/checkout/CheckoutSidebarView/CheckoutSidebarView.tsx @@ -0,0 +1,190 @@ +import cn from 'classnames' +import Link from 'next/link' +import { FC } from 'react' +import s from './CheckoutSidebarView.module.css' +import CartItem from '@components/cart/CartItem' +import { Button } from '@components/ui' +import { UserNav } from '@components/common' +import { useUI } from '@components/ui/context' +import { + Bag, + Cross, + Check, + MapPin, + CreditCard, + ChevronLeft, + ChevronRight, +} from '@components/icons' +import useCart from '@framework/cart/use-cart' +import usePrice from '@framework/product/use-price' + +const CheckoutSidebarView: 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 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. +

    +
    + ) : ( + <> +
    + +

    + Checkout +

    + + + {/* Payment Method */} + {/* Only available with checkout set to true - Meaning that the provider does offer checkout functionality. */} +
    setSidebarView('PAYMENT_VIEW')} + className="border border-accent-2 px-6 py-5 mb-4 text-center flex items-center cursor-pointer hover:border-accent-4" + > +
    + + + Add Payment Method + + {/* VISA #### #### #### 2345 */} +
    +
    + +
    +
    + + {/* Shipping Address */} + {/* Only available with checkout set to true - Meaning that the provider does offer checkout functionality. */} +
    setSidebarView('SHIPPING_VIEW')} + className="border border-accent-2 px-6 py-5 mb-4 text-center flex items-center cursor-pointer hover:border-accent-4" + > +
    + + + Add Shipping Address + + {/* + 1046 Kearny Street.
    + San Franssisco, California +     */} +
    +
    + +
    +
    + +
      + {data!.lineItems.map((item: any) => ( + + ))} +
    +
    + +
    +
      +
    • + Subtotal + {subTotal} +
      • +
    • + Taxes + Calculated at checkout +
      • +
    • + Shipping + FREE +
      • +
    +
    + Total + {total} +
    +
    + +
    +
    + + )} +
    + ) +} + +export default CheckoutSidebarView diff --git a/components/checkout/CheckoutSidebarView/index.ts b/components/checkout/CheckoutSidebarView/index.ts new file mode 100644 index 000000000..168bc58f4 --- /dev/null +++ b/components/checkout/CheckoutSidebarView/index.ts @@ -0,0 +1 @@ +export { default } from './CheckoutSidebarView' diff --git a/components/checkout/PaymentMethodView/PaymentMethodView.module.css b/components/checkout/PaymentMethodView/PaymentMethodView.module.css new file mode 100644 index 000000000..2e90f873d --- /dev/null +++ b/components/checkout/PaymentMethodView/PaymentMethodView.module.css @@ -0,0 +1,21 @@ +.root { + @apply h-full flex flex-col relative w-full relative; +} + +.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-3 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 new file mode 100644 index 000000000..383e8f014 --- /dev/null +++ b/components/checkout/PaymentMethodView/PaymentMethodView.tsx @@ -0,0 +1,106 @@ +import { FC } from 'react' +import s from './PaymentMethodView.module.css' +import { ChevronLeft } from '@components/icons' +import { UserNav } from '@components/common' +import { useUI } from '@components/ui/context' +import Button from '@components/ui/Button' +import cn from 'classnames' + +const PaymentMethodView: FC = () => { + const { setSidebarView } = useUI() + + return ( +
    +
    +
    +
    + +
    +
    + +
    +
    +
    +
    +

    + Payment Method +

    +
    +
    + + +
    +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    +
    +
    +
    + + +
    +
    + + +
    +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    +
    + + +
    +
    + + +
    +
    +
    + + +
    +
    + +
    +
    +
    +
    + ) +} + +export default PaymentMethodView diff --git a/components/checkout/PaymentMethodView/index.ts b/components/checkout/PaymentMethodView/index.ts new file mode 100644 index 000000000..951b3c318 --- /dev/null +++ b/components/checkout/PaymentMethodView/index.ts @@ -0,0 +1 @@ +export { default } from './PaymentMethodView' diff --git a/components/checkout/README.md b/components/checkout/README.md new file mode 100644 index 000000000..326f98fd5 --- /dev/null +++ b/components/checkout/README.md @@ -0,0 +1,12 @@ +# Checkout + +Checkout is only enabled in those providers that specify Custom Checkout to be enabled. + +This feature enables: + +- Shipping +- Payment + +``` +COMMERCE_CHECKOUT_ENABLED +``` diff --git a/components/checkout/ShippingView/ShippingView.module.css b/components/checkout/ShippingView/ShippingView.module.css new file mode 100644 index 000000000..7b8c40ef6 --- /dev/null +++ b/components/checkout/ShippingView/ShippingView.module.css @@ -0,0 +1,25 @@ +.root { + @apply h-full flex flex-col relative w-full relative; +} + +.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-3 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 new file mode 100644 index 000000000..111f11eaf --- /dev/null +++ b/components/checkout/ShippingView/ShippingView.tsx @@ -0,0 +1,98 @@ +import { FC } from 'react' +import s from './ShippingView.module.css' +import { ChevronLeft } from '@components/icons' +import { UserNav } from '@components/common' +import { useUI } from '@components/ui/context' +import Button from '@components/ui/Button' +import cn from 'classnames' + +const PaymentMethodView: FC = () => { + const { setSidebarView } = useUI() + + return ( +
    +
    +
    +
    + +
    +
    + +
    +
    +
    +
    +

    + 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 new file mode 100644 index 000000000..428e7e4fe --- /dev/null +++ b/components/checkout/ShippingView/index.ts @@ -0,0 +1 @@ +export { default } from './ShippingView' diff --git a/components/common/FeatureBar/FeatureBar.module.css b/components/common/FeatureBar/FeatureBar.module.css index 419fd4b08..a3cb61cd2 100644 --- a/components/common/FeatureBar/FeatureBar.module.css +++ b/components/common/FeatureBar/FeatureBar.module.css @@ -1,9 +1,7 @@ .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 { - .root { + @screen md { @apply flex text-left; } } diff --git a/components/common/Footer/Footer.tsx b/components/common/Footer/Footer.tsx index 5fb9ede58..8fde704ac 100644 --- a/components/common/Footer/Footer.tsx +++ b/components/common/Footer/Footer.tsx @@ -24,7 +24,7 @@ const Footer: FC = ({ className, pages }) => { return (