v1 convert to Agility

components/agility-modules/BestsellingProducts.tsx

@@ -0,0 +1,35 @@
+import React, { FC } from 'react'
+
+import { ProductCard } from '@components/product'
+import { Grid, Marquee, Hero } from '@components/ui'
+
+interface Fields {
+}
+
+interface Props {
+	fields: Fields,
+	customData: any
+}
+
+const BestsellingProducts:FC<Props> = ({fields, customData}) => {
+
+	const bestSelling  = customData.bestSelling
+
+	return (
+		<Marquee variant="secondary">
+        {bestSelling.slice(0, 12).map(({ node }:any) => (
+          <ProductCard
+            key={node.path}
+            product={node}
+            variant="slim"
+            imgWidth={320}
+            imgHeight={320}
+            imgLayout="fixed"
+          />
+        ))}
+      </Marquee>
+	)
+}
+
+export default BestsellingProducts
+

components/agility-modules/FeaturedProducts.tsx

@@ -0,0 +1,31 @@
+import { FC } from "react"
+import { Grid, Marquee, Hero } from '@components/ui'
+import { ProductCard } from '@components/product'
+
+interface Fields {
+}
+
+interface Props {
+	fields: Fields,
+	customData: any
+}
+
+const FeaturedProducts:FC<Props> = ({fields, customData}) => {
+	const featured:any = customData.featured
+
+	return (
+		<Grid layout="B">
+        {featured.map(({ node }:any, i:number) => (
+          <ProductCard
+            key={node.path}
+            product={node}
+            imgWidth={i === 1 ? 1080 : 540}
+            imgHeight={i === 1 ? 1080 : 540}
+          />
+        ))}
+      </Grid>
+	)
+}
+
+export default FeaturedProducts
+

components/agility-modules/Hero.tsx

@@ -0,0 +1,29 @@
+import React, { FC } from 'react'
+import { Hero } from '@components/ui'
+import * as AgilityTypes from "@agility/types"
+
+
+interface Fields {
+	title:string,
+	description:string
+	cTA?:AgilityTypes.URLField
+}
+
+interface Props {
+	fields: Fields
+  }
+
+const HeroModule:FC<Props> = ({fields}) => {
+
+	return (
+		<Hero
+			headline={fields.title}
+			description={fields.description}
+			linkText={fields.cTA?.text}
+			linkUrl={fields.cTA?.href}
+      />
+	)
+}
+
+export default HeroModule
+

components/agility-modules/ProductDetails.tsx

@@ -0,0 +1,23 @@
+import React, { FC } from 'react'
+import { Hero } from '@components/ui'
+import * as AgilityTypes from "@agility/types"
+import { GetProductResult } from '@framework/api/operations/get-product'
+import { ProductView } from '@components/product'
+
+interface Fields {
+}
+
+interface Props {
+	fields: Fields,
+	dynamicPageItem:any
+  }
+
+const HeroModule:FC<Props> = ({fields, dynamicPageItem}) => {
+
+	return (
+		<ProductView product={dynamicPageItem} />
+	)
+}
+
+export default HeroModule
+

components/agility-modules/ProductListing.tsx

@@ -0,0 +1,8 @@
+const ProductListing  = () => {
+	return (
+		<section>ProductListing</section>
+	)
+}
+
+export default ProductListing
+

components/agility-modules/RichTextArea.tsx

@@ -0,0 +1,22 @@
+import React, {FC} from 'react';
+import { Text, Container } from '@components/ui'
+
+interface Fields {
+	textblob:string,
+}
+
+interface Props {
+	fields: Fields
+}
+
+const RichTextArea:FC<Props> =  ({fields}) => {
+
+	return (
+		<Container>
+			<Text className="prose prose-sm sm:prose lg:prose-lg xl:prose-xl" html={fields.textblob} />
+		</Container>
+	);
+
+}
+
+export default RichTextArea

components/agility-modules/index.ts

@@ -0,0 +1,30 @@
+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 Hero from "./Hero"
+
+
+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 }
+]
+
+/**
+ * Find the component for a module.
+ * @param moduleName
+ */
+const getModule =  (moduleName:string):any | null => {
+	const obj = allModules.find(m => m.name.toLowerCase() === moduleName.toLowerCase())
+	if (!obj) return null
+	return obj.module
+}
+
+export default getModule