@riosst100/pwa-marketplace 2.0.7 → 2.0.9

package/src/overwrites/venia-ui/lib/components/Button/button.module.css

@@ -1,132 +0,0 @@
-.root {
-    composes: border from global;
-    composes: border-solid from global;
-    composes: cursor-pointer from global;
-    composes: font-bold from global;
-    composes: inline-flex from global;
-    composes: items-center from global;
-    composes: justify-center from global;
-    composes: max-w-full from global;
-    composes: min-w-[10rem] from global;
-    composes: outline-none from global;
-    composes: pointer-events-auto from global;
-    composes: px-sm from global;
-    composes: rounded-full from global;
-    composes: text-center from global;
-    composes: text-sm from global;
-    composes: uppercase from global;
-    composes: py-2 from global;
-
-    transition-duration: 256ms;
-    transition-property: background-color, border-color, color;
-    transition-timing-function: var(--venia-global-anim-standard);
-
-    composes: disabled_bg-gray-400 from global;
-    composes: disabled_border-gray-400 from global;
-    composes: disabled_opacity-50 from global;
-    composes: disabled_pointer-events-none from global;
-    composes: disabled_text-white from global;
-
-    composes: focus_shadow-inputFocus from global;
-}
-
-.root:active {
-    transition-duration: 128ms;
-}
-
-/**
- * Some browsers retain the :hover state after a click, this ensures if a button becomes disabled after
- * being clicked it will be visually disabled.
- */
-.root:hover:disabled {
-    /* TODO @TW: cannot compose. This may not be possible with two variants. */
-    pointer-events: none;
-}
-
-.root_lowPriority {
-    composes: root;
-
-    composes: bg-transparent from global;
-    composes: border-blue-600 from global;
-    composes: text-blue-600 from global;
-
-    /* composes: active_border-blue-600 from global;
-    composes: active_text-gray-800 from global; */
-
-    /* composes: hover_border-blue-600 from global; */
-    composes: hover_bg-blue-600 from global;
-    composes: hover_text-white from global;
-    composes: focus_shadow-none from global;
-}
-
-.root_normalPriority {
-    composes: root;
-
-    composes: bg-transparent from global;
-    composes: border-brand-dark from global;
-    composes: text-brand-dark from global;
-
-    composes: active_border-brand-darkest from global;
-    composes: active_text-brand-darkest from global;
-
-    composes: hover_border-brand-darkest from global;
-    composes: hover_text-brand-darkest from global;
-    composes: focus_shadow-none from global;
-}
-
-.root_highPriority {
-    composes: root;
-
-    composes: bg-brand-dark from global;
-    composes: border-brand-dark from global;
-    composes: text-white from global;
-
-    composes: active_bg-brand-darkest from global;
-    composes: active_border-brand-darkest from global;
-    composes: active_text-white from global;
-
-    composes: hover_bg-brand-darkest from global;
-    composes: hover_border-brand-darkest from global;
-    composes: hover_text-white from global;
-    composes: focus_shadow-none from global;
-}
-
-.root_lowPriorityNegative,
-.root_normalPriorityNegative {
-    composes: root;
-
-    composes: bg-transparent from global;
-    composes: border-red-600 from global;
-    composes: text-red-600 from global;
-
-    composes: active_border-red-700 from global;
-    composes: active_text-red-700 from global;
-
-    composes: hover_border-red-700 from global;
-    composes: hover_text-red-700 from global;
-}
-
-.root_highPriorityNegative {
-    composes: root;
-
-    composes: bg-red-600 from global;
-    composes: border-red-600 from global;
-    composes: text-white from global;
-
-    composes: active_bg-red-700 from global;
-    composes: active_border-red-700 from global;
-    composes: active_text-white from global;
-
-    composes: hover_bg-red-700 from global;
-    composes: hover_border-red-700 from global;
-    composes: hover_text-white from global;
-}
-
-.content {
-    composes: gap-1.5 from global;
-    composes: grid-flow-col from global;
-    composes: inline-grid from global;
-    composes: items-center from global;
-    composes: justify-center from global;
-    composes: justify-items-center from global;
-}

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

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

package/src/overwrites/venia-ui/lib/components/CartPage/GiftCards/giftCard.js

@@ -1,50 +0,0 @@
-import React, { Fragment } from 'react';
-import { FormattedMessage } from 'react-intl';
-
-import { useGiftCard } from '@magento/peregrine/lib/talons/CartPage/GiftCards/useGiftCard.js';
-import Price from '@magento/venia-ui/lib/components/Price';
-
-import { useStyle } from '@magento/venia-ui/lib/classify';
-import defaultClasses from './giftCard.module.css';
-import LinkButton from '@magento/venia-ui/lib/components/LinkButton';
-
-const GiftCard = props => {
-    const { code, currentBalance, isRemovingCard, removeGiftCard } = props;
-
-    const { removeGiftCardWithCode } = useGiftCard({
-        code,
-        removeGiftCard
-    });
-
-    const classes = useStyle(defaultClasses, props.classes);
-
-    return (
-        <Fragment>
-            <div className={classes.card_info}>
-                <span className={classes.code}>{code}</span>
-                <span className={classes.balance}>
-                    <FormattedMessage
-                        id={'giftCard.balance'}
-                        defaultMessage={'Balance: '}
-                    />
-                    <Price
-                        value={currentBalance.value}
-                        currencyCode={currentBalance.currency}
-                    />
-                </span>
-            </div>
-            <LinkButton
-                disabled={isRemovingCard}
-                onClick={removeGiftCardWithCode}
-                data-cy="GiftCards-GiftCard-removeButton"
-            >
-                <FormattedMessage
-                    id={'giftCard.remove'}
-                    defaultMessage={'Remove'}
-                />
-            </LinkButton>
-        </Fragment>
-    );
-};
-
-export default GiftCard;

package/src/overwrites/venia-ui/lib/components/CartPage/GiftCards/giftCard.module.css

@@ -1,11 +0,0 @@
-.card_info {
-    composes: grid from global;
-    composes: gap-y-2xs from global;
-}
-
-.balance {
-    composes: text-sm from global;
-}
-
-.code {
-}

package/src/overwrites/venia-ui/lib/components/CartPage/GiftCards/giftCards.js

@@ -1,238 +0,0 @@
-import React, { useEffect } from 'react';
-import { FormattedMessage, useIntl } from 'react-intl';
-import { Form } from 'informed';
-import { AlertCircle as AlertCircleIcon } from 'react-feather';
-
-import { useGiftCards } from '@magento/peregrine/lib/talons/CartPage/GiftCards/useGiftCards';
-import { Price, useToasts } from '@magento/peregrine';
-
-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 Icon from '@magento/venia-ui/lib/components/Icon';
-import LinkButton from '@magento/venia-ui/lib/components/LinkButton';
-import LoadingIndicator from '@magento/venia-ui/lib/components/LoadingIndicator';
-import TextInput from '@magento/venia-ui/lib/components/TextInput';
-import defaultClasses from './giftCards.module.css';
-import GiftCard from './giftCard';
-
-const errorIcon = (
-    <Icon
-        src={AlertCircleIcon}
-        attrs={{
-            width: 18
-        }}
-    />
-);
-
-/**
- * GiftCards is a child component of the CartPage component.
- * This component shows a form for applying gift cards along with a list of applied
- * Gift Cards in the shopping cart.
- *
- * @param {Object} props Component props
- * @param {Function} props.setIsCartUpdating Callback function to call when adding or removing a gift card
- * @param {Object} props.classes CSS className overrides.
- * See [giftCards.module.css]{@link https://github.com/magento/pwa-studio/blob/develop/packages/venia-ui/lib/components/CartPage/GiftCards/giftCards.module.css}
- * for a list of classes you can override.
- *
- * @returns {React.Element}
- *
- * @example <caption>Importing into your project</caption>
- * import GiftCards from '@magento/venia-ui/lib/components/CartPage/GiftCards';
- */
-const GiftCards = props => {
-    const talonProps = useGiftCards({
-        setIsCartUpdating: props.setIsCartUpdating
-    });
-    const {
-        applyGiftCard,
-        checkBalanceData,
-        checkGiftCardBalance,
-        checkGiftCardBalanceKeyPress,
-        errorLoadingGiftCards,
-        errorRemovingCard,
-        giftCardsData,
-        handleEnterKeyPress,
-        isLoadingGiftCards,
-        isApplyingCard,
-        isCheckingBalance,
-        isRemovingCard,
-        removeGiftCard,
-        shouldDisplayCardBalance,
-        shouldDisplayCardError
-    } = talonProps;
-
-    const classes = useStyle(defaultClasses, props.classes);
-    const { formatMessage } = useIntl();
-    const [, { addToast }] = useToasts();
-    useEffect(() => {
-        if (errorRemovingCard) {
-            addToast({
-                type: 'error',
-                icon: errorIcon,
-                message: formatMessage({
-                    id: 'giftCards.errorRemoving',
-                    defaultMessage:
-                        'Unable to remove gift card. Please try again.'
-                }),
-                dismissable: true,
-                timeout: 7000
-            });
-        }
-    }, [addToast, errorRemovingCard, formatMessage]);
-
-    if (isLoadingGiftCards) {
-        return (
-            <LoadingIndicator>
-                <FormattedMessage
-                    id={'giftCards.loading'}
-                    defaultMessage={'Loading Gift Cards...'}
-                />
-            </LoadingIndicator>
-        );
-    }
-
-    const cardEntryErrorMessage = shouldDisplayCardError
-        ? formatMessage({
-            id: 'giftCards.errorInvalid',
-            defaultMessage: 'Invalid card. Please try again.'
-        })
-        : null;
-
-    let appliedGiftCards = null;
-    if (errorLoadingGiftCards) {
-        appliedGiftCards = (
-            <span className={classes.errorText}>
-                <FormattedMessage
-                    id={'giftCards.errorLoading'}
-                    defaultMessage={
-                        'There was an error loading applied gift cards. Please refresh and try again.'
-                    }
-                />
-            </span>
-        );
-    }
-    if (giftCardsData.length > 0) {
-        const cardList = giftCardsData.map(giftCardData => {
-            const { code, current_balance } = giftCardData;
-
-            return (
-                <GiftCard
-                    code={code}
-                    currentBalance={current_balance}
-                    isRemovingCard={isRemovingCard}
-                    key={code}
-                    removeGiftCard={removeGiftCard}
-                />
-            );
-        });
-
-        appliedGiftCards = (
-            <div className={classes.cards_container}>{cardList}</div>
-        );
-    }
-
-    const containerClass = shouldDisplayCardError
-        ? classes.card_input_container_error
-        : classes.card_input_container;
-
-    const cardBalance = (
-        <div className={classes.balance}>
-            {checkBalanceData && shouldDisplayCardBalance ? (
-                <div className={classes.price}>
-                    <FormattedMessage
-                        id={'giftCards.balance'}
-                        defaultMessage={'Balance: '}
-                    />
-                    <Price
-                        value={checkBalanceData.balance.value}
-                        currencyCode={checkBalanceData.balance.currency}
-                    />
-                </div>
-            ) : (
-                <span className={classes.invalid_card_error}>
-                    {cardEntryErrorMessage}
-                </span>
-            )}
-        </div>
-    );
-
-    const cardEntryContents = (
-        <div className={classes.card}>
-            <Field
-                classes={{
-                    root: classes.entry
-                }}
-                id={classes.card}
-                label={formatMessage({
-                    id: 'giftCards.cardNumber',
-                    defaultMessage: 'Gift Card Number'
-                })}
-            >
-                <div className={containerClass}>
-                    <TextInput
-                        id={classes.card}
-                        data-cy="GiftCards-card"
-                        disabled={isApplyingCard || isCheckingBalance}
-                        field="card"
-                        mask={value => value && value.trim()}
-                        maskOnBlur={true}
-                        // message={cardEntryErrorMessage}
-                        placeholder={formatMessage({
-                            id: 'giftCards.cardEntry',
-                            defaultMessage: 'Enter card number'
-                        })}
-                        validate={isRequired}
-                    />
-                </div>
-                <span aria-live="polite">{cardBalance}</span>
-            </Field>
-            <Field
-                classes={{
-                    label: classes.applyLabel
-                }}
-            >
-                <Button
-                    priority={'normal'}
-                    data-cy="GiftCards-apply"
-                    disabled={isApplyingCard}
-                    onClick={applyGiftCard}
-                    onKeyDown={handleEnterKeyPress}
-                >
-                    <FormattedMessage
-                        id={'giftCards.apply'}
-                        defaultMessage={'Apply'}
-                    />
-                </Button>
-            </Field>
-            <LinkButton
-                className={classes.check_balance_button}
-                disabled={isCheckingBalance}
-                onClick={checkGiftCardBalance}
-                onKeyDown={checkGiftCardBalanceKeyPress}
-            >
-                <FormattedMessage
-                    id={'giftCards.checkBalance'}
-                    defaultMessage={'Check balance'}
-                />
-            </LinkButton>
-        </div>
-    );
-
-    return (
-        <div className={classes.root}>
-            <div className={classes.entryForm}>{cardEntryContents}</div>
-            {appliedGiftCards}
-        </div>
-    );
-};
-
-export default props => {
-    return (
-        <Form data-cy="GiftCards-form">
-            <GiftCards {...props} />
-        </Form>
-    );
-};

package/src/overwrites/venia-ui/lib/components/CartPage/GiftCards/giftCards.module.css

@@ -1,98 +0,0 @@
-.root {
-    composes: grid from global;
-    composes: gap-md from global;
-}
-
-.errorText {
-    composes: leading-normal from global;
-    composes: text-error from global;
-}
-
-.balance {
-    composes: grid from global;
-    composes: italic from global;
-    composes: items-start from global;
-    composes: pt-1.5 from global;
-    composes: text-sm from global;
-    grid-template-columns: max-content 1fr;
-}
-
-.card {
-    composes: gap-sm from global;
-    composes: grid from global;
-    composes: grid-cols-1 from global;
-    composes: items-start from global;
-    grid-template-areas:
-        'card_entry'
-        'check_balance_button'
-        'apply_button';
-
-    composes: lg_grid-cols-autoLast from global;
-}
-
-@media (min-width: 960px) {
-    .card {
-        grid-template-areas:
-            'card_entry apply_button'
-            'check_balance_button check_balance_button';
-    }
-}
-
-.card_input_container {}
-
-.invalid_card_error {
-    color: red;
-}
-
-/* TODO @TW: cannot compose */
-.card_input_container_error input {
-    /* composes: border-error from global; */
-    border-color: rgb(var(--venia-global-color-red-400));
-}
-
-/* TODO @TW: cannot compose */
-.card_input_container_error input:focus {
-    /* composes: border-gray-600 from global; */
-    border-color: rgb(var(--venia-global-color-gray-600));
-}
-
-/* TODO @TW: cannot compose */
-.card_input_container_error p {
-    /* composes: text-error from global; */
-    color: rgb(var(--venia-global-color-error));
-    /* composes: font-medium from global; */
-    font-weight: 600;
-}
-
-.cards_container {
-    composes: gap-sm from global;
-    composes: grid from global;
-    composes: items-baseline from global;
-    composes: justify-start from global;
-    grid-template-columns: max-content auto;
-}
-
-.check_balance_button {
-    composes: root from '@magento/venia-ui/lib/components/LinkButton/linkButton.module.css';
-
-    composes: justify-self-center from global;
-    grid-area: check_balance_button;
-
-    composes: lg_justify-self-start from global;
-}
-
-.entry {
-    grid-area: card_entry;
-}
-
-.price {}
-
-.entryForm {}
-
-.applyLabel {
-    composes: label from '../../Field/field.module.css';
-
-    composes: hidden from global;
-
-    composes: lg_block from global;
-}

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

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