@riosst100/pwa-marketplace 2.0.7 → 2.0.9

package/src/overwrites/venia-ui/lib/components/AccountInformationPage/accountInformationPage.js

@@ -1,147 +0,0 @@
-import React, { Fragment, Suspense } from 'react';
-import { FormattedMessage, useIntl } from 'react-intl';
-import { useAccountInformationPage } from '@magento/peregrine/lib/talons/AccountInformationPage/useAccountInformationPage';
-
-import { useStyle } from '@magento/venia-ui/lib/classify.js';
-import Button from '@magento/venia-ui/lib/components/Button';
-import { Message } from '@magento/venia-ui/lib/components/Field';
-import { StoreTitle } from '@magento/venia-ui/lib/components/Head';
-import { fullPageLoadingIndicator } from '@magento/venia-ui/lib/components/LoadingIndicator';
-
-import defaultClasses from './accountInformationPage.module.css';
-import AccountInformationPageOperations from './accountInformationPage.gql.js';
-
-const EditModal = React.lazy(() => import('./editModal'));
-
-const AccountInformationPage = props => {
-    const classes = useStyle(defaultClasses, props.classes);
-
-    const talonProps = useAccountInformationPage({
-        ...AccountInformationPageOperations
-    });
-
-    const {
-        handleCancel,
-        formErrors,
-        handleChangePassword,
-        handleSubmit,
-        initialValues,
-        isDisabled,
-        isUpdateMode,
-        loadDataError,
-        shouldShowNewPassword,
-        showUpdateMode,
-        recaptchaWidgetProps,
-        setShouldShowNewPassword,
-    } = talonProps;
-    console.log("🚀 ~ AccountInformationPage ~ talonProps:", talonProps)
-    const { formatMessage } = useIntl();
-
-    const errorMessage = loadDataError ? (
-        <Message>
-            <FormattedMessage
-                id={'accountInformationPage.errorTryAgain'}
-                defaultMessage={
-                    'Something went wrong. Please refresh and try again.'
-                }
-            />
-        </Message>
-    ) : null;
-
-    let pageContent = null;
-    if (!initialValues) {
-        return fullPageLoadingIndicator;
-    } else {
-        const { customer } = initialValues;
-        const customerName = `${customer.firstname} ${customer.lastname}`;
-        const passwordValue = '***********';
-
-        pageContent = (
-            <Fragment>
-                {/* <div className={classes.accountDetails}>
-                    <div className={classes.lineItemsContainer}>
-                        <span className={classes.nameLabel}>
-                            <FormattedMessage
-                                id={'global.name'}
-                                defaultMessage={'Name'}
-                            />
-                        </span>
-                        <span className={classes.nameValue}>
-                            {customerName}
-                        </span>
-                        <span className={classes.emailLabel}>
-                            <FormattedMessage
-                                id={'global.email'}
-                                defaultMessage={'Email'}
-                            />
-                        </span>
-                        <span className={classes.emailValue}>
-                            {customer.email}
-                        </span>
-                        <span className={classes.passwordLabel}>
-                            <FormattedMessage
-                                id={'global.password'}
-                                defaultMessage={'Password'}
-                            />
-                        </span>
-                        <span className={classes.passwordValue}>
-                            {passwordValue}
-                        </span>
-                    </div>
-                    <div className={classes.editButtonContainer}>
-                        <Button
-                            className={classes.editInformationButton}
-                            disabled={false}
-                            onClick={showUpdateMode}
-                            priority="normal"
-                            data-cy="AccountInformationPage-editInformationButton"
-                        >
-                            <FormattedMessage
-                                id={'global.editButton'}
-                                defaultMessage={'Edit'}
-                            />
-                        </Button>
-                    </div>
-                </div> */}
-                <Suspense fallback={null}>
-                    <EditModal
-                        formErrors={formErrors}
-                        initialValues={customer}
-                        isDisabled={isDisabled}
-                        isOpen={isUpdateMode}
-                        onCancel={handleCancel}
-                        onChangePassword={handleChangePassword}
-                        onSubmit={handleSubmit}
-                        shouldShowNewPassword={shouldShowNewPassword}
-                        recaptchaWidgetProps={recaptchaWidgetProps}
-                        setShouldShowNewPassword={setShouldShowNewPassword}
-                    />
-                </Suspense>
-            </Fragment>
-        );
-    }
-
-    return (
-        <div className={classes.root}>
-            <StoreTitle>
-                {formatMessage({
-                    id: 'accountInformationPage.titleAccount',
-                    defaultMessage: 'Account Information'
-                })}
-            </StoreTitle>
-            <div
-                aria-live="polite"
-                className="text-xl font-medium text-left"
-                data-cy="AccountInformationPage-title"
-            >
-                <FormattedMessage
-                    id={'accountInformationPage.accountInformation'}
-                    defaultMessage={'Account Information'}
-                />
-            </div>
-            {errorMessage ? errorMessage : pageContent}
-        </div>
-    );
-};
-
-export default AccountInformationPage;

package/src/overwrites/venia-ui/lib/components/AccountInformationPage/accountInformationPage.module.css

@@ -1,52 +0,0 @@
-.root {
-    composes: grid from global;
-    composes: gap-y-md from global;
-}
-
-.title {
-    composes: font-bold from global;
-    composes: font-serif from global;
-    composes: justify-self-center from global;
-}
-
-.accountDetails {
-    composes: gap-y-md from global;
-    composes: grid from global;
-    composes: grid-cols-1 from global;
-
-    composes: lg_grid-cols-3 from global;
-}
-
-.lineItemsContainer {
-    composes: gap-3 from global;
-    composes: grid from global;
-    composes: grid-cols-1 from global;
-    composes: leading-normal from global;
-    grid-column: 1 / span 1;
-
-    composes: lg_gap-xs from global;
-    composes: lg_grid-cols-2 from global;
-}
-
-.lineItemLabel {
-    composes: font-bold from global;
-}
-
-.nameLabel,
-.emailLabel,
-.passwordLabel {
-    composes: font-bold from global;
-}
-
-.nameValue,
-.emailValue,
-.passwordValue {}
-
-.editButtonContainer {
-    grid-column: 1 / span 1;
-    composes: text-center from global;
-}
-
-.editInformationButton {
-    composes: root_normalPriority from '../Button/button.module.css';
-}

package/src/overwrites/venia-ui/lib/components/AccountInformationPage/accountInformationPageFragment.gql.js

@@ -1,10 +0,0 @@
-import { gql } from '@apollo/client';
-
-export const AccountInformationPageFragment = gql`
-    fragment AccountInformationPageFragment on Customer {
-        id
-        firstname
-        lastname
-        email
-    }
-`;

package/src/overwrites/venia-ui/lib/components/AccountInformationPage/editForm.js

@@ -1,206 +0,0 @@
-import React, { Fragment } from 'react';
-import { FormattedMessage, useIntl } from 'react-intl';
-import { shape, string } from 'prop-types';
-
-import { useStyle } from '@magento/venia-ui/lib/classify';
-import Field from '@magento/venia-ui/lib/components/Field';
-import LinkButton from '@magento/venia-ui/lib/components/LinkButton';
-import Password from '@magento/venia-ui/lib/components/Password';
-import TextInput from '@magento/venia-ui/lib/components/TextInput';
-import Checkbox from '@magento/venia-ui/lib/components/Checkbox';
-import cn from 'classnames';
-
-import {
-    isRequired,
-    hasLengthAtLeast,
-    validatePassword,
-    isNotEqualToField
-} from '@magento/venia-ui/lib/util/formValidators';
-import combine from '@magento/venia-ui/lib/util/combineValidators';
-import defaultClasses from './editForm.module.css';
-
-const EditForm = props => {
-    const {
-        classes: propClasses,
-        handleChangePassword,
-    } = props;
-    const { formatMessage } = useIntl();
-
-    const classes = useStyle(defaultClasses, propClasses);
-
-    const [showNewPassword, setShowNewPassword] = React.useState(false);
-    const handleChange = (event) => {
-        console.log("🚀 ~ handleChange ~ event:", event)
-        setShowNewPassword(event.target.checked);
-    }
-
-    const maybeNewPasswordField = showNewPassword ? (
-        <div className={classes.newPassword}>
-            <Password
-                fieldName="newPassword"
-                label={formatMessage({
-                    id: 'global.newPassword',
-                    defaultMessage: 'New Password'
-                })}
-                validate={combine([
-                    isRequired,
-                    [hasLengthAtLeast, 8],
-                    validatePassword,
-                    [isNotEqualToField, 'password']
-                ])}
-                isToggleButtonHidden={false}
-                data-cy="newPassword"
-            />
-        </div>
-    ) : null;
-
-    const maybeChangePasswordButton = !showNewPassword ? (
-        <div
-            className={classes.changePasswordButtonContainer}
-            data-cy="editForm-changePasswordButtonContainer"
-        >
-            <LinkButton
-                classes={classes.changePasswordButton}
-                type="button"
-                onClick={handleChangePassword}
-                data-cy="linkButton-root"
-            >
-                <FormattedMessage
-                    id={'global.changePassword'}
-                    defaultMessage={'Change Password'}
-                />
-            </LinkButton>
-        </div>
-    ) : null;
-
-    const passwordLabel = showNewPassword
-        ? formatMessage({
-            id: 'global.currentPassword',
-            defaultMessage: 'Current Password'
-        })
-        : formatMessage({
-            id: 'global.password',
-            defaultMessage: 'Password'
-        });
-    return (
-        <Fragment>
-            <div className={classes.root}>
-                <div className={classes.firstname}>
-                    <Field
-                        id="firstname"
-                        label={formatMessage({
-                            id: 'global.firstName',
-                            defaultMessage: 'First Name'
-                        })}
-                        classes={{
-                            label: "font-normal text-left mb-2 text-[14px] block mb-2"
-                        }}
-                    >
-                        <TextInput
-                            field="firstname"
-                            validate={isRequired}
-                            data-cy="firstname"
-                        />
-                    </Field>
-                </div>
-                <div className={classes.lastname}>
-                    <Field
-                        id="lastname"
-                        label={formatMessage({
-                            id: 'global.lastName',
-                            defaultMessage: 'Last Name'
-                        })}
-                        classes={{
-                            label: "font-normal text-left mb-2 text-[14px] block mb-2"
-                        }}
-                    >
-                        <TextInput
-                            field="lastname"
-                            validate={isRequired}
-                            data-cy="lastname"
-                        />
-                    </Field>
-                </div>
-                <div className={classes.email}>
-                    <Field
-                        id="email"
-                        label={formatMessage({
-                            id: 'global.email',
-                            defaultMessage: 'Email'
-                        })}
-                        classes={{
-                            label: "font-normal text-left mb-2 text-[14px] block mb-2"
-                        }}
-                    >
-                        <TextInput
-                            field="email"
-                            validate={isRequired}
-                            data-cy="email"
-                        />
-                    </Field>
-                </div>
-                {!showNewPassword && (
-                    <div className={classes.password}>
-                        <Password
-                            fieldName="password"
-                            label={passwordLabel}
-                            validate={isRequired}
-                            autoComplete="current-password"
-                            isToggleButtonHidden={false}
-                            data-cy="password"
-                        />
-                    </div>
-                )}
-                <div
-                    className={cn(classes.changePasswordButtonContainer, '!pt-0')}
-                    data-cy="editForm-changePasswordButtonContainer"
-                >
-                    <Checkbox
-                        field="change_password"
-                        id="changePassword"
-                        checked={showNewPassword}
-                        onChange={handleChange}
-                        label={(
-                            <FormattedMessage
-                                id={'global.changePassword'}
-                                defaultMessage={'Change Password'}
-                            />
-                        )}
-                    />
-                </div>
-                {showNewPassword && (
-                    <div className={classes.password}>
-                        <Password
-                            fieldName="password"
-                            label={passwordLabel}
-                            validate={isRequired}
-                            autoComplete="current-password"
-                            isToggleButtonHidden={false}
-                            data-cy="password"
-                        />
-                    </div>
-                )}
-                {maybeNewPasswordField}
-            </div>
-
-        </Fragment>
-    );
-};
-
-export default EditForm;
-
-EditForm.propTypes = {
-    classes: shape({
-        changePasswordButton: string,
-        changePasswordButtonContainer: string,
-        root: string,
-        field: string,
-        email: string,
-        firstname: string,
-        lastname: string,
-        buttons: string,
-        passwordLabel: string,
-        password: string,
-        newPassword: string
-    })
-};

package/src/overwrites/venia-ui/lib/components/AccountInformationPage/editForm.module.css

@@ -1,40 +0,0 @@
-.root {
-    composes: gap-x-2xs from global;
-    composes: gap-y-sm from global;
-    composes: flex from global;
-    composes: flex-col from global;
-    composes: max-w-[490px] from global;
-    composes: w-full from global;
-}
-
-.field {
-    composes: col-end-span2 from global;
-}
-
-.email,
-.passwordLabel {
-    composes: field;
-}
-
-.buttons {
-    composes: field;
-    composes: gap-xs from global;
-    composes: grid from global;
-    composes: grid-flow-col from global;
-    composes: justify-self-center from global;
-    composes: p-xs from global;
-}
-
-.changePasswordButtonContainer {
-    composes: pt-xs from global;
-}
-
-@media (max-width: 959px) {
-
-    .firstname,
-    .lastname,
-    .password,
-    .newPassword {
-        grid-column: 1 / span 2;
-    }
-}

package/src/overwrites/venia-ui/lib/components/AccountInformationPage/editModal.js

@@ -1,107 +0,0 @@
-import React from 'react';
-import { FormattedMessage, useIntl } from 'react-intl';
-import { shape, string, bool, array, func, object } from 'prop-types';
-
-import { useStyle } from '@magento/venia-ui/lib/classify';
-import EditForm from './editForm';
-import FormError from '@magento/venia-ui/lib/components/FormError';
-// import Dialog from '@magento/venia-ui/lib/components/Dialog';
-import GoogleReCaptcha from '@magento/venia-ui/lib/components/GoogleReCaptcha';
-import defaultClasses from './editModal.module.css';
-import { Form } from 'informed';
-import Button from '@magento/venia-ui/lib/components/Button';
-
-
-const EditModal = props => {
-    const {
-        classes: propClasses,
-        formErrors,
-        // onCancel,
-        onChangePassword,
-        // onSubmit,
-        // initialValues,
-        // isDisabled,
-        // isOpen,
-        shouldShowNewPassword,
-        recaptchaWidgetProps
-    } = props;
-    const { formatMessage } = useIntl();
-
-    const classes = useStyle(defaultClasses, propClasses);
-
-    // const dialogFormProps = { initialValues };
-
-    return (
-        <>
-            {/* <Dialog
-            classes={{ body: classes.bodyEditAccountInformation }}
-            confirmText={'Save'}
-            formProps={dialogFormProps}
-            isOpen={isOpen}
-            onCancel={onCancel}
-            onConfirm={onSubmit}
-            shouldDisableAllButtons={isDisabled}
-            shouldDisableConfirmButton={isDisabled}
-            shouldUnmountOnHide={true}
-            title={formatMessage({
-                id: 'accountInformationPage.editAccount',
-                defaultMessage: 'Edit Account Information'
-            })}
-        >
-            <FormError
-                classes={{ root: classes.errorContainer }}
-                errors={formErrors}
-            />
-            <EditForm
-                handleChangePassword={onChangePassword}
-                shouldShowNewPassword={shouldShowNewPassword}
-            />
-            <GoogleReCaptcha {...recaptchaWidgetProps} />
-        </Dialog> */}
-            <Form {...props}>
-                <FormError
-                    classes={{ root: classes.errorContainer }}
-                    errors={formErrors}
-                />
-                <EditForm
-                    handleChangePassword={onChangePassword}
-                    shouldShowNewPassword={shouldShowNewPassword}
-                />
-                <GoogleReCaptcha {...recaptchaWidgetProps} />
-                <div className='mt-[30px]'>
-                    <Button
-                        data-cy="confirmButton"
-                        priority="high"
-                        type="submit"
-                        classes={{
-                            content: 'font-medium text-[16px] capitalize',
-                        }}
-                    >
-                        <FormattedMessage
-                            id={'global.saveChanges'}
-                            defaultMessage={'Save Changes'}
-                        />
-                    </Button>
-                </div>
-            </Form>
-        </>
-    );
-};
-
-export default EditModal;
-
-EditModal.propTypes = {
-    classes: shape({
-        errorContainer: string
-    }),
-    formErrors: array,
-    handleCancel: func,
-    handleSubmit: func,
-    initialValues: object,
-    isDisabled: bool,
-    isOpen: bool,
-    recaptchaWidgetProps: shape({
-        containerElement: func,
-        shouldRender: bool
-    })
-};

package/src/overwrites/venia-ui/lib/components/AccountInformationPage/editModal.module.css

@@ -1,3 +0,0 @@
-.errorContainer {
-    composes: pb-xs from global;
-}

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

@@ -1,14 +0,0 @@
-import AccountInformation from './accountInformationPage';
-import AccountLayout from '@riosst100/pwa-marketplace/src/components/AccountLayout';
-
-import React from 'react'
-
-const index = () => {
-    return (
-        <AccountLayout>
-            <AccountInformation />
-        </AccountLayout>
-    )
-}
-
-export default index

package/src/overwrites/venia-ui/lib/components/AccountMenu/accountMenu.js

@@ -1,107 +0,0 @@
-import React from 'react';
-import { shape, string } from 'prop-types';
-import { useAccountMenu } from '@magento/peregrine/lib/talons/Header/useAccountMenu';
-
-import { useStyle } from '@magento/venia-ui/lib/classify';
-import CreateAccount from '@magento/venia-ui/lib/components/CreateAccount';
-import SignIn from '@magento/venia-ui/lib/components/SignIn/signIn';
-import AccountMenuItems from './accountMenuItems';
-import ForgotPassword from '@magento/venia-ui/lib/components/ForgotPassword';
-import defaultClasses from './accountMenu.module.css';
-
-const AccountMenu = React.forwardRef((props, ref) => {
-    const {
-        handleTriggerClick,
-        accountMenuIsOpen,
-        setAccountMenuIsOpen
-    } = props;
-    const talonProps = useAccountMenu({
-        accountMenuIsOpen,
-        setAccountMenuIsOpen
-    });
-    const {
-        view,
-        username,
-        handleAccountCreation,
-        handleSignOut,
-        handleForgotPassword,
-        handleCancel,
-        handleCreateAccount,
-        updateUsername
-    } = talonProps;
-
-    const classes = useStyle(defaultClasses, props.classes);
-    const rootClass = accountMenuIsOpen ? classes.root_open : classes.root;
-    const contentsClass = accountMenuIsOpen
-        ? classes.contents_open
-        : classes.contents;
-
-    let dropdownContents = null;
-
-    switch (view) {
-        case 'ACCOUNT': {
-            dropdownContents = <AccountMenuItems onSignOut={handleSignOut} />;
-
-            break;
-        }
-        case 'FORGOT_PASSWORD': {
-            dropdownContents = (
-                <ForgotPassword
-                    initialValues={{ email: username }}
-                    onCancel={handleCancel}
-                />
-            );
-
-            break;
-        }
-        case 'CREATE_ACCOUNT': {
-            dropdownContents = (
-                <CreateAccount
-                    classes={{ root: classes.createAccount }}
-                    initialValues={{ email: username }}
-                    isCancelButtonHidden={false}
-                    onSubmit={handleAccountCreation}
-                    onCancel={handleCancel}
-                />
-            );
-
-            break;
-        }
-        case 'SIGNIN':
-        default: {
-            dropdownContents = (
-                <SignIn
-                    handleTriggerClick={handleTriggerClick}
-                    classes={{
-                        modal_active: classes.loading
-                    }}
-                    setDefaultUsername={updateUsername}
-                    showCreateAccount={handleCreateAccount}
-                    showForgotPassword={handleForgotPassword}
-                />
-            );
-
-            break;
-        }
-    }
-
-    return (
-        <aside className={rootClass} data-cy="AccountMenu-root">
-            <div ref={ref} className={contentsClass}>
-                {accountMenuIsOpen ? dropdownContents : null}
-            </div>
-        </aside>
-    );
-});
-
-export default AccountMenu;
-
-AccountMenu.propTypes = {
-    classes: shape({
-        root: string,
-        root_open: string,
-        link: string,
-        contents_open: string,
-        contents: string
-    })
-};