@riosst100/pwa-marketplace 2.0.8 → 2.0.9

package/src/overwrites/venia-ui/lib/components/ProductFullDetail/CustomAttributes/AttributeType/Select/select.js

@@ -1,99 +0,0 @@
-import React, { Fragment } from 'react';
-import { arrayOf, bool, shape, string } from 'prop-types';
-
-import { useStyle } from '@magento/venia-ui/lib/classify';
-import RichContent from '@magento/venia-ui/lib/components/RichContent';
-
-import defaultClasses from './select.module.css';
-
-/**
- * Custom Attributes Select Type component.
- *
- * @typedef Select
- * @kind functional component
- *
- * @param {props} props React component props
- *
- * @returns {React.Element} A React component that displays a Select Type Product Attribute.
- */
-const Select = props => {
-    const classes = useStyle(defaultClasses, props.classes);
-    const { attribute_metadata = {}, selected_attribute_options = {} } = props;
-
-    const attributeLabel = attribute_metadata.label ? (
-        <div className={classes.label}>{attribute_metadata.label}</div>
-    ) : null;
-    let attributeContent;
-
-    if (selected_attribute_options.attribute_option?.length > 0) {
-        const { is_html_allowed: isHtml } = attribute_metadata.ui_input;
-
-        if (isHtml) {
-            const options = selected_attribute_options.attribute_option.map(
-                (option, key) => {
-                    return (
-                        // TODO: Get decoded wysiwyg widgets from GraphQl
-                        <RichContent key={key} html={option.label} />
-                    );
-                }
-            );
-
-            attributeContent = (
-                <div className={classes.contentHtml}>{options}</div>
-            );
-        } else {
-            const options = selected_attribute_options.attribute_option
-                .map(option => option.label)
-                .join(', ');
-
-            attributeContent = <div className={classes.content}>{options}</div>;
-        }
-    }
-
-    return (
-        <Fragment>
-            {attributeLabel}
-            {attributeContent}
-        </Fragment>
-    );
-};
-
-/**
- * Props for {@link Select}
- *
- * @typedef props
- *
- * @property {Object} classes An object containing the class names for the attribute
- * @property {String} classes.label CSS class for the attribute label
- * @property {String} classes.content CSS class for the attribute content
- * @property {String} classes.contentHtml CSS class for the attribute content containing html
- * @property {Object} attribute_metadata An object containing the attribute metadata
- * @property {String} attribute_metadata.label The attribute label
- * @property {Object} attribute_metadata.ui_input An object containing the input ui data
- * @property {Boolean} attribute_metadata.ui_input.is_html_allowed Indicates if value might contain html
- * @property {Object} selected_attribute_options An object containing the attribute selected options
- * @property {Array} selected_attribute_options.attribute_option An array of the selected options
- * @property {String} selected_attribute_options.attribute_option.label Label of the selected option
- */
-Select.propTypes = {
-    classes: shape({
-        label: string,
-        content: string,
-        contentHtml: string
-    }),
-    attribute_metadata: shape({
-        label: string,
-        ui_input: shape({
-            is_html_allowed: bool
-        })
-    }),
-    selected_attribute_options: shape({
-        attribute_option: arrayOf(
-            shape({
-                label: string
-            })
-        )
-    })
-};
-
-export default Select;

package/src/overwrites/venia-ui/lib/components/ProductFullDetail/CustomAttributes/AttributeType/Select/select.module.css

@@ -1,13 +0,0 @@
-.label {
-    composes: font-bold from global;
-    composes: inline-block from global;
-    composes: mr-2 from global;
-}
-
-.content {
-    composes: inline-block from global;
-}
-
-.contentHtml {
-    composes: inline-block from global;
-}

package/src/overwrites/venia-ui/lib/components/ProductFullDetail/CustomAttributes/AttributeType/Text/index.js

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

package/src/overwrites/venia-ui/lib/components/ProductFullDetail/CustomAttributes/AttributeType/Text/text.js

@@ -1,88 +0,0 @@
-import React, { Fragment } from 'react';
-import { bool, shape, string } from 'prop-types';
-
-import { useStyle } from '@magento/venia-ui/lib/classify';
-import RichContent from '@magento/venia-ui/lib/components/RichContent';
-
-import defaultClasses from './text.module.css';
-
-/**
- * Custom Attributes Text Type component.
- *
- * @typedef Text
- * @kind functional component
- *
- * @param {props} props React component props
- *
- * @returns {React.Element} A React component that displays a Text Type Product Attribute.
- */
-const Text = props => {
-    const classes = useStyle(defaultClasses, props.classes);
-    const { attribute_metadata = {}, entered_attribute_value = {} } = props;
-
-    const attributeLabel = attribute_metadata.label ? (
-        <div className={classes.label}>{attribute_metadata.label}</div>
-    ) : null;
-    let attributeContent;
-
-    if (entered_attribute_value.value) {
-        const { is_html_allowed: isHtml } = attribute_metadata.ui_input;
-
-        if (isHtml) {
-            // TODO: Get decoded wysiwyg widgets from GraphQl
-            attributeContent = (
-                <div className={classes.contentHtml}>
-                    <RichContent html={entered_attribute_value.value} />
-                </div>
-            );
-        } else {
-            attributeContent = (
-                <div className={classes.content}>
-                    {entered_attribute_value.value}
-                </div>
-            );
-        }
-    }
-
-    return (
-        <Fragment>
-            {attributeLabel}
-            {attributeContent}
-        </Fragment>
-    );
-};
-
-/**
- * Props for {@link Text}
- *
- * @typedef props
- *
- * @property {Object} classes An object containing the class names for the attribute
- * @property {String} classes.label CSS class for the attribute label
- * @property {String} classes.content CSS class for the attribute content
- * @property {String} classes.contentHtml CSS class for the attribute content containing html
- * @property {Object} attribute_metadata An object containing the attribute metadata
- * @property {String} attribute_metadata.label The attribute label
- * @property {Object} attribute_metadata.ui_input An object containing the input ui data
- * @property {Boolean} attribute_metadata.ui_input.is_html_allowed Indicates if value might contain html
- * @property {Object} entered_attribute_value An object containing the attribute value
- * @property {String} entered_attribute_value.value Attribute value
- */
-Text.propTypes = {
-    classes: shape({
-        label: string,
-        content: string,
-        contentHtml: string
-    }),
-    attribute_metadata: shape({
-        label: string,
-        ui_input: shape({
-            is_html_allowed: bool
-        })
-    }),
-    entered_attribute_value: shape({
-        value: string
-    })
-};
-
-export default Text;

package/src/overwrites/venia-ui/lib/components/ProductFullDetail/CustomAttributes/AttributeType/Text/text.module.css

@@ -1,13 +0,0 @@
-.label {
-    composes: font-bold from global;
-    composes: inline-block from global;
-    composes: mr-2 from global;
-}
-
-.content {
-    composes: inline-block from global;
-}
-
-.contentHtml {
-    composes: inline-block from global;
-}

package/src/overwrites/venia-ui/lib/components/ProductFullDetail/CustomAttributes/AttributeType/Textarea/index.js

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

package/src/overwrites/venia-ui/lib/components/ProductFullDetail/CustomAttributes/AttributeType/Textarea/textarea.js

@@ -1,94 +0,0 @@
-import React, { Fragment } from 'react';
-import { bool, shape, string } from 'prop-types';
-
-import { useStyle } from '@magento/venia-ui/lib/classify';
-import RichContent from '@magento/venia-ui/lib/components/RichContent';
-
-import defaultClasses from './textarea.module.css';
-
-/**
- * Custom Attributes Textarea Type component.
- *
- * @typedef Textarea
- * @kind functional component
- *
- * @param {props} props React component props
- *
- * @returns {React.Element} A React component that displays a Textarea Type Product Attribute.
- */
-const Textarea = props => {
-    const classes = useStyle(defaultClasses, props.classes);
-    const {
-        attribute_metadata = {},
-        entered_attribute_value = {},
-        showLabels = true
-    } = props;
-
-    const attributeLabel =
-        attribute_metadata.label && showLabels ? (
-            <div className={classes.label}>{attribute_metadata.label}</div>
-        ) : null;
-    let attributeContent;
-
-    if (entered_attribute_value.value) {
-        const { is_html_allowed: isHtml } = attribute_metadata.ui_input;
-
-        if (isHtml) {
-            // TODO: Get decoded wysiwyg widgets from GraphQl
-
-            attributeContent = (
-                <div className={classes.contentHtml}>
-                    <RichContent html={entered_attribute_value.value} />
-                </div>
-            );
-        } else {
-            attributeContent = (
-                <div className={classes.content}>
-                    {entered_attribute_value.value}
-                </div>
-            );
-        }
-    }
-
-    return (
-        <Fragment>
-            {attributeLabel}
-            {attributeContent}
-        </Fragment>
-    );
-};
-
-/**
- * Props for {@link Textarea}
- *
- * @typedef props
- *
- * @property {Object} classes An object containing the class names for the attribute
- * @property {String} classes.label CSS class for the attribute label
- * @property {String} classes.content CSS class for the attribute content
- * @property {String} classes.contentHtml CSS class for the attribute content containing html
- * @property {Object} attribute_metadata An object containing the attribute metadata
- * @property {String} attribute_metadata.label The attribute label
- * @property {Object} attribute_metadata.ui_input An object containing the input ui data
- * @property {Boolean} attribute_metadata.ui_input.is_html_allowed Indicates if value might contain html
- * @property {Object} entered_attribute_value An object containing the attribute value
- * @property {String} entered_attribute_value.value Attribute value
- */
-Textarea.propTypes = {
-    classes: shape({
-        label: string,
-        content: string,
-        contentHtml: string
-    }),
-    attribute_metadata: shape({
-        label: string,
-        ui_input: shape({
-            is_html_allowed: bool
-        })
-    }),
-    entered_attribute_value: shape({
-        value: string
-    })
-};
-
-export default Textarea;

package/src/overwrites/venia-ui/lib/components/ProductFullDetail/CustomAttributes/AttributeType/Textarea/textarea.module.css

@@ -1,13 +0,0 @@
-.label {
-    composes: font-bold from global;
-    composes: inline-block from global;
-    composes: mr-2 from global;
-}
-
-.content {
-    composes: inline-block from global;
-}
-
-.contentHtml {
-    composes: block from global;
-}

package/src/overwrites/venia-ui/lib/components/ProductFullDetail/CustomAttributes/AttributeType/attributeType.js

@@ -1,67 +0,0 @@
-import React from 'react';
-
-import { useAttributeType } from '@magento/peregrine/lib/talons/ProductFullDetail/CustomAttributes/AttributeType/useAttributeType';
-
-import Boolean from './Boolean';
-import Date from './Date';
-import DateTime from './DateTime';
-import Multiselect from './Multiselect';
-import Price from './Price';
-import Select from './Select';
-import Text from './Text';
-import Textarea from './Textarea';
-
-const defaultTypeConfig = {
-    boolean: {
-        component: Boolean
-    },
-    date: {
-        component: Date
-    },
-    datetime: {
-        component: DateTime
-    },
-    multiselect: {
-        component: Multiselect
-    },
-    price: {
-        component: Price
-    },
-    select: {
-        component: Select
-    },
-    text: {
-        component: Text
-    },
-    textarea: {
-        component: Textarea
-    },
-    texteditor: {
-        component: Textarea
-    },
-    pagebuilder: {
-        component: Textarea
-    }
-};
-
-const AttributeType = props => {
-    const { data, ...rest } = props;
-    const { ui_input_type: type } = data?.attribute_metadata.ui_input || {};
-
-    const { getAttributeTypeConfig } = useAttributeType({
-        typeConfig: defaultTypeConfig
-    });
-
-    if (type) {
-        const attributeTypeConfig = getAttributeTypeConfig(type.toLowerCase());
-        if (attributeTypeConfig && attributeTypeConfig.component) {
-            const Component = attributeTypeConfig.component;
-
-            return <Component {...data} {...rest} />;
-        }
-    }
-
-    return null;
-};
-
-export default AttributeType;

package/src/overwrites/venia-ui/lib/components/ProductFullDetail/CustomAttributes/AttributeType/index.js

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

package/src/overwrites/venia-ui/lib/components/ProductFullDetail/CustomAttributes/customAttributes.js

@@ -1,65 +0,0 @@
-import React, { useMemo } from 'react';
-import { array, shape, string } from 'prop-types';
-
-import { useStyle } from '@magento/venia-ui/lib/classify';
-
-import AttributeType from './AttributeType';
-import defaultClasses from './customAttributes.module.css';
-import cn from 'classnames';
-
-export const IS_VISIBLE_ON_FRONT = 'PRODUCT_DETAILS_PAGE';
-
-const CustomAttributes = props => {
-    const { customAttributes, showLabels } = props;
-    const classes = useStyle(defaultClasses, props.classes);
-
-    const list = useMemo(
-        () =>
-            customAttributes.reduce((previousAttribute, currentAttribute) => {
-                const usedInComponents =
-                    currentAttribute.attribute_metadata?.used_in_components ||
-                    [];
-                // Visible on front attributes only
-                if (usedInComponents.includes(IS_VISIBLE_ON_FRONT)) {
-                    const attributeContent = (
-                        <li
-                            key={currentAttribute.attribute_metadata.uid}
-                            className={cn(classes.listItem, '!text-[14px] py-1')}
-                        >
-                            <AttributeType
-                                showLabels={showLabels}
-                                data={currentAttribute}
-                            />
-                        </li>
-                    );
-
-                    previousAttribute.push(attributeContent);
-                }
-
-                return previousAttribute;
-            }, []),
-        [classes, customAttributes, showLabels]
-    );
-
-    if (list.length === 0) {
-        return null;
-    }
-
-    return (
-        <div className={classes.root}>
-            <ul className={classes.list}>{list}</ul>
-        </div>
-    );
-};
-
-CustomAttributes.propTypes = {
-    classes: shape({
-        root: string,
-        title: string,
-        list: string,
-        listItem: string
-    }),
-    customAttributes: array.isRequired
-};
-
-export default CustomAttributes;

package/src/overwrites/venia-ui/lib/components/ProductFullDetail/CustomAttributes/customAttributes.module.css

@@ -1,8 +0,0 @@
-.root {}
-
-.list {
-    composes: list-none from global;
-    composes: mb-2 from global;
-    composes: mt-2 from global;
-    composes: pl-2 from global;
-}

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

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

package/src/overwrites/venia-ui/lib/components/ProductFullDetail/components/auctionDetail.js

@@ -1,210 +0,0 @@
-import React, { useState } from 'react';
-import cn from 'classnames';
-import Divider from '@riosst100/pwa-marketplace/src/components/Divider';
-import Button from '@magento/venia-ui/lib/components/Button';
-import Modal from '@riosst100/pwa-marketplace/src/components/Modal';
-import BidList from './bidList';
-import { X } from 'react-feather';
-import { primary900 } from '@riosst100/pwa-marketplace/src/theme/vars';
-import Field from '@magento/venia-ui/lib/components/Field';
-import TextInput from '@magento/venia-ui/lib/components/TextInput';
-import { isRequired } from '@magento/venia-ui/lib/util/formValidators';
-import Checkbox from '@magento/venia-ui/lib/components/Checkbox';
-import { Form } from 'informed';
-import Price from '@magento/venia-ui/lib/components/Price';
-import Countdown from 'react-countdown';
-
-const AuctionDetail = (props) => {
-
-    const { className, productDetails } = props;
-    const [open, setOpen] = useState(false)
-
-    const auctionData = productDetails?.auction_data;
-
-    const isAuction = auctionData?.is_auction ? true : false;
-
-    const month = ["January","February","March","April","May","June","July","August","September","October","November","December"];
-
-    const Completionist = () => <span>You are good to go!</span>;
-
-    // Renderer callback with condition
-    const renderer = ({ hours, minutes, days, seconds, completed }) => {
-    if (completed) {
-        // Render a completed state
-        return <Completionist />;
-    } else {
-        // Render a countdown
-        return <div className='flex flex-row gap-8'>
-            <div className='flex flex-col'>
-                <div className='text-[40px] leading-[normal] font-medium'>
-                {days}
-                </div>
-                <div className='text-[14px] font-bold'>
-                    days
-                </div>
-            </div>
-            <div className='flex flex-col'>
-                <div className='text-[40px] leading-[normal] font-medium'>
-                {hours}
-                </div>
-                <div className='text-[14px] font-bold'>
-                    hours
-                </div>
-            </div>
-            <div className='flex flex-col'>
-                <div className='text-[40px] leading-[normal] font-medium'>
-                {minutes}
-                </div>
-                <div className='text-[14px] font-bold'>
-                    minutes
-                </div>
-            </div>
-            <div className='flex flex-col'>
-                <div className='text-[40px] leading-[normal] font-medium'>
-                {seconds}
-                </div>
-                <div className='text-[14px] font-bold'>
-                    seconds
-                </div>
-            </div>
-        </div>;
-    }
-    };
-
-    console.log(auctionData)
-
-    const endDate = auctionData && auctionData.stop_auction_time ? new Date(auctionData.stop_auction_time) : null;
-
-    return isAuction && <>
-        <Modal
-            open={open}
-            className='!p-[30px] md_min-w-[550px] modal_bid'
-        >
-            <div className='modal_bid-content'>
-                <div className='header_title-modal flex justify-between mb-10'>
-                    <div className='text-lg text-black font-medium'>
-                        Place bid
-                    </div>
-                    <button onClick={() => { setOpen(!open) }} >
-                        <X size={24} color={primary900} />
-                    </button>
-                </div>
-
-                <div className='flex flex-col gap-y-[25px]'>
-                    <div className='current_bid flex flex-col gap-y-2.5'>
-                        <span className='text-[14px] font-bold text-gray-500'>
-                            Current bid
-                        </span>
-                        <span className='text-2xl font-medium'>
-                            $102.50
-                        </span>
-                    </div>
-
-                    <BidList expanded />
-                    <Form
-                        data-cy="form_bid"
-                        className="flex flex-col gap-y-5"
-                        initialValues={{}}
-                        onSubmit={() => { }}
-                        onChange={() => { }}
-                    >
-                        <Field
-                            id="bid_amount_field"
-                            label={'Bid Amount'}
-                        >
-                            <TextInput
-                                id="bid_amout"
-                                field="bid_amount"
-                                validate={isRequired}
-                                validateOnBlur
-                                mask={value => value && value.trim()}
-                                maskOnBlur={true}
-                                data-cy="bid_amount"
-                                aria-label={'bid_amount'}
-                                placeholder={'$10.00'}
-                            />
-                            <small className='helpet-text text-[12px] font-normal text-gray-200 mt-1'>
-                                Enter $103.50 or more
-                            </small>
-                        </Field>
-
-                        <Checkbox
-                            field="auto_bid"
-                            id="auto_bid"
-                            label={'Place Bid As Automatic'}
-                        />
-
-                        <div className='actions flex justify-end gap-x-2.5'>
-                            <Button
-                                priority='low'
-                                classes={{
-                                    content: 'capitalize text-[16px] font-medium'
-                                }}
-                                onClick={() => setOpen(false)}
-                            >
-                                Cancel
-                            </Button>
-                            <Button
-                                priority='high'
-                                classes={{
-                                    content: 'capitalize text-[16px] font-medium'
-                                }}
-                            >
-                                Place Bid
-                            </Button>
-                        </div>
-                    </Form>
-                </div>
-            </div>
-        </Modal>
-        <div
-            className={cn(
-                'flex flex-col border border-gray-100 rounded-lg px-5 py-[30px] gap-x-2.5 gap-y-5',
-                className
-            )}
-        >
-            <div className='flex flex-row justify-between'>
-                <div className='flex flex-col gap-2.5'>
-                    <div className='text-[16px] font-bold text-gray-500'>
-                        Starting Price
-                    </div>
-                    <div className='text-[40px] font-medium text-colorDefault'>
-                        <Price
-                            currencyCode={productDetails.price.currency}
-                            value={auctionData.starting_price}
-                        />
-                    </div>
-                </div>
-                <Divider className="w-[1px] !h-[105px]" />
-                <div className='flex flex-col gap-2.5'>
-                    <div className='text-[16px] font-bold text-gray-500'>
-                        Auction ends in
-                    </div>
-                    <Countdown
-                        date={new Date(auctionData.stop_auction_time)}
-                        renderer={renderer}
-                    />
-                </div>
-            </div>
-
-            <div className='text-gray-800 font-bold text-[20px]'>
-                {/* Ends at January 12, 2024 10:15 AM */}
-                Ends at {month[endDate.getMonth()] + ' ' + endDate.getDate() + ', ' + endDate.getFullYear() + ' ' + endDate.getHours() + ':' + endDate.getMinutes() + ':' + endDate.getSeconds()}
-            </div>
-
-            <Button
-                priority='high'
-                classes={{
-                    content: 'capitalize text-[16px] font-medium'
-                }}
-                onClick={() => setOpen(true)}
-            >
-                Place Bid
-            </Button>
-
-            <BidList {...props} />
-        </div>
-    </>
-}
-
-export default AuctionDetail;