@riosst100/pwa-marketplace 1.3.2 → 1.3.4

package/src/overwrites/venia-ui/lib/components/ProductFullDetail/CustomAttributes/AttributeType/Date/date.module.css

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

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

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

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

@@ -0,0 +1,85 @@
+import React, { Fragment } from 'react';
+import { shape, string } from 'prop-types';
+import { FormattedDate, FormattedTime } from 'react-intl';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+
+import defaultClasses from './dateTime.module.css';
+
+/**
+ * Custom Attributes DateTime Type component.
+ *
+ * @typedef DateTime
+ * @kind functional component
+ *
+ * @param {props} props React component props
+ *
+ * @returns {React.Element} A React component that displays a DateTime Type Product Attribute.
+ */
+const DateTime = 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;
+
+    // TODO: Get correct data from GraphQl based on config time zone
+    if (entered_attribute_value.value) {
+        // Convert date to ISO-8601 format so Safari can also parse it
+        const isoFormattedDate = entered_attribute_value.value.replace(
+            ' ',
+            'T'
+        );
+
+        attributeContent = (
+            <div className={classes.content}>
+                <FormattedDate
+                    value={isoFormattedDate}
+                    year="numeric"
+                    month="short"
+                    day="2-digit"
+                />
+                {/* eslint-disable-next-line react/jsx-no-literals */}
+                {', '}
+                <FormattedTime value={isoFormattedDate} />
+            </div>
+        );
+    }
+
+    return (
+        <Fragment>
+            {attributeLabel}
+            {attributeContent}
+        </Fragment>
+    );
+};
+
+/**
+ * Props for {@link DateTime}
+ *
+ * @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 {Object} attribute_metadata An object containing the attribute metadata
+ * @property {String} attribute_metadata.label The attribute label
+ * @property {Object} entered_attribute_value An object containing the attribute value
+ * @property {String} entered_attribute_value.value Attribute value
+ */
+DateTime.propTypes = {
+    classes: shape({
+        label: string,
+        content: string
+    }),
+    attribute_metadata: shape({
+        label: string
+    }),
+    entered_attribute_value: shape({
+        value: string
+    })
+};
+
+export default DateTime;

package/src/overwrites/venia-ui/lib/components/ProductFullDetail/CustomAttributes/AttributeType/DateTime/dateTime.module.css

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

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

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

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

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

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

@@ -0,0 +1,104 @@
+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 './multiselect.module.css';
+
+/**
+ * Custom Attributes Multiselect Type component.
+ *
+ * @typedef Multiselect
+ * @kind functional component
+ *
+ * @param {props} props React component props
+ *
+ * @returns {React.Element} A React component that displays a Multiselect Type Product Attribute.
+ */
+const Multiselect = 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
+                            classes={{ root: classes.option }}
+                            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 Multiselect}
+ *
+ * @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
+ */
+Multiselect.propTypes = {
+    classes: shape({
+        label: string,
+        content: string,
+        contentHtml: string,
+        option: 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 Multiselect;

package/src/overwrites/venia-ui/lib/components/ProductFullDetail/CustomAttributes/AttributeType/Multiselect/multiselect.module.css

@@ -0,0 +1,22 @@
+.label {
+    composes: font-bold from global;
+    composes: inline-block from global;
+    composes: mr-2 from global;
+}
+
+.content {
+    composes: inline from global;
+}
+
+.contentHtml {
+    composes: inline from global;
+}
+
+.option {
+    composes: inline-block from global;
+    composes: break-words from global;
+}
+
+.option:not(:last-child)::after {
+    content: ',\00a0';
+}

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

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

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

@@ -0,0 +1,74 @@
+import React, { Fragment } from 'react';
+import { shape, string } from 'prop-types';
+
+import { BrowserPersistence } from '@magento/peregrine/lib/util';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import PriceComponent from '@magento/venia-ui/lib/components/Price';
+
+import defaultClasses from './price.module.css';
+
+const storage = new BrowserPersistence();
+
+/**
+ * Custom Attributes Price Type component.
+ *
+ * @typedef Price
+ * @kind functional component
+ *
+ * @param {props} props React component props
+ *
+ * @returns {React.Element} A React component that displays a Price Type Product Attribute.
+ */
+const Price = props => {
+    const classes = useStyle(defaultClasses, props.classes);
+    const { attribute_metadata = {}, entered_attribute_value = {} } = props;
+
+    // TODO: Get complete price data from GraphQl including currency
+    const storeCurrency = storage.getItem('store_view_currency') || 'USD';
+    const attributeLabel = attribute_metadata.label ? (
+        <div className={classes.label}>{attribute_metadata.label}</div>
+    ) : null;
+    const attributeContent = entered_attribute_value.value ? (
+        <div className={classes.attributeContent}>
+            <PriceComponent
+                value={parseInt(entered_attribute_value.value)}
+                currencyCode={storeCurrency}
+            />
+        </div>
+    ) : null;
+
+    return (
+        <Fragment>
+            {attributeLabel}
+            {attributeContent}
+        </Fragment>
+    );
+};
+
+/**
+ * Props for {@link Price}
+ *
+ * @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 {Object} attribute_metadata An object containing the attribute metadata
+ * @property {String} attribute_metadata.label The attribute label
+ * @property {Object} entered_attribute_value An object containing the attribute value
+ * @property {String} entered_attribute_value.value Attribute value
+ */
+Price.propTypes = {
+    classes: shape({
+        label: string,
+        content: string
+    }),
+    attribute_metadata: shape({
+        label: string
+    }),
+    entered_attribute_value: shape({
+        value: string
+    })
+};
+
+export default Price;

package/src/overwrites/venia-ui/lib/components/ProductFullDetail/CustomAttributes/AttributeType/Price/price.module.css

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,13 @@
+.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;
+}