From 86f47456976c0845b93bf9b95c5838bb9e753e40 Mon Sep 17 00:00:00 2001 From: Thomas Cristina de Carvalho Date: Fri, 8 Dec 2023 13:22:59 -0500 Subject: [PATCH] Cart Refacto update --- pnpm-lock.yaml | 231 ++++++++- .../hydrogen-theme/app/components/Cart.tsx | 471 ------------------ .../app/components/QuantitySelector.tsx | 53 ++ .../app/components/cart/Cart.tsx | 25 + .../app/components/cart/CartDetails.tsx | 93 ++++ .../app/components/cart/CartDiscounts.tsx | 77 +++ .../app/components/cart/CartEmpty.tsx | 63 +++ .../app/components/cart/CartLineItem.tsx | 209 ++++++++ .../app/components/cart/CartLines.tsx | 37 ++ .../app/components/product/AddToCartForm.tsx | 25 +- .../components/product/QuantitySelector.tsx | 38 -- .../app/routes/($locale).cart.tsx | 2 +- templates/hydrogen-theme/package.json | 2 +- 13 files changed, 790 insertions(+), 536 deletions(-) delete mode 100644 templates/hydrogen-theme/app/components/Cart.tsx create mode 100644 templates/hydrogen-theme/app/components/QuantitySelector.tsx create mode 100644 templates/hydrogen-theme/app/components/cart/Cart.tsx create mode 100644 templates/hydrogen-theme/app/components/cart/CartDetails.tsx create mode 100644 templates/hydrogen-theme/app/components/cart/CartDiscounts.tsx create mode 100644 templates/hydrogen-theme/app/components/cart/CartEmpty.tsx create mode 100644 templates/hydrogen-theme/app/components/cart/CartLineItem.tsx create mode 100644 templates/hydrogen-theme/app/components/cart/CartLines.tsx delete mode 100644 templates/hydrogen-theme/app/components/product/QuantitySelector.tsx diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a610d10..a6e290c 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -67,7 +67,7 @@ importers: version: 2.2.3 sanity: specifier: ^3.21.1 - version: 3.21.1(@types/react@18.2.42)(react-dom@18.2.0)(react@18.2.0)(styled-components@5.3.11) + version: 3.21.1(react-dom@18.2.0)(react@18.2.0)(styled-components@6.1.1) tar-fs: specifier: ^3.0.4 version: 3.0.4 @@ -142,8 +142,8 @@ importers: specifier: 1.0.0-beta.1 version: 1.0.0-beta.1(typescript@5.3.3) framer-motion: - specifier: ^10.16.15 - version: 10.16.15(react-dom@18.2.0)(react@18.2.0) + specifier: ^10.16.16 + version: 10.16.16(react-dom@18.2.0)(react@18.2.0) graphql: specifier: ^16.8.1 version: 16.8.1 @@ -4293,7 +4293,7 @@ packages: graphql: ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 dependencies: graphql: 16.8.1 - tslib: 2.6.2 + tslib: 2.5.3 dev: false /@graphql-tools/prisma-loader@8.0.2(@types/node@20.10.4)(graphql@16.8.1): @@ -4338,7 +4338,7 @@ packages: '@ardatan/relay-compiler': 12.0.0(graphql@16.8.1) '@graphql-tools/utils': 10.0.11(graphql@16.8.1) graphql: 16.8.1 - tslib: 2.6.2 + tslib: 2.5.3 transitivePeerDependencies: - encoding - supports-color @@ -4593,6 +4593,10 @@ packages: resolution: {integrity: sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==} dev: false + /@kamilkisiela/fast-url-parser@1.1.4: + resolution: {integrity: sha512-gbkePEBupNydxCelHCESvFSFM8XPh1Zs/OAVRW/rKpEqPAl5PbOM90Si8mv9bvnR53uPD2s/FiRxdvSejpRJew==} + dev: false + /@kwsites/file-exists@1.1.1: resolution: {integrity: sha512-m9/5YGR18lIwxSFDwfE3oA7bWuq9kdau6ugN4H2rJeyhFQZcG9AgSHkQtSD15a8WvTgfz9aikZMrKPHvbpqFiw==} dependencies: @@ -4953,7 +4957,7 @@ packages: strip-ansi: 6.0.1 supports-color: 8.1.1 supports-hyperlinks: 2.3.0 - ts-node: 10.9.1(@types/node@20.10.4)(typescript@5.3.3) + ts-node: 10.9.2(@types/node@20.10.4)(typescript@5.3.3) tslib: 2.6.2 widest-line: 3.1.0 wordwrap: 1.0.0 @@ -4992,7 +4996,7 @@ packages: strip-ansi: 6.0.1 supports-color: 8.1.1 supports-hyperlinks: 2.3.0 - ts-node: 10.9.1(@types/node@20.10.4)(typescript@5.3.3) + ts-node: 10.9.2(@types/node@20.10.4)(typescript@5.3.3) tslib: 2.6.2 widest-line: 3.1.0 wordwrap: 1.0.0 @@ -7603,6 +7607,31 @@ packages: - supports-color dev: false + /@sanity/portable-text-editor@3.21.1(react-dom@18.2.0)(react@18.2.0)(rxjs@7.8.1)(styled-components@6.1.1): + resolution: {integrity: sha512-l/8qLsqRL1xfppMHFZ86PYDgeslXY3lZEehr33xD8mdpFg/qjOoIYHiqHG3xoSc1ZgFFuDNsCKF/qXzg47kiVA==} + engines: {node: '>=18'} + peerDependencies: + react: ^16.9 || ^17 || ^18 + rxjs: ^7 + styled-components: ^5.2 || ^6 + dependencies: + '@sanity/block-tools': 3.21.1 + '@sanity/schema': 3.21.1 + '@sanity/types': 3.21.1 + '@sanity/util': 3.21.1 + debug: 3.2.7 + is-hotkey: 0.1.8 + lodash: 4.17.21 + react: 18.2.0 + rxjs: 7.8.1 + slate: 0.100.0 + slate-react: 0.101.0(react-dom@18.2.0)(react@18.2.0)(slate@0.100.0) + styled-components: 6.1.1(react-dom@18.2.0)(react@18.2.0) + transitivePeerDependencies: + - react-dom + - supports-color + dev: false + /@sanity/presentation@1.1.3(@sanity/client@6.9.3)(react-dom@18.2.0)(react-is@18.2.0)(react@18.2.0)(sanity@3.21.1)(styled-components@5.3.11): resolution: {integrity: sha512-tJwx8e0WKaRzQEi95JzxSU0LD/0MSR1Jpnn6p7+oqC6JlTLIndp6MN7cYnj53MFrpeXFfqcrn/WqzfxVYZBCxg==} engines: {node: '>=16.14'} @@ -7619,7 +7648,7 @@ packages: '@sanity/preview-url-secret': 1.3.2(@sanity/client@6.9.3)(@sanity/icons@2.7.0)(sanity@3.21.1) '@sanity/ui': 1.9.3(react-dom@18.2.0)(react-is@18.2.0)(react@18.2.0)(styled-components@5.3.11) '@types/lodash.isequal': 4.5.8 - framer-motion: 10.16.15(react-dom@18.2.0)(react@18.2.0) + framer-motion: 10.16.16(react-dom@18.2.0)(react@18.2.0) lodash.isequal: 4.5.0 mendoza: 3.0.3 react: 18.2.0 @@ -7632,6 +7661,35 @@ packages: - react-is dev: false + /@sanity/presentation@1.1.3(@sanity/client@6.9.3)(react-dom@18.2.0)(react-is@18.2.0)(react@18.2.0)(sanity@3.21.1)(styled-components@6.1.1): + resolution: {integrity: sha512-tJwx8e0WKaRzQEi95JzxSU0LD/0MSR1Jpnn6p7+oqC6JlTLIndp6MN7cYnj53MFrpeXFfqcrn/WqzfxVYZBCxg==} + engines: {node: '>=16.14'} + peerDependencies: + '@sanity/client': ^6.9.1 + react: ^18.2.0 + react-dom: ^18.2.0 + sanity: ^3.21.0 + styled-components: ^5.2 || ^6.1.1 + dependencies: + '@sanity/client': 6.9.3 + '@sanity/groq-store': 5.3.2(@sanity/client@6.9.3) + '@sanity/icons': 2.7.0(react@18.2.0) + '@sanity/preview-url-secret': 1.3.2(@sanity/client@6.9.3)(@sanity/icons@2.7.0)(sanity@3.21.1) + '@sanity/ui': 1.9.3(react-dom@18.2.0)(react-is@18.2.0)(react@18.2.0)(styled-components@6.1.1) + '@types/lodash.isequal': 4.5.8 + framer-motion: 10.16.16(react-dom@18.2.0)(react@18.2.0) + lodash.isequal: 4.5.0 + mendoza: 3.0.3 + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + rxjs: 7.8.1 + sanity: 3.21.1(react-dom@18.2.0)(react@18.2.0)(styled-components@6.1.1) + styled-components: 6.1.1(react-dom@18.2.0)(react@18.2.0) + suspend-react: 0.1.3(react@18.2.0) + transitivePeerDependencies: + - react-is + dev: false + /@sanity/preview-url-secret@1.3.2(@sanity/client@6.9.3)(@sanity/icons@2.7.0)(sanity@3.21.1): resolution: {integrity: sha512-puQRSSvV0V/u4ZejcWgflsNbyVac4a/v1X3pEu1ra9aGL83uNL5T6DPeNiLgO2nfV9e3LcLek2xFe3BAYcaIrA==} engines: {node: '>=18'} @@ -7648,7 +7706,7 @@ packages: '@sanity/client': 6.9.3 '@sanity/icons': 2.7.0(react@18.2.0) '@sanity/uuid': 3.0.2 - sanity: 3.21.1(@types/react@18.2.42)(react-dom@18.2.0)(react@18.2.0)(styled-components@5.3.11) + sanity: 3.21.1(react-dom@18.2.0)(react@18.2.0)(styled-components@6.1.1) dev: false /@sanity/react-loader@1.3.1(@sanity/client@6.9.3)(react@18.2.0): @@ -7699,7 +7757,7 @@ packages: '@sanity/color': 2.2.5 '@sanity/icons': 2.7.0(react@18.2.0) csstype: 3.1.3 - framer-motion: 10.16.15(react-dom@18.2.0)(react@18.2.0) + framer-motion: 10.16.16(react-dom@18.2.0)(react@18.2.0) react: 18.2.0 react-dom: 18.2.0(react@18.2.0) react-is: 18.2.0 @@ -7720,7 +7778,7 @@ packages: '@sanity/color': 2.2.5 '@sanity/icons': 2.7.0(react@18.2.0) csstype: 3.1.3 - framer-motion: 10.16.15(react-dom@18.2.0)(react@18.2.0) + framer-motion: 10.16.16(react-dom@18.2.0)(react@18.2.0) react: 18.2.0 react-dom: 18.2.0(react@18.2.0) react-is: 18.2.0 @@ -9204,7 +9262,7 @@ packages: resolution: {integrity: sha512-wurZC82zzZwXRDSW0OS9l141DynaJQh7Yt0FD1xZ8niX7/Et/7RoiLiltbVU1fSF1RR9z6ndEaTUQBAmddTm1w==} engines: {node: '>=16.0.0'} dependencies: - '@whatwg-node/node-fetch': 0.5.1 + '@whatwg-node/node-fetch': 0.5.2 urlpattern-polyfill: 9.0.0 dev: false @@ -9218,14 +9276,14 @@ packages: tslib: 2.6.2 dev: false - /@whatwg-node/node-fetch@0.5.1: - resolution: {integrity: sha512-sQz/s3NyyzIZxQ7PHxDFUMM1k4kQQbi2jU8ILdTbt5+S59ME8aI7XF30O9qohRIIYdSrUvm/OwKQmVP1y6e2WQ==} + /@whatwg-node/node-fetch@0.5.2: + resolution: {integrity: sha512-uVYCnmWoCiGbv5AtnSx5nZ1kQJ+U8f269/yHB62y7wXPdjYx6o4sBSefnfwUI8HNf4rf16VbvGR/AzuABhDD5g==} engines: {node: '>=16.0.0'} dependencies: + '@kamilkisiela/fast-url-parser': 1.1.4 '@whatwg-node/events': 0.1.1 busboy: 1.6.0 fast-querystring: 1.1.2 - fast-url-parser: 1.1.3 tslib: 2.6.2 dev: false @@ -12813,8 +12871,8 @@ packages: /fraction.js@4.3.7: resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==} - /framer-motion@10.16.15(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-BapW1EKc/Sgph1rKEwL9bFt2B79z7bu7jN4Up1jGUaTE78WBsVO+6eCmoUZsQH0hHtRUDnnTqjjBbM7dk9Kp8A==} + /framer-motion@10.16.16(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-je6j91rd7NmUX7L1XHouwJ4v3R+SO4umso2LUcgOct3rHZ0PajZ80ETYZTajzEXEl9DlKyzjyt4AvGQ+lrebOw==} peerDependencies: react: ^18.0.0 react-dom: ^18.0.0 @@ -18938,7 +18996,7 @@ packages: esbuild-register: 3.5.0(esbuild@0.19.8) execa: 2.1.0 exif-component: 1.0.1 - framer-motion: 10.16.15(react-dom@18.2.0)(react@18.2.0) + framer-motion: 10.16.16(react-dom@18.2.0)(react@18.2.0) get-it: 8.4.4 get-random-values-esm: 1.0.0 groq-js: 1.3.0 @@ -19010,6 +19068,139 @@ packages: - utf-8-validate dev: false + /sanity@3.21.1(react-dom@18.2.0)(react@18.2.0)(styled-components@6.1.1): + resolution: {integrity: sha512-kagAkXjhH07AKgOpB9RAVMB8nEIm9Iv4HTtn4jZJroCwsqiV8grlgcBcdfZ/RUBuFPM7uDCJ3Nund5LIGu9ElA==} + engines: {node: '>=18'} + hasBin: true + peerDependencies: + react: ^18 + react-dom: ^18 + styled-components: ^5.2 || ^6 + dependencies: + '@dnd-kit/core': 6.1.0(react-dom@18.2.0)(react@18.2.0) + '@dnd-kit/modifiers': 6.0.1(@dnd-kit/core@6.1.0)(react@18.2.0) + '@dnd-kit/sortable': 7.0.2(@dnd-kit/core@6.1.0)(react@18.2.0) + '@dnd-kit/utilities': 3.2.2(react@18.2.0) + '@juggle/resize-observer': 3.4.0 + '@portabletext/react': 3.0.11(react@18.2.0) + '@rexxars/react-json-inspector': 8.0.1(react@18.2.0) + '@sanity/asset-utils': 1.3.0 + '@sanity/bifur-client': 0.3.1 + '@sanity/block-tools': 3.21.1 + '@sanity/cli': 3.21.1 + '@sanity/client': 6.9.3 + '@sanity/color': 2.2.5 + '@sanity/diff': 3.21.1 + '@sanity/diff-match-patch': 3.1.1 + '@sanity/eventsource': 5.0.1 + '@sanity/export': 3.21.1 + '@sanity/generate-help-url': 3.0.0 + '@sanity/icons': 2.7.0(react@18.2.0) + '@sanity/image-url': 1.0.2 + '@sanity/import': 3.21.1 + '@sanity/logos': 2.1.2(@sanity/color@2.2.5)(react@18.2.0) + '@sanity/mutator': 3.21.1 + '@sanity/portable-text-editor': 3.21.1(react-dom@18.2.0)(react@18.2.0)(rxjs@7.8.1)(styled-components@6.1.1) + '@sanity/presentation': 1.1.3(@sanity/client@6.9.3)(react-dom@18.2.0)(react-is@18.2.0)(react@18.2.0)(sanity@3.21.1)(styled-components@6.1.1) + '@sanity/schema': 3.21.1 + '@sanity/types': 3.21.1 + '@sanity/ui': 1.9.3(react-dom@18.2.0)(react-is@18.2.0)(react@18.2.0)(styled-components@6.1.1) + '@sanity/util': 3.21.1 + '@sanity/uuid': 3.0.2 + '@tanstack/react-virtual': 3.0.0-beta.54(react@18.2.0) + '@types/is-hotkey': 0.1.10 + '@types/react-copy-to-clipboard': 5.0.7 + '@types/react-is': 18.2.4 + '@types/shallow-equals': 1.0.3 + '@types/speakingurl': 13.0.6 + '@types/use-sync-external-store': 0.0.5 + '@vitejs/plugin-react': 4.2.1(vite@4.5.1) + chalk: 4.1.2 + chokidar: 3.5.3 + classnames: 2.3.2 + color2k: 2.0.2 + configstore: 5.0.1 + connect-history-api-fallback: 1.6.0 + console-table-printer: 2.11.2 + dataloader: 2.2.2 + date-fns: 2.30.0 + debug: 3.2.7 + esbuild: 0.19.8 + esbuild-register: 3.5.0(esbuild@0.19.8) + execa: 2.1.0 + exif-component: 1.0.1 + framer-motion: 10.16.16(react-dom@18.2.0)(react@18.2.0) + get-it: 8.4.4 + get-random-values-esm: 1.0.0 + groq-js: 1.3.0 + hashlru: 2.3.0 + history: 5.3.0 + i18next: 23.7.8 + import-fresh: 3.3.0 + is-hotkey: 0.1.8 + jsdom: 20.0.3 + jsdom-global: 3.0.2(jsdom@20.0.3) + json-lexer: 1.2.0 + json-reduce: 3.0.0 + json5: 2.2.3 + lodash: 4.17.21 + log-symbols: 2.2.0 + mendoza: 3.0.3 + module-alias: 2.2.3 + nano-pubsub: 2.0.1 + nanoid: 3.3.7 + observable-callback: 1.0.3(rxjs@7.8.1) + oneline: 1.0.3 + open: 8.4.2 + pirates: 4.0.6 + pluralize-esm: 9.0.5 + polished: 4.2.2 + pretty-ms: 7.0.1 + raf: 3.4.1 + react: 18.2.0 + react-copy-to-clipboard: 5.1.0(react@18.2.0) + react-dom: 18.2.0(react@18.2.0) + react-fast-compare: 3.2.2 + react-focus-lock: 2.9.6(@types/react@18.2.42)(react@18.2.0) + react-i18next: 13.5.0(i18next@23.7.8)(react-dom@18.2.0)(react@18.2.0) + react-is: 18.2.0 + react-refractor: 2.1.7(react@18.2.0) + react-rx: 2.1.3(react@18.2.0)(rxjs@7.8.1) + read-pkg-up: 7.0.1 + refractor: 3.6.0 + resolve-from: 5.0.0 + rimraf: 3.0.2 + rxjs: 7.8.1 + rxjs-etc: 10.6.2(rxjs@7.8.1) + rxjs-exhaustmap-with-trailing: 2.1.1(rxjs@7.8.1) + sanity-diff-patch: 3.0.2 + scroll-into-view-if-needed: 3.1.0 + semver: 7.5.4 + shallow-equals: 1.0.0 + speakingurl: 14.0.1 + styled-components: 6.1.1(react-dom@18.2.0)(react@18.2.0) + tar-fs: 2.1.1 + use-device-pixel-ratio: 1.1.2(react@18.2.0) + use-hot-module-reload: 1.0.3(react@18.2.0) + use-sync-external-store: 1.2.0(react@18.2.0) + vite: 4.5.1(@types/node@20.10.4) + yargs: 17.7.2 + transitivePeerDependencies: + - '@types/node' + - '@types/react' + - bufferutil + - canvas + - less + - lightningcss + - react-native + - sass + - stylus + - sugarss + - supports-color + - terser + - utf-8-validate + dev: false + /sax@1.3.0: resolution: {integrity: sha512-0s+oAmw9zLl1V1cS9BtZN7JAd0cW5e0QH4W3LWEK6a4LaLEA2OTpGYWDY+6XasBLtz6wkm3u1xRw95mRuJ59WA==} dev: false @@ -20163,8 +20354,8 @@ packages: code-block-writer: 12.0.0 dev: false - /ts-node@10.9.1(@types/node@20.10.4)(typescript@5.3.3): - resolution: {integrity: sha512-NtVysVPkxxrwFGUUxGYhfux8k78pQB3JqYBXlLRZgdGUqTO5wU/UyHop5p70iEbGhB7q5KmiZiU0Y3KlJrScEw==} + /ts-node@10.9.2(@types/node@20.10.4)(typescript@5.3.3): + resolution: {integrity: sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==} hasBin: true peerDependencies: '@swc/core': '>=1.2.50' diff --git a/templates/hydrogen-theme/app/components/Cart.tsx b/templates/hydrogen-theme/app/components/Cart.tsx deleted file mode 100644 index e283621..0000000 --- a/templates/hydrogen-theme/app/components/Cart.tsx +++ /dev/null @@ -1,471 +0,0 @@ -import type { - CartCost, - CartLine, - CartLineUpdateInput, - Cart as CartType, -} from '@shopify/hydrogen/storefront-api-types'; - -import {Link} from '@remix-run/react'; -import { - CartForm, - Image, - Money, - OptimisticInput, - flattenConnection, - parseGid, - useOptimisticData, -} from '@shopify/hydrogen'; -import {cx} from 'class-variance-authority'; -import {useRef} from 'react'; -import {Button} from 'react-aria-components'; - -import {useLocalePath} from '~/hooks/useLocalePath'; - -import {IconRemove} from './icons/IconRemove'; - -type Layouts = 'drawer' | 'page'; - -export function Cart({ - cart, - layout, - onClose, -}: { - cart: CartType | null; - layout: Layouts; - onClose?: () => void; -}) { - const empty = Boolean(cart?.totalQuantity === 0); - - return ( - <> -