@riosst100/pwa-marketplace 1.4.5 → 1.4.7

package/src/overwrites/venia-ui/lib/components/Footer/footer.js

@@ -0,0 +1,147 @@
+import React, { Fragment } from 'react';
+import { Facebook, Instagram, Twitter, Linkedin } from 'react-feather';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { Link } from 'react-router-dom';
+import { shape, string } from 'prop-types';
+import { useFooter } from '@magento/peregrine/lib/talons/Footer/useFooter';
+
+import Logo from '@magento/venia-ui/lib/components/Logo';
+import Newsletter from '@magento/venia-ui/lib/components/Newsletter';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import defaultClasses from './footer.module.css';
+import { DEFAULT_LINKS, LOREM_IPSUM } from './sampleData';
+import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
+import cn from 'classnames';
+import Divider from '@riosst100/pwa-marketplace/src/components/Divider';
+
+const Footer = props => {
+    const { links } = props;
+    const classes = useStyle(defaultClasses, props.classes);
+    const talonProps = useFooter();
+
+    const { copyrightText } = talonProps;
+    const { formatMessage } = useIntl();
+    const title = formatMessage({ id: 'logo.title', defaultMessage: 'Venia' });
+
+    const linkGroups = Array.from(links, ([groupKey, linkProps]) => {
+        const linkElements = Array.from(linkProps, ([text, pathInfo]) => {
+            let path = pathInfo;
+            let Component = Fragment;
+            if (pathInfo && typeof pathInfo === 'object') {
+                path = pathInfo.path;
+                Component = pathInfo.Component;
+            }
+
+            const itemKey = `text: ${text} path:${path}`;
+            const child = path ? (
+                <Link data-cy="Footer-link" className={classes.link} to={path}>
+                    <FormattedMessage id={text} defaultMessage={text} />
+                </Link>
+            ) : (
+                <span data-cy="Footer-label" className={classes.label}>
+                    <FormattedMessage id={text} defaultMessage={text} />
+                </span>
+            );
+
+            return (
+                <Component key={itemKey}>
+                    <li className={classes.linkItem}>{child}</li>
+                </Component>
+            );
+        });
+
+        return (
+            <ul key={groupKey} className={classes.linkGroup}>
+                {linkElements}
+            </ul>
+        );
+    });
+
+    return (
+        <footer
+            data-cy="Footer-root"
+            className={cn(
+                classes.root,
+                '!pt-[50px] !px-0'
+            )}
+        >
+            <div className={classes.links}>
+                {linkGroups}
+                <div>
+                    <Newsletter />
+                </div>
+                <div className={classes.callout}>
+                    <span
+                        data-cy="Footer-calloutHeading"
+                        className={classes.calloutHeading}
+                    >
+                        Follow Us
+                    </span>
+                    <ul className={classes.socialLinks}>
+                        <li>
+                            <Link to="" className="bg-darkblue-900 rounded-full flex justify-center items-center w-[34px] h-[34px]">
+                                <Instagram size={15} color='#FFFFFF' />
+                            </Link>
+                        </li>
+                        <li>
+                            <Link to="" className="bg-darkblue-900 rounded-full flex justify-center items-center w-[34px] h-[34px]">
+                                <Facebook size={15} color='#FFFFFF' />
+                            </Link>
+                        </li>
+                        <li>
+                            <Link to="" className="bg-darkblue-900 rounded-full flex justify-center items-center w-[34px] h-[34px]">
+                                <Twitter size={15} color='#FFFFFF' />
+                            </Link>
+                        </li>
+                        <li>
+                            <Link to="" className="bg-darkblue-900 rounded-full flex justify-center items-center w-[34px] h-[34px]">
+                                <svg width="14" height="16" viewBox="0 0 14 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                    <path d="M12.9311 4.27218C12.8573 4.19836 12.7835 4.19836 12.6358 4.19836C12.4144 4.19836 12.2667 4.19836 12.0453 4.12454C10.7903 3.82925 9.90442 2.86957 9.8306 1.61459V1.31931C9.8306 1.09784 9.68295 0.950195 9.46148 0.950195H7.173C6.95154 0.950195 6.80389 1.09784 6.80389 1.31931V10.5471C6.80389 11.4329 6.06567 12.0973 5.25363 12.0973C4.73688 12.0973 4.29395 11.8758 3.99866 11.5067C3.4819 10.8423 3.62955 9.80883 4.29395 9.29208C4.58923 9.07061 4.88452 9.07061 5.4751 9.07061C5.54892 9.07061 5.69656 9.07061 5.77039 8.99679C5.84421 8.92297 5.91803 8.84915 5.91803 8.7015V6.26538C5.91803 6.11773 5.77039 5.89627 5.62274 5.89627C4.44159 5.74862 3.26044 6.04391 2.37457 6.78213C1.56253 7.52035 0.971956 8.55386 0.824312 9.80883C0.602846 11.2115 1.1196 12.6879 2.07929 13.6476C2.96515 14.6073 4.22012 15.0502 5.40128 15.0502C6.58243 15.0502 7.76358 14.6073 8.64944 13.7214C9.53531 12.8355 10.0521 11.6544 10.0521 10.3994V6.3392C10.9379 6.78213 11.8976 7.07742 12.8573 7.07742C13.0788 7.07742 13.2264 6.92978 13.2264 6.70831V4.49365C13.0788 4.41983 13.0049 4.34601 12.9311 4.27218Z" fill="white" />
+                                </svg>
+                            </Link>
+                        </li>
+                        <li>
+                            <Link to="" className="bg-darkblue-900 rounded-full flex justify-center items-center w-[34px] h-[34px]">
+                                <Linkedin size={15} color='#FFFFFF' />
+                            </Link>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div className="flex flex-row justify-between py-2 border-t border-gray-100">
+                <p className="text-colorDefault">{copyrightText || null}</p>
+                <ul className="flex flex-row gap-x-2.5">
+                    <li data-cy="Footer-terms" className={classes.terms}>
+                        <Link to="/" className="text-colorDefault underline">
+                            <FormattedMessage
+                                id={'footer.termsText'}
+                                defaultMessage={'Terms of Use'}
+                            />
+                        </Link>
+                    </li>
+                    <Divider className="w-[1px] !h-[20px]" />
+                    <li data-cy="Footer-privacy" className={classes.privacy}>
+                        <Link to="/" className="text-colorDefault underline">
+                            <FormattedMessage
+                                id={'footer.privacyText'}
+                                defaultMessage={'Privacy Policy'}
+                            />
+                        </Link>
+                    </li>
+                </ul>
+            </div>
+        </footer>
+    );
+};
+
+export default Footer;
+
+Footer.defaultProps = {
+    links: DEFAULT_LINKS
+};
+
+Footer.propTypes = {
+    classes: shape({
+        root: string
+    })
+};

package/src/overwrites/venia-ui/lib/components/Footer/footer.module.css

@@ -0,0 +1,70 @@
+.root {
+    composes: border-t from global;
+    composes: border-solid from global;
+    composes: border-gray-100 from global;
+    composes: gap-y-16 from global;
+    composes: grid from global;
+    composes: leading-normal from global;
+    composes: max-w-site from global;
+    composes: min-h-[15rem] from global;
+    composes: mx-auto from global;
+    composes: my-0 from global;
+    composes: pt-16 from global;
+    composes: text-sm from global;
+    composes: text-subtle from global;
+    composes: w-full from global;
+}
+
+.links {
+    composes: gap-x-md from global;
+    composes: gap-y-lg from global;
+    composes: grid from global;
+    composes: grid-cols-1 from global;
+    composes: md_grid-cols-1 from global;
+    composes: grid-flow-row-dense from global;
+    composes: lg_gap-x-sm from global;
+    composes: lg_gap-y-md from global;
+    composes: lg_grid-cols-4 from global;
+}
+
+.linkGroup {
+    /* composes: col-span-3 from global; */
+    composes: content-start from global;
+    composes: gap-xs from global;
+    composes: grid from global;
+
+    /* composes: xs_col-span-2 from global; */
+}
+
+.linkItem {
+    composes: first_text-colorDefault from global;
+    composes: first_font-semibold from global;
+}
+
+.callout {
+    /* composes: col-span-3 from global; */
+    composes: leading-normal from global;
+    composes: max-w-[20rem] from global;
+    composes: text-sm from global;
+    composes: flex from global;
+    composes: flex-col from global;
+    composes: gap-y-[15px] from global;
+}
+
+.calloutHeading {
+    composes: font-semibold from global;
+    composes: text-colorDefault from global;
+    composes: text-sm from global;
+}
+
+.calloutBody {
+    composes: mx-0 from global;
+    composes: my-xs from global;
+}
+
+.socialLinks {
+    composes: gap-xs from global;
+    composes: grid from global;
+    composes: grid-flow-col from global;
+    composes: justify-start from global;
+}

package/src/overwrites/venia-ui/lib/components/Footer/index.js

@@ -0,0 +1 @@
+export { default } from './footer';

package/src/overwrites/venia-ui/lib/components/Footer/sampleData.js

@@ -0,0 +1,48 @@
+import { ContactLink } from '@magento/venia-ui/lib/components/ContactPage';
+
+const accountLinks = new Map()
+    .set('Account', null)
+    .set('Sign In', '/')
+    .set('Register', '/')
+    .set('Tracking Order', '/')
+
+const getToKnowUsLinks = new Map()
+    .set('About TCG Collective', null)
+    .set('Career', '/')
+    .set('Contact Us', '/')
+    .set('Help Center', '/')
+    .set('Intelectual Property Claims', '/');
+
+const aboutLinks = new Map()
+    .set('About Us', '/about-us')
+    .set('Our Story', null)
+    .set('Email Signup', null)
+    .set('Give Back', null);
+
+const sitesLinks = new Map()
+    .set('Sites', null)
+    .set('International', '/')
+    .set('Singapore', '/')
+    .set('Malaysia', '/')
+    .set('Indonesia', '/')
+    .set('Thailand', '/')
+    .set('Philippines', '/')
+    .set('Vietnam', '/')
+
+const helpLinks = new Map()
+    .set('Help', null)
+    .set('Customer Service', '/customer-service')
+    .set('Contact Us', {
+        path: '/contact-us',
+        Component: ContactLink
+    })
+    .set('Order Status', null)
+    .set('Returns', null);
+
+export const DEFAULT_LINKS = new Map()
+    .set('us', getToKnowUsLinks)
+    .set('account', accountLinks)
+    .set('sites', sitesLinks);
+
+export const LOREM_IPSUM =
+    'Lorem ipsum dolor sit amet, consectetur adipsicing elit, sed do eiusmod tempor incididunt ut labore et dolore.';

package/src/overwrites/venia-ui/lib/components/Gallery/gallery.module.css

@@ -15,7 +15,7 @@
     grid-template-columns: repeat(4, 1fr);
 }
 
-@media only screen and (max-width: 767px) {
+@media only screen and (max-width: 1023px) {
     .items {
         grid-template-columns: repeat(3, 1fr);
     }

package/src/overwrites/venia-ui/lib/components/Main/index.js

@@ -0,0 +1 @@
+export { default } from './main';

package/src/overwrites/venia-ui/lib/components/Main/main.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { bool, shape, string } from 'prop-types';
+import { useScrollLock } from '@magento/peregrine';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import Footer from '@magento/venia-ui/lib/components/Footer';
+import Header from '@magento/venia-ui/lib/components/Header';
+import defaultClasses from './main.module.css';
+import cn from 'classnames';
+
+const Main = props => {
+    const { children, isMasked } = props;
+    const classes = useStyle(defaultClasses, props.classes);
+
+    const rootClass = isMasked ? classes.root_masked : classes.root;
+    const pageClass = isMasked ? classes.page_masked : classes.page;
+
+    useScrollLock(isMasked);
+
+    return (
+        <main className={rootClass}>
+            <Header />
+            <div className={cn(pageClass, 'main-content-container pb-16')}>{children}</div>
+            <Footer />
+        </main>
+    );
+};
+
+export default Main;
+
+Main.propTypes = {
+    classes: shape({
+        page: string,
+        page_masked: string,
+        root: string,
+        root_masked: string
+    }),
+    isMasked: bool
+};

package/src/overwrites/venia-ui/lib/components/Main/main.module.css

@@ -0,0 +1,41 @@
+.root {
+    composes: bg-white from global;
+    composes: relative from global;
+    composes: text-colorDefault from global;
+    composes: z-foreground from global;
+}
+
+.root_masked {
+    composes: root;
+}
+
+.page {
+    composes: md_max-w-screen-md from global;
+    composes: lg_max-w-[1210px] from global;
+    composes: mx-auto from global;
+    composes: my-0 from global;
+    composes: px-[15px] from global;
+    min-height: 40rem;
+}
+
+.page_masked {
+    composes: page;
+}
+
+@media (min-height: 640px) {
+    .page {
+        min-height: 48rem;
+    }
+}
+
+@media (min-height: 768px) {
+    .page {
+        min-height: 60rem;
+    }
+}
+
+@media (min-height: 960px) {
+    .page {
+        min-height: 72rem;
+    }
+}

package/src/overwrites/venia-ui/lib/components/MegaMenu/submenuColumn.js

@@ -76,17 +76,27 @@ const SubmenuColumn = props => {
                 <li key={index} className={classes.submenuChildItem}>
                     {customMenuItems.length ? (
                         <>
-                            <div
-                                // {...keyboardProps}
+                            <Link
+                                {...keyboardProps}
                                 className={isActive ? classes.linkActive : classes.link}
                                 data-cy="MegaMenu-SubmenuColumn-link"
+                                to={categoryUrl}
                                 onClick={() => {
-                                    toggleCustomMenu();
+                                    handleCloseSubMenu();
+                                    onNavigate();
                                 }}
                             >
                                 {name}
+                            </Link>
+                            <span
+                                className={isActive ? classes.linkActive : classes.link}
+                                data-cy="MegaMenu-SubmenuColumn-link"
+                                onClick={() => {
+                                    toggleCustomMenu();
+                                }}
+                            >
                                 {arrow}
-                            </div>
+                            </span>
                             {showCustomMenu ? customSubMenus : ''}
                         </>
                     ) : (

package/src/overwrites/venia-ui/lib/components/MegaMenu/submenuColumn.module.css

@@ -15,13 +15,13 @@
     composes: hover_underline from global;
 
     align-items: center;
-    composes: flex from global;
+    composes: inline-flex from global;
 }
 
 .linkActive {
     composes: underline from global;
     align-items: center;
-    composes: flex from global;
+    composes: inline-flex from global;
 }
 
 .submenuChild {

package/src/overwrites/venia-ui/lib/components/Newsletter/index.js

@@ -0,0 +1 @@
+export { default } from './newsletter';

package/src/overwrites/venia-ui/lib/components/Newsletter/newsletter.js

@@ -0,0 +1,156 @@
+import React, { useEffect } from 'react';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { Form } from 'informed';
+import { shape, string } from 'prop-types';
+
+import { useNewsletter } from '@magento/peregrine/lib/talons/Newsletter/useNewsletter';
+import { useToasts } from '@magento/peregrine';
+
+import { isRequired } from '@magento/venia-ui/lib/util/formValidators';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import FormError from '@magento/venia-ui/lib/components/FormError';
+import Button from '@magento/venia-ui/lib/components/Button';
+import Field from '@magento/venia-ui/lib/components/Field';
+import LoadingIndicator from '@magento/venia-ui/lib/components/LoadingIndicator';
+import TextInput from '@magento/venia-ui/lib/components/TextInput';
+import LinkButton from '@magento/venia-ui/lib/components/LinkButton';
+import Shimmer from './newsletter.shimmer';
+import defaultClasses from './newsletter.module.css';
+
+const Newsletter = props => {
+    const { formatMessage } = useIntl();
+    const classes = useStyle(defaultClasses, props.classes);
+    const talonProps = useNewsletter();
+    const [, { addToast }] = useToasts();
+    const {
+        isEnabled,
+        errors,
+        handleSubmit,
+        isBusy,
+        isLoading,
+        setFormApi,
+        newsLetterResponse,
+        clearErrors
+    } = talonProps;
+
+    useEffect(() => {
+        if (newsLetterResponse && newsLetterResponse.status) {
+            addToast({
+                type: 'success',
+                message: formatMessage({
+                    id: 'newsletter.subscribeMessage',
+                    defaultMessage: 'The email address is subscribed.'
+                }),
+                timeout: 5000
+            });
+        }
+    }, [addToast, formatMessage, newsLetterResponse]);
+
+    if (isLoading) {
+        return <Shimmer />;
+    }
+
+    if (!isEnabled) {
+        return null;
+    }
+
+    const maybeLoadingIndicator = isBusy ? (
+        <div className={classes.loadingContainer}>
+            <LoadingIndicator>
+                <FormattedMessage
+                    id={'newsletter.loadingText'}
+                    defaultMessage={'Subscribing'}
+                />
+            </LoadingIndicator>
+        </div>
+    ) : null;
+
+    return (
+        <div className={classes.root} data-cy={'Newsletter-root'}>
+            {maybeLoadingIndicator}
+            <span data-cy="Newsletter-title" className={classes.title}>
+                <FormattedMessage
+                    id={'newsletter.titleText'}
+                    defaultMessage={'Subscribe'}
+                />
+            </span>
+
+            <p
+                data-cy="Newsletter-infoText"
+                className={classes.newsletter_text}
+            >
+                <FormattedMessage
+                    id={'newsletter.infoText'}
+                    defaultMessage={
+                        'By subscribing you agree to receive email from us. \n Please read our Privacy Policy'
+                    }
+                />
+            </p>
+            <FormError
+                allowErrorMessages
+                errors={Array.from(errors.values())}
+            />
+            <Form
+                getApi={setFormApi}
+                className={classes.form}
+                onSubmit={handleSubmit}
+            >
+                <Field
+                    id="email"
+                    label={formatMessage({
+                        id: 'global.email',
+                        defaultMessage: 'Email'
+                    })}
+                >
+                    <TextInput
+                        autoComplete="email"
+                        field="email"
+                        id="email"
+                        placeholder="Email Address"
+                        validate={isRequired}
+                        className={{
+                            inputClassName: "!border-b-2 !border-t-0 !border-l-0 !border-r-0 rounded-none !px-0"
+                        }}
+                    />
+                </Field>
+                <LinkButton
+                    data-cy="Newsletter-submitButton"
+                    className={classes.subscribe_link}
+                    type="submit"
+                    disabled={isBusy}
+                    onClick={clearErrors}
+                >
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M20.5 13.01L15.49 7.98999" stroke="#292D32" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
+                        <path d="M3.5 13.01H20.5" stroke="#292D32" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
+                    </svg>
+                </LinkButton>
+                <div className={classes.buttonsContainer}>
+                    <Button
+                        priority="normal"
+                        type="submit"
+                        disabled={isBusy}
+                        onClick={clearErrors}
+                    >
+                        <FormattedMessage
+                            id={'newsletter.subscribeText'}
+                            defaultMessage={'Subscribe'}
+                        />
+                    </Button>
+                </div>
+            </Form>
+        </div>
+    );
+};
+
+Newsletter.propTypes = {
+    classes: shape({
+        modal_active: string,
+        root: string,
+        title: string,
+        form: string,
+        buttonsContainer: string
+    })
+};
+
+export default Newsletter;

package/src/overwrites/venia-ui/lib/components/Newsletter/newsletter.module.css

@@ -0,0 +1,90 @@
+.root {
+    composes: col-span-6 from global;
+    composes: gap-none from global;
+    composes: grid from global;
+    composes: items-start from global;
+    composes: max-w-[20rem] from global;
+    composes: mx-auto from global;
+    composes: relative from global;
+
+    composes: sm_col-span-3 from global;
+}
+
+.form {
+    composes: gap-y-xs from global;
+    composes: grid from global;
+    composes: relative from global;
+}
+
+/* TODO @TW: cannot compose */
+.form input {
+    /* TODO @TW: review */
+    padding-right: calc(1.875rem * var(--iconsAfter) + 5.625rem);
+}
+
+@media (max-width: 799px) {
+
+    /* TODO @TW: cannot compose */
+    .form input {
+        /* TODO @TW: review */
+        padding-right: calc(1.875rem * var(--iconsAfter) + 0.625rem);
+    }
+}
+
+/* TODO @TW: cannot compose */
+.form label {
+    position: absolute;
+    z-index: -1;
+    /* composes: z-behind from global; */
+}
+
+.buttonsContainer {
+    composes: gap-sm from global;
+    composes: grid from global;
+    composes: grid-flow-row from global;
+    composes: justify-center from global;
+    composes: mt-xs from global;
+    composes: w-full from global;
+
+    composes: md_hidden from global;
+}
+
+.title {
+    composes: block from global;
+    composes: font-semibold from global;
+    composes: mb-xs from global;
+    composes: text-colorDefault from global;
+    composes: text-sm from global;
+}
+
+.subscribe_link {
+    composes: absolute from global;
+    composes: bg-white from global;
+    composes: hidden from global;
+    composes: max-h-[35px] from global;
+    composes: px-0 from global;
+    composes: py-0 from global;
+    composes: right-1 from global;
+    composes: text-colorDefault from global;
+    composes: top-0 from global;
+    composes: underline from global;
+    min-height: 35px;
+    transform: translateY(7%);
+
+    composes: md_inline-block from global;
+}
+
+.newsletter_text {
+    composes: mb-sm from global;
+}
+
+.loadingContainer {
+    composes: absolute from global;
+    composes: bg-white from global;
+    composes: h-full from global;
+    composes: left-0 from global;
+    composes: opacity-75 from global;
+    composes: top-0 from global;
+    composes: w-full from global;
+    composes: z-mask from global;
+}