@riosst100/pwa-marketplace 1.8.9 → 1.9.0

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

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

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

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

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

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

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

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

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

package/src/overwrites/venia-ui/lib/components/OrderHistoryPage/OrderDetails/billingInformation.js

@@ -0,0 +1,71 @@
+import React from 'react';
+import { arrayOf, shape, string } from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+
+import defaultClasses from './billingInformation.module.css';
+
+const BillingInformation = props => {
+    const { data, classes: propsClasses } = props;
+    const {
+        city,
+        country_code,
+        firstname,
+        lastname,
+        postcode,
+        region,
+        street
+    } = data;
+    const classes = useStyle(defaultClasses, propsClasses);
+
+    const additionalAddressString = `${city}, ${region} ${postcode} ${country_code}`;
+    const fullName = `${firstname} ${lastname}`;
+    const streetRows = street.map((row, index) => {
+        return (
+            <span className={classes.streetRow} key={index}>
+                {row}
+            </span>
+        );
+    });
+
+    return (
+        <div
+            className={classes.root}
+            data-cy="OrderDetails-BillingInformation-root"
+        >
+            <div className={classes.heading}>
+                <FormattedMessage
+                    id="orderDetails.billingInformationLabel"
+                    defaultMessage="Billing Information"
+                />
+            </div>
+            <span className={classes.name}>{fullName}</span>
+            {streetRows}
+            <div className={classes.additionalAddress}>
+                {additionalAddressString}
+            </div>
+        </div>
+    );
+};
+
+export default BillingInformation;
+
+BillingInformation.propTypes = {
+    classes: shape({
+        root: string,
+        heading: string,
+        name: string,
+        streetRow: string,
+        additionalAddress: string
+    }),
+    data: shape({
+        city: string,
+        country_code: string,
+        firstname: string,
+        lastname: string,
+        postcode: string,
+        region: string,
+        street: arrayOf(string)
+    })
+};

package/src/overwrites/venia-ui/lib/components/OrderHistoryPage/OrderDetails/billingInformation.module.css

@@ -0,0 +1,9 @@
+.root {
+    composes: grid from global;
+    composes: gap-y-1.5 from global;
+}
+
+.heading {
+    composes: font-bold from global;
+    composes: pb-1.5 from global;
+}

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

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

package/src/overwrites/venia-ui/lib/components/OrderHistoryPage/OrderDetails/item.js

@@ -0,0 +1,121 @@
+import React, { useMemo } from 'react';
+import { shape, string, number, arrayOf } from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import { Link } from 'react-router-dom';
+import { useOrderHistoryContext } from '@magento/peregrine/lib/talons/OrderHistoryPage/orderHistoryContext';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import Button from '@magento/venia-ui/lib/components/Button';
+import ProductOptions from '@magento/venia-ui/lib/components/LegacyMiniCart/productOptions';
+import Image from '@magento/venia-ui/lib/components/Image';
+import Price from '@magento/venia-ui/lib/components/Price';
+import defaultClasses from './item.module.css';
+import PlaceholderImage from '@magento/venia-ui/lib/components/Image/placeholderImage';
+
+const Item = props => {
+    const {
+        product_name,
+        product_sale_price,
+        product_url_key,
+        quantity_ordered,
+        selected_options,
+        thumbnail
+    } = props;
+    const { currency, value: unitPrice } = product_sale_price;
+
+    const orderHistoryState = useOrderHistoryContext();
+    const { productURLSuffix } = orderHistoryState;
+    const itemLink = `${product_url_key}${productURLSuffix}`;
+    const mappedOptions = useMemo(
+        () =>
+            selected_options.map(option => ({
+                option_label: option.label,
+                value_label: option.value
+            })),
+        [selected_options]
+    );
+    const classes = useStyle(defaultClasses, props.classes);
+
+    const thumbnailProps = {
+        alt: product_name,
+        classes: { root: classes.thumbnail },
+        width: 50
+    };
+    const thumbnailElement = thumbnail ? (
+        <Image {...thumbnailProps} resource={thumbnail.url} />
+    ) : (
+        <PlaceholderImage {...thumbnailProps} />
+    );
+
+    return (
+        <div className={classes.root}>
+            <Link className={classes.thumbnailContainer} to={itemLink}>
+                {thumbnailElement}
+            </Link>
+            <div className={classes.nameContainer}>
+                <Link to={itemLink}>{product_name}</Link>
+            </div>
+            <ProductOptions
+                options={mappedOptions}
+                classes={{
+                    options: classes.options
+                }}
+            />
+            <span className={classes.quantity}>
+                <FormattedMessage
+                    id="orderDetails.quantity"
+                    defaultMessage="Qty : {quantity}"
+                    values={{
+                        quantity: quantity_ordered
+                    }}
+                />
+            </span>
+            <div className={classes.price}>
+                <Price currencyCode={currency} value={unitPrice} />
+            </div>
+            <Button
+                onClick={() => {
+                    // TODO will be implemented in PWA-979
+                    console.log('Buying Again');
+                }}
+                className={classes.buyAgainButton}
+            >
+                <FormattedMessage
+                    id="orderDetails.buyAgain"
+                    defaultMessage="Buy Again"
+                />
+            </Button>
+        </div>
+    );
+};
+
+export default Item;
+
+Item.propTypes = {
+    classes: shape({
+        root: string,
+        thumbnailContainer: string,
+        thumbnail: string,
+        name: string,
+        options: string,
+        quantity: string,
+        price: string,
+        buyAgainButton: string
+    }),
+    product_name: string.isRequired,
+    product_sale_price: shape({
+        currency: string,
+        value: number
+    }).isRequired,
+    product_url_key: string.isRequired,
+    quantity_ordered: number.isRequired,
+    selected_options: arrayOf(
+        shape({
+            label: string,
+            value: string
+        })
+    ).isRequired,
+    thumbnail: shape({
+        url: string
+    })
+};

package/src/overwrites/venia-ui/lib/components/OrderHistoryPage/OrderDetails/item.module.css

@@ -0,0 +1,35 @@
+.root {
+    composes: grid from global;
+    composes: grid-cols-autoFirst from global;
+    composes: grid-rows-autoFirst from global;
+    composes: gap-y-2 from global;
+    composes: gap-x-4 from global;
+
+    composes: lg_gap-y-1.5 from global;
+}
+
+@media (min-width: 960px) {
+    .root {
+        grid-template-columns: auto repeat(3, 1fr) auto;
+        grid-template-rows: repeat(5, auto);
+    }
+}
+
+.thumbnailContainer {
+    grid-row: 1 / -1;
+}
+
+.nameContainer {
+    composes: font-bold from global;
+    grid-column: 2 / -1;
+}
+
+.buyAgainButton {
+    composes: col-auto from global;
+    composes: invisible from global; /* Hide until PWA-979 is completed */
+    composes: justify-self-start from global;
+    composes: self-start from global;
+    composes: underline from global;
+
+    composes: lg_col-end-[-1] from global;
+}

package/src/overwrites/venia-ui/lib/components/OrderHistoryPage/OrderDetails/items.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import { shape, arrayOf, string, number } from 'prop-types';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+
+import Item from './item';
+
+import defaultClasses from './items.module.css';
+import { FormattedMessage } from 'react-intl';
+
+const Items = props => {
+    const { items, imagesData } = props.data;
+    const classes = useStyle(defaultClasses, props.classes);
+
+    const itemsComponent = items.map(item => (
+        <Item key={item.id} {...item} {...imagesData[item.product_sku]} />
+    ));
+
+    return (
+        <div className={classes.root} data-cy="OrderDetails-Items-root">
+            <h3 className={classes.heading}>
+                <FormattedMessage
+                    id="orderItems.itemsHeading"
+                    defaultMessage="Items"
+                />
+            </h3>
+            <div className={classes.itemsContainer}>{itemsComponent}</div>
+        </div>
+    );
+};
+
+export default Items;
+
+Items.propTypes = {
+    classes: shape({
+        root: string
+    }),
+    data: shape({
+        items: arrayOf(
+            shape({
+                id: string,
+                product_name: string,
+                product_sale_price: shape({
+                    currency: string,
+                    value: number
+                }),
+                product_sku: string,
+                product_url_key: string,
+                selected_options: arrayOf(
+                    shape({
+                        label: string,
+                        value: string
+                    })
+                ),
+                quantity_ordered: number
+            })
+        ),
+        imagesData: arrayOf(
+            shape({
+                id: number,
+                sku: string,
+                thumbnail: shape({
+                    url: string
+                }),
+                url_key: string,
+                url_suffix: string
+            })
+        )
+    })
+};

package/src/overwrites/venia-ui/lib/components/OrderHistoryPage/OrderDetails/items.module.css

@@ -0,0 +1,16 @@
+.root {
+    composes: pr-0 from global;
+
+    composes: lg_grid from global;
+    composes: lg_pr-sm from global;
+}
+
+.heading {
+    composes: font-bold from global;
+    composes: pb-3 from global;
+}
+
+.itemsContainer {
+    composes: grid from global;
+    composes: gap-y-md from global;
+}