setOpen(!open)}>
-
+
setOpen(!open)}
+ >
+
{title}
-
diff --git a/src/components/AccountNav/AccountNav.js b/src/components/AccountNav/AccountNav.js
index 5e5f60e..3c42aa4 100644
--- a/src/components/AccountNav/AccountNav.js
+++ b/src/components/AccountNav/AccountNav.js
@@ -3,20 +3,49 @@ import React from 'react';
import * as styles from './AccountNav.module.css';
const AccountNav = (props) => {
-
const handleLogout = () => {
window.localStorage.removeItem('key');
navigate('/');
- }
+ };
return (
);
diff --git a/src/components/ActionCard/ActionCard.js b/src/components/ActionCard/ActionCard.js
index 55c8354..49b2fb6 100644
--- a/src/components/ActionCard/ActionCard.js
+++ b/src/components/ActionCard/ActionCard.js
@@ -5,11 +5,15 @@ import * as styles from './ActionCard.module.css';
import Icon from '../Icons/Icon';
const ActionCard = (props) => {
- const { title, icon, subtitle, link, size} = props;
+ const { title, icon, subtitle, link, size } = props;
return (
-
+
-
{icon}
+
diff --git a/src/components/AccountLayout/AccountLayout.js b/src/components/AccountLayout/AccountLayout.js
index c849f50..409b26e 100644
--- a/src/components/AccountLayout/AccountLayout.js
+++ b/src/components/AccountLayout/AccountLayout.js
@@ -5,15 +5,13 @@ import Container from '../Container';
import * as styles from './AccountLayout.module.css';
-const AccountLayout = ({children}) => {
+const AccountLayout = ({ children }) => {
return (
{children}
-
- {children}
-
+ {children}
- Orders
- Addresses
- Settings
- Recently Viewed
- Logout
+
+ Orders
+
+
+ Addresses
+
+
+ Settings
+
+
+ Recently Viewed
+
+
+ Logout
+
navigate(link)}>
+
navigate(link)}
+ >
-
+
{title}
diff --git a/src/components/AddNotification/AddNotification.js b/src/components/AddNotification/AddNotification.js
index f915eb4..170fd51 100644
--- a/src/components/AddNotification/AddNotification.js
+++ b/src/components/AddNotification/AddNotification.js
@@ -1,5 +1,5 @@
import { Link, navigate } from 'gatsby';
-import React, {useContext} from 'react';
+import React, { useContext } from 'react';
import AddItemNotificationContext from '../../context/AddItemNotificationProvider';
@@ -9,10 +9,9 @@ import Icon from '../Icons/Icon';
import * as styles from './AddNotification.module.css';
const AddNotification = (props) => {
-
const sampleCartItem = {
image: '/products/pdp1.jpeg',
- alt: '',
+ alt: '',
name: 'Lambswool Crew Neck Jumper',
price: 220,
color: 'Anthracite Melange',
@@ -23,7 +22,11 @@ const AddNotification = (props) => {
const showNotif = ctxAddItemNotification.state?.open;
return (
-
+
-
+
continue shopping
diff --git a/src/components/AddressCard/AddressCard.js b/src/components/AddressCard/AddressCard.js
index f9e4356..0fc275e 100644
--- a/src/components/AddressCard/AddressCard.js
+++ b/src/components/AddressCard/AddressCard.js
@@ -2,7 +2,16 @@ import React from 'react';
import * as styles from './AddressCard.module.css';
const AddressCard = (props) => {
- const {name, address, state, postal, country, company, showForm, showDeleteForm} = props;
+ const {
+ name,
+ address,
+ state,
+ postal,
+ country,
+ company,
+ showForm,
+ showDeleteForm,
+ } = props;
return (
@@ -12,8 +21,12 @@ const AddressCard = (props) => {
{`${state} ${postal}`}
{country}
);
diff --git a/src/components/AddressForm/AddressForm.js b/src/components/AddressForm/AddressForm.js
index 0caff18..31bd5ab 100644
--- a/src/components/AddressForm/AddressForm.js
+++ b/src/components/AddressForm/AddressForm.js
@@ -5,9 +5,8 @@ import Button from '../Button';
import FormInputField from '../FormInputField';
const AddressForm = (props) => {
-
const { closeForm } = props;
-
+
const initialState = {
name: '',
address: '',
@@ -29,74 +28,82 @@ const AddressForm = (props) => {
const [form, setForm] = useState(initialState);
const [errorForm, setErrorForm] = useState(errorState);
- const handleChange = (id ,e) => {
+ const handleChange = (id, e) => {
const tempForm = { ...form, [id]: e };
setForm(tempForm);
- }
+ };
const handleSubmit = (e) => {
e.preventDefault();
setErrorForm(errorState);
closeForm();
- }
+ };
return (
- Edit
- Remove
+
+ Edit
+
+
+ Remove
+
-
);
};
diff --git a/src/components/AdjustItem/AdjustItem.js b/src/components/AdjustItem/AdjustItem.js
index 2137102..e8f798e 100644
--- a/src/components/AdjustItem/AdjustItem.js
+++ b/src/components/AdjustItem/AdjustItem.js
@@ -1,30 +1,46 @@
-import React, {useState} from 'react';
+import React, { useState } from 'react';
import Icon from '../Icons/Icon';
import * as styles from './AdjustItem.module.css';
const AdjustItem = (props) => {
-
- const {isTransparent} = props;
+ const { isTransparent } = props;
const [qty, setQty] = useState(1);
const handleOnChange = (e) => {
const num = parseInt(e.target.value);
setQty(num);
- }
-
+ };
+
return (
-
-
{
- if(qty <= 1) return;
- setQty(qty-1);
- }}>
+
+
{
+ if (qty <= 1) return;
+ setQty(qty - 1);
+ }}
+ >
- handleOnChange(e)} type={'number'} value={qty}>
+ handleOnChange(e)}
+ type={'number'}
+ value={qty}
+ >
- setQty(qty+1)} className={styles.iconContainer}>
+
diff --git a/src/components/Attribute/Attribute.js b/src/components/Attribute/Attribute.js
index 4892b3f..7abf71f 100644
--- a/src/components/Attribute/Attribute.js
+++ b/src/components/Attribute/Attribute.js
@@ -4,8 +4,7 @@ import Icon from '../Icons/Icon';
import * as styles from './Attribute.module.css';
const Attribute = (props) => {
-
- const {icon, title, subtitle} = props;
+ const { icon, title, subtitle } = props;
return (
setQty(qty + 1)}
+ className={styles.iconContainer}
+ >
diff --git a/src/components/AttributeGrid/AttributeGrid.js b/src/components/AttributeGrid/AttributeGrid.js
index 14317b9..0a6c5e9 100644
--- a/src/components/AttributeGrid/AttributeGrid.js
+++ b/src/components/AttributeGrid/AttributeGrid.js
@@ -7,9 +7,21 @@ import * as styles from './AttributeGrid.module.css';
const AttributeGrid = (props) => {
return (
-
);
};
diff --git a/src/components/Banner/Banner.js b/src/components/Banner/Banner.js
index fdfa03f..17201a3 100644
--- a/src/components/Banner/Banner.js
+++ b/src/components/Banner/Banner.js
@@ -2,27 +2,40 @@ import React from 'react';
import * as styles from './Banner.module.css';
const Banner = (props) => {
-
- const {maxWidth, name, subtitle, color, bgImage, height, bgColor='var(--standard-light-grey)', hideSubtitleOnMobile = true} = props;
+ const {
+ maxWidth,
+ name,
+ subtitle,
+ color,
+ bgImage,
+ height,
+ bgColor = 'var(--standard-light-grey)',
+ hideSubtitleOnMobile = true,
+ } = props;
const customStyling = {
backgroundColor: bgColor,
backgroundImage: bgImage !== undefined ? `url(${bgImage})` : 'none',
height: height,
color: color,
- }
+ };
return (
-
);
diff --git a/src/components/BlogPreview/BlogPreview.js b/src/components/BlogPreview/BlogPreview.js
index 7e50498..7f2191a 100644
--- a/src/components/BlogPreview/BlogPreview.js
+++ b/src/components/BlogPreview/BlogPreview.js
@@ -3,25 +3,26 @@ import { Link, navigate } from 'gatsby';
import * as styles from './BlogPreview.module.css';
const BlogPreview = (props) => {
- const {image, altImage, title, link, category, showExcerpt, excerpt} = props;
+ const { image, altImage, title, link, category, showExcerpt, excerpt } =
+ props;
- const handleClick = () => { navigate(link); };
+ const handleClick = () => {
+ navigate(link);
+ };
return (
+
);
};
-export default Banner;
\ No newline at end of file
+export default Banner;
diff --git a/src/components/Blog/Blog.js b/src/components/Blog/Blog.js
index f65e46a..7789647 100644
--- a/src/components/Blog/Blog.js
+++ b/src/components/Blog/Blog.js
@@ -7,7 +7,7 @@ import Icon from '../Icons/Icon';
import * as styles from './Blog.module.css';
const Blog = (props) => {
- const {title, category, image, alt, children } = props;
+ const { title, category, image, alt, children } = props;
return (
{name}
- { subtitle && - - {subtitle} - } + {subtitle && ( + + {subtitle} + + )}
{category}
@@ -15,9 +15,7 @@ const Blog = (props) => {
-
- {children}
-
+ {children}
Share with:
-
+
@@ -31,7 +29,9 @@ const Blog = (props) => {
-
- {category}
-
+ {category}
+
);
};
diff --git a/src/components/BlogPreviewGrid/BlogPreviewGrid.js b/src/components/BlogPreviewGrid/BlogPreviewGrid.js
index d46b5d4..4f55b32 100644
--- a/src/components/BlogPreviewGrid/BlogPreviewGrid.js
+++ b/src/components/BlogPreviewGrid/BlogPreviewGrid.js
@@ -7,21 +7,22 @@ const BlogPreviewGrid = (props) => {
const { data, hideReadMoreOnWeb, showExcerpt } = props;
return (
{title}
- {showExcerpt && -- {excerpt} -
- } ++ {title} +
+ {showExcerpt &&{excerpt}
}
- {data && data.map((blog, index) => {
- return(
-
);
};
diff --git a/src/components/BoxOption/BoxOption.js b/src/components/BoxOption/BoxOption.js
index 7242b4f..18c278e 100644
--- a/src/components/BoxOption/BoxOption.js
+++ b/src/components/BoxOption/BoxOption.js
@@ -4,7 +4,11 @@ import * as styles from './BoxOption.module.css';
const BoxOption = (props) => {
const { data, setActive, isActive } = props;
return (
- setActive(data)} role={'presentation'}>
+
setActive(data)}
+ role={'presentation'}
+ >
{data}
);
diff --git a/src/components/Brand/Brand.js b/src/components/Brand/Brand.js
index ec1a70f..da1aac0 100644
--- a/src/components/Brand/Brand.js
+++ b/src/components/Brand/Brand.js
@@ -4,17 +4,43 @@ import { navigate } from 'gatsby';
import * as styles from './Brand.module.css';
const Brand = (props) => {
-
return (
- navigate('/')}>
+
navigate('/')}
+ >
{/*
);
diff --git a/src/components/Breadcrumbs/BreadCrumbs.js b/src/components/Breadcrumbs/BreadCrumbs.js
index e9dee6a..b0c06e7 100644
--- a/src/components/Breadcrumbs/BreadCrumbs.js
+++ b/src/components/Breadcrumbs/BreadCrumbs.js
@@ -4,37 +4,40 @@ import * as styles from './BreadCrumbs.module.css';
import Icon from '../Icons/Icon';
const Breadcrumbs = ({ crumbs }) => {
- let crumbsOutput = crumbs;
- if (crumbsOutput && typeof crumbsOutput !== 'object') {
- if (crumbsOutput.indexOf('>') > -1) {
- crumbsOutput = crumbsOutput.split('>');
- } else {
- crumbsOutput = [crumbsOutput];
- }
+ let crumbsOutput = crumbs;
+ if (crumbsOutput && typeof crumbsOutput !== 'object') {
+ if (crumbsOutput.indexOf('>') > -1) {
+ crumbsOutput = crumbsOutput.split('>');
+ } else {
+ crumbsOutput = [crumbsOutput];
}
+ }
- return (
- SYDNEY
*/} -
- {crumbsOutput && crumbsOutput.map((crumb, crumbIndex) => (
-
- {crumbIndex > 0 && (
-
-
- )
-}
+ return (
+
+ {crumbsOutput &&
+ crumbsOutput.map((crumb, crumbIndex) => (
+
+ {crumbIndex > 0 && (
+
+
+ );
+};
-export default Breadcrumbs
\ No newline at end of file
+export default Breadcrumbs;
diff --git a/src/components/Button/Button.js b/src/components/Button/Button.js
index c108b02..683b91d 100644
--- a/src/components/Button/Button.js
+++ b/src/components/Button/Button.js
@@ -1,57 +1,82 @@
-import React from "react"
-import { Link } from "gatsby"
+import React from 'react';
+import { Link } from 'gatsby';
-import * as styles from './Button.module.css'
+import * as styles from './Button.module.css';
-const Button = ({ children, href, target, level, type, size, disabled, onClick, className, flat, link ,fullWidth, theme }) => {
- const classes = level ? [styles.button] : [styles.link];
+const Button = ({
+ children,
+ href,
+ target,
+ level,
+ type,
+ size,
+ disabled,
+ onClick,
+ className,
+ flat,
+ link,
+ fullWidth,
+ theme,
+}) => {
+ const classes = level ? [styles.button] : [styles.link];
- if (level in styles) {
- classes.push(styles[level])
- }
- if (size in styles) {
- classes.push(styles[size])
- }
- if (theme in styles) {
- classes.push(styles[theme])
- }
+ if (level in styles) {
+ classes.push(styles[level]);
+ }
+ if (size in styles) {
+ classes.push(styles[size]);
+ }
+ if (theme in styles) {
+ classes.push(styles[theme]);
+ }
- if (disabled) {
- classes.push(styles.disabled)
- }
- if (flat) {
- classes.push(styles.flat)
- }
- if (link) {
- classes.push(styles.link)
- }
- if (fullWidth) {
- classes.push(styles.fullWidth)
- }
- if (className) {
- classes.push(className)
- }
-
- const classOutput = classes.join(' ');
- return (
- <>
- {(href && target) && (
-
- {children}
-
- )}
- {(href && !target) && (
-
- {children}
-
- )}
- {!href && (
-
- )}
-
- )
-}
+ if (disabled) {
+ classes.push(styles.disabled);
+ }
+ if (flat) {
+ classes.push(styles.flat);
+ }
+ if (link) {
+ classes.push(styles.link);
+ }
+ if (fullWidth) {
+ classes.push(styles.fullWidth);
+ }
+ if (className) {
+ classes.push(className);
+ }
-export default Button
\ No newline at end of file
+ const classOutput = classes.join(' ');
+ return (
+ <>
+ {href && target && (
+
+ {children}
+
+ )}
+ {href && !target && (
+
+ {children}
+
+ )}
+ {!href && (
+
+ )}
+
+ );
+};
+
+export default Button;
diff --git a/src/components/CardController/CardController.js b/src/components/CardController/CardController.js
index 3baa2ae..199de83 100644
--- a/src/components/CardController/CardController.js
+++ b/src/components/CardController/CardController.js
@@ -1,4 +1,4 @@
-import React, {useState} from 'react';
+import React, { useState } from 'react';
import Container from '../Container';
import Checkbox from '../Checkbox';
@@ -8,60 +8,81 @@ import Drawer from '../Drawer';
import Icon from '../Icons/Icon';
const CardController = (props) => {
-
- const {filters, visible, closeFilter} = props;
+ const { filters, visible, closeFilter } = props;
const [category, setCategory] = useState();
const [filterState, setFilterState] = useState(filters);
const filterTick = (e, categoryIndex, labelIndex) => {
const filterStateCopy = [...filterState];
filterStateCopy[categoryIndex].items[labelIndex].value = e.target.checked;
- setFilterState(filterStateCopy);
-
- }
+ setFilterState(filterStateCopy);
+ };
const resetFilter = () => {
const filterStateCopy = [...filterState];
- for(let x = 0; x < filterStateCopy.length; x++) {
- for(let y = 0; y < filterStateCopy[x].items.length; y++) {
+ for (let x = 0; x < filterStateCopy.length; x++) {
+ for (let y = 0; y < filterStateCopy[x].items.length; y++) {
filterStateCopy[x].items[y].value = false;
}
}
setFilterState(filterStateCopy);
- }
+ };
return (
-
+
- {filterState && filterState.map((filter, categoryIndex) => {
- // if number of filter per category is less than 4 maintain single layout
- const colNum = filter.items.length >= 4 ? 2 : 1;
- return(
-
- {filter.category}
-
+ );
+ })}
+
- {filter.items && filter.items.map((item, itemIndex) =>
- filterTick(e,categoryIndex,itemIndex)}
- label={item.name}
- value={item.value}
- id={item.name}
- name={item.name}
- isChecked={item.value}
- />
- )}
+ {filterState &&
+ filterState.map((filter, categoryIndex) => {
+ // if number of filter per category is less than 4 maintain single layout
+ const colNum = filter.items.length >= 4 ? 2 : 1;
+ return (
+
- )
- })}
-
+ {filter.category}
+
-
+ {filter.items &&
+ filter.items.map((item, itemIndex) => (
+
+ filterTick(e, categoryIndex, itemIndex)
+ }
+ label={item.name}
+ value={item.value}
+ id={item.name}
+ name={item.name}
+ isChecked={item.value}
+ />
+ ))}
+
-
-
+
+
@@ -69,51 +90,81 @@ const CardController = (props) => {
+ )}
- {category !== undefined &&
+ {category !== undefined && (
Filters
- {category === undefined && + {category === undefined && (
- {filterState?.map((filterItem, categoryIndex) => {
- return(
-
- }
+ {filterState?.map((filterItem, categoryIndex) => {
+ return (
+ setCategory({...filterItem, categoryIndex: categoryIndex})}>
- {filterItem.category}
-
- )
- })}
-
+ setCategory({
+ ...filterItem,
+ categoryIndex: categoryIndex,
+ })
+ }
+ >
+
+ {filterItem.category}
+
+
+ );
+ })}
+
-
setCategory(undefined)}>
+ filterTick(e,category.categoryIndex,itemIndex)}
- label={item.name}
- value={item.value}
- id={item.name}
- name={item.name}
- isChecked={item.value}
- />
- )
+ key={itemIndex}
+ action={(e) =>
+ filterTick(e, category.categoryIndex, itemIndex)
+ }
+ label={item.name}
+ value={item.value}
+ id={item.name}
+ name={item.name}
+ isChecked={item.value}
+ />
+ );
})}
- }
+ )}
setCategory(undefined)}
+ >
{category.items.map((item, itemIndex) => {
- return(
+ return (
- {category === undefined && }
- {category !== undefined &&
+ {category === undefined && (
+
+ )}
+ {category !== undefined && (
diff --git a/src/components/CartItem/CartItem.js b/src/components/CartItem/CartItem.js
index d1e6724..d074903 100644
--- a/src/components/CartItem/CartItem.js
+++ b/src/components/CartItem/CartItem.js
@@ -10,13 +10,16 @@ import * as styles from './CartItem.module.css';
import { navigate } from 'gatsby';
const CartItem = (props) => {
-
const [showQuickView, setShowQuickView] = useState(false);
- const {image, alt, color, name, size, price} = props;
+ const { image, alt, color, name, size, price } = props;
return (
-
-
resetFilter()}>
+
+
- }
+ )}
resetFilter()}
+ >
clear filters
-
navigate('/product/sample')}>
+
setShowQuickView(false)}>
- setShowQuickView(false)}/>
+ setShowQuickView(false)} />
);
diff --git a/src/components/Checkbox/Checkbox.js b/src/components/Checkbox/Checkbox.js
index c19a4a2..8265d99 100644
--- a/src/components/Checkbox/Checkbox.js
+++ b/src/components/Checkbox/Checkbox.js
@@ -2,25 +2,33 @@ import React from 'react';
import * as styles from './Checkbox.module.css';
const Checkbox = (props) => {
- const { value, label, id, name, action, isChecked, size='md' } = props;
+ const { value, label, id, name, action, isChecked, size = 'md' } = props;
return (
- navigate('/product/sample')}
+ >
@@ -25,12 +28,16 @@ const CartItem = (props) => {
Color: {color}
Size: {size}
- setShowQuickView(true)}>
+
setShowQuickView(true)}
+ >
Edit
-
-
- action(e)}
- checked={isChecked}
- />
-
-
-
-
-
+
+
+ );
};
export default Checkbox;
diff --git a/src/components/Chip/Chip.js b/src/components/Chip/Chip.js
index b338aa9..62c4848 100644
--- a/src/components/Chip/Chip.js
+++ b/src/components/Chip/Chip.js
@@ -4,7 +4,7 @@ import * as styles from './Chip.module.css';
import Icon from '../Icons/Icon';
const Chip = (props) => {
- const {name, close} = props;
+ const { name, close } = props;
return (
+ action(e)}
+ checked={isChecked}
+ />
+
+
+
- )
+
+
{name}
diff --git a/src/components/Contact/Contact.js b/src/components/Contact/Contact.js
index c373ab0..2634adf 100644
--- a/src/components/Contact/Contact.js
+++ b/src/components/Contact/Contact.js
@@ -6,31 +6,33 @@ import FormInputField from '../FormInputField/FormInputField';
import * as styles from './Contact.module.css';
const Contact = (props) => {
-
const initialState = {
name: '',
phone: '',
email: '',
comment: '',
- }
+ };
const [contactForm, setContactForm] = useState(initialState);
- const handleChange = (id ,e) => {
+ const handleChange = (id, e) => {
const tempForm = { ...contactForm, [id]: e };
setContactForm(tempForm);
- }
+ };
const handleSubmit = (e) => {
e.preventDefault();
setContactForm(initialState);
- }
+ };
return (
@@ -42,13 +44,16 @@ const Contact = (props) => {
Email
-
Send Us A Message
-Our Customer Service team are here for all enquiries Monday to Friday, 9am - 5pm AEDT (Australian Eastern Daylight Savings Time).
++ Our Customer Service team are here for all enquiries Monday to Friday, + 9am - 5pm AEDT (Australian Eastern Daylight Savings Time). +
We look forward to hearing from you.
You can email our Customer Service team at customerservice@example.com or via the contact form below:
++ You can email our Customer Service team at customerservice@example.com + or via the contact form below: +
diff --git a/src/components/Container/Container.js b/src/components/Container/Container.js
index ad7b4fc..05f80a9 100644
--- a/src/components/Container/Container.js
+++ b/src/components/Container/Container.js
@@ -1,17 +1,19 @@
-import React from 'react'
+import React from 'react';
-import * as styles from './Container.module.css'
+import * as styles from './Container.module.css';
const Container = ({ children, size, spacing, fullMobile }) => {
return (
-
+ `}
+ >
{children}
- )
-}
+ );
+};
-export default Container
+export default Container;
diff --git a/src/components/CurrencyFormatter/CurrencyFormatter.js b/src/components/CurrencyFormatter/CurrencyFormatter.js
index 89daee9..7a75383 100644
--- a/src/components/CurrencyFormatter/CurrencyFormatter.js
+++ b/src/components/CurrencyFormatter/CurrencyFormatter.js
@@ -1,29 +1,39 @@
-import React from "react"
-import { isNumeric } from "../../helpers/general";
+import React from 'react';
+import { isNumeric } from '../../helpers/general';
// import * as styles from './CurrencyFormatter.module.css';
-const CurrencyFormatter = ({ amount, currency = 'USD', appendZero = false, useDollar = false }) => {
-
- let displayAmount = (typeof amount !== 'number' && parseFloat(amount?.replace('$', ''))) || amount;
+const CurrencyFormatter = ({
+ amount,
+ currency = 'USD',
+ appendZero = false,
+ useDollar = false,
+}) => {
+ let displayAmount =
+ (typeof amount !== 'number' && parseFloat(amount?.replace('$', ''))) ||
+ amount;
/* Set language display */
const languageCode =
typeof window !== 'undefined'
? window.navigator.language || 'en-AU'
: 'en-AU';
-
+
/* Format and return */
// isolate currency
const formatObject = new Intl.NumberFormat(languageCode, {
style: 'currency',
- currency
+ currency,
});
let symbol = '$';
let formattedPrice = formatObject.format(displayAmount);
if ('formatToParts' in formatObject) {
const formattedPriceParts = formatObject.formatToParts(displayAmount);
- if(useDollar === false) symbol = formattedPriceParts[0].value;
- const currencyValue = formattedPriceParts.find(obj => obj.type === 'currency');
- const decimalValue = formattedPriceParts.find(obj => obj.type === 'fraction');
+ if (useDollar === false) symbol = formattedPriceParts[0].value;
+ const currencyValue = formattedPriceParts.find(
+ (obj) => obj.type === 'currency'
+ );
+ const decimalValue = formattedPriceParts.find(
+ (obj) => obj.type === 'fraction'
+ );
formattedPrice = formattedPrice.replace(currencyValue.value, '');
if (decimalValue && decimalValue.value === '00' && !appendZero) {
formattedPrice = formattedPrice.replace(`.${decimalValue.value}`, '');
@@ -33,13 +43,14 @@ const CurrencyFormatter = ({ amount, currency = 'USD', appendZero = false, useD
formattedPrice = amount;
}
- const priceComponent =
+ const priceComponent = (
<>
{symbol}
{formattedPrice}
- ;
-
- return isNumeric(amount) ? priceComponent : 'No price available'
+
+ );
+
+ return isNumeric(amount) ? priceComponent : 'No price available';
};
-
-export default CurrencyFormatter;
\ No newline at end of file
+
+export default CurrencyFormatter;
diff --git a/src/components/Drawer/Drawer.js b/src/components/Drawer/Drawer.js
index 8af5c32..ae1daa5 100644
--- a/src/components/Drawer/Drawer.js
+++ b/src/components/Drawer/Drawer.js
@@ -4,38 +4,59 @@ import React, { useEffect } from 'react';
import Icon from '../Icons/Icon';
import * as styles from './Drawer.module.css';
-const Drawer = ({children, visible, close, top = '0px', isReverse = false, hideCross = false}) => {
-
+const Drawer = ({
+ children,
+ visible,
+ close,
+ top = '0px',
+ isReverse = false,
+ hideCross = false,
+}) => {
useEffect(() => {
window.addEventListener('keydown', escapeHandler);
return () => window.removeEventListener('keydown', escapeHandler);
}, []);
const escapeHandler = (e) => {
- if(e?.keyCode === undefined) return;
- if(e.keyCode === 27) close();
- }
+ if (e?.keyCode === undefined) return;
+ if (e.keyCode === 27) close();
+ };
+
+ const showStyle =
+ isReverse === true ? styles.showReverse : styles.showContent;
+ const hideStyle =
+ isReverse === true ? styles.hideReverse : styles.hideContent;
- const showStyle = isReverse === true ? styles.showReverse : styles.showContent;
- const hideStyle = isReverse === true ? styles.hideReverse: styles.hideContent;
-
return (
-
-
+
-
+
-
+
diff --git a/src/components/Dropdown/Dropdown.js b/src/components/Dropdown/Dropdown.js
index 24d3c1d..01c435d 100644
--- a/src/components/Dropdown/Dropdown.js
+++ b/src/components/Dropdown/Dropdown.js
@@ -3,17 +3,21 @@ import Icon from '../Icons/Icon';
import * as styles from './Dropdown.module.css';
const Dropdown = (props) => {
-
- const {label, optionList} = props;
+ const { label, optionList } = props;
return (
{children}
{label}
setShowQuickView(false)}>
- setShowQuickView(false)}/>
+ setShowQuickView(false)}
+ />
);
diff --git a/src/components/Footer/Footer.js b/src/components/Footer/Footer.js
index 7aba54d..6dcab2d 100644
--- a/src/components/Footer/Footer.js
+++ b/src/components/Footer/Footer.js
@@ -11,30 +11,33 @@ import Config from '../../config.json';
import * as styles from './Footer.module.css';
const Footer = (prop) => {
-
const [email, setEmail] = useState('');
const subscribeHandler = (e) => {
e.preventDefault();
setEmail('');
console.log('Subscribe this email: ', email);
- }
+ };
const handleSocialClick = (platform) => {
window.open(Config.social[platform]);
- }
+ };
const renderLinks = (linkCollection) => {
- return(
+ return (
+
+ {link.text}
+
+
+ );
+ })}
+
+ );
+ };
return (
{menu?.map((item, index) => {
- return(
+ return (
-
- {item.categoryLabel}
-
+ {item.categoryLabel}
- )
+ );
})}
-
{item.submenu.map((link, linkIndex) => {
- return(
-
- - - {link.menuLabel} - - ); + return ( +
- + + {link.menuLabel} + + + ); })}
diff --git a/src/components/FavoriteCard/FavoriteCard.js b/src/components/FavoriteCard/FavoriteCard.js
index 921f0d5..f4a3dcc 100644
--- a/src/components/FavoriteCard/FavoriteCard.js
+++ b/src/components/FavoriteCard/FavoriteCard.js
@@ -1,4 +1,4 @@
-import React, {useState} from 'react';
+import React, { useState } from 'react';
import Drawer from '../Drawer';
import QuickView from '../QuickView';
@@ -20,12 +20,19 @@ const FavoriteCard = (props) => {
- setShowQuickView(true)}>Edit
- Remove
+ setShowQuickView(true)}>
+ Edit
+
+
+ Remove
+
-
- {linkCollection.links.map((link, index) => {
- return(
- - {link.text} - ) - })} -
@@ -42,80 +45,140 @@ const Footer = (prop) => {
{Config.footerLinks.map((linkCollection, indexLink) => {
- return(
-
- {/* for web version */}
-
-
- {linkCollection.subTitle}
- {renderLinks(linkCollection)}
-
- {/* for mobile version */}
-
-
+ return (
+
- )
+ );
})}
+ {/* for web version */}
+
-
+
+ {linkCollection.subTitle}
+
+ {renderLinks(linkCollection)}
+
+ {/* for mobile version */}
+
+
{renderLinks(linkCollection)}
+
Newsletter
-
Get 15% off your first purchase! Plus, be the first to know about sales, new product launches and exclusive offers!
-
-
-
-
);
diff --git a/src/components/FormInputField/FormInputField.js b/src/components/FormInputField/FormInputField.js
index 0e52b68..9991d08 100644
--- a/src/components/FormInputField/FormInputField.js
+++ b/src/components/FormInputField/FormInputField.js
@@ -4,42 +4,47 @@ import Icon from '../Icons/Icon';
import * as styles from './FormInputField.module.css';
const FormInputField = React.forwardRef((props, ref) => {
- const { id,
- type = 'text',
- labelName,
- value,
- pattern,
- min,
- max,
- handleChange,
- placeholder,
- disabled,
- note,
- error,
- required,
- icon } = props;
+ const {
+ id,
+ type = 'text',
+ labelName,
+ value,
+ pattern,
+ min,
+ max,
+ handleChange,
+ placeholder,
+ disabled,
+ note,
+ error,
+ required,
+ icon,
+ } = props;
return (
-
-
-
-
-
+
- {Config.paymentOptions.amex && 
}
- {Config.paymentOptions.mastercard && 
}
- {Config.paymentOptions.visa && 
}
-
- {new Date().getFullYear()} (c) . Built by Powered by
+ }
- {Config.paymentOptions.mastercard && }
- {Config.paymentOptions.visa && }
-
+
+
+
+
+
-
+
+ {Config.paymentOptions.amex && (
+
+ )}
+ {Config.paymentOptions.mastercard && (
+
+ )}
+ {Config.paymentOptions.visa && (
+
+ )}
+
+ {new Date().getFullYear()} (c) . Built by{' '}
+ {' '}
+ Powered by{' '}
+
+
+ )}
+ {Config.paymentOptions.mastercard && (
+
+ )}
+ {Config.paymentOptions.visa && (
+
+ )}
- {labelName !== undefined &&
- }
- {((type === 'text') || (type === 'input')) && (
+ {labelName !== undefined && (
+
+ )}
+ {(type === 'text' || type === 'input') && (
handleChange(id, e.target.value)}
+ placeholder={placeholder}
+ className={`${styles.input} ${
+ icon ? styles.conditionalIconPadding : ''
+ } ${error && error ? styles.fieldRequired : ''}`}
+ onChange={(e) => handleChange(id, e.target.value)}
disabled={disabled}
ref={ref}
/>
)}
- {(type === 'number') && (
+ {type === 'number' && (
{
max={max}
value={value}
pattern={pattern}
- placeholder = {placeholder}
- className={`${styles.input} ${ icon ? styles.conditionalIconPadding : ''} ${error && error ? styles.fieldRequired : ''}`}
- onChange={e => handleChange(id, e.target.value)}
+ placeholder={placeholder}
+ className={`${styles.input} ${
+ icon ? styles.conditionalIconPadding : ''
+ } ${error && error ? styles.fieldRequired : ''}`}
+ onChange={(e) => handleChange(id, e.target.value)}
disabled={disabled}
ref={ref}
/>
)}
- {(type === 'password') && (
- handleChange(id, e.target.value)}
+ className={`${styles.input} ${
+ icon ? styles.conditionalIconPadding : ''
+ } ${error && error ? styles.fieldRequired : ''}`}
+ onChange={(e) => handleChange(id, e.target.value)}
disabled={disabled}
required={required}
/>
)}
- {(type === 'email') && (
- handleChange(id, e.target.value)}
+ placeholder={placeholder}
+ className={`${styles.input} ${
+ icon ? styles.conditionalIconPadding : ''
+ } ${error && error ? styles.fieldRequired : ''}`}
+ onChange={(e) => handleChange(id, e.target.value)}
disabled={disabled}
ref={ref}
/>
)}
- {(type === 'textarea') && (
+ {type === 'textarea' && (