@riosst100/pwa-marketplace 2.0.7 → 2.0.9

package/src/overwrites/venia-ui/lib/components/MyAccount/ResetPassword/resetPassword.js

@@ -1,143 +0,0 @@
-import React, { useEffect } from 'react';
-import { FormattedMessage, useIntl } from 'react-intl';
-import { shape, string } from 'prop-types';
-import { Form } from 'informed';
-
-import { useToasts } from '@magento/peregrine';
-import { useResetPassword } from '@magento/peregrine/lib/talons/MyAccount/useResetPassword';
-
-import { useStyle } from '@magento/venia-ui/lib/classify';
-import { isRequired } from '@magento/venia-ui/lib/util/formValidators';
-import Button from '@magento/venia-ui/lib/components/Button';
-import Field from '@magento/venia-ui/lib/components/Field';
-import FormErrors from '@magento/venia-ui/lib/components/FormError';
-import GoogleReCaptcha from '@magento/venia-ui/lib/components/GoogleReCaptcha';
-import { StoreTitle } from '@magento/venia-ui/lib/components/Head';
-import Password from '@magento/venia-ui/lib/components/Password';
-import TextInput from '@magento/venia-ui/lib/components/TextInput';
-import defaultClasses from './resetPassword.module.css';
-import resetPasswordOperations from './resetPassword.gql';
-
-const ResetPassword = props => {
-    const { classes: propClasses } = props;
-    const { formatMessage } = useIntl();
-    const classes = useStyle(defaultClasses, propClasses);
-    const talonProps = useResetPassword({ ...resetPasswordOperations });
-    const {
-        hasCompleted,
-        loading,
-        token,
-        formErrors,
-        handleSubmit,
-        recaptchaWidgetProps
-    } = talonProps;
-
-    const tokenMissing = (
-        <div className={classes.invalidToken}>
-            <FormattedMessage
-                id={'resetPassword.invalidTokenMessage'}
-                defaultMessage={
-                    'Uh oh, something went wrong. Check the link or try again.'
-                }
-            />
-        </div>
-    );
-
-    const [, { addToast }] = useToasts();
-
-    useEffect(() => {
-        if (hasCompleted) {
-            addToast({
-                type: 'info',
-                message: formatMessage({
-                    id: 'resetPassword.savedPasswordText',
-                    defaultMessage: 'Your new password has been saved.'
-                }),
-                timeout: 5000
-            });
-        }
-    }, [addToast, formatMessage, hasCompleted]);
-    const recoverPassword = hasCompleted ? (
-        <div className={classes.successMessage}>
-            <FormattedMessage
-                id={'resetPassword.successMessage'}
-                defaultMessage={
-                    'Your new password has been saved. Please use this password to sign into your Account.'
-                }
-            />
-        </div>
-    ) : (
-        <Form className={classes.form} onSubmit={handleSubmit}>
-            <div className={classes.description}>
-                <FormattedMessage
-                    id={'resetPassword.descriptionText'}
-                    defaultMessage={
-                        'Please enter your email address and new password.'
-                    }
-                />
-            </div>
-            <Field label={'Email address'}>
-                <TextInput field={'email'} validate={isRequired} />
-            </Field>
-            <Password
-                label={formatMessage({
-                    id: 'resetPassword.newPasswordText',
-                    defaultMessage: 'New Password'
-                })}
-                fieldName={'newPassword'}
-                isToggleButtonHidden={false}
-            />
-            <GoogleReCaptcha {...recaptchaWidgetProps} />
-            <div className={classes.buttonContainer}>
-                <Button
-                    className={classes.submitButton}
-                    type="submit"
-                    priority="high"
-                    disabled={loading}
-                >
-                    <FormattedMessage
-                        id="resetPassword.savePassword"
-                        defaultMessage="Save Password"
-                    />
-                </Button>
-            </div>
-            <FormErrors errors={formErrors} />
-        </Form>
-    );
-
-    return (
-        <div className={classes.root}>
-            <StoreTitle>
-                {formatMessage({
-                    id: 'resetPassword.title',
-                    defaultMessage: 'Reset Password'
-                })}
-            </StoreTitle>
-            <h1 aria-live="polite" className={classes.header}>
-                <FormattedMessage
-                    id="resetPassword.header"
-                    defaultMessage="Reset Password"
-                />
-            </h1>
-            <div className={classes.contentContainer}>
-                {token ? recoverPassword : tokenMissing}
-            </div>
-        </div>
-    );
-};
-
-export default ResetPassword;
-
-ResetPassword.propTypes = {
-    classes: shape({
-        root: string,
-        header: string,
-        contentContainer: string,
-        form: string,
-        description: string,
-        invalidToken: string,
-        buttonContainer: string,
-        submitButton: string,
-        successMessage: string
-    })
-};

package/src/overwrites/venia-ui/lib/components/MyAccount/ResetPassword/resetPassword.module.css

@@ -1,53 +0,0 @@
-.root {
-    composes: gap-y-md from global;
-    composes: grid from global;
-    composes: justify-center from global;
-    composes: px-0 from global;
-    composes: py-[2.5rem] from global;
-    composes: text-center from global;
-    grid-template-columns: minmax(auto, 512px);
-}
-
-.header {
-    composes: font-serif from global;
-}
-
-.form {
-    composes: gap-xs from global;
-    composes: grid from global;
-    composes: justify-items-stretch from global;
-    composes: px-sm from global;
-    composes: py-xs from global;
-    composes: lg_mb-md from global;
-}
-
-.description {
-    composes: font-light from global;
-    composes: leading-5 from global;
-}
-
-.buttonContainer {
-    composes: mt-xs from global;
-}
-
-.submitButton {
-    composes: root_highPriority from '../../Button/button.module.css';
-    composes: justify-self-center from global;
-}
-
-.invalidToken,
-.successMessage {
-    composes: p-sm from global;
-    composes: text-center from global;
-}
-
-.invalidToken {
-    composes: text-error from global;
-}
-
-.contentContainer {
-    composes: lg_border-2 from global;
-    composes: lg_border-solid from global;
-    composes: lg_border-subtle from global;
-    composes: lg_rounded-md from global;
-}

package/src/overwrites/venia-ui/lib/components/MyAccount/accountLink.js

@@ -1,42 +0,0 @@
-import React, { useCallback } from 'react';
-import { arrayOf, func, node, shape, string } from 'prop-types';
-
-import { useStyle } from '@magento/venia-ui/lib/classify';
-import Button from '@magento/venia-ui/lib/components/Button';
-
-import defaultClasses from './accountLink.module.css';
-
-const AccountLink = props => {
-    const { children, onClick } = props;
-    const [icon, text] = children;
-    const classes = useStyle(defaultClasses, props.classes);
-
-    const handleClick = useCallback(() => {
-        if (typeof onClick === 'function') {
-            onClick();
-        }
-    }, [onClick]);
-
-    return (
-        <Button classes={classes} onClick={handleClick}>
-            <span className={classes.icon}>{icon}</span>
-            <span className={classes.text}>{text}</span>
-        </Button>
-    );
-};
-
-export default AccountLink;
-
-AccountLink.propTypes = {
-    children: arrayOf(node).isRequired,
-    classes: shape({
-        content: string,
-        icon: string,
-        root: string,
-        root_highPriority: string,
-        root_lowPriority: string,
-        root_normalPriority: string,
-        text: string
-    }),
-    onClick: func
-};

package/src/overwrites/venia-ui/lib/components/MyAccount/accountLink.module.css

@@ -1,33 +0,0 @@
-.root {
-    composes: border-b from global;
-    composes: border-solid from global;
-    composes: border-subtle from global;
-    composes: w-full from global;
-}
-
-.content {
-    composes: gap-2xs from global;
-    composes: grid from global;
-    composes: grid-flow-col from global;
-    composes: h-[3rem] from global;
-    composes: items-center from global;
-    composes: justify-items-start from global;
-    grid-template-columns: 2rem 1fr;
-}
-
-.icon {
-    composes: flex from global;
-    composes: items-center from global;
-    composes: justify-center from global;
-    composes: justify-self-center from global;
-    composes: text-brand from global;
-}
-
-.text {
-    composes: leading-none from global;
-    composes: text-sm from global;
-}
-
-.root_normalPriority {
-    composes: root;
-}

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

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

package/src/overwrites/venia-ui/lib/components/MyAccount/myAccount.js

@@ -1,38 +0,0 @@
-import React from 'react';
-import { func, shape, string } from 'prop-types';
-
-import { useMyAccount } from '@magento/peregrine/lib/talons/MyAccount/useMyAccount';
-
-import { useStyle } from '@magento/venia-ui/lib/classify';
-import AccountMenuItems from '@magento/venia-ui/lib/components/AccountMenu/accountMenuItems';
-import defaultClasses from './myAccount.module.css';
-
-const MyAccount = props => {
-    const { classes: propClasses, onSignOut, onClose } = props;
-    const classes = useStyle(defaultClasses, propClasses);
-
-    const talonProps = useMyAccount({
-        onSignOut: onSignOut,
-        onClose: onClose
-    });
-    const { handleSignOut, handleClose } = talonProps;
-
-    return (
-        <div className={classes.root}>
-            <AccountMenuItems onSignOut={handleSignOut} onClose={handleClose} />
-        </div>
-    );
-};
-
-export default MyAccount;
-
-MyAccount.propTypes = {
-    classes: shape({
-        actions: string,
-        root: string,
-        subtitle: string,
-        title: string,
-        user: string
-    }),
-    onSignOut: func.isRequired
-};

package/src/overwrites/venia-ui/lib/components/MyAccount/myAccount.module.css

@@ -1,5 +0,0 @@
-.root {
-    composes: gap-y-sm from global;
-    composes: grid from global;
-    composes: grid-flow-row from global;
-}

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

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

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

@@ -1,156 +0,0 @@
-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" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
-                        <path d="M3.5 13.01H20.5" stroke="#292D32" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="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

@@ -1,90 +0,0 @@
-.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-medium 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;
-}

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

@@ -1,46 +0,0 @@
-import React from 'react';
-
-import { useStyle } from '@magento/venia-ui/lib/classify';
-import Shimmer from '@magento/venia-ui/lib/components/Shimmer';
-import defaultClasses from './newsletter.module.css';
-import defaultShimmerClasses from './newsletter.shimmer.module.css';
-
-const NewsletterShimmer = props => {
-    const classes = useStyle(
-        defaultClasses,
-        defaultShimmerClasses,
-        props.classes
-    );
-
-    return (
-        <div className={classes.root}>
-            <Shimmer
-                key="title"
-                classes={{
-                    root_rectangle: classes.shimmerItem
-                }}
-            />
-            <Shimmer
-                key="text"
-                classes={{
-                    root_rectangle: classes.shimmerParagraphLine
-                }}
-            />
-            <Shimmer
-                key="text2"
-                width="50%"
-                classes={{
-                    root_rectangle: classes.shimmerItem
-                }}
-            />
-            <div className={classes.form}>
-                <Shimmer type="textInput" />
-                <div className={classes.buttonsContainer}>
-                    <Shimmer type="button" />
-                </div>
-            </div>
-        </div>
-    );
-};
-
-export default NewsletterShimmer;

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

@@ -1,21 +0,0 @@
-.shimmerItem {
-    min-height: 1rem;
-    composes: bg-gray-100 from global;
-    composes: inline-block from global;
-    composes: overflow-hidden from global;
-    composes: pointer-events-none from global;
-    composes: relative from global;
-    display: block;
-    margin-bottom: 1rem;
-}
-
-.shimmerParagraphLine {
-    min-height: 1rem;
-    composes: bg-gray-100 from global;
-    composes: inline-block from global;
-    composes: overflow-hidden from global;
-    composes: pointer-events-none from global;
-    composes: relative from global;
-    display: block;
-    margin-bottom: 0.5rem;
-}