From 1b80b53b8242ed68f99558ad1c34cb0544769457 Mon Sep 17 00:00:00 2001 From: Bel Curcio Date: Wed, 2 Jun 2021 16:12:58 -0300 Subject: [PATCH] Latest changes - Normalizing cart --- .../CartSidebarView.module.css | 8 +- .../cart/CartSidebarView/CartSidebarView.tsx | 40 +--- .../CheckoutSidebarView.module.css | 4 +- .../CheckoutSidebarView.tsx | 218 +++++------------- .../PaymentMethodView/PaymentMethodView.tsx | 36 +-- .../PaymentWidget/PaymentWidget.module.css | 4 + .../checkout/PaymentWidget/PaymentWidget.tsx | 29 +++ components/checkout/PaymentWidget/index.ts | 1 + .../checkout/ShippingView/ShippingView.tsx | 32 +-- .../ShippingWidget/ShippingWidget.module.css | 4 + .../ShippingWidget/ShippingWidget.tsx | 33 +++ components/checkout/ShippingWidget/index.ts | 1 + components/common/Footer/Footer.tsx | 2 +- components/common/Navbar/Navbar.module.css | 4 + components/common/Navbar/Navbar.tsx | 6 +- .../SidebarLayout/SidebarLayout.module.css | 8 + .../common/SidebarLayout/SidebarLayout.tsx | 56 +++++ components/common/SidebarLayout/index.ts | 1 + .../product/ProductView/ProductView.tsx | 3 +- components/ui/Sidebar/Sidebar.tsx | 4 +- components/ui/Text/Text.tsx | 3 + tsconfig.json | 4 +- 22 files changed, 237 insertions(+), 264 deletions(-) create mode 100644 components/checkout/PaymentWidget/PaymentWidget.module.css create mode 100644 components/checkout/PaymentWidget/PaymentWidget.tsx create mode 100644 components/checkout/PaymentWidget/index.ts create mode 100644 components/checkout/ShippingWidget/ShippingWidget.module.css create mode 100644 components/checkout/ShippingWidget/ShippingWidget.tsx create mode 100644 components/checkout/ShippingWidget/index.ts create mode 100644 components/common/SidebarLayout/SidebarLayout.module.css create mode 100644 components/common/SidebarLayout/SidebarLayout.tsx create mode 100644 components/common/SidebarLayout/index.ts diff --git a/components/cart/CartSidebarView/CartSidebarView.module.css b/components/cart/CartSidebarView/CartSidebarView.module.css index 1ad1acdd7..2b36d283d 100644 --- a/components/cart/CartSidebarView/CartSidebarView.module.css +++ b/components/cart/CartSidebarView/CartSidebarView.module.css @@ -1,7 +1,3 @@ -.root { - @apply h-full flex flex-col relative w-full relative; -} - .root.empty { @apply bg-secondary text-secondary; } @@ -13,3 +9,7 @@ .root.error { @apply bg-red text-white; } + +.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 index d9a6dd6fb..9cf99cf9b 100644 --- a/components/cart/CartSidebarView/CartSidebarView.tsx +++ b/components/cart/CartSidebarView/CartSidebarView.tsx @@ -3,12 +3,12 @@ import Link from 'next/link' 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 { 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() @@ -33,31 +33,12 @@ const CartSidebarView: FC = () => { const success = null return ( -
-
-
-
- -
-
- -
-
-
- {isLoading || isEmpty ? (
@@ -93,14 +74,11 @@ const CartSidebarView: FC = () => { <>
-

+ My Cart -

+ -
    +
      {data!.lineItems.map((item: any) => ( {
)} -
+ ) } diff --git a/components/checkout/CheckoutSidebarView/CheckoutSidebarView.module.css b/components/checkout/CheckoutSidebarView/CheckoutSidebarView.module.css index 3f66cb0cc..36bd4eb49 100644 --- a/components/checkout/CheckoutSidebarView/CheckoutSidebarView.module.css +++ b/components/checkout/CheckoutSidebarView/CheckoutSidebarView.module.css @@ -1,3 +1,3 @@ -.root { - @apply h-full flex flex-col relative w-full relative; +.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 index c78a4174f..d17f46b28 100644 --- a/components/checkout/CheckoutSidebarView/CheckoutSidebarView.tsx +++ b/components/checkout/CheckoutSidebarView/CheckoutSidebarView.tsx @@ -1,26 +1,19 @@ 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 { Button, Text } from '@components/ui' 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' +import ShippingWidget from '../ShippingWidget' +import PaymentWidget from '../PaymentWidget' +import SidebarLayout from '@components/common/SidebarLayout' +import s from './CheckoutSidebarView.module.css' const CheckoutSidebarView: FC = () => { - const { closeSidebar, setSidebarView } = useUI() - const { data, isLoading, isEmpty } = useCart() + const { setSidebarView } = useUI() + const { data } = useCart() const { price: subTotal } = usePrice( data && { @@ -34,160 +27,59 @@ const CheckoutSidebarView: FC = () => { currencyCode: data.currency.code, } ) - const handleClose = () => closeSidebar() - - const error = null - const success = null 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}
-
- - {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} -
-
- {/* Once data is correcly filled */} - {/* */} - -
-
- - )} -
+ +
+ + ) } diff --git a/components/checkout/PaymentMethodView/PaymentMethodView.tsx b/components/checkout/PaymentMethodView/PaymentMethodView.tsx index 909108802..a5f6f4b51 100644 --- a/components/checkout/PaymentMethodView/PaymentMethodView.tsx +++ b/components/checkout/PaymentMethodView/PaymentMethodView.tsx @@ -1,39 +1,17 @@ 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' +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 -

+ Payment Method
@@ -99,7 +77,7 @@ const PaymentMethodView: FC = () => { Continue
-
+ ) } diff --git a/components/checkout/PaymentWidget/PaymentWidget.module.css b/components/checkout/PaymentWidget/PaymentWidget.module.css new file mode 100644 index 000000000..38dcab0c0 --- /dev/null +++ b/components/checkout/PaymentWidget/PaymentWidget.module.css @@ -0,0 +1,4 @@ +.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 new file mode 100644 index 000000000..e1892934e --- /dev/null +++ b/components/checkout/PaymentWidget/PaymentWidget.tsx @@ -0,0 +1,29 @@ +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 new file mode 100644 index 000000000..18cadea57 --- /dev/null +++ b/components/checkout/PaymentWidget/index.ts @@ -0,0 +1 @@ +export { default } from './PaymentWidget' diff --git a/components/checkout/ShippingView/ShippingView.tsx b/components/checkout/ShippingView/ShippingView.tsx index 95644f570..1d03a2aac 100644 --- a/components/checkout/ShippingView/ShippingView.tsx +++ b/components/checkout/ShippingView/ShippingView.tsx @@ -1,35 +1,15 @@ 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' +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 @@ -91,7 +71,7 @@ const PaymentMethodView: FC = () => { Continue

-
+ ) } diff --git a/components/checkout/ShippingWidget/ShippingWidget.module.css b/components/checkout/ShippingWidget/ShippingWidget.module.css new file mode 100644 index 000000000..38dcab0c0 --- /dev/null +++ b/components/checkout/ShippingWidget/ShippingWidget.module.css @@ -0,0 +1,4 @@ +.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 new file mode 100644 index 000000000..b072178b0 --- /dev/null +++ b/components/checkout/ShippingWidget/ShippingWidget.tsx @@ -0,0 +1,33 @@ +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 new file mode 100644 index 000000000..88e6dca4b --- /dev/null +++ b/components/checkout/ShippingWidget/index.ts @@ -0,0 +1 @@ +export { default } from './ShippingWidget' diff --git a/components/common/Footer/Footer.tsx b/components/common/Footer/Footer.tsx index e2de8c240..30b2d45b8 100644 --- a/components/common/Footer/Footer.tsx +++ b/components/common/Footer/Footer.tsx @@ -44,7 +44,7 @@ const Footer: FC = ({ className, pages }) => {
-
+
+
Related Products
{relatedProducts.map((p) => ( diff --git a/components/ui/Sidebar/Sidebar.tsx b/components/ui/Sidebar/Sidebar.tsx index f14532e96..c894ac035 100644 --- a/components/ui/Sidebar/Sidebar.tsx +++ b/components/ui/Sidebar/Sidebar.tsx @@ -34,7 +34,7 @@ const Sidebar: FC = ({ children, open = false, onClose }) => { return ( - {open ? ( + {open && (
= ({ children, open = false, onClose }) => {
- ) : null} + )} ) } diff --git a/components/ui/Text/Text.tsx b/components/ui/Text/Text.tsx index 51e1cce15..0ca71da9a 100644 --- a/components/ui/Text/Text.tsx +++ b/components/ui/Text/Text.tsx @@ -12,6 +12,7 @@ interface Props { style?: CSSProperties children?: React.ReactNode | any html?: string + onClick?: () => any } type Variant = 'heading' | 'body' | 'pageHeading' | 'sectionHeading' @@ -22,6 +23,7 @@ const Text: FunctionComponent = ({ variant = 'body', children, html, + onClick, }) => { const componentsMap: { [P in Variant]: React.ComponentType | string @@ -56,6 +58,7 @@ const Text: FunctionComponent = ({ }, className )} + onClick={onClick} style={style} {...htmlContentProps} > diff --git a/tsconfig.json b/tsconfig.json index 9e712fb18..e20f37099 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -22,8 +22,8 @@ "@components/*": ["components/*"], "@commerce": ["framework/commerce"], "@commerce/*": ["framework/commerce/*"], - "@framework": ["framework/bigcommerce"], - "@framework/*": ["framework/bigcommerce/*"] + "@framework": ["framework/shopify"], + "@framework/*": ["framework/shopify/*"] } }, "include": ["next-env.d.ts", "**/*.d.ts", "**/*.ts", "**/*.tsx", "**/*.js"],