@riosst100/pwa-marketplace 2.0.9 → 2.1.0

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

@@ -0,0 +1,147 @@
+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

@@ -0,0 +1,52 @@
+.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

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,206 @@
+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

@@ -0,0 +1,40 @@
+.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

@@ -0,0 +1,107 @@
+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

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

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

@@ -0,0 +1,14 @@
+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

@@ -0,0 +1,108 @@
+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';
+import cn from 'classnames';
+
+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={cn(rootClass, '!top-[57px] max-w-[1210px]')} 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
+    })
+};