From 914d75dc8d5031e89913d3afa7a1b5fc65b855bc Mon Sep 17 00:00:00 2001 From: Joel Varty Date: Sat, 16 Jan 2021 14:26:51 -0500 Subject: [PATCH] conversions --- components/agility-modules/Cart.tsx | 142 ++++++ .../agility-modules/HomeAllProductsGrid.tsx | 28 ++ components/agility-modules/Orders.tsx | 34 ++ components/agility-modules/ProductSearch.tsx | 450 ++++++++++++++++++ components/agility-modules/Profile.tsx | 48 ++ components/agility-modules/Wishlist.tsx | 53 +++ components/agility-modules/index.ts | 30 +- components/common/Footer/Footer.tsx | 4 +- components/ui/LoadingDots/LoadingDots.tsx | 8 +- .../module-data/HomeAllProductsGridData.ts | 38 ++ framework/module-data/ProductSearchData.ts | 21 + framework/module-data/index.ts | 11 +- pagesBAK/search.tsx | 12 +- public/flag-es-co.svg | 2 +- 14 files changed, 854 insertions(+), 27 deletions(-) create mode 100644 components/agility-modules/Cart.tsx create mode 100644 components/agility-modules/HomeAllProductsGrid.tsx create mode 100644 components/agility-modules/Orders.tsx create mode 100644 components/agility-modules/ProductSearch.tsx create mode 100644 components/agility-modules/Profile.tsx create mode 100644 components/agility-modules/Wishlist.tsx create mode 100644 framework/module-data/HomeAllProductsGridData.ts create mode 100644 framework/module-data/ProductSearchData.ts diff --git a/components/agility-modules/Cart.tsx b/components/agility-modules/Cart.tsx new file mode 100644 index 000000000..8c8af5986 --- /dev/null +++ b/components/agility-modules/Cart.tsx @@ -0,0 +1,142 @@ +import React, { FC } from 'react' + +import { ProductCard } from '@components/product' +import { Grid, Marquee, Hero } from '@components/ui' +import useCart from '@framework/cart/use-cart' +import usePrice from '@framework/use-price' +import { Button } from '@components/ui' +import { Bag, Cross, Check } from '@components/icons' +import { CartItem } from '@components/cart' +import { Text } from '@components/ui' + +interface Fields { +} + +interface Props { + fields: Fields, + customData: any +} + +const Cart: FC = ({ fields, customData }) => { + const { data, isEmpty } = useCart() + const { price: subTotal } = usePrice( + data && { + amount: data.base_amount, + currencyCode: data.currency.code, + } + ) + const { price: total } = usePrice( + data && { + amount: data.cart_amount, + currencyCode: data.currency.code, + } + ) + + const items = data?.line_items.physical_items ?? [] + + const error = null + const success = null + + return ( +
+
+ {isEmpty ? ( +
+ + + +

+ Your cart is empty +

+

+ Biscuit oat cake wafer icing ice cream tiramisu pudding cupcake. +

+
+ ) : error ? ( +
+ + + +

+ We couldn’t process the purchase. Please check your card + information and try again. +

+
+ ) : success ? ( +
+ + + +

+ Thank you for your order. +

+
+ ) : ( +
+ My Cart + Review your Order +
    + {items.map((item) => ( + + ))} +
+
+ + Before you leave, take a look at these items. We picked them + just for you + +
+ {[1, 2, 3, 4, 5, 6].map((x) => ( +
+ ))} +
+
+
+ )} +
+
+
+
+
    +
  • + Subtotal + {subTotal} +
    • +
  • + Taxes + Calculated at checkout +
    • +
  • + Estimated Shipping + FREE +
    • +
+
+ Total + {total} +
+
+
+
+ {isEmpty ? ( + + ) : ( + + )} +
+
+
+
+
+ ) +} + +export default Cart \ No newline at end of file diff --git a/components/agility-modules/HomeAllProductsGrid.tsx b/components/agility-modules/HomeAllProductsGrid.tsx new file mode 100644 index 000000000..0ef0c6a0e --- /dev/null +++ b/components/agility-modules/HomeAllProductsGrid.tsx @@ -0,0 +1,28 @@ +import React, { FC } from 'react' +import HomeAllProductsGrid from '@components/common/HomeAllProductsGrid' + +interface Fields { +} + +interface Props { + fields: Fields, + customData: any +} + +const HomeAllProductsGridModule:FC = ({fields, customData}) => { + + const categories = customData.categories + const newestProducts = customData.newestProducts + const brands = customData.brands + + return ( + + ) +} + +export default HomeAllProductsGridModule + diff --git a/components/agility-modules/Orders.tsx b/components/agility-modules/Orders.tsx new file mode 100644 index 000000000..2eb4be801 --- /dev/null +++ b/components/agility-modules/Orders.tsx @@ -0,0 +1,34 @@ +import React, { FC } from 'react' + +import { Container, Text } from '@components/ui' +import { Bag } from '@components/icons' + + +interface Fields { +} + +interface Props { + fields: Fields, + customData: any +} + +const Orders: FC = ({ fields, customData }) => { + return ( + + My Orders +
+ + + +

+ No orders found +

+

+ Orders coming soon! +

+
+ + ) +} + +export default Orders \ No newline at end of file diff --git a/components/agility-modules/ProductSearch.tsx b/components/agility-modules/ProductSearch.tsx new file mode 100644 index 000000000..e46c0b9b2 --- /dev/null +++ b/components/agility-modules/ProductSearch.tsx @@ -0,0 +1,450 @@ +import React, { FC } from 'react' +import cn from 'classnames' +import Link from 'next/link' +import { useState } from 'react' +import { useRouter } from 'next/router' +import useSearch from '@framework/products/use-search' +import { ProductCard } from '@components/product' +import { Container, Grid, Skeleton } from '@components/ui' + +import rangeMap from '@lib/range-map' +import getSlug from '@lib/get-slug' +import { + filterQuery, + getCategoryPath, + getDesignerPath, + useSearchMeta, +} from '@lib/search' + +const SORT = Object.entries({ + 'latest-desc': 'Latest arrivals', + 'trending-desc': 'Trending', + 'price-asc': 'Price: Low to high', + 'price-desc': 'Price: High to low', + }) + +interface Fields { +} + +interface Props { + fields: Fields, + customData: any +} + +const ProductSearch: FC = ({ fields, customData }) => { + + const categories:[any] = customData.categories + const brands:[any] = customData.brands + + const [activeFilter, setActiveFilter] = useState('') + const [toggleFilter, setToggleFilter] = useState(false) + + const router = useRouter() + const { asPath } = router + const { q, sort } = router.query + // `q` can be included but because categories and designers can't be searched + // in the same way of products, it's better to ignore the search input if one + // of those is selected + const query = filterQuery({ sort }) + + const { pathname, category, brand } = useSearchMeta(asPath) + const activeCategory = categories.find( + (cat) => getSlug(cat.path) === category + ) + const activeBrand = brands.find( + (b) => getSlug(b.node.path) === `brands/${brand}` + )?.node + + const { data } = useSearch({ + search: typeof q === 'string' ? q : '', + categoryId: activeCategory?.entityId, + brandId: activeBrand?.entityId, + sort: typeof sort === 'string' ? sort : '', + }) + + const handleClick = (event: any, filter: string) => { + if (filter !== activeFilter) { + setToggleFilter(true) + } else { + setToggleFilter(!toggleFilter) + } + + setActiveFilter(filter) + } + + return ( + +
+
+ {/* Categories */} +
+
+ + + +
+ +
+ + {/* Designs */} +
+
+ + + +
+ +
+
+ {/* Products */} +
+ {(q || activeCategory || activeBrand) && ( +
+ {data ? ( + <> + + Showing {data.products.length} results{' '} + {q && ( + <> + for "{q}" + + )} + + + {q ? ( + <> + There are no products that match "{q}" + + ) : ( + <> + There are no products that match the selected category & + designer + + )} + + + ) : q ? ( + <> + Searching for: "{q}" + + ) : ( + <>Searching... + )} +
+ )} + + {data ? ( + + {data.products.map(({ node }) => ( + + ))} + + ) : ( + + {rangeMap(12, (i) => ( + + ))} + + )} +
+ + {/* Sort */} +
+
+
+ + + +
+ +
+
+
+ + ) +} + +export default ProductSearch \ No newline at end of file diff --git a/components/agility-modules/Profile.tsx b/components/agility-modules/Profile.tsx new file mode 100644 index 000000000..402a372e9 --- /dev/null +++ b/components/agility-modules/Profile.tsx @@ -0,0 +1,48 @@ +import React, { FC } from 'react' + +import useCustomer from '@framework/use-customer' +import { Container, Text } from '@components/ui' + +interface Fields { + heading: string, + fullNameLabel: string, + emailLabel: string, + notLoggedInMessage: string +} + +interface Props { + fields: Fields + } + +const ProfileModule:FC = ({fields}) => { + + const { data } = useCustomer() + return ( + + {fields.heading} + {data && ( +
+
+
+ {fields.fullNameLabel} + + {data.firstName} {data.lastName} + +
+
+ {fields.emailLabel} + {data.email} +
+
+
+ )} + + { !data && + {fields.notLoggedInMessage} + } + + ) +} + +export default ProfileModule + diff --git a/components/agility-modules/Wishlist.tsx b/components/agility-modules/Wishlist.tsx new file mode 100644 index 000000000..7130bbcd4 --- /dev/null +++ b/components/agility-modules/Wishlist.tsx @@ -0,0 +1,53 @@ +import React, { FC } from 'react' + +import useWishlist from '@framework/wishlist/use-wishlist' + +import { Heart } from '@components/icons' +import { Text, Container } from '@components/ui' +import { WishlistCard } from '@components/wishlist' + + +interface Fields { + heading: string, + emptyMessage: string, + addItemsMessage?: string +} + +interface Props { + fields: Fields, + customData: any +} + +const Wishlist: FC = ({ fields, customData }) => { + const { data, isEmpty } = useWishlist({ includeProducts: true }) + + return ( + +
+ {fields.heading} +
+ {isEmpty ? ( +
+ + + +

+ {fields.emptyMessage} +

+

+ {fields.addItemsMessage} +

+
+ ) : ( + data && + data.items?.map((item) => ( + + )) + )} +
+
+ + ) +} + +export default Wishlist \ No newline at end of file diff --git a/components/agility-modules/index.ts b/components/agility-modules/index.ts index 79a973d5f..f525eba98 100644 --- a/components/agility-modules/index.ts +++ b/components/agility-modules/index.ts @@ -1,27 +1,39 @@ -import {FC} from "react" +import { FC } from "react" import * as AgilityTypes from "@agility/types" import RichTextArea from "./RichTextArea" import BestsellingProducts from "./BestsellingProducts" import ProductDetails from "./ProductDetails" import FeaturedProducts from "./FeaturedProducts" import ProductListing from "./ProductListing" +import ProductSearch from "./ProductSearch" import Hero from "./Hero" +import HomeAllProductsGrid from "./HomeAllProductsGrid" +import Cart from "./Cart" +import Orders from "./Orders" +import Profile from "./Profile" +import Wishlist from "./Wishlist" -const allModules =[ - { name: "RichTextArea", module:RichTextArea }, +const allModules = [ + { name: "RichTextArea", module: RichTextArea }, { name: "BestsellingProducts", module: BestsellingProducts }, - { name: "FeaturedProducts", module: FeaturedProducts}, - { name: "ProductListing", module: ProductListing}, - { name: "Hero", module: Hero}, - { name: "ProductDetails", module: ProductDetails } + { name: "FeaturedProducts", module: FeaturedProducts }, + { name: "ProductListing", module: ProductListing }, + { name: "ProductSearch", module: ProductSearch }, + { name: "Hero", module: Hero }, + { name: "ProductDetails", module: ProductDetails }, + { name: "HomeAllProductsGrid", module: HomeAllProductsGrid }, + { name: "Cart", module: Cart }, + { name: "Orders", module: Orders }, + { name: "Profile", module: Profile}, + { name: "Wishlist", module: Wishlist} ] /** - * Find the component for a module. + * Find the component for a module by name. * @param moduleName */ -const getModule = (moduleName:string):any | null => { +const getModule = (moduleName: string): any | null => { const obj = allModules.find(m => m.name.toLowerCase() === moduleName.toLowerCase()) if (!obj) return null return obj.module diff --git a/components/common/Footer/Footer.tsx b/components/common/Footer/Footer.tsx index c90b4886f..627530121 100644 --- a/components/common/Footer/Footer.tsx +++ b/components/common/Footer/Footer.tsx @@ -45,9 +45,9 @@ const Footer: FC = ({ className, pages }) => {
  • - + - Careers + About
    • diff --git a/components/ui/LoadingDots/LoadingDots.tsx b/components/ui/LoadingDots/LoadingDots.tsx index 086db067c..467a7430e 100644 --- a/components/ui/LoadingDots/LoadingDots.tsx +++ b/components/ui/LoadingDots/LoadingDots.tsx @@ -2,10 +2,10 @@ import s from './LoadingDots.module.css' const LoadingDots: React.FC = () => { return ( - - - - + + + + ) } diff --git a/framework/module-data/HomeAllProductsGridData.ts b/framework/module-data/HomeAllProductsGridData.ts new file mode 100644 index 000000000..13a1fd3e9 --- /dev/null +++ b/framework/module-data/HomeAllProductsGridData.ts @@ -0,0 +1,38 @@ +import { getConfig } from '@framework/api' +import getSiteInfo from '@framework/api/operations/get-site-info' +import getAllProducts from '@framework/api/operations/get-all-products' + + + +import rangeMap from '@lib/range-map' + +const nonNullable = (v: any) => v + +const HomeAllProductsGridData = async function ({ item, agility, languageCode, channelName, pageInSitemap, dynamicPageItem }: any) { + //TODO: pass the locale and preview mode as props... + + const locale = "en-US" + const preview = false + + + const config = getConfig({ locale }) + const { categories, brands } = await getSiteInfo({ config, preview }) + + // Get Best Newest Products + const { products: newestProducts } = await getAllProducts({ + variables: { field: 'newestProducts', first: 12 }, + config, + preview, + }) + + + return { + newestProducts: newestProducts, + categories, + brands + } + + +} + +export default HomeAllProductsGridData \ No newline at end of file diff --git a/framework/module-data/ProductSearchData.ts b/framework/module-data/ProductSearchData.ts new file mode 100644 index 000000000..461f4f57a --- /dev/null +++ b/framework/module-data/ProductSearchData.ts @@ -0,0 +1,21 @@ +import { getConfig } from '@framework/api' +import getSiteInfo from '@framework/api/operations/get-site-info' + +const ProductSearchData = async function ({ item, agility, languageCode, channelName, pageInSitemap, dynamicPageItem }: any) { + //TODO: pass the locale and preview mode as props... + + const locale = "en-US" + const preview = false + + const config = getConfig({ locale }) + const { categories, brands } = await getSiteInfo({ config, preview }) + + return { + categories, + brands + } + + +} + +export default ProductSearchData \ No newline at end of file diff --git a/framework/module-data/index.ts b/framework/module-data/index.ts index f240a9682..8141821d1 100644 --- a/framework/module-data/index.ts +++ b/framework/module-data/index.ts @@ -1,16 +1,17 @@ -import {FC} from "react" -import * as AgilityTypes from "@agility/types" - import BestsellingProductsData from "./BestsellingProductsData" import FeaturedProductsData from "./FeaturedProductsData" +import HomeAllProductsGridData from "./HomeAllProductsGridData" +import ProductSearchData from "./ProductSearchData" const allModules:any =[ { name: "BestsellingProducts", init: BestsellingProductsData }, - { name: "FeaturedProducts", init: FeaturedProductsData} + { name: "FeaturedProducts", init: FeaturedProductsData}, + { name: "HomeAllProductsGrid", init: HomeAllProductsGridData}, + { name: "ProductSearch", init: ProductSearchData} ] /** - * Find the data method for a module. + * Find the data method for a module by module reference name. * @param moduleName */ const getInitMethod = (moduleName:string):any => { diff --git a/pagesBAK/search.tsx b/pagesBAK/search.tsx index 5110aba55..88a6354cd 100644 --- a/pagesBAK/search.tsx +++ b/pagesBAK/search.tsx @@ -106,9 +106,9 @@ export default function Search({ fill="currentColor" > @@ -205,9 +205,9 @@ export default function Search({ fill="currentColor" > @@ -378,9 +378,9 @@ export default function Search({ fill="currentColor" > diff --git a/public/flag-es-co.svg b/public/flag-es-co.svg index 618820393..0b37328f3 100644 --- a/public/flag-es-co.svg +++ b/public/flag-es-co.svg @@ -1,6 +1,6 @@ - +