@riosst100/pwa-marketplace 1.3.3 → 1.3.5

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;
+}

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

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

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

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

@@ -0,0 +1,64 @@
+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';
+
+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={classes.listItem}
+                        >
+                            <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

@@ -0,0 +1,9 @@
+.root {
+}
+
+.list {
+    composes: list-disc from global;
+    composes: mb-4 from global;
+    composes: mt-4 from global;
+    composes: pl-6 from global;
+}

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

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

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

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

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

@@ -0,0 +1,7 @@
+/**
+ * @deprecated - replaced by general mutation in @magento/peregrine/lib/talons/productFullDetail.js
+ */
+export {
+    ADD_SIMPLE_MUTATION,
+    ADD_CONFIGURABLE_MUTATION
+} from '@magento/peregrine/lib/talons/ProductFullDetail/productFullDetail.gql.ce';