From 0f784b5d99d101ca44efca4720fea4d07dccb212 Mon Sep 17 00:00:00 2001 From: tedraykov Date: Wed, 1 Jun 2022 13:37:44 +0300 Subject: [PATCH] massive refactor (never do this again) --- assets/base.css | 20 +- assets/main.css | 8 - codegen.json | 27 - codegen.yml | 11 + components/auth/ForgotPassword.tsx | 3 +- components/auth/LoginView.tsx | 6 +- components/auth/SignUpView.tsx | 7 +- components/cart/CartItem/CartItem.module.scss | 4 +- components/cart/CartItem/CartItem.tsx | 2 +- .../cart/CartSidebarView/CartSidebarView.tsx | 4 +- components/cart/CartSummary/CartSummary.tsx | 2 +- components/cart/CartView/CartView.tsx | 4 +- .../CatalogCategories/CatalogCategories.tsx | 142 + components/catalog/CatalogCategories/index.ts | 1 + .../catalog/CatalogGrid/CatalogGrid.tsx | 53 + components/catalog/CatalogGrid/index.ts | 1 + .../CatalogSearchSummary.tsx | 73 + .../catalog/CatalogSearchSummary/index.ts | 1 + .../catalog/CatalogView/CatalogView.tsx | 41 + components/catalog/CatalogView/index.ts | 1 + components/catalog/index.ts | 4 + .../checkout/CheckoutView/CheckoutView.tsx | 68 +- .../CourierOfficeForm/CourierOfficeForm.tsx | 2 +- .../CourierOfficeSelect.tsx | 158 +- .../DesktopCheckout/DesktopCheckout.tsx | 4 +- .../DiscountCodeForm/DiscountCodeForm.tsx | 6 +- .../checkout/FinalizeStep/FinalizeStep.tsx | 4 +- .../FinalizeSummaryShipping.tsx | 6 +- .../MobileCheckout/MobileCheckout.tsx | 10 +- .../ShippingAddressFormClient.tsx | 2 +- .../ShippingAddressStep.tsx | 14 +- components/common/Footer/Footer.module.scss | 2 +- components/common/Footer/Footer.tsx | 63 +- .../HomeAllProductsGrid.module.css | 23 - .../HomeAllProductsGrid.tsx | 73 - .../common/HomeAllProductsGrid/index.ts | 1 - components/common/Layout/Layout.tsx | 72 +- .../common/MediaQueries/MediaQueries.ts | 14 - components/common/MediaQueries/index.ts | 1 - .../common/NavDrawer/MobileDrawer.module.scss | 4 - components/common/NavDrawer/MobileDrawer.tsx | 8 +- components/common/Navbar/Navbar.module.css | 2 +- components/common/Navbar/Navbar.tsx | 29 +- components/common/Navbar/NavbarRoot.tsx | 17 +- components/common/Searchbar/Searchbar.tsx | 8 +- .../SidebarLayout/SidebarLayout.module.css | 11 - .../common/SidebarLayout/SidebarLayout.tsx | 19 +- components/common/UserNav/DropdownMenu.tsx | 3 +- components/common/UserNav/UserNav.tsx | 33 +- .../landingPage/ProductsList/ProductsList.tsx | 13 +- .../Slideshow/Slideshow.module.scss | 5 +- .../landingPage/Slideshow/Slideshow.tsx | 35 +- .../DesktopGallery/DesktopGallery.module.css | 98 - .../product/DesktopGallery/DesktopGallery.tsx | 40 - components/product/DesktopGallery/index.ts | 1 - .../ProductCard/ProductCard.module.scss | 28 +- .../product/ProductCard/ProductCard.tsx | 126 +- .../product/ProductGallery/ProductGallery.tsx | 217 +- components/product/ProductSeo/ProductSeo.tsx | 32 + components/product/ProductSeo/index.ts | 1 + .../ProductSlider/ProductSlider.module.css | 107 - .../product/ProductSlider/ProductSlider.tsx | 148 - components/product/ProductSlider/index.ts | 1 - .../ProductView/ProductView.module.scss | 24 - .../product/ProductView/ProductView.tsx | 238 +- components/product/helpers.ts | 50 - components/product/index.ts | 1 - components/search.tsx | 428 - components/ui/Autocomplete/Autocomplete.tsx | 222 + components/ui/Autocomplete/index.ts | 1 + components/ui/Banner/Banner.module.scss | 2 +- components/ui/Button/Button.module.css | 84 - components/ui/Button/Button.tsx | 143 +- .../ControlledAutocomplete.tsx | 47 + components/ui/ControlledAutocomplete/index.ts | 1 + .../ControlledTextField.tsx | 51 +- components/ui/InfiniteList/InfiniteList.tsx | 95 + components/ui/InfiniteList/index.ts | 1 + components/ui/Input/Input.tsx | 95 +- .../ui/LoadingDots/LoadingDots.module.css | 2 +- components/ui/LoadingDots/LoadingDots.tsx | 31 +- components/ui/Swatch/Swatch.module.scss | 1 - .../WishlistButton/WishlistButton.tsx | 78 - components/wishlist/WishlistButton/index.ts | 1 - .../WishlistCard/WishlistCard.module.css | 21 - .../wishlist/WishlistCard/WishlistCard.tsx | 105 - components/wishlist/WishlistCard/index.ts | 1 - components/wishlist/index.ts | 2 - config/index.ts | 2 +- context/LocaleContext.tsx | 30 + context/UIContext.tsx | 24 +- framework/commerce/README.md | 334 - framework/commerce/api/endpoints/cart.ts | 60 - .../api/endpoints/catalog/products.ts | 31 - framework/commerce/api/endpoints/checkout.ts | 35 - framework/commerce/api/endpoints/customer.ts | 35 - framework/commerce/api/endpoints/login.ts | 35 - framework/commerce/api/endpoints/logout.ts | 35 - framework/commerce/api/endpoints/signup.ts | 36 - framework/commerce/api/endpoints/wishlist.ts | 58 - framework/commerce/api/index.ts | 178 - framework/commerce/api/operations.ts | 195 - framework/commerce/api/utils/errors.ts | 22 - .../commerce/api/utils/is-allowed-method.ts | 30 - .../api/utils/is-allowed-operation.ts | 19 - framework/commerce/api/utils/types.ts | 49 - framework/commerce/auth/use-login.tsx | 20 - framework/commerce/auth/use-logout.tsx | 20 - framework/commerce/auth/use-signup.tsx | 20 - framework/commerce/cart/use-add-item.tsx | 20 - framework/commerce/cart/use-cart.tsx | 32 - framework/commerce/cart/use-remove-item.tsx | 20 - framework/commerce/cart/use-update-item.tsx | 20 - framework/commerce/config.js | 89 - framework/commerce/customer/use-customer.tsx | 20 - framework/commerce/index.tsx | 97 - framework/commerce/new-provider.md | 245 - framework/commerce/product/use-price.tsx | 94 - framework/commerce/product/use-search.tsx | 20 - framework/commerce/types/cart.ts | 177 - framework/commerce/types/checkout.ts | 10 - framework/commerce/types/common.ts | 16 - framework/commerce/types/customer.ts | 22 - framework/commerce/types/index.ts | 25 - framework/commerce/types/login.ts | 29 - framework/commerce/types/logout.ts | 17 - framework/commerce/types/page.ts | 28 - framework/commerce/types/product.ts | 98 - framework/commerce/types/signup.ts | 26 - framework/commerce/types/site.ts | 20 - framework/commerce/types/wishlist.ts | 60 - framework/commerce/utils/default-fetcher.ts | 12 - framework/commerce/utils/define-property.ts | 35 - framework/commerce/utils/errors.ts | 48 - framework/commerce/utils/types.ts | 146 - framework/commerce/utils/use-data.tsx | 78 - framework/commerce/utils/use-hook.ts | 49 - framework/commerce/wishlist/index.ts | 3 - framework/commerce/wishlist/use-add-item.tsx | 20 - .../commerce/wishlist/use-remove-item.tsx | 20 - framework/commerce/wishlist/use-wishlist.tsx | 20 - framework/reactioncommerce/.env.template | 2 - framework/reactioncommerce/README.md | 260 - .../api/endpoints/cart/add-item.ts | 95 - .../api/endpoints/cart/get-cart.ts | 54 - .../api/endpoints/cart/index.ts | 26 - .../api/endpoints/cart/remove-item.ts | 5 - .../api/endpoints/cart/update-item.ts | 5 - .../api/endpoints/cart/utils.ts | 81 - .../api/endpoints/catalog/index.ts | 1 - .../api/endpoints/catalog/products.ts | 1 - .../api/endpoints/checkout/index.ts | 1 - .../api/endpoints/customer/index.ts | 1 - .../api/endpoints/login/index.ts | 1 - .../api/endpoints/logout/index.ts | 1 - .../api/endpoints/signup/index.ts | 1 - .../api/endpoints/wishlist/index.tsx | 1 - framework/reactioncommerce/api/index.ts | 88 - .../api/operations/get-all-pages.ts | 30 - .../api/operations/get-all-product-paths.ts | 41 - .../api/operations/get-all-products.ts | 43 - .../api/operations/get-customer-wishlist.ts | 22 - .../api/operations/get-featured-products.ts | 23 - .../api/operations/get-hero.ts | 28 - .../api/operations/get-page.ts | 38 - .../api/operations/get-product.ts | 32 - .../api/operations/get-site-info.ts | 40 - .../reactioncommerce/api/operations/login.ts | 50 - .../reactioncommerce/api/utils/errors.ts | 25 - .../api/utils/fetch-all-products.ts | 41 - .../api/utils/fetch-graphql-api.ts | 32 - framework/reactioncommerce/api/utils/fetch.ts | 2 - .../api/utils/get-account-cart.ts | 26 - .../api/utils/get-anonymous-cart.ts | 20 - .../api/utils/get-cart-cookie.ts | 20 - .../api/utils/get-categories.ts | 37 - .../reactioncommerce/api/utils/get-vendors.ts | 39 - .../api/utils/is-allowed-method.ts | 28 - .../api/utils/reconcile-cart.ts | 32 - .../api/utils/request-authorization.ts | 9 - .../reactioncommerce/api/utils/update-cart.ts | 34 - framework/reactioncommerce/auth/index.ts | 3 - framework/reactioncommerce/auth/use-login.tsx | 62 - .../reactioncommerce/auth/use-logout.tsx | 43 - .../reactioncommerce/auth/use-signup.tsx | 57 - framework/reactioncommerce/cart/index.ts | 3 - .../reactioncommerce/cart/use-add-item.tsx | 46 - framework/reactioncommerce/cart/use-cart.tsx | 58 - .../reactioncommerce/cart/use-remove-item.tsx | 68 - .../reactioncommerce/cart/use-update-item.tsx | 112 - .../cart/utils/applyDiscountCodeToCart.ts | 40 - .../cart/utils/getPaymentMethods.ts | 20 - .../reactioncommerce/cart/utils/placeOrder.ts | 81 - .../cart/utils/setEmailOnAnonymousCart.ts | 37 - .../cart/utils/setShipmentMethod.ts | 40 - .../cart/utils/setShippingAddress.ts | 78 - framework/reactioncommerce/codegen.json | 21 - .../reactioncommerce/commerce.config.json | 7 - framework/reactioncommerce/const.ts | 16 - .../customer/get-viewer-id.ts | 29 - framework/reactioncommerce/customer/index.ts | 1 - .../customer/use-customer.tsx | 29 - framework/reactioncommerce/fetcher.ts | 64 - framework/reactioncommerce/index.tsx | 53 - framework/reactioncommerce/next.config.js | 8 - .../product/get-all-collections.ts | 29 - .../product/get-all-product-paths.ts | 50 - .../product/get-all-products.ts | 42 - .../reactioncommerce/product/get-product.ts | 33 - .../reactioncommerce/product/use-price.tsx | 2 - .../reactioncommerce/product/use-search.tsx | 60 - framework/reactioncommerce/provider.ts | 30 - framework/reactioncommerce/schema.d.ts | 7652 --------- framework/reactioncommerce/schema.graphql | 14307 ---------------- framework/reactioncommerce/types/cart.ts | 88 - framework/reactioncommerce/types/common.ts | 5 - framework/reactioncommerce/types/customer.ts | 15 - framework/reactioncommerce/types/order.ts | 34 - framework/reactioncommerce/types/page.ts | 24 - framework/reactioncommerce/types/product.ts | 42 - .../utils/anonymous-cart-token.ts | 14 - .../reactioncommerce/utils/customer-token.ts | 43 - .../utils/get-cart-id-cookie.ts | 14 - .../reactioncommerce/utils/get-categories.ts | 31 - .../utils/get-search-variables.ts | 34 - .../reactioncommerce/utils/get-shop-id.ts | 3 - .../utils/get-sort-variables.ts | 32 - .../reactioncommerce/utils/get-vendors.ts | 39 - .../utils/handle-fetch-response.ts | 27 - .../reactioncommerce/utils/hash-password.ts | 6 - framework/reactioncommerce/utils/index.ts | 9 - .../utils/mutations/add-cart-items.ts | 24 - .../mutations/apply-discount-code-to-cart.ts | 13 - .../utils/mutations/authenticate.ts | 15 - .../utils/mutations/create-cart.ts | 24 - .../utils/mutations/create-user.ts | 13 - .../reactioncommerce/utils/mutations/index.ts | 7 - .../utils/mutations/logout.ts | 7 - .../utils/mutations/place-order-mutation.ts | 15 - .../utils/mutations/reconcile-carts.ts | 13 - .../utils/mutations/refresh-tokens.ts | 15 - .../utils/mutations/remove-cart-items.ts | 13 - .../select-fulfillment-option-for-group.ts | 13 - .../mutations/set-email-on-anonymous-cart.ts | 18 - .../mutations/set-shipping-address-on-cart.ts | 22 - .../mutations/update-cart-items-quantity.ts | 13 - .../updateFulfillmentOptionsForGroup.ts | 16 - framework/reactioncommerce/utils/normalize.ts | 497 - .../queries/account-cart-by-account-id.ts | 11 - .../queries/available-payment-methods.ts | 13 - .../utils/queries/catalog-items-query.ts | 77 - .../utils/queries/get-all-pages-query.ts | 21 - .../queries/get-all-product-vendors-query.ts | 10 - .../queries/get-all-products-paths-query.ts | 25 - .../utils/queries/get-anonymous-cart.ts | 11 - .../utils/queries/get-cart-query.ts | 259 - .../queries/get-collection-products-query.ts | 24 - .../utils/queries/get-page-query.ts | 14 - .../utils/queries/get-tags-query.ts | 12 - .../utils/queries/get-viewer-id-query.ts | 8 - .../reactioncommerce/utils/queries/index.ts | 10 - .../utils/queries/viewer-query.ts | 26 - .../wishlist/use-add-item.tsx | 13 - .../wishlist/use-remove-item.tsx | 17 - .../wishlist/use-wishlist.tsx | 46 - graphql/queries/account-cart-by-account-id.ts | 2 +- graphql/queries/catalog-items-query.ts | 77 - graphql/queries/catalogItems.ts | 81 + .../queries/catalogProduct.ts | 11 +- graphql/queries/catalogProductPaths.ts | 37 + .../queries/defaultNavigationTree.ts | 7 +- graphql/queries/econtOffices.ts | 40 +- graphql/queries/get-all-collections-query.ts | 18 - .../queries/get-collection-products-query.ts | 24 - graphql/queries/get-product-query.ts | 182 - graphql/queries/index.ts | 11 +- graphql/queries/tag.ts | 13 + .../queries/{get-tags-query.ts => tags.ts} | 5 +- hooks/cart/useCart.ts | 47 +- hooks/useCheckout.ts | 2 +- hooks/usePrice.ts | 94 + hooks/useSearch.ts | 31 + hooks/useShop.ts | 2 +- lib/api/commerce.ts | 3 - lib/contentful/contentful.ts | 17 +- lib/contentful/schema.d.ts | 29 +- lib/facebookPixel/FacebookPixel.tsx | 7 +- lib/search-props.tsx | 27 - next.config.js | 16 +- package.json | 48 +- pages/404.tsx | 16 +- pages/_app.tsx | 21 +- pages/_document.tsx | 14 +- pages/api/cart.ts | 4 - pages/api/catalog/products.ts | 4 - pages/api/checkout.ts | 4 - pages/api/customer.ts | 4 - pages/api/login.ts | 4 - pages/api/logout.ts | 4 - pages/api/signup.ts | 4 - pages/api/wishlist.ts | 4 - pages/article/[slug].tsx | 42 +- pages/checkout/index.tsx | 4 +- pages/checkout/thank-you.tsx | 6 - pages/index.tsx | 38 +- pages/orders.tsx | 7 +- pages/product/[slug].tsx | 46 +- pages/profile.tsx | 43 +- pages/search.tsx | 9 - pages/search/[tag].tsx | 53 + pages/search/index.tsx | 25 + pages/sitemap.xml.tsx | 29 +- pages/wishlist.tsx | 67 - server/graphQLRequest.ts | 24 + server/operations/getCatalogProduct.ts | 18 + server/operations/getCatalogProductPaths.ts | 30 + server/operations/getCatalogProducts.ts | 26 + server/operations/getDefaultNavigationTree.ts | 12 + server/operations/getTag.ts | 17 + server/operations/getTags.ts | 13 + tailwind.config.js | 8 +- theme/theme.ts | 39 +- tsconfig.json | 5 +- .../index.ts | 0 utils/paymentMethods.ts | 2 +- utils/static/commonStaticProps.ts | 15 + utils/static/getFeaturedProducts.ts | 5 + utils/static/getHero.ts | 10 + utils/static/getPageBySlug.ts | 12 + utils/static/getPages.ts | 6 + vercel.json | 13 + yarn.lock | 1742 +- 332 files changed, 3171 insertions(+), 32934 deletions(-) delete mode 100644 codegen.json create mode 100644 codegen.yml create mode 100644 components/catalog/CatalogCategories/CatalogCategories.tsx create mode 100644 components/catalog/CatalogCategories/index.ts create mode 100644 components/catalog/CatalogGrid/CatalogGrid.tsx create mode 100644 components/catalog/CatalogGrid/index.ts create mode 100644 components/catalog/CatalogSearchSummary/CatalogSearchSummary.tsx create mode 100644 components/catalog/CatalogSearchSummary/index.ts create mode 100644 components/catalog/CatalogView/CatalogView.tsx create mode 100644 components/catalog/CatalogView/index.ts create mode 100644 components/catalog/index.ts delete mode 100644 components/common/HomeAllProductsGrid/HomeAllProductsGrid.module.css delete mode 100644 components/common/HomeAllProductsGrid/HomeAllProductsGrid.tsx delete mode 100644 components/common/HomeAllProductsGrid/index.ts delete mode 100644 components/common/MediaQueries/MediaQueries.ts delete mode 100644 components/common/MediaQueries/index.ts delete mode 100644 components/product/DesktopGallery/DesktopGallery.module.css delete mode 100644 components/product/DesktopGallery/DesktopGallery.tsx delete mode 100644 components/product/DesktopGallery/index.ts create mode 100644 components/product/ProductSeo/ProductSeo.tsx create mode 100644 components/product/ProductSeo/index.ts delete mode 100644 components/product/ProductSlider/ProductSlider.module.css delete mode 100644 components/product/ProductSlider/ProductSlider.tsx delete mode 100644 components/product/ProductSlider/index.ts delete mode 100644 components/product/helpers.ts delete mode 100644 components/search.tsx create mode 100644 components/ui/Autocomplete/Autocomplete.tsx create mode 100644 components/ui/Autocomplete/index.ts delete mode 100644 components/ui/Button/Button.module.css create mode 100644 components/ui/ControlledAutocomplete/ControlledAutocomplete.tsx create mode 100644 components/ui/ControlledAutocomplete/index.ts create mode 100644 components/ui/InfiniteList/InfiniteList.tsx create mode 100644 components/ui/InfiniteList/index.ts delete mode 100644 components/wishlist/WishlistButton/WishlistButton.tsx delete mode 100644 components/wishlist/WishlistButton/index.ts delete mode 100644 components/wishlist/WishlistCard/WishlistCard.module.css delete mode 100644 components/wishlist/WishlistCard/WishlistCard.tsx delete mode 100644 components/wishlist/WishlistCard/index.ts delete mode 100644 components/wishlist/index.ts create mode 100644 context/LocaleContext.tsx delete mode 100644 framework/commerce/README.md delete mode 100644 framework/commerce/api/endpoints/cart.ts delete mode 100644 framework/commerce/api/endpoints/catalog/products.ts delete mode 100644 framework/commerce/api/endpoints/checkout.ts delete mode 100644 framework/commerce/api/endpoints/customer.ts delete mode 100644 framework/commerce/api/endpoints/login.ts delete mode 100644 framework/commerce/api/endpoints/logout.ts delete mode 100644 framework/commerce/api/endpoints/signup.ts delete mode 100644 framework/commerce/api/endpoints/wishlist.ts delete mode 100644 framework/commerce/api/index.ts delete mode 100644 framework/commerce/api/operations.ts delete mode 100644 framework/commerce/api/utils/errors.ts delete mode 100644 framework/commerce/api/utils/is-allowed-method.ts delete mode 100644 framework/commerce/api/utils/is-allowed-operation.ts delete mode 100644 framework/commerce/api/utils/types.ts delete mode 100644 framework/commerce/auth/use-login.tsx delete mode 100644 framework/commerce/auth/use-logout.tsx delete mode 100644 framework/commerce/auth/use-signup.tsx delete mode 100644 framework/commerce/cart/use-add-item.tsx delete mode 100644 framework/commerce/cart/use-cart.tsx delete mode 100644 framework/commerce/cart/use-remove-item.tsx delete mode 100644 framework/commerce/cart/use-update-item.tsx delete mode 100644 framework/commerce/config.js delete mode 100644 framework/commerce/customer/use-customer.tsx delete mode 100644 framework/commerce/index.tsx delete mode 100644 framework/commerce/new-provider.md delete mode 100644 framework/commerce/product/use-price.tsx delete mode 100644 framework/commerce/product/use-search.tsx delete mode 100644 framework/commerce/types/cart.ts delete mode 100644 framework/commerce/types/checkout.ts delete mode 100644 framework/commerce/types/common.ts delete mode 100644 framework/commerce/types/customer.ts delete mode 100644 framework/commerce/types/index.ts delete mode 100644 framework/commerce/types/login.ts delete mode 100644 framework/commerce/types/logout.ts delete mode 100644 framework/commerce/types/page.ts delete mode 100644 framework/commerce/types/product.ts delete mode 100644 framework/commerce/types/signup.ts delete mode 100644 framework/commerce/types/site.ts delete mode 100644 framework/commerce/types/wishlist.ts delete mode 100644 framework/commerce/utils/default-fetcher.ts delete mode 100644 framework/commerce/utils/define-property.ts delete mode 100644 framework/commerce/utils/errors.ts delete mode 100644 framework/commerce/utils/types.ts delete mode 100644 framework/commerce/utils/use-data.tsx delete mode 100644 framework/commerce/utils/use-hook.ts delete mode 100644 framework/commerce/wishlist/index.ts delete mode 100644 framework/commerce/wishlist/use-add-item.tsx delete mode 100644 framework/commerce/wishlist/use-remove-item.tsx delete mode 100644 framework/commerce/wishlist/use-wishlist.tsx delete mode 100644 framework/reactioncommerce/.env.template delete mode 100644 framework/reactioncommerce/README.md delete mode 100644 framework/reactioncommerce/api/endpoints/cart/add-item.ts delete mode 100644 framework/reactioncommerce/api/endpoints/cart/get-cart.ts delete mode 100644 framework/reactioncommerce/api/endpoints/cart/index.ts delete mode 100644 framework/reactioncommerce/api/endpoints/cart/remove-item.ts delete mode 100644 framework/reactioncommerce/api/endpoints/cart/update-item.ts delete mode 100644 framework/reactioncommerce/api/endpoints/cart/utils.ts delete mode 100644 framework/reactioncommerce/api/endpoints/catalog/index.ts delete mode 100644 framework/reactioncommerce/api/endpoints/catalog/products.ts delete mode 100644 framework/reactioncommerce/api/endpoints/checkout/index.ts delete mode 100644 framework/reactioncommerce/api/endpoints/customer/index.ts delete mode 100644 framework/reactioncommerce/api/endpoints/login/index.ts delete mode 100644 framework/reactioncommerce/api/endpoints/logout/index.ts delete mode 100644 framework/reactioncommerce/api/endpoints/signup/index.ts delete mode 100644 framework/reactioncommerce/api/endpoints/wishlist/index.tsx delete mode 100644 framework/reactioncommerce/api/index.ts delete mode 100644 framework/reactioncommerce/api/operations/get-all-pages.ts delete mode 100644 framework/reactioncommerce/api/operations/get-all-product-paths.ts delete mode 100644 framework/reactioncommerce/api/operations/get-all-products.ts delete mode 100644 framework/reactioncommerce/api/operations/get-customer-wishlist.ts delete mode 100644 framework/reactioncommerce/api/operations/get-featured-products.ts delete mode 100644 framework/reactioncommerce/api/operations/get-hero.ts delete mode 100644 framework/reactioncommerce/api/operations/get-page.ts delete mode 100644 framework/reactioncommerce/api/operations/get-product.ts delete mode 100644 framework/reactioncommerce/api/operations/get-site-info.ts delete mode 100644 framework/reactioncommerce/api/operations/login.ts delete mode 100644 framework/reactioncommerce/api/utils/errors.ts delete mode 100644 framework/reactioncommerce/api/utils/fetch-all-products.ts delete mode 100644 framework/reactioncommerce/api/utils/fetch-graphql-api.ts delete mode 100644 framework/reactioncommerce/api/utils/fetch.ts delete mode 100644 framework/reactioncommerce/api/utils/get-account-cart.ts delete mode 100644 framework/reactioncommerce/api/utils/get-anonymous-cart.ts delete mode 100644 framework/reactioncommerce/api/utils/get-cart-cookie.ts delete mode 100644 framework/reactioncommerce/api/utils/get-categories.ts delete mode 100644 framework/reactioncommerce/api/utils/get-vendors.ts delete mode 100644 framework/reactioncommerce/api/utils/is-allowed-method.ts delete mode 100644 framework/reactioncommerce/api/utils/reconcile-cart.ts delete mode 100644 framework/reactioncommerce/api/utils/request-authorization.ts delete mode 100644 framework/reactioncommerce/api/utils/update-cart.ts delete mode 100644 framework/reactioncommerce/auth/index.ts delete mode 100644 framework/reactioncommerce/auth/use-login.tsx delete mode 100644 framework/reactioncommerce/auth/use-logout.tsx delete mode 100644 framework/reactioncommerce/auth/use-signup.tsx delete mode 100644 framework/reactioncommerce/cart/index.ts delete mode 100644 framework/reactioncommerce/cart/use-add-item.tsx delete mode 100644 framework/reactioncommerce/cart/use-cart.tsx delete mode 100644 framework/reactioncommerce/cart/use-remove-item.tsx delete mode 100644 framework/reactioncommerce/cart/use-update-item.tsx delete mode 100644 framework/reactioncommerce/cart/utils/applyDiscountCodeToCart.ts delete mode 100644 framework/reactioncommerce/cart/utils/getPaymentMethods.ts delete mode 100644 framework/reactioncommerce/cart/utils/placeOrder.ts delete mode 100644 framework/reactioncommerce/cart/utils/setEmailOnAnonymousCart.ts delete mode 100644 framework/reactioncommerce/cart/utils/setShipmentMethod.ts delete mode 100644 framework/reactioncommerce/cart/utils/setShippingAddress.ts delete mode 100644 framework/reactioncommerce/codegen.json delete mode 100644 framework/reactioncommerce/commerce.config.json delete mode 100644 framework/reactioncommerce/const.ts delete mode 100644 framework/reactioncommerce/customer/get-viewer-id.ts delete mode 100644 framework/reactioncommerce/customer/index.ts delete mode 100644 framework/reactioncommerce/customer/use-customer.tsx delete mode 100644 framework/reactioncommerce/fetcher.ts delete mode 100644 framework/reactioncommerce/index.tsx delete mode 100644 framework/reactioncommerce/next.config.js delete mode 100644 framework/reactioncommerce/product/get-all-collections.ts delete mode 100644 framework/reactioncommerce/product/get-all-product-paths.ts delete mode 100644 framework/reactioncommerce/product/get-all-products.ts delete mode 100644 framework/reactioncommerce/product/get-product.ts delete mode 100644 framework/reactioncommerce/product/use-price.tsx delete mode 100644 framework/reactioncommerce/product/use-search.tsx delete mode 100644 framework/reactioncommerce/provider.ts delete mode 100644 framework/reactioncommerce/schema.d.ts delete mode 100644 framework/reactioncommerce/schema.graphql delete mode 100644 framework/reactioncommerce/types/cart.ts delete mode 100644 framework/reactioncommerce/types/common.ts delete mode 100644 framework/reactioncommerce/types/customer.ts delete mode 100644 framework/reactioncommerce/types/order.ts delete mode 100644 framework/reactioncommerce/types/page.ts delete mode 100644 framework/reactioncommerce/types/product.ts delete mode 100644 framework/reactioncommerce/utils/anonymous-cart-token.ts delete mode 100644 framework/reactioncommerce/utils/customer-token.ts delete mode 100644 framework/reactioncommerce/utils/get-cart-id-cookie.ts delete mode 100644 framework/reactioncommerce/utils/get-categories.ts delete mode 100644 framework/reactioncommerce/utils/get-search-variables.ts delete mode 100644 framework/reactioncommerce/utils/get-shop-id.ts delete mode 100644 framework/reactioncommerce/utils/get-sort-variables.ts delete mode 100644 framework/reactioncommerce/utils/get-vendors.ts delete mode 100644 framework/reactioncommerce/utils/handle-fetch-response.ts delete mode 100644 framework/reactioncommerce/utils/hash-password.ts delete mode 100644 framework/reactioncommerce/utils/index.ts delete mode 100644 framework/reactioncommerce/utils/mutations/add-cart-items.ts delete mode 100644 framework/reactioncommerce/utils/mutations/apply-discount-code-to-cart.ts delete mode 100644 framework/reactioncommerce/utils/mutations/authenticate.ts delete mode 100644 framework/reactioncommerce/utils/mutations/create-cart.ts delete mode 100644 framework/reactioncommerce/utils/mutations/create-user.ts delete mode 100644 framework/reactioncommerce/utils/mutations/index.ts delete mode 100644 framework/reactioncommerce/utils/mutations/logout.ts delete mode 100644 framework/reactioncommerce/utils/mutations/place-order-mutation.ts delete mode 100644 framework/reactioncommerce/utils/mutations/reconcile-carts.ts delete mode 100644 framework/reactioncommerce/utils/mutations/refresh-tokens.ts delete mode 100644 framework/reactioncommerce/utils/mutations/remove-cart-items.ts delete mode 100644 framework/reactioncommerce/utils/mutations/select-fulfillment-option-for-group.ts delete mode 100644 framework/reactioncommerce/utils/mutations/set-email-on-anonymous-cart.ts delete mode 100644 framework/reactioncommerce/utils/mutations/set-shipping-address-on-cart.ts delete mode 100644 framework/reactioncommerce/utils/mutations/update-cart-items-quantity.ts delete mode 100644 framework/reactioncommerce/utils/mutations/updateFulfillmentOptionsForGroup.ts delete mode 100644 framework/reactioncommerce/utils/normalize.ts delete mode 100644 framework/reactioncommerce/utils/queries/account-cart-by-account-id.ts delete mode 100644 framework/reactioncommerce/utils/queries/available-payment-methods.ts delete mode 100644 framework/reactioncommerce/utils/queries/catalog-items-query.ts delete mode 100644 framework/reactioncommerce/utils/queries/get-all-pages-query.ts delete mode 100644 framework/reactioncommerce/utils/queries/get-all-product-vendors-query.ts delete mode 100644 framework/reactioncommerce/utils/queries/get-all-products-paths-query.ts delete mode 100644 framework/reactioncommerce/utils/queries/get-anonymous-cart.ts delete mode 100644 framework/reactioncommerce/utils/queries/get-cart-query.ts delete mode 100644 framework/reactioncommerce/utils/queries/get-collection-products-query.ts delete mode 100644 framework/reactioncommerce/utils/queries/get-page-query.ts delete mode 100644 framework/reactioncommerce/utils/queries/get-tags-query.ts delete mode 100644 framework/reactioncommerce/utils/queries/get-viewer-id-query.ts delete mode 100644 framework/reactioncommerce/utils/queries/index.ts delete mode 100644 framework/reactioncommerce/utils/queries/viewer-query.ts delete mode 100644 framework/reactioncommerce/wishlist/use-add-item.tsx delete mode 100644 framework/reactioncommerce/wishlist/use-remove-item.tsx delete mode 100644 framework/reactioncommerce/wishlist/use-wishlist.tsx delete mode 100644 graphql/queries/catalog-items-query.ts create mode 100644 graphql/queries/catalogItems.ts rename framework/reactioncommerce/utils/queries/get-product-query.ts => graphql/queries/catalogProduct.ts (94%) create mode 100644 graphql/queries/catalogProductPaths.ts rename framework/reactioncommerce/utils/queries/get-all-collections-query.ts => graphql/queries/defaultNavigationTree.ts (68%) delete mode 100644 graphql/queries/get-all-collections-query.ts delete mode 100644 graphql/queries/get-collection-products-query.ts delete mode 100644 graphql/queries/get-product-query.ts create mode 100644 graphql/queries/tag.ts rename graphql/queries/{get-tags-query.ts => tags.ts} (73%) create mode 100644 hooks/usePrice.ts create mode 100644 hooks/useSearch.ts delete mode 100644 lib/api/commerce.ts delete mode 100644 lib/search-props.tsx delete mode 100644 pages/api/cart.ts delete mode 100644 pages/api/catalog/products.ts delete mode 100644 pages/api/checkout.ts delete mode 100644 pages/api/customer.ts delete mode 100644 pages/api/login.ts delete mode 100644 pages/api/logout.ts delete mode 100644 pages/api/signup.ts delete mode 100644 pages/api/wishlist.ts delete mode 100644 pages/search.tsx create mode 100644 pages/search/[tag].tsx create mode 100644 pages/search/index.tsx delete mode 100644 pages/wishlist.tsx create mode 100644 server/graphQLRequest.ts create mode 100644 server/operations/getCatalogProduct.ts create mode 100644 server/operations/getCatalogProductPaths.ts create mode 100644 server/operations/getCatalogProducts.ts create mode 100644 server/operations/getDefaultNavigationTree.ts create mode 100644 server/operations/getTag.ts create mode 100644 server/operations/getTags.ts rename components/product/ProductGallery/ProductGallery.module.css => types/index.ts (100%) create mode 100644 utils/static/commonStaticProps.ts create mode 100644 utils/static/getFeaturedProducts.ts create mode 100644 utils/static/getHero.ts create mode 100644 utils/static/getPageBySlug.ts create mode 100644 utils/static/getPages.ts create mode 100644 vercel.json diff --git a/assets/base.css b/assets/base.css index 08132750..f5053d98 100644 --- a/assets/base.css +++ b/assets/base.css @@ -35,8 +35,6 @@ --accents-7: #495057; --accents-8: #343a40; --accents-9: #212529; - --font-sans: 'Ubuntu', -apple-system, system-ui, BlinkMacSystemFont, - 'Helvetica Neue', 'Helvetica', sans-serif; } [data-theme='dark'] { @@ -65,6 +63,14 @@ --accents-9: #f8f9fa; } +@font-face { + font-family: "Inter"; + font-style: normal; + font-weight: 400 700; + font-display: optional; + src: url("/fonts/Inter.woff2") format("woff2"); +} + *, *:before, *:after { @@ -84,7 +90,6 @@ html { html, body { - font-family: var(--font-sans); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; @@ -114,15 +119,6 @@ a { animation-name: fadeIn; } -.pswp img { - max-width: none; - object-fit: contain; -} - -.pswp__img--placeholder--blank{ - display: none !important; -} - @-webkit-keyframes fadeIn { from { opacity: 0; diff --git a/assets/main.css b/assets/main.css index a73c2e17..33780366 100644 --- a/assets/main.css +++ b/assets/main.css @@ -2,13 +2,5 @@ @import './components.css'; @tailwind base; - -@layer base { - body { - font-family: 'Ubuntu', sans-serif; - } -} - @tailwind components; - @tailwind utilities; diff --git a/codegen.json b/codegen.json deleted file mode 100644 index 1f14e88a..00000000 --- a/codegen.json +++ /dev/null @@ -1,27 +0,0 @@ -{ - "schema": { - "https://buybutton.store/graphql": { - "headers": { - "Authorization": "Bearer xzy" - } - } - }, - "documents": [ - { - "./framework/bigcommerce/api/**/*.ts": { - "noRequire": true - } - } - ], - "generates": { - "./framework/bigcommerce/schema.d.ts": { - "plugins": ["typescript", "typescript-operations"] - }, - "./framework/bigcommerce/schema.graphql": { - "plugins": ["schema-ast"] - } - }, - "hooks": { - "afterAllFileWrite": ["prettier --write"] - } -} diff --git a/codegen.yml b/codegen.yml new file mode 100644 index 00000000..917a8d57 --- /dev/null +++ b/codegen.yml @@ -0,0 +1,11 @@ +# Generate code from your GraphQL schema and operations with a simple CLI +# Read the docs: https://www.graphql-code-generator.com +overwrite: true +schema: "http://localhost:3000/graphql" +generates: + graphql/schema/index.d.ts: + plugins: + - "typescript" + config: + avoidOptionals: true + maybeValue: T diff --git a/components/auth/ForgotPassword.tsx b/components/auth/ForgotPassword.tsx index 7f7aaf12..dd14fd82 100644 --- a/components/auth/ForgotPassword.tsx +++ b/components/auth/ForgotPassword.tsx @@ -1,5 +1,4 @@ import { FC, useEffect, useState, useCallback } from 'react' -import { validate } from 'email-validator' import useUI from '@hooks/useUI' import { Logo, Button, Input } from '@components/ui' @@ -27,7 +26,7 @@ const ForgotPassword: FC = () => { const handleValidation = useCallback(() => { // Unable to send form unless fields are valid. if (dirty) { - setDisabled(!validate(email)) + setDisabled(!Boolean(email)) } }, [email, dirty]) diff --git a/components/auth/LoginView.tsx b/components/auth/LoginView.tsx index 3a285bc1..3c11ab6c 100644 --- a/components/auth/LoginView.tsx +++ b/components/auth/LoginView.tsx @@ -1,8 +1,6 @@ import React, { FC, useEffect, useState, useCallback } from 'react' import { Logo, Button, Input } from '@components/ui' -import useLogin from '@framework/auth/use-login' import useUI from '@hooks/useUI' -import { validate } from 'email-validator' interface Props {} @@ -16,7 +14,7 @@ const LoginView: FC = () => { const [disabled, setDisabled] = useState(false) const { setModalView, closeModal } = useUI() - const login = useLogin() + const login = ({}: any) => {} const handleLogin = async (e: React.SyntheticEvent) => { e.preventDefault() @@ -49,7 +47,7 @@ const LoginView: FC = () => { // Unable to send form unless fields are valid. if (dirty) { - setDisabled(!validate(email) || password.length < 7 || !validPassword) + setDisabled(!Boolean(email) || password.length < 7 || !validPassword) } }, [email, password, dirty]) diff --git a/components/auth/SignUpView.tsx b/components/auth/SignUpView.tsx index b1af3733..21cc759a 100644 --- a/components/auth/SignUpView.tsx +++ b/components/auth/SignUpView.tsx @@ -1,9 +1,7 @@ import { FC, useEffect, useState, useCallback } from 'react' -import { validate } from 'email-validator' import { Info } from '@components/icons' import useUI from '@hooks/useUI' import { Logo, Button, Input } from '@components/ui' -import useSignup from '@framework/auth/use-signup' interface Props {} @@ -18,7 +16,8 @@ const SignUpView: FC = () => { const [dirty, setDirty] = useState(false) const [disabled, setDisabled] = useState(false) - const signup = useSignup() + // const signup = useSignup() + const signup = (args: any) => {} const { setModalView, closeModal } = useUI() const handleSignup = async (e: React.SyntheticEvent) => { @@ -53,7 +52,7 @@ const SignUpView: FC = () => { // Unable to send form unless fields are valid. if (dirty) { - setDisabled(!validate(email) || password.length < 7 || !validPassword) + setDisabled(!Boolean(email) || password.length < 7 || !validPassword) } }, [email, password, dirty]) diff --git a/components/cart/CartItem/CartItem.module.scss b/components/cart/CartItem/CartItem.module.scss index b2088c40..b0acf4f4 100644 --- a/components/cart/CartItem/CartItem.module.scss +++ b/components/cart/CartItem/CartItem.module.scss @@ -1,9 +1,9 @@ .root { - @apply flex flex-row space-x-8 py-8; + @apply flex flex-row space-x-8 py-4; } .title { - @apply font-bold text-lg cursor-pointer leading-6; + @apply font-bold cursor-pointer leading-6; } .price { diff --git a/components/cart/CartItem/CartItem.tsx b/components/cart/CartItem/CartItem.tsx index 3b5513ec..ecef72d5 100644 --- a/components/cart/CartItem/CartItem.tsx +++ b/components/cart/CartItem/CartItem.tsx @@ -5,7 +5,7 @@ import Link from 'next/link' import s from './CartItem.module.scss' import { Trash, Plus, Minus } from '@components/icons' import useUI from '@hooks/useUI' -import { CartItem as MOCCartItem } from '@framework/schema' +import { CartItem as MOCCartItem } from '@graphql/schema' import useCart from '@hooks/cart/useCart' interface CartItemProps { diff --git a/components/cart/CartSidebarView/CartSidebarView.tsx b/components/cart/CartSidebarView/CartSidebarView.tsx index e760ec79..f2253eb9 100644 --- a/components/cart/CartSidebarView/CartSidebarView.tsx +++ b/components/cart/CartSidebarView/CartSidebarView.tsx @@ -38,11 +38,11 @@ const CartSidebarView: FC = () => { -
+
- diff --git a/components/cart/CartSummary/CartSummary.tsx b/components/cart/CartSummary/CartSummary.tsx index 8bb1d509..a6bcbf31 100644 --- a/components/cart/CartSummary/CartSummary.tsx +++ b/components/cart/CartSummary/CartSummary.tsx @@ -1,7 +1,7 @@ import { FC, memo, useMemo } from 'react' import HelpIcon from '@mui/icons-material/Help' import { Tooltip } from '@mui/material' -import { Cart } from '@framework/schema' +import { Cart } from '@graphql/schema' interface CartSummaryProps { cart: Cart | undefined diff --git a/components/cart/CartView/CartView.tsx b/components/cart/CartView/CartView.tsx index 3c48bfa6..b96865b3 100644 --- a/components/cart/CartView/CartView.tsx +++ b/components/cart/CartView/CartView.tsx @@ -54,11 +54,11 @@ export const CartView: FC = ({
{isEmpty ? ( - ) : ( - )} diff --git a/components/catalog/CatalogCategories/CatalogCategories.tsx b/components/catalog/CatalogCategories/CatalogCategories.tsx new file mode 100644 index 00000000..1412e855 --- /dev/null +++ b/components/catalog/CatalogCategories/CatalogCategories.tsx @@ -0,0 +1,142 @@ +import type { FC } from 'react' +import { useState } from 'react' +import cn from 'classnames' +import { NavigationTree } from '@graphql/schema' +import { useRouter } from 'next/router' +import Link from 'next/link' + +type CatalogCategoriesProps = { + categories: NavigationTree +} + +const CatalogCategories: FC = ({ categories }) => { + const [activeFilter, setActiveFilter] = useState('') + const [toggleFilter, setToggleFilter] = useState(false) + + const { tag } = useRouter().query + const activeCategory = categories?.items.find((category) => { + return category.navigationItem.data.url.replace('/', '') === tag + }) + + const handleClick = (event: any, filter: string) => { + if (filter !== activeFilter) { + setToggleFilter(true) + } else { + setToggleFilter(!toggleFilter) + } + setActiveFilter(filter) + } + + return ( +
+
+ + + +
+ +
+ ) +} + +export default CatalogCategories diff --git a/components/catalog/CatalogCategories/index.ts b/components/catalog/CatalogCategories/index.ts new file mode 100644 index 00000000..f048362d --- /dev/null +++ b/components/catalog/CatalogCategories/index.ts @@ -0,0 +1 @@ +export { default } from './CatalogCategories' diff --git a/components/catalog/CatalogGrid/CatalogGrid.tsx b/components/catalog/CatalogGrid/CatalogGrid.tsx new file mode 100644 index 00000000..0c2268b1 --- /dev/null +++ b/components/catalog/CatalogGrid/CatalogGrid.tsx @@ -0,0 +1,53 @@ +import type { FC } from 'react' +import { CatalogProduct } from '@graphql/schema' +import { ProductCard } from '@components/product' +import rangeMap from '@lib/range-map' +import { Skeleton } from '@components/ui' + +type CatalogGridProps = { + products: CatalogProduct[] + loading: boolean +} + +const CatalogGrid: FC = ({ products, loading }) => { + const GridWrapper: FC = ({ children }) => { + return ( +
+
+ {children} +
+
+ ) + } + + if (loading) { + return ( + + {rangeMap(4, (i) => ( + + ))} + + ) + } + + return ( + + {products.map((product) => ( + + ))} + + ) +} + +export default CatalogGrid diff --git a/components/catalog/CatalogGrid/index.ts b/components/catalog/CatalogGrid/index.ts new file mode 100644 index 00000000..472cc13d --- /dev/null +++ b/components/catalog/CatalogGrid/index.ts @@ -0,0 +1 @@ +export { default } from './CatalogGrid' diff --git a/components/catalog/CatalogSearchSummary/CatalogSearchSummary.tsx b/components/catalog/CatalogSearchSummary/CatalogSearchSummary.tsx new file mode 100644 index 00000000..0a40313d --- /dev/null +++ b/components/catalog/CatalogSearchSummary/CatalogSearchSummary.tsx @@ -0,0 +1,73 @@ +import type { FC } from 'react' +import { useRouter } from 'next/router' +import { CatalogProduct } from '@graphql/schema' + +type CatalogSearchSummaryProps = { + products: CatalogProduct[] + totalCount: number + loading: boolean +} + +const CatalogSearchSummary: FC = ({ + products, + totalCount, +}) => { + const { query } = useRouter() + const { tag, q } = query + + const Wrapper: FC = ({ children }) => { + return
{children}
+ } + + /* + * Text search loading + */ + if (!products && q) { + return ( + + Търсене на: "{q}" + + ) + } + + /* + * Search query with no results + */ + if (products && q && totalCount === 0) { + return ( + + Няма намерени продукти, които да включват "{q}" + + ) + } + + /* + * Search query with results + */ + if (products && q && totalCount > 0) { + return ( + + + {totalCount} резултата за "{q}" + + + ) + } + + /* + * Filters query with no results + */ + if (products && tag && totalCount === 0) { + return ( + + + Няма намерени продукти в избраната категория. + + + ) + } + + return null +} + +export default CatalogSearchSummary diff --git a/components/catalog/CatalogSearchSummary/index.ts b/components/catalog/CatalogSearchSummary/index.ts new file mode 100644 index 00000000..3260642b --- /dev/null +++ b/components/catalog/CatalogSearchSummary/index.ts @@ -0,0 +1 @@ +export { default } from './CatalogSearchSummary' diff --git a/components/catalog/CatalogView/CatalogView.tsx b/components/catalog/CatalogView/CatalogView.tsx new file mode 100644 index 00000000..64be9f70 --- /dev/null +++ b/components/catalog/CatalogView/CatalogView.tsx @@ -0,0 +1,41 @@ +import type { FC } from 'react' +import { + CatalogCategories, + CatalogGrid, + CatalogSearchSummary, +} from '@components/catalog' +import { NavigationTree, QueryCatalogItemsArgs, Tag } from '@graphql/schema' +import useSearch from '@hooks/useSearch' + +type CatalogViewProps = { + categories: NavigationTree + tag?: Tag +} + +const CatalogView: FC = ({ categories, tag }) => { + const { products, totalCount, loading } = useSearch({ + tagIds: tag ? [tag._id] : null, + } as QueryCatalogItemsArgs) + + return ( +
+ +
+ + +
+
+ ) +} + +export default CatalogView diff --git a/components/catalog/CatalogView/index.ts b/components/catalog/CatalogView/index.ts new file mode 100644 index 00000000..59f2713d --- /dev/null +++ b/components/catalog/CatalogView/index.ts @@ -0,0 +1 @@ +export { default } from './CatalogView' diff --git a/components/catalog/index.ts b/components/catalog/index.ts new file mode 100644 index 00000000..da3fd60a --- /dev/null +++ b/components/catalog/index.ts @@ -0,0 +1,4 @@ +export { default as CatalogGrid } from './CatalogGrid' +export { default as CatalogView } from './CatalogView' +export { default as CatalogSearchSummary } from './CatalogSearchSummary' +export { default as CatalogCategories } from './CatalogCategories' diff --git a/components/checkout/CheckoutView/CheckoutView.tsx b/components/checkout/CheckoutView/CheckoutView.tsx index fad4e91f..8a0306e6 100644 --- a/components/checkout/CheckoutView/CheckoutView.tsx +++ b/components/checkout/CheckoutView/CheckoutView.tsx @@ -1,4 +1,4 @@ -import React, { FC, useEffect, useMemo } from 'react' +import React, { FC, useEffect, useMemo, useRef } from 'react' import { LoadingDots, Logo } from '@components/ui' import s from './CheckoutView.module.scss' import Link from '@components/ui/Link' @@ -8,15 +8,17 @@ import ShippingAddressStep from '@components/checkout/ShippingAddressStep' import DesktopCheckout from '@components/checkout/DesktopCheckout' import PaymentStep from '@components/checkout/PaymentStep/PaymentStep' import { useCheckout } from '@hooks/useCheckout' -import { Media, MediaContextProvider } from '@components/common/MediaQueries' import FinalizeStep from '@components/checkout/FinalizeStep' import { track } from '@lib/facebookPixel' import { useRouter } from 'next/router' import useCart from '@hooks/cart/useCart' import useCartStore from '@hooks/cart/useCartStore' +import useUI from '@hooks/useUI' export const CheckoutView: FC = () => { + const { isAtLeastTablet } = useUI() const { cart, loading, getShippingAddress, getEmail } = useCart() + const checkoutInitialized = useRef(false) const { reset } = useCartStore() const { availablePaymentMethods, @@ -30,16 +32,41 @@ export const CheckoutView: FC = () => { const router = useRouter() + /* + * Track Facebook Pixel Initiate Checkout Event + */ useEffect(() => { - track('InitiateCheckout') - }, []) + if (checkoutInitialized.current) return + + if (!loading && cart) { + track('InitiateCheckout', { + contents: cart?.items?.nodes?.map((item) => ({ + id: item?.productSlug, + quantity: item?.quantity, + })), + currency: cart?.shop?.currency?.code, + }) + checkoutInitialized.current = true + } + }, [cart, loading]) useEffect(() => { if (order) { - reset() - router.push(`/checkout/thank-you?order=${order.referenceId}`) + router + .push(`/checkout/thank-you?order=${order.referenceId}`) + .then(() => { + track('Purchase', { + content_ids: cart?.items?.nodes?.map((item) => item?.productSlug), + contents: cart?.items?.nodes?.map((item) => ({ + id: item?.productSlug, + quantity: item?.quantity, + })), + currency: cart?.shop?.currency?.code, + }) + }) + .then(reset) } - }, [order, router, reset]) + }, [order, router, reset, cart?.items?.nodes, cart?.shop?.currency?.code]) const getCheckoutSteps = useMemo((): Step[] => { if (!cart || !availablePaymentMethods) return [] @@ -90,23 +117,22 @@ export const CheckoutView: FC = () => { placeOrder, ]) - return ( -
- - {loading || !availablePaymentMethods ? ( + if (loading || !availablePaymentMethods) { + return ( +
+
- ) : ( - - - - - - - - - )} +
+ ) + } + + return ( +
+ + {!isAtLeastTablet && } + {isAtLeastTablet && }
) } diff --git a/components/checkout/CourierOfficeForm/CourierOfficeForm.tsx b/components/checkout/CourierOfficeForm/CourierOfficeForm.tsx index 0d4bbaba..a47d49f4 100644 --- a/components/checkout/CourierOfficeForm/CourierOfficeForm.tsx +++ b/components/checkout/CourierOfficeForm/CourierOfficeForm.tsx @@ -8,7 +8,7 @@ import ControlledTextField from '@components/ui/ControlledTextField' import { StepSubmitCallback, Submittable } from '@hooks/useStepper' import CourierOfficeSelect from '../CourierOfficeSelect' import { SetShippingAddressProps } from '@hooks/useCheckout' -import { Address, AddressInput } from '@framework/schema' +import { Address, AddressInput } from '@graphql/schema' const validationSchema = yup.object().shape({ firstName: yup.string().required('Задължително поле'), diff --git a/components/checkout/CourierOfficeSelect/CourierOfficeSelect.tsx b/components/checkout/CourierOfficeSelect/CourierOfficeSelect.tsx index d6704e23..08179774 100644 --- a/components/checkout/CourierOfficeSelect/CourierOfficeSelect.tsx +++ b/components/checkout/CourierOfficeSelect/CourierOfficeSelect.tsx @@ -1,121 +1,79 @@ -import Econt from '@components/icons/Econt' -import { - Autocomplete, - Box, - CircularProgress, - InputAdornment, - TextField, - Tooltip, -} from '@mui/material' -import { Office } from 'econt-js' -import { FC, useEffect, useState } from 'react' -import { Controller, Control } from 'react-hook-form' +import { FC, useCallback, useEffect, useState } from 'react' +import { Control } from 'react-hook-form' import { CourierOfficeFieldValues } from '../CourierOfficeForm/CourierOfficeForm' -import Error from '@mui/icons-material/Error' import { useLazyQuery } from '@apollo/client' import econtOfficesQuery from '@graphql/queries/econtOffices' +import ControlledAutocomplete from '@components/ui/ControlledAutocomplete' +import { AutocompleteFetchDataHandler } from '@components/ui/Autocomplete/Autocomplete' +import { + EcontOffice, + EcontOfficeConnection, + QueryEcontOfficesArgs, +} from '@graphql/schema' +import Econt from '@components/icons/Econt' +import Box from '@mui/material/Box' type Props = { control: Control } const CourierOfficeSelect: FC = ({ control }) => { - const [getEcontOffices] = useLazyQuery(econtOfficesQuery) - const [open, setOpen] = useState(false) - const [options, setOptions] = useState([]) - const loading = open && options.length === 0 - - useEffect(() => { - let active = true + const [getEcontOffices] = useLazyQuery< + { econtOffices: EcontOfficeConnection }, + Partial + >(econtOfficesQuery) + const [offices, setOffices] = useState([]) + const [hasMoreOffices, setHasMoreOffices] = useState(false) + const [loadingOffices, setLoadingOffices] = useState(true) + const [selectedOffice, setSelectedOffice] = useState< + EcontOffice | undefined + >() - if (!loading) { - return undefined - } + const handleFetchData = useCallback( + async ({ inputValue, first, offset, mode }) => { + setLoadingOffices(true) + const { data } = await getEcontOffices({ + variables: { + first: first || 20, + offset: offset || 0, + searchQuery: inputValue, + }, + }) - ;(async () => { - const { data } = await getEcontOffices() - - if (active) { - setOptions(data.econtOffices) + if (mode === 'set') { + setOffices(data?.econtOffices?.nodes || []) } - })() - return () => { - active = false - } - }, [getEcontOffices, loading]) + if (mode === 'append') { + setOffices((offices) => [ + ...offices, + ...(data?.econtOffices?.nodes || []), + ]) + } - useEffect(() => { - if (!open) { - setOptions([]) - } - }, [open]) + setHasMoreOffices(data?.econtOffices?.pageInfo?.hasNextPage || false) + setLoadingOffices(false) + }, + [getEcontOffices] + ) return ( - ( - { - setOpen(true) - }} - onClose={() => { - setOpen(false) - }} - noOptionsText={'Не са намерени офиси'} - isOptionEqualToValue={(option, value) => option.code === value.code} - getOptionLabel={(option) => option.name} - options={options} - loading={loading} - renderOption={(params, option) => ( - - - ({option.code}) - {option.name} - - )} - renderInput={(params) => ( - - {loading && ( - - - - )} - {invalid && ( - - - - - - )} - - ), - }} - /> - )} - //@ts-ignore - onChange={(_, data) => field.onChange(data)} - /> - )} + label="Офис на куриер" + noOptionsLabel={'Не са намерени офиси'} + getOptionLabel={(office: EcontOffice) => office.name} + inputPlaceholder="Търси офис на куриер" + isOptionEqualToValue={(option: EcontOffice, value: EcontOffice) => + option.code === value.code + } + loading={loadingOffices} + onFetchData={handleFetchData} + options={offices} + value={selectedOffice} + multiple={false} + hasMore={hasMoreOffices} /> ) } diff --git a/components/checkout/DesktopCheckout/DesktopCheckout.tsx b/components/checkout/DesktopCheckout/DesktopCheckout.tsx index f45ca83b..dc3de408 100644 --- a/components/checkout/DesktopCheckout/DesktopCheckout.tsx +++ b/components/checkout/DesktopCheckout/DesktopCheckout.tsx @@ -37,9 +37,7 @@ const DesktopCheckout: FC = ({ steps }) => { {steps.map((step, index) => (
{step.icon}
}> - - {step.label} - +

{step.label}

 {renderStepComponent(index)} diff --git a/components/checkout/DiscountCodeForm/DiscountCodeForm.tsx b/components/checkout/DiscountCodeForm/DiscountCodeForm.tsx index 25cbbcf5..e51bd0b4 100644 --- a/components/checkout/DiscountCodeForm/DiscountCodeForm.tsx +++ b/components/checkout/DiscountCodeForm/DiscountCodeForm.tsx @@ -1,6 +1,5 @@ import React, { FC } from 'react' import { useForm } from 'react-hook-form' -import { Cart } from '@framework/types/cart' import ControlledTextField from '@components/ui/ControlledTextField' import { Button } from '@components/ui' import useCart from '@hooks/cart/useCart' @@ -37,10 +36,12 @@ const DiscountCodeForm: FC = () => { } return ( -
+
{ disabled={!isDirty} type="submit" size="slim" + className="h-fit mt-6" onClick={handleSubmit(onSubmit)} > Приложи diff --git a/components/checkout/FinalizeStep/FinalizeStep.tsx b/components/checkout/FinalizeStep/FinalizeStep.tsx index 65e8829e..8627092a 100644 --- a/components/checkout/FinalizeStep/FinalizeStep.tsx +++ b/components/checkout/FinalizeStep/FinalizeStep.tsx @@ -2,7 +2,6 @@ import { forwardRef, useImperativeHandle } from 'react' import * as yup from 'yup' import { StepSubmitCallback, Submittable } from '@hooks/useStepper' import { PaymentMethod } from '@utils/paymentMethods' -import { ShippingAddress } from '@framework/types/cart' import FormControlLabel from '@mui/material/FormControlLabel' import Checkbox from '@mui/material/Checkbox' import Link from '@mui/material/Link' @@ -10,6 +9,7 @@ import { useForm, Controller } from 'react-hook-form' import { yupResolver } from '@hookform/resolvers/yup' import FormControl from '@mui/material/FormControl' import FormHelperText from '@mui/material/FormHelperText' +import { Address } from '@graphql/schema' const inputSchema = yup.object().shape({ agreeWithTerms: yup @@ -19,7 +19,7 @@ const inputSchema = yup.object().shape({ }) interface CheckoutFinalizeProps { - shippingAddress: ShippingAddress + shippingAddress: Address email: string paymentMethod: PaymentMethod onSubmit: StepSubmitCallback diff --git a/components/checkout/FinalizeSummaryShipping/FinalizeSummaryShipping.tsx b/components/checkout/FinalizeSummaryShipping/FinalizeSummaryShipping.tsx index 6ce0a6bd..7bdcbdf5 100644 --- a/components/checkout/FinalizeSummaryShipping/FinalizeSummaryShipping.tsx +++ b/components/checkout/FinalizeSummaryShipping/FinalizeSummaryShipping.tsx @@ -1,13 +1,13 @@ import { FC } from 'react' import Card from '@mui/material/Card' import CardContent from '@mui/material/CardContent' -import { ShippingAddress } from '@framework/types/cart' import Typography from '@mui/material/Typography' import s from './FinalizeSummaryShipping.module.scss' +import { Address } from '@graphql/schema' interface FinalizeSummaryShippingProps { - shippingAddress: ShippingAddress + shippingAddress: Address email: string } @@ -19,7 +19,7 @@ const FinalizeSummaryShipping: FC = ({ Адрес за доставка - {shippingAddress.address} + {shippingAddress?.address1} {email} diff --git a/components/checkout/MobileCheckout/MobileCheckout.tsx b/components/checkout/MobileCheckout/MobileCheckout.tsx index e12366d6..16656ca0 100644 --- a/components/checkout/MobileCheckout/MobileCheckout.tsx +++ b/components/checkout/MobileCheckout/MobileCheckout.tsx @@ -2,7 +2,6 @@ import React, { FC, useState } from 'react' import SwipeableViews from 'react-swipeable-views' import Drawer from '@mui/material/Drawer' import MobileStepper from '@mui/material/MobileStepper' -import Typography from '@mui/material/Typography' import ExpandLessIcon from '@mui/icons-material/ExpandLess' import { CartView } from '@components/cart/CartView/CartView' @@ -50,7 +49,7 @@ const MobileCheckout: FC = ({ steps }) => { useCartDrawer() return ( - + = ({ steps }) => { > {steps.map((step, index) => (
- +
{step.icon} {step.label} - +
{renderStepComponent(index)}
))} @@ -71,10 +70,9 @@ const MobileCheckout: FC = ({ steps }) => { diff --git a/components/checkout/ShippingAddressFormClient/ShippingAddressFormClient.tsx b/components/checkout/ShippingAddressFormClient/ShippingAddressFormClient.tsx index 72e5d77a..468ab715 100644 --- a/components/checkout/ShippingAddressFormClient/ShippingAddressFormClient.tsx +++ b/components/checkout/ShippingAddressFormClient/ShippingAddressFormClient.tsx @@ -10,7 +10,7 @@ import ControlledTextField from '@components/ui/ControlledTextField' import { StepSubmitCallback, Submittable } from '@hooks/useStepper' import { Skeleton } from '@mui/material' import { SetShippingAddressProps } from '@hooks/useCheckout' -import { Address, AddressInput } from '@framework/schema' +import { Address, AddressInput } from '@graphql/schema' const mapCenter: google.maps.LatLngLiteral = { lat: 42.698334, diff --git a/components/checkout/ShippingAddressStep/ShippingAddressStep.tsx b/components/checkout/ShippingAddressStep/ShippingAddressStep.tsx index 90afb723..5921ea88 100644 --- a/components/checkout/ShippingAddressStep/ShippingAddressStep.tsx +++ b/components/checkout/ShippingAddressStep/ShippingAddressStep.tsx @@ -1,18 +1,12 @@ -import React, { - forwardRef, - useContext, - useImperativeHandle, - useRef, - useState, -} from 'react' +import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react' import { CheckoutStepComponentProps, Submittable } from '@hooks/useStepper' import Accordion from '@mui/material/Accordion' import AccordionSummary from '@mui/material/AccordionSummary' import Radio from '@mui/material/Radio' import AccordionDetails from '@mui/material/AccordionDetails' import ShippingAddressFormClient from '@components/checkout/ShippingAddressFormClient' -import { ShippingAddress } from '@framework/types/cart' import CourierOfficeForm from '../CourierOfficeForm' +import { Address } from '@graphql/schema' enum DeliveryType { COURIER_OFFICE, @@ -25,7 +19,7 @@ const deliveryTypeTitles = { } interface ShippingAddressStepProps extends CheckoutStepComponentProps { - shippingAddress?: ShippingAddress + shippingAddress?: Address email?: string } @@ -51,7 +45,6 @@ const ShippingAddressStep = forwardRef(
@@ -79,7 +72,6 @@ const ShippingAddressStep = forwardRef( [] } const links = [ { - name: 'Начало', + title: 'Начало', url: '/', }, ] -const Footer: FC = ({ className, pages }) => { - const sitePages = usePages(pages).sitePages.map((sitePage) => ({ - ...sitePage, - url: '/article' + sitePage.url, - })) +const Footer: FC = ({ className, pages = [] }) => { const rootClassName = cn(s.root, className) return (