From 78cc378a72c5b27db34b3903281b045520513c19 Mon Sep 17 00:00:00 2001 From: B Date: Tue, 15 Jun 2021 20:23:17 -0300 Subject: [PATCH] New Release (#371) * Custom Checkout Progress * Updates to Checkout * Custom Checkout Progress * Adding tabs * Adding Collapse * Adding Collapse * Improving Sidebar Scroll * Modif footer * Changes * More design updates * sidebar cart * More design updates * More design updates * More design updates * More design updates * Types * Types * Design Updates * More changes * More changes * More changes * Changes * Changes * Changes * New tailwind required changes * Sidebar Styling issues with Mobile * Latest changes - Normalizing cart * Styling Fixes * New changes * Changes * latest * Refactor and Renaming some UI Props * Adding Quantity Component * Adding Rating Component * Rating Component * More updates * User Select disabled, plus hidding horizontal scroll bars * Changes * Adding ProductOptions Component and more helpers * Styling updates * Styling updates * Fix for slim tags * Missmatch with RightArrow * Footer updates and some styles * Latest Updates * Latest Updates * Latest Updates * Removing Portal, since it's not needed. We might add it later I'd rather not to. * Removing Portal, since it's not needed. We might add it later I'd rather not to. * Sam backdrop filter * General UI Improvements * General UI Improvements * Search now with Geist Colors * Now with Geist Colors * Changes * Scroll for Mobile on IOs devises * LoadingDots Working (: * Changes * More Changes * Perf changes * More perf changes * Fade to the Nametags in the ProductCard * changes * Search issue ui * Search issue ui * Make sure to only refresh navbar and modals when required * Index revalidate * Fixed image issue * hide album scroll on windows * Fix scrollbar * Changing * Adding 404 with Layout * Removing Toast * Adding Assets * Adding Assets * Progress with LocalProvider * New productTag * Only images for the drop * changes * Empty SWRhooks * Adding Local Provider * Working local * Working view of a LocalProvider * More updates * Changes * Removed react-ticker * default to local if no env available * default to local if no env available * add missing `@` to css import * rewrite search rewrites to multiple pages * allow requests in getStaticProps to execute in parallel * make type import explicit * add a tsconfig.js file * use local provider in tsconfig.js * avoid a circular dependency * Saleor was not in the providers list * avoid circular dependency in bigcommerce * Adding more to the Local Provider (#366) * Adding more data * Adding more data * optimize assets (#370) * Optimize assets (#372) * optimize assets * remove assets * remove assets * cart enabled * Adding saleor * Changes with Webpack * Changes Co-authored-by: Luis Alvarez Co-authored-by: Tobias Koppers Co-authored-by: Shu Ding --- README.md | 8 +- assets/base.css | 54 +- components/auth/ForgotPassword.tsx | 2 +- components/auth/LoginView.tsx | 2 +- components/auth/SignUpView.tsx | 4 +- components/cart/CartItem/CartItem.module.css | 16 +- components/cart/CartItem/CartItem.tsx | 178 +- .../CartSidebarView.module.css | 10 +- .../cart/CartSidebarView/CartSidebarView.tsx | 98 +- .../CheckoutSidebarView.module.css | 7 + .../CheckoutSidebarView.tsx | 89 + .../checkout/CheckoutSidebarView/index.ts | 1 + .../PaymentMethodView.module.css | 17 + .../PaymentMethodView/PaymentMethodView.tsx | 84 + .../checkout/PaymentMethodView/index.ts | 1 + .../PaymentWidget/PaymentWidget.module.css | 4 + .../checkout/PaymentWidget/PaymentWidget.tsx | 29 + components/checkout/PaymentWidget/index.ts | 1 + .../ShippingView/ShippingView.module.css | 21 + .../checkout/ShippingView/ShippingView.tsx | 78 + components/checkout/ShippingView/index.ts | 1 + .../ShippingWidget/ShippingWidget.module.css | 4 + .../ShippingWidget/ShippingWidget.tsx | 33 + components/checkout/ShippingWidget/index.ts | 1 + components/common/Avatar/Avatar.tsx | 2 +- .../common/FeatureBar/FeatureBar.module.css | 4 +- components/common/Footer/Footer.module.css | 4 + components/common/Footer/Footer.tsx | 76 +- .../HomeAllProductsGrid.tsx | 4 +- .../common/I18nWidget/I18nWidget.module.css | 20 +- components/common/I18nWidget/I18nWidget.tsx | 2 +- components/common/Layout/Layout.tsx | 75 +- components/common/Navbar/Navbar.module.css | 16 +- components/common/Navbar/Navbar.tsx | 13 +- .../common/Searchbar/Searchbar.module.css | 16 +- components/common/Searchbar/Searchbar.tsx | 43 +- .../SidebarLayout/SidebarLayout.module.css | 20 + .../common/SidebarLayout/SidebarLayout.tsx | 50 + components/common/SidebarLayout/index.ts | 1 + .../common/UserNav/DropdownMenu.module.css | 10 +- components/common/UserNav/DropdownMenu.tsx | 2 +- components/common/UserNav/UserNav.module.css | 4 +- components/common/UserNav/UserNav.tsx | 32 +- .../icons/{RightArrow.tsx => ArrowRight.tsx} | 7 +- components/icons/ChevronDown.tsx | 20 + components/icons/ChevronLeft.tsx | 20 + components/icons/ChevronRight.tsx | 20 + components/icons/CreditCard.tsx | 1 + components/icons/Star.tsx | 16 + components/icons/index.ts | 12 +- .../ProductCard/ProductCard.module.css | 190 +- .../product/ProductCard/ProductCard.tsx | 164 +- .../product/ProductOptions/ProductOptions.tsx | 50 + components/product/ProductOptions/index.ts | 1 + .../ProductSidebar/ProductSidebar.module.css | 84 + .../product/ProductSidebar/ProductSidebar.tsx | 87 + components/product/ProductSidebar/index.ts | 1 + .../ProductSlider/ProductSlider.module.css | 126 +- .../product/ProductSlider/ProductSlider.tsx | 87 +- .../ProductSliderControl.module.css | 29 + .../ProductSliderControl.tsx | 31 + .../product/ProductSliderControl/index.ts | 1 + .../product/ProductTag/ProductTag.module.css | 30 + components/product/ProductTag/ProductTag.tsx | 36 + components/product/ProductTag/index.ts | 1 + .../ProductView/ProductView.module.css | 106 +- .../product/ProductView/ProductView.tsx | 208 +- components/product/Swatch/Swatch.module.css | 12 +- components/product/Swatch/Swatch.tsx | 86 +- components/product/helpers.ts | 16 +- components/product/index.ts | 1 + components/search.tsx | 439 + components/ui/Button/Button.module.css | 26 +- components/ui/Button/Button.tsx | 3 +- components/ui/Collapse/Collapse.module.css | 25 + components/ui/Collapse/Collapse.tsx | 46 + components/ui/Collapse/index.ts | 2 + components/ui/Container/Container.tsx | 9 +- components/ui/Grid/Grid.module.css | 44 +- components/ui/Grid/Grid.tsx | 4 +- components/ui/Hero/Hero.module.css | 27 +- components/ui/Hero/Hero.tsx | 22 +- components/ui/Input/Input.module.css | 2 +- components/ui/Input/Input.tsx | 4 +- .../ui/LoadingDots/LoadingDots.module.css | 29 +- components/ui/LoadingDots/LoadingDots.tsx | 6 +- components/ui/Marquee/Marquee.module.css | 20 +- components/ui/Marquee/Marquee.tsx | 22 +- components/ui/Modal/Modal.module.css | 11 +- components/ui/Modal/Modal.tsx | 53 +- components/ui/Quantity/Quantity.module.css | 27 + components/ui/Quantity/Quantity.tsx | 62 + components/ui/Quantity/index.ts | 2 + components/ui/Rating/Rating.module.css | 0 components/ui/Rating/Rating.tsx | 27 + components/ui/Rating/index.ts | 2 + components/ui/Sidebar/Sidebar.module.css | 13 +- components/ui/Sidebar/Sidebar.tsx | 49 +- components/ui/Skeleton/Skeleton.module.css | 16 +- components/ui/Skeleton/Skeleton.tsx | 12 +- components/ui/Text/Text.module.css | 6 +- components/ui/Text/Text.tsx | 7 +- components/ui/context.tsx | 109 +- components/ui/index.ts | 3 + .../WishlistButton/WishlistButton.module.css | 33 + .../WishlistButton/WishlistButton.tsx | 10 +- .../WishlistCard/WishlistCard.module.css | 2 +- framework/bigcommerce/api/index.ts | 8 +- .../api/utils/fetch-graphql-api.ts | 58 +- .../bigcommerce/api/utils/fetch-store-api.ts | 94 +- framework/bigcommerce/index.tsx | 3 +- framework/commerce/api/index.ts | 25 +- framework/commerce/config.js | 35 +- framework/commerce/new-provider.md | 3 +- framework/commerce/types/cart.ts | 20 +- framework/commerce/types/product.ts | 2 +- framework/local/.env.template | 1 + framework/local/README.md | 1 + framework/local/api/endpoints/cart/index.ts | 1 + .../local/api/endpoints/catalog/index.ts | 1 + .../local/api/endpoints/catalog/products.ts | 1 + .../local/api/endpoints/checkout/index.ts | 1 + .../local/api/endpoints/customer/index.ts | 1 + framework/local/api/endpoints/login/index.ts | 1 + framework/local/api/endpoints/logout/index.ts | 1 + framework/local/api/endpoints/signup/index.ts | 1 + .../local/api/endpoints/wishlist/index.tsx | 1 + framework/local/api/index.ts | 42 + .../local/api/operations/get-all-pages.ts | 19 + .../api/operations/get-all-product-paths.ts | 15 + .../local/api/operations/get-all-products.ts | 25 + .../api/operations/get-customer-wishlist.ts | 6 + framework/local/api/operations/get-page.ts | 13 + framework/local/api/operations/get-product.ts | 26 + .../local/api/operations/get-site-info.ts | 43 + framework/local/api/operations/index.ts | 6 + framework/local/api/utils/fetch-local.ts | 34 + framework/local/api/utils/fetch.ts | 3 + framework/local/auth/index.ts | 3 + framework/local/auth/use-login.tsx | 16 + framework/local/auth/use-logout.tsx | 17 + framework/local/auth/use-signup.tsx | 19 + framework/local/cart/index.ts | 4 + framework/local/cart/use-add-item.tsx | 17 + framework/local/cart/use-cart.tsx | 42 + framework/local/cart/use-remove-item.tsx | 18 + framework/local/cart/use-update-item.tsx | 18 + framework/local/commerce.config.json | 6 + framework/local/customer/index.ts | 1 + framework/local/customer/use-customer.tsx | 15 + framework/local/data.json | 235 + framework/local/fetcher.ts | 11 + framework/local/index.tsx | 32 + framework/local/next.config.js | 8 + framework/local/product/index.ts | 2 + framework/local/product/use-price.tsx | 2 + framework/local/product/use-search.tsx | 17 + framework/local/provider.ts | 21 + framework/local/wishlist/use-add-item.tsx | 13 + framework/local/wishlist/use-remove-item.tsx | 17 + framework/local/wishlist/use-wishlist.tsx | 43 + .../saleor/api/utils/fetch-graphql-api.ts | 2 +- .../shopify/api/operations/get-site-info.ts | 10 +- .../shopify/api/utils/fetch-graphql-api.ts | 47 +- framework/shopify/index.tsx | 3 +- .../shopify/utils/handle-fetch-response.ts | 2 +- framework/shopify/utils/normalize.ts | 1 + .../swell/api/operations/get-site-info.ts | 4 +- framework/vendure/auth/use-logout.tsx | 24 +- lib/search-props.tsx | 27 + next.config.js | 14 - package-lock.json | 11033 ++++++++++++++++ package.json | 6 +- pages/404.tsx | 35 + pages/[...pages].tsx | 13 +- pages/cart.tsx | 22 +- pages/index.tsx | 35 +- pages/orders.tsx | 8 +- pages/product/[slug].tsx | 26 +- pages/profile.tsx | 6 +- pages/search.tsx | 469 +- pages/search/[category].tsx | 16 + pages/search/designers/[name].tsx | 16 + pages/search/designers/[name]/[category].tsx | 16 + pages/wishlist.tsx | 8 +- public/assets/drop-shirt-0.png | Bin 0 -> 157663 bytes public/assets/drop-shirt-1.png | Bin 0 -> 260517 bytes public/assets/drop-shirt-2.png | Bin 0 -> 244812 bytes public/assets/drop-shirt.png | Bin 0 -> 157663 bytes public/assets/lightweight-jacket-0.png | Bin 0 -> 507021 bytes public/assets/lightweight-jacket-1.png | Bin 0 -> 476841 bytes public/assets/lightweight-jacket-2.png | Bin 0 -> 353198 bytes public/assets/t-shirt-0.png | Bin 0 -> 415845 bytes public/assets/t-shirt-1.png | Bin 0 -> 337401 bytes public/assets/t-shirt-2.png | Bin 0 -> 429830 bytes public/assets/t-shirt-3.png | Bin 0 -> 666930 bytes public/assets/t-shirt-4.png | Bin 0 -> 364452 bytes public/jacket.png | Bin 772153 -> 0 bytes tailwind.config.js | 24 +- tsconfig.js | 57 + tsconfig.json | 13 +- yarn.lock | 848 +- 202 files changed, 15406 insertions(+), 2201 deletions(-) create mode 100644 components/checkout/CheckoutSidebarView/CheckoutSidebarView.module.css create mode 100644 components/checkout/CheckoutSidebarView/CheckoutSidebarView.tsx create mode 100644 components/checkout/CheckoutSidebarView/index.ts create mode 100644 components/checkout/PaymentMethodView/PaymentMethodView.module.css create mode 100644 components/checkout/PaymentMethodView/PaymentMethodView.tsx create mode 100644 components/checkout/PaymentMethodView/index.ts 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/ShippingView/ShippingView.module.css create mode 100644 components/checkout/ShippingView/ShippingView.tsx create mode 100644 components/checkout/ShippingView/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 rename components/icons/{RightArrow.tsx => ArrowRight.tsx} (79%) create mode 100644 components/icons/ChevronDown.tsx create mode 100644 components/icons/ChevronLeft.tsx create mode 100644 components/icons/ChevronRight.tsx create mode 100644 components/icons/Star.tsx create mode 100644 components/product/ProductOptions/ProductOptions.tsx create mode 100644 components/product/ProductOptions/index.ts create mode 100644 components/product/ProductSidebar/ProductSidebar.module.css create mode 100644 components/product/ProductSidebar/ProductSidebar.tsx create mode 100644 components/product/ProductSidebar/index.ts create mode 100644 components/product/ProductSliderControl/ProductSliderControl.module.css create mode 100644 components/product/ProductSliderControl/ProductSliderControl.tsx create mode 100644 components/product/ProductSliderControl/index.ts create mode 100644 components/product/ProductTag/ProductTag.module.css create mode 100644 components/product/ProductTag/ProductTag.tsx create mode 100644 components/product/ProductTag/index.ts create mode 100644 components/search.tsx create mode 100644 components/ui/Collapse/Collapse.module.css create mode 100644 components/ui/Collapse/Collapse.tsx create mode 100644 components/ui/Collapse/index.ts create mode 100644 components/ui/Quantity/Quantity.module.css create mode 100644 components/ui/Quantity/Quantity.tsx create mode 100644 components/ui/Quantity/index.ts create mode 100644 components/ui/Rating/Rating.module.css create mode 100644 components/ui/Rating/Rating.tsx create mode 100644 components/ui/Rating/index.ts create mode 100644 components/wishlist/WishlistButton/WishlistButton.module.css create mode 100644 framework/local/.env.template create mode 100644 framework/local/README.md create mode 100644 framework/local/api/endpoints/cart/index.ts create mode 100644 framework/local/api/endpoints/catalog/index.ts create mode 100644 framework/local/api/endpoints/catalog/products.ts create mode 100644 framework/local/api/endpoints/checkout/index.ts create mode 100644 framework/local/api/endpoints/customer/index.ts create mode 100644 framework/local/api/endpoints/login/index.ts create mode 100644 framework/local/api/endpoints/logout/index.ts create mode 100644 framework/local/api/endpoints/signup/index.ts create mode 100644 framework/local/api/endpoints/wishlist/index.tsx create mode 100644 framework/local/api/index.ts create mode 100644 framework/local/api/operations/get-all-pages.ts create mode 100644 framework/local/api/operations/get-all-product-paths.ts create mode 100644 framework/local/api/operations/get-all-products.ts create mode 100644 framework/local/api/operations/get-customer-wishlist.ts create mode 100644 framework/local/api/operations/get-page.ts create mode 100644 framework/local/api/operations/get-product.ts create mode 100644 framework/local/api/operations/get-site-info.ts create mode 100644 framework/local/api/operations/index.ts create mode 100644 framework/local/api/utils/fetch-local.ts create mode 100644 framework/local/api/utils/fetch.ts create mode 100644 framework/local/auth/index.ts create mode 100644 framework/local/auth/use-login.tsx create mode 100644 framework/local/auth/use-logout.tsx create mode 100644 framework/local/auth/use-signup.tsx create mode 100644 framework/local/cart/index.ts create mode 100644 framework/local/cart/use-add-item.tsx create mode 100644 framework/local/cart/use-cart.tsx create mode 100644 framework/local/cart/use-remove-item.tsx create mode 100644 framework/local/cart/use-update-item.tsx create mode 100644 framework/local/commerce.config.json create mode 100644 framework/local/customer/index.ts create mode 100644 framework/local/customer/use-customer.tsx create mode 100644 framework/local/data.json create mode 100644 framework/local/fetcher.ts create mode 100644 framework/local/index.tsx create mode 100644 framework/local/next.config.js create mode 100644 framework/local/product/index.ts create mode 100644 framework/local/product/use-price.tsx create mode 100644 framework/local/product/use-search.tsx create mode 100644 framework/local/provider.ts create mode 100644 framework/local/wishlist/use-add-item.tsx create mode 100644 framework/local/wishlist/use-remove-item.tsx create mode 100644 framework/local/wishlist/use-wishlist.tsx create mode 100644 lib/search-props.tsx create mode 100644 package-lock.json create mode 100644 pages/404.tsx create mode 100644 pages/search/[category].tsx create mode 100644 pages/search/designers/[name].tsx create mode 100644 pages/search/designers/[name]/[category].tsx create mode 100644 public/assets/drop-shirt-0.png create mode 100644 public/assets/drop-shirt-1.png create mode 100644 public/assets/drop-shirt-2.png create mode 100644 public/assets/drop-shirt.png create mode 100644 public/assets/lightweight-jacket-0.png create mode 100644 public/assets/lightweight-jacket-1.png create mode 100644 public/assets/lightweight-jacket-2.png create mode 100644 public/assets/t-shirt-0.png create mode 100644 public/assets/t-shirt-1.png create mode 100644 public/assets/t-shirt-2.png create mode 100644 public/assets/t-shirt-3.png create mode 100644 public/assets/t-shirt-4.png delete mode 100644 public/jacket.png create mode 100644 tsconfig.js diff --git a/README.md b/README.md index 189192216..7c69eb09d 100644 --- a/README.md +++ b/README.md @@ -64,6 +64,11 @@ That's it! Every provider defines the features that it supports under `framework/{provider}/commerce.config.json` +#### Features Available + +- wishlist +- customCheckout + #### How to turn Features on and off > NOTE: The selected provider should support the feature that you are toggling. (This means that you can't turn wishlist on if the provider doesn't support this functionality out the box) @@ -73,7 +78,8 @@ Every provider defines the features that it supports under `framework/{provider} ```json { "features": { - "wishlist": false + "wishlist": false, + "customCheckout": true } } ``` diff --git a/assets/base.css b/assets/base.css index e63ea1aa4..00081f459 100644 --- a/assets/base.css +++ b/assets/base.css @@ -15,21 +15,28 @@ --cyan: #22b8cf; --green: #37b679; --red: #da3c3c; - --pink: #e64980; --purple: #f81ce5; --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; + + --pink: #ff0080; + --pink-light: #ff379c; + + --magenta: #eb367f; + + --violet: #7928ca; + --violet-dark: #4c2889; + + --accent-0: #fff; + --accent-1: #fafafa; + --accent-2: #eaeaea; + --accent-3: #999999; + --accent-4: #888888; + --accent-5: #666666; + --accent-6: #444444; + --accent-7: #333333; + --accent-8: #111111; + --accent-9: #000; + --font-sans: -apple-system, system-ui, BlinkMacSystemFont, 'Helvetica Neue', 'Helvetica', sans-serif; } @@ -48,16 +55,16 @@ --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-9: #fff; + --accent-8: #fafafa; + --accent-7: #eaeaea; + --accent-6: #999999; + --accent-5: #888888; + --accent-4: #666666; + --accent-3: #444444; + --accent-2: #333333; + --accent-1: #111111; + --accent-0: #000; } *, @@ -84,6 +91,7 @@ body { -moz-osx-font-smoothing: grayscale; background-color: var(--primary); color: var(--text-primary); + overscroll-behavior-x: none; } body { 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 - Do you have an account? + Do you have an account? {` `} { 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, @@ -33,48 +40,28 @@ const CartItem = ({ currencyCode, }) - const updateItem = useUpdateItem({ item }) - const removeItem = useRemoveItem() - const [quantity, setQuantity] = useState(item.quantity) - const [removing, setRemoving] = useState(false) + const handleChange = async ({ + target: { value }, + }: ChangeEvent) => { + setQuantity(Number(value)) + await updateItem({ quantity: Number(value) }) + } - const updateQuantity = async (val: number) => { + const increaseQuantity = async (n = 1) => { + const val = Number(quantity) + n + setQuantity(val) await updateItem({ quantity: val }) } - const handleQuantity = (e: ChangeEvent) => { - const val = !e.target.value ? '' : Number(e.target.value) - - if (!val || (Number.isInteger(val) && val >= 0)) { - setQuantity(val) - } - } - const handleBlur = () => { - const val = Number(quantity) - - if (val !== item.quantity) { - updateQuantity(val) - } - } - const increaseQuantity = (n = 1) => { - const val = Number(quantity) + n - - if (Number.isInteger(val) && val >= 0) { - setQuantity(val) - updateQuantity(val) - } - } const handleRemove = async () => { setRemoving(true) - try { - // If this action succeeds then there's no need to do `setRemoving(true)` - // because the component will be removed from the view await removeItem(item) } catch (error) { setRemoving(false) } } + // TODO: Add a type for this const options = (item as any).options @@ -87,79 +74,76 @@ const CartItem = ({ return (
  • -
    - - closeSidebarIfPresent()} - className={s.productImage} - width={150} - height={150} - src={item.variant.image!.url} - alt={item.variant.image!.altText} - unoptimized - /> - -
    -
    - - closeSidebarIfPresent()} - > -
    +
    + + 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 ? '' : } +
    + ))}
    - {item.variant ? {item.variant.name} : ""} - - - {options && options.length > 0 ? ( -
    - {options.map((option: ItemOption, i: number) => ( - - {option.value} - {i === options.length - 1 ? '' : ', '} - - ))} -
    - ) : null} -
    - - - + )} + {variant === 'display' && ( +
    {quantity}x
    + )} +
    +
    + {price}
    -
    - {price} - -
    + {variant === 'default' && ( + increaseQuantity(1)} + decrease={() => increaseQuantity(-1)} + /> + )}
    • ) } diff --git a/components/cart/CartSidebarView/CartSidebarView.module.css b/components/cart/CartSidebarView/CartSidebarView.module.css index 9b94021ad..c9ffbed50 100644 --- a/components/cart/CartSidebarView/CartSidebarView.module.css +++ b/components/cart/CartSidebarView/CartSidebarView.module.css @@ -1,15 +1,11 @@ .root { - @apply h-full flex flex-col; + min-height: 100vh; } .root.empty { @apply bg-secondary text-secondary; } -.root.success { - @apply bg-green text-white; -} - -.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 326390327..128b928a8 100644 --- a/components/cart/CartSidebarView/CartSidebarView.tsx +++ b/components/cart/CartSidebarView/CartSidebarView.tsx @@ -1,17 +1,17 @@ -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 { Button } from '@components/ui' -import { UserNav } from '@components/common' +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 } = useUI() + const { closeSidebar, setSidebarView } = useUI() const { data, isLoading, isEmpty } = useCart() const { price: subTotal } = usePrice( @@ -27,33 +27,18 @@ const CartSidebarView: FC = () => { } ) const handleClose = () => closeSidebar() + const goToCheckout = () => setSidebarView('CHECKOUT_VIEW') const error = null const success = null return ( -
    -
    -
    -
    - -
    -
    - -
    -
    -
    - {isLoading || isEmpty ? (
    @@ -62,7 +47,7 @@ const CartSidebarView: FC = () => {

    Your cart is empty

    -

    +

    Biscuit oat cake wafer icing ice cream tiramisu pudding cupcake.

    @@ -89,14 +74,11 @@ 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_CUSTOMCHECKOUT_ENABLED ? ( + + ) : ( + + )}
    -
    )} -
    + ) } diff --git a/components/checkout/CheckoutSidebarView/CheckoutSidebarView.module.css b/components/checkout/CheckoutSidebarView/CheckoutSidebarView.module.css new file mode 100644 index 000000000..34c1b487c --- /dev/null +++ b/components/checkout/CheckoutSidebarView/CheckoutSidebarView.module.css @@ -0,0 +1,7 @@ +.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 new file mode 100644 index 000000000..fb562e7af --- /dev/null +++ b/components/checkout/CheckoutSidebarView/CheckoutSidebarView.tsx @@ -0,0 +1,89 @@ +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 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..f3880c72c --- /dev/null +++ b/components/checkout/PaymentMethodView/PaymentMethodView.module.css @@ -0,0 +1,17 @@ +.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 new file mode 100644 index 000000000..a5f6f4b51 --- /dev/null +++ b/components/checkout/PaymentMethodView/PaymentMethodView.tsx @@ -0,0 +1,84 @@ +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 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/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.module.css b/components/checkout/ShippingView/ShippingView.module.css new file mode 100644 index 000000000..157d3174e --- /dev/null +++ b/components/checkout/ShippingView/ShippingView.module.css @@ -0,0 +1,21 @@ +.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 new file mode 100644 index 000000000..1d03a2aac --- /dev/null +++ b/components/checkout/ShippingView/ShippingView.tsx @@ -0,0 +1,78 @@ +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 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/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/Avatar/Avatar.tsx b/components/common/Avatar/Avatar.tsx index f78aa1d01..663538450 100644 --- a/components/common/Avatar/Avatar.tsx +++ b/components/common/Avatar/Avatar.tsx @@ -14,7 +14,7 @@ const Avatar: FC = ({}) => {
    {/* Add an image - We're generating a gradient as placeholder */}
    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.module.css b/components/common/Footer/Footer.module.css index 259318ecf..2ba492086 100644 --- a/components/common/Footer/Footer.module.css +++ b/components/common/Footer/Footer.module.css @@ -1,3 +1,7 @@ +.root { + @apply border-t border-accent-2; +} + .link { & > svg { @apply transform duration-75 ease-linear; diff --git a/components/common/Footer/Footer.tsx b/components/common/Footer/Footer.tsx index 4190815ec..04b80404e 100644 --- a/components/common/Footer/Footer.tsx +++ b/components/common/Footer/Footer.tsx @@ -15,65 +15,50 @@ interface Props { pages?: Page[] } -const LEGAL_PAGES = ['terms-of-use', 'shipping-returns', 'privacy-policy'] +const links = [ + { + name: 'Home', + url: '/', + }, +] const Footer: FC = ({ className, pages }) => { - const { sitePages, legalPages } = usePages(pages) - const rootClassName = cn(className) + const { sitePages } = usePages(pages) + const rootClassName = cn(s.root, className) return (