diff --git a/03_source/mobile/src/pages/TestComponents/AddToCartButton.jsx b/03_source/mobile/src/pages/TestComponents/AddToCartButton.jsx deleted file mode 100644 index 33810a5..0000000 --- a/03_source/mobile/src/pages/TestComponents/AddToCartButton.jsx +++ /dev/null @@ -1,58 +0,0 @@ -import { CreateAnimation, IonButton, IonIcon } from "@ionic/react"; -import { cartOutline } from "ionicons/icons"; -import { useRef, useState } from "react"; -import { addToCart } from "../store/CartStore"; - -export const AddToCartButton = ({product}) => { - - const animationRef = useRef(); - const [hidden, setHidden] = useState(true); - - const floatStyle = { - - display: hidden ? "none" : "", - position: "absolute" - }; - - const floatGrowAnimation = { - - property: "transform", - fromValue: "translateY(0) scale(1)", - toValue: "translateY(-55px) scale(1.5)" - }; - - const colorAnimation = { - - property: "color", - fromValue: "green", - toValue: "green" - }; - - const mainAnimation = { - - duration: 1500, - iterations: "1", - fromTo: [ floatGrowAnimation, colorAnimation ], - easing: "cubic-bezier(0.25, 0.7, 0.25, 0.7)" - }; - - const handleAddToCart = async product => { - - setHidden(false); - await animationRef.current.animation.play(); - setHidden(true); - addToCart(product); - } - - return ( - - handleAddToCart(product)}> -   - Add to Cart - - - - - - ); -} \ No newline at end of file diff --git a/03_source/mobile/src/pages/TestComponents/Breadcrumbs.jsx b/03_source/mobile/src/pages/TestComponents/Breadcrumbs.jsx deleted file mode 100644 index a5b3263..0000000 --- a/03_source/mobile/src/pages/TestComponents/Breadcrumbs.jsx +++ /dev/null @@ -1,23 +0,0 @@ -import { IonBreadcrumb, IonBreadcrumbs, IonIcon } from "@ionic/react"; -import { fastFoodOutline } from "ionicons/icons"; -import { useState } from "react"; - -export const Breadcrumbs = () => { - - const [maxItems, setMaxItems] = useState(2); - - const handleClick = () => { - - setMaxItems(undefined); - } - - return ( - - - Page 1 - Page 2 - Page 3 - Page 4 - - ); -} \ No newline at end of file diff --git a/03_source/mobile/src/pages/TestComponents/CartModal.jsx b/03_source/mobile/src/pages/TestComponents/CartModal.jsx deleted file mode 100644 index ce7c030..0000000 --- a/03_source/mobile/src/pages/TestComponents/CartModal.jsx +++ /dev/null @@ -1,82 +0,0 @@ -import { useStoreState } from "pullstate"; -import { useEffect, useState } from "react"; -import { CartStore } from "../store"; -import { addToCart } from "../store/CartStore"; -import { getCart } from "../store/Selectors"; - -const { IonPage, IonHeader, IonToolbar, IonTitle, IonButtons, IonIcon, IonContent, IonGrid, IonRow, IonItem, IonLabel, IonText, IonThumbnail, IonFooter, IonCol, IonButton, IonItemSliding, IonItemOptions, IonItemOption } = require("@ionic/react"); -const { close } = require("ionicons/icons"); - -export const CartModal = props => { - - const cart = useStoreState(CartStore, getCart); - const [totalPrice, setTotalPrice] = useState(0); - - useEffect(() => { - - let total = 0; - cart.forEach(item => total += parseInt(item.price.replace("£", ""))); - setTotalPrice(total); - }, [cart]); - - return ( - - - - Cart - - - - - - - - - - - -

{cart.length} products in your cart

- -

Review products and checkout

- - - - - - - {cart.map((item, index) => ( - - - - item - - -

{item.title}

-

{item.price}

- - - - - addToCart(item)}> - Remove - - - - ))} - - - - - -

Total

- - - -

£{totalPrice.toFixed(2)}

- - - Checkout → - - - ); -} \ No newline at end of file diff --git a/03_source/mobile/src/pages/TestComponents/FilterModal.jsx b/03_source/mobile/src/pages/TestComponents/FilterModal.jsx deleted file mode 100644 index 067aac7..0000000 --- a/03_source/mobile/src/pages/TestComponents/FilterModal.jsx +++ /dev/null @@ -1,36 +0,0 @@ -import { IonButton, IonCol, IonContent, IonGrid, IonHeader, IonRow, IonTitle, IonToolbar } from "@ionic/react"; - -export const FilterModal = ({productsRef, filterCriteria, setFilterCriteria, dismiss, filters}) => { - - const filterProducts = async filter => { - - await productsRef.current.classList.add("animate__fadeOutLeft"); - - setTimeout(() => { - productsRef.current.classList.remove("animate__fadeOutLeft"); - productsRef.current.classList.add("animate__fadeInRight"); - setFilterCriteria(filter); - }, 500); - dismiss(); - } - - return ( - - - - - Filter - - - - - {filters.map(f => ( - - filterProducts(f)}>{f} - - ))} - - - - ); - } \ No newline at end of file diff --git a/03_source/mobile/src/pages/TestComponents/ProductModal.css b/03_source/mobile/src/pages/TestComponents/ProductModal.css deleted file mode 100644 index 8884088..0000000 --- a/03_source/mobile/src/pages/TestComponents/ProductModal.css +++ /dev/null @@ -1,88 +0,0 @@ -ion-card { - margin: 0; - /* margin-top: var(--ion-safe-area-top); */ - z-index: -1; - - border-radius: 0px; - - background-size: cover; - background-position: center; - background-repeat: no-repeat; - box-shadow: none; - aspect-ratio: 1 / 1; -} - -@supports not (aspect-ratio: 1 / 1) { - ion-card::before { - float: left; - padding-top: 100%; - content: ''; - } - - ion-card::after { - display: block; - content: ''; - clear: both; - } -} - -ion-card-header { - position: absolute; - bottom: 0; - width: 100%; - - /* background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%); */ - background: rgba(0, 0, 0, 0.5) -} - -ion-card-title, -ion-card-subtitle { - color: white; -} - -ion-card-header ion-card-title { - - margin: 0 0 6px 0; - font-size: 22px; -} - -ion-card-header ion-card-subtitle { - - text-transform: none; - font-weight: 500; - font-size: 16px; -} - -ion-card-content { - height: calc(60px + var(--ion-safe-area-top)); - background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%); -} - -#close-button { - position: fixed; - - top: max(var(--ion-safe-area-top), 16px); - right: 8px; -} - -#fave-button { - position: fixed; - - top: max(var(--ion-safe-area-top), 16px); - left: 8px; -} - -#product-view-buttons { - - z-index: 10; - background: linear-gradient(360deg, rgba(0, 0, 0, 0) 0%, rgba(82, 82, 82, 0.9) 100%) !important; - position: absolute; - width: 100%; - height: 4rem; -} - -.sticky-bottom { - - position: fixed; - bottom: 0; -} \ No newline at end of file diff --git a/03_source/mobile/src/pages/TestComponents/ProductModal.jsx b/03_source/mobile/src/pages/TestComponents/ProductModal.jsx deleted file mode 100644 index a519b87..0000000 --- a/03_source/mobile/src/pages/TestComponents/ProductModal.jsx +++ /dev/null @@ -1,76 +0,0 @@ -import { IonButton, IonButtons, IonCard, IonCardHeader, IonCardSubtitle, IonCardTitle, IonCol, IonContent, IonFooter, IonIcon, IonLabel, IonNote, IonRow, IonText, IonToolbar } from "@ionic/react"; -import { closeCircle, heart, heartOutline } from "ionicons/icons"; -import { useStoreState } from "pullstate"; -import { useRef } from "react"; - -import { checkFavourites } from "../store/Selectors"; -import { addToFavourites } from "../store/FavouritesStore"; -import { FavouritesStore } from "../store"; - -import "./ProductModal.css"; -import { ProductReviews } from "./ProductReviews"; -import { ProductSpecificationsAccordion } from "./ProductSpecificationsAccordion"; -import { AddToCartButton } from "./AddToCartButton"; - -export const ProductModal = props => { - - const { dismiss, category = false, product } = props; - const isFavourite = useStoreState(FavouritesStore, checkFavourites(product)); - const contentRef = useRef(null); - - return ( - <> - - - - - - - addToFavourites(product, category)} id="fave-button"> - - - - - - - {product.title} - {product.price} - - - -
- - - - - shop - {category ? category : "Favourite"} - - - - - -

Product Description

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam elit felis, molestie id venenatis at, commodo ac tortor. Pellentesque tempus aliquet purus, sed vulputate elit tempus ut. - -

Product Specifications

- -
- - - - - - - {product.price} - - - - - - - - - - ); -} \ No newline at end of file diff --git a/03_source/mobile/src/pages/TestComponents/ProductReviews.jsx b/03_source/mobile/src/pages/TestComponents/ProductReviews.jsx deleted file mode 100644 index d564773..0000000 --- a/03_source/mobile/src/pages/TestComponents/ProductReviews.jsx +++ /dev/null @@ -1,23 +0,0 @@ -import { IonCol, IonIcon, IonNote } from "@ionic/react"; -import { star } from "ionicons/icons"; -import { useEffect, useState } from "react"; -import { randomCount } from "../utils"; - -export const ProductReviews = () => { - - // This count could come from the product (if real data was fed) - const [reviewCount, setReviewCount] = useState(0); - - useEffect(() => { - - setReviewCount(randomCount()); - }, []); - - return ( - - -    - {reviewCount} review{reviewCount > 1 && "s"} - - ); -} \ No newline at end of file diff --git a/03_source/mobile/src/pages/TestComponents/ProductSpecificationsAccordion.jsx b/03_source/mobile/src/pages/TestComponents/ProductSpecificationsAccordion.jsx deleted file mode 100644 index 77ede79..0000000 --- a/03_source/mobile/src/pages/TestComponents/ProductSpecificationsAccordion.jsx +++ /dev/null @@ -1,58 +0,0 @@ -import { IonAccordion, IonAccordionGroup, IonItem, IonLabel, IonList, IonNote } from "@ionic/react"; -import { useRef } from "react"; -import { productSpecs } from "../utils"; - -export const ProductSpecificationsAccordion = ({type, contentRef}) => { - - const accordionGroupRef = useRef(null); - - const log = () => { - - const selectedAccordion = accordionGroupRef.current.value; - - if (selectedAccordion) { - - setTimeout(() => contentRef.current.scrollToBottom(400), 200); - } - } - - return ( - - {Object.keys(productSpecs).map((spec, index) => { - - const {header, options, wrapText = false, noteColor = false} = productSpecs[spec]; - - return ( - - - - {header} - - - - - {options.map((option, index2) => { - - const {label, value} = option; - - return ( - - - -

{label}

- - - - {noteColor ? (value ? "In stock" : "Out of stock") : value} - - - - ); - })} - - - ); - })} - - ); -} \ No newline at end of file