@configuratorware/configurator-frontendgui 1.34.0 → 1.35.0

package/src/App/Modules/Creator/Components/Option/__snapshots__/index.test.js.snap

@@ -2,7 +2,7 @@
 
 exports[`Option calls the children prop if provided 1`] = `
 <div
-  class="Option-root-123 custom-css-option"
+  class="Option-root-133 custom-css-option"
   data-option="010002011000"
 >
   <div
@@ -23,44 +23,44 @@ exports[`Option calls the render prop if provided 1`] = `
 
 exports[`Option renders with Delay link 1`] = `
 <div
-  class="Option-root-79 custom-css-option"
+  class="Option-root-85 custom-css-option"
   data-option="010002011000"
 >
   <div
     class="content 010002011000"
   >
     <div
-      class="Option-image-78"
+      class="Option-image-84"
     />
     <div
-      class="Option-text-80"
+      class="Option-text-86"
     >
       <div
         class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12"
       >
         <div
-          class="MuiTypography-root Option-optionList-76 MuiTypography-body2"
+          class="MuiTypography-root Option-optionList-82 MuiTypography-body2"
         >
           <div
-            class="Option-title-77"
+            class="Option-title-83"
           >
             Argentina 1000
           </div>
           <div
-            class="Option-price-73"
+            class="Option-price-79"
           >
             € 123.00
           </div>
           <div
-            class="Option-details-74"
+            class="Option-details-80"
           >
             <div>
               <a
-                class="Option-iconWithText-75"
+                class="Option-iconWithText-81"
               >
                 <svg
                   aria-hidden="true"
-                  class="MuiSvgIcon-root Option-materialIcon-72"
+                  class="MuiSvgIcon-root Option-materialIcon-78"
                   focusable="false"
                   viewBox="0 0 24 24"
                 >
@@ -84,51 +84,51 @@ exports[`Option renders with Delay link 1`] = `
 
 exports[`Option renders with Incompatibility link 1`] = `
 <div
-  class="Option-root-57 custom-css-option"
+  class="Option-root-61 custom-css-option"
   data-option="010002011000"
 >
   <div
     class="content 010002011000"
   >
     <div
-      class="Option-image-56"
+      class="Option-image-60"
     />
     <div
-      class="Option-text-58"
+      class="Option-text-62"
     >
       <div
         class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12"
       >
         <div
-          class="MuiTypography-root Option-optionList-54 MuiTypography-body2"
+          class="MuiTypography-root Option-optionList-58 MuiTypography-body2"
         >
           <div
-            class="Option-title-55"
+            class="Option-title-59"
           >
             Argentina 1000
           </div>
           <div
-            class="Option-price-51"
+            class="Option-price-55"
           >
             € 123.00
           </div>
           <div
-            class="Option-description-49"
+            class="Option-description-53"
           >
             <p>
               abstract
             </p>
           </div>
           <div
-            class="Option-details-52"
+            class="Option-details-56"
           >
             <div>
               <a
-                class="Option-iconWithText-53"
+                class="Option-iconWithText-57"
               >
                 <svg
                   aria-hidden="true"
-                  class="MuiSvgIcon-root Option-materialIcon-50 custom-css-rule-info-icon-option"
+                  class="MuiSvgIcon-root Option-materialIcon-54 custom-css-rule-info-icon-option"
                   focusable="false"
                   viewBox="0 0 24 24"
                 >
@@ -137,7 +137,7 @@ exports[`Option renders with Incompatibility link 1`] = `
                   />
                 </svg>
                 <p
-                  class="MuiTypography-root Option-iconWithText-53 MuiTypography-body2"
+                  class="MuiTypography-root Option-iconWithText-57 MuiTypography-body2"
                 />
               </a>
             </div>
@@ -151,43 +151,43 @@ exports[`Option renders with Incompatibility link 1`] = `
 
 exports[`Option renders with Not Available link 1`] = `
 <div
-  class="Option-root-68 custom-css-option"
+  class="Option-root-73 custom-css-option"
   data-option="010002011000"
 >
   <div
     class="content 010002011000 disabled"
   >
     <div
-      class="Option-image-67"
+      class="Option-image-72"
     />
     <div
-      class="Option-text-69"
+      class="Option-text-74"
     >
       <div
         class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12"
       >
         <div
-          class="MuiTypography-root Option-optionList-65 MuiTypography-body2"
+          class="MuiTypography-root Option-optionList-70 MuiTypography-body2"
         >
           <div
-            class="Option-title-66"
+            class="Option-title-71"
           >
             Argentina 1000
           </div>
           <div
-            class="Option-price-62"
+            class="Option-price-67"
           >
             € 123.00
           </div>
           <div
-            class="Option-details-63"
+            class="Option-details-68"
           >
             <div
-              class="Option-iconWithText-64"
+              class="Option-iconWithText-69"
             >
               <svg
                 aria-hidden="true"
-                class="MuiSvgIcon-root Option-materialIcon-61"
+                class="MuiSvgIcon-root Option-materialIcon-66"
                 focusable="false"
                 viewBox="0 0 24 24"
               >
@@ -210,36 +210,36 @@ exports[`Option renders with Not Available link 1`] = `
 
 exports[`Option renders with Option Group button 1`] = `
 <div
-  class="Option-root-90 custom-css-option"
+  class="Option-root-97 custom-css-option"
   data-option="010002011000"
 >
   <div
     class="content 010002011000"
   >
     <div
-      class="Option-image-89"
+      class="Option-image-96"
     />
     <div
-      class="Option-text-91"
+      class="Option-text-98"
     >
       <div
         class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12"
       >
         <div
-          class="MuiTypography-root Option-optionList-87 MuiTypography-body2"
+          class="MuiTypography-root Option-optionList-94 MuiTypography-body2"
         >
           <div
-            class="Option-title-88"
+            class="Option-title-95"
           >
             Argentina 1000
           </div>
           <div
-            class="Option-price-84"
+            class="Option-price-91"
           >
             € 123.00
           </div>
           <div
-            class="Option-details-85"
+            class="Option-details-92"
           >
             <div>
               <div
@@ -307,6 +307,65 @@ exports[`Option renders with Option Group button 1`] = `
 </div>
 `;
 
+exports[`Option renders with TextInput 1`] = `
+<div
+  class="Option-root-145 custom-css-option"
+  data-option="010002011000"
+>
+  <div
+    class="content 010002011000"
+  >
+    <div
+      class="Option-image-144"
+    >
+      <img
+        src="/images/options/010002011000.png"
+      />
+    </div>
+    <div
+      class="Option-text-146"
+    >
+      <div
+        class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12"
+      >
+        <div
+          class="MuiTypography-root Option-optionList-142 MuiTypography-body2"
+        >
+          <div
+            class="Option-title-143"
+          >
+            Argentina 1000
+          </div>
+          <div
+            class="MuiFormControl-root MuiTextField-root Option-optionTextInput-148"
+          >
+            <div
+              class="MuiInputBase-root MuiInput-root MuiInput-underline Mui-disabled Mui-disabled MuiInputBase-formControl MuiInput-formControl"
+            >
+              <input
+                aria-invalid="false"
+                class="MuiInputBase-input MuiInput-input Mui-disabled Mui-disabled"
+                disabled=""
+                type="text"
+                value=""
+              />
+            </div>
+          </div>
+          <div
+            class="Option-price-139"
+          >
+            € 123.00
+          </div>
+          <div
+            class="Option-details-140"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`Option renders with an available image 1`] = `
 <div
   class="Option-root-9 custom-css-option"
@@ -353,51 +412,51 @@ exports[`Option renders with an available image 1`] = `
 
 exports[`Option renders with details 1`] = `
 <div
-  class="Option-root-46 custom-css-option"
+  class="Option-root-49 custom-css-option"
   data-option="010002011000"
 >
   <div
     class="content 010002011000"
   >
     <div
-      class="Option-image-45"
+      class="Option-image-48"
     />
     <div
-      class="Option-text-47"
+      class="Option-text-50"
     >
       <div
         class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12"
       >
         <div
-          class="MuiTypography-root Option-optionList-43 MuiTypography-body2"
+          class="MuiTypography-root Option-optionList-46 MuiTypography-body2"
         >
           <div
-            class="Option-title-44"
+            class="Option-title-47"
           >
             Argentina 1000
           </div>
           <div
-            class="Option-price-40"
+            class="Option-price-43"
           >
             € 123.00
           </div>
           <div
-            class="Option-description-38"
+            class="Option-description-41"
           >
             <p>
               abstract
             </p>
           </div>
           <div
-            class="Option-details-41"
+            class="Option-details-44"
           >
             <div>
               <a
-                class="Option-iconWithText-42"
+                class="Option-iconWithText-45"
               >
                 <svg
                   aria-hidden="true"
-                  class="MuiSvgIcon-root Option-materialIcon-39 custom-css-rule-info-icon-option"
+                  class="MuiSvgIcon-root Option-materialIcon-42 custom-css-rule-info-icon-option"
                   focusable="false"
                   viewBox="0 0 24 24"
                 >
@@ -406,7 +465,7 @@ exports[`Option renders with details 1`] = `
                   />
                 </svg>
                 <p
-                  class="MuiTypography-root Option-iconWithText-42 MuiTypography-body2"
+                  class="MuiTypography-root Option-iconWithText-45 MuiTypography-body2"
                 />
               </a>
             </div>
@@ -420,46 +479,46 @@ exports[`Option renders with details 1`] = `
 
 exports[`Option renders with selectable amount 1`] = `
 <div
-  class="Option-root-31 custom-css-option"
+  class="Option-root-33 custom-css-option"
   data-option="010002011000"
 >
   <div
-    class="content 010002011000 Option-withAmount-33"
+    class="content 010002011000 Option-withAmount-35"
   >
     <div
-      class="Option-image-30"
+      class="Option-image-32"
     />
     <div
-      class="Option-text-32"
+      class="Option-text-34"
     >
       <div
         class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12"
       >
         <div
-          class="MuiTypography-root Option-optionList-28 MuiTypography-body2"
+          class="MuiTypography-root Option-optionList-30 MuiTypography-body2"
         >
           <div
-            class="Option-title-29"
+            class="Option-title-31"
           >
             Argentina 1000
           </div>
           <div
-            class="Option-price-25"
+            class="Option-price-27"
           >
             € 123.00
           </div>
           <div
-            class="Option-details-26"
+            class="Option-details-28"
           />
         </div>
       </div>
     </div>
     <div
-      class="OptionAmount-root-37"
+      class="OptionAmount-root-40"
     >
       <svg
         aria-hidden="true"
-        class="MuiSvgIcon-root OptionAmount-plus-35"
+        class="MuiSvgIcon-root OptionAmount-plus-38"
         focusable="false"
         viewBox="0 0 24 24"
       >
@@ -468,7 +527,7 @@ exports[`Option renders with selectable amount 1`] = `
         />
       </svg>
       <div
-        class="MuiFormControl-root MuiTextField-root OptionAmount-value-36"
+        class="MuiFormControl-root MuiTextField-root OptionAmount-value-39"
       >
         <div
           class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl"
@@ -483,7 +542,7 @@ exports[`Option renders with selectable amount 1`] = `
       </div>
       <svg
         aria-hidden="true"
-        class="MuiSvgIcon-root OptionAmount-minus-34 disable"
+        class="MuiSvgIcon-root OptionAmount-minus-37 disable"
         focusable="false"
         viewBox="0 0 24 24"
       >
@@ -498,36 +557,36 @@ exports[`Option renders with selectable amount 1`] = `
 
 exports[`Option renders without an available image 1`] = `
 <div
-  class="Option-root-20 custom-css-option"
+  class="Option-root-21 custom-css-option"
   data-option="010002011000"
 >
   <div
     class="content 010002011000"
   >
     <div
-      class="Option-image-19"
+      class="Option-image-20"
     />
     <div
-      class="Option-text-21"
+      class="Option-text-22"
     >
       <div
         class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12"
       >
         <div
-          class="MuiTypography-root Option-optionList-17 MuiTypography-body2"
+          class="MuiTypography-root Option-optionList-18 MuiTypography-body2"
         >
           <div
-            class="Option-title-18"
+            class="Option-title-19"
           >
             Argentina 1000
           </div>
           <div
-            class="Option-price-14"
+            class="Option-price-15"
           >
             € 123.00
           </div>
           <div
-            class="Option-details-15"
+            class="Option-details-16"
           />
         </div>
       </div>

package/src/App/Modules/Creator/Components/Option/index.js

@@ -1,9 +1,11 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { get, has, isArray } from 'lodash';
+import { get, has, isArray, find } from 'lodash';
 import clsx from 'clsx';
 import Grid from '@material-ui/core/Grid/Grid';
-import { Typography, useMediaQuery } from '@material-ui/core';
+import useMediaQuery from '@material-ui/core/useMediaQuery';
+import Typography from '@material-ui/core/Typography';
+import TextField from '@material-ui/core/TextField';
 import BlockRoundedIcon from '@material-ui/icons/BlockRounded';
 import InfoRoundedIcon from '@material-ui/icons/InfoRounded';
 import RestoreRoundedIcon from '@material-ui/icons/RestoreRounded';
@@ -136,6 +138,7 @@ const styles = theme => {
                 width: textWidthWithAmount,
             },
         },
+        optionTextInput: {},
     };
 };
 
@@ -145,6 +148,7 @@ const Option = ({ children, render, ...props }) => {
         onClick,
         onSelect,
         onToggle,
+        onInputTextChange,
         option,
         optionclassification,
         selected,
@@ -157,6 +161,10 @@ const Option = ({ children, render, ...props }) => {
     } = props;
 
     const [imageAvailable, setImageAvailable] = useState(true);
+    const { selectedoptions } = optionclassification;
+    const [inputText, setInputText] = useState(
+        get(find(selectedoptions, ['identifier', option.identifier]), 'inputText', '')
+    );
     const query = new URLSearchParams(location.search);
     const hidePrices = query.has('_hide_prices') && query.get('_hide_prices') === '1';
     const smallerScreen = useMediaQuery('(min-device-width : 300px) and (max-device-width : 340px)');
@@ -167,6 +175,7 @@ const Option = ({ children, render, ...props }) => {
     const resultStatus = get(option, 'check_results.status', true);
     const optionIsMultiSelect = get(option, 'is_multiselect', false);
     const optionAmount = get(option, 'amount', 0);
+    const hasTextinput = get(option, 'hasTextinput', false);
     const translations = {
         ...t('common'),
         ...t('optionlistitem'),
@@ -214,7 +223,7 @@ const Option = ({ children, render, ...props }) => {
         event.preventDefault();
         event.stopPropagation();
 
-        if (isEnabled()) {
+        if (isEnabled() && !(hasTextinput && selected)) {
             onOptionSelected();
             onClick();
         }
@@ -396,6 +405,7 @@ const Option = ({ children, render, ...props }) => {
             <Grid item xs={12}>
                 <Typography component={'div'} className={classes.optionList} variant={'body2'}>
                     <div className={classes.title}>{option.title}</div>
+                    {hasTextinput && renderTextInput()}
                     {!hidePrices && <div className={classes.price}>{option.priceFormatted}</div>}
                     {smallerScreen && renderControls('horizontal')}
                     {option.abstract && (
@@ -423,6 +433,23 @@ const Option = ({ children, render, ...props }) => {
         }
     };
 
+    const handleTextInputChange = event => {
+        setInputText(event.target.value);
+        onInputTextChange(option.identifier, event.target.value);
+    };
+
+    const renderTextInput = () => {
+        return (
+            <TextField
+                className={classes.optionTextInput}
+                label={''}
+                value={inputText}
+                onChange={handleTextInputChange}
+                disabled={!selected}
+            />
+        );
+    };
+
     const getRootClassName = () => clsx(classes.root, selected && 'selected', customClassName('option'));
 
     const getContentClassName = () => {
@@ -493,6 +520,7 @@ Option.defaultProps = {
     onClick: () => {},
     onSelect: () => {},
     onToggle: () => {},
+    onInputTextChange: () => {},
     optionclassification: {},
     option: {},
     selected: false,
@@ -508,6 +536,7 @@ Option.propTypes = {
     onClick: PropTypes.func,
     onSelect: PropTypes.func,
     onToggle: PropTypes.func,
+    onInputTextChange: PropTypes.func,
     option: PropTypes.object,
     optionclassification: PropTypes.object,
     selected: PropTypes.bool,

package/src/App/Modules/Creator/Components/Option/index.test.js

@@ -205,4 +205,20 @@ describe('Option', () => {
         );
         expect(tree).toMatchSnapshot();
     });
+    it('renders with TextInput', () => {
+        const testOption = {
+            identifier: '010002011000',
+            thumbnail: '/images/options/010002011000.png',
+            title: 'Argentina 1000',
+            priceFormatted: '€ 123.00',
+            amount_is_selectable: false,
+            hasTextinput: true,
+            inputText: null,
+            check_results: {
+                status: true,
+            },
+        };
+        const tree = render(createOption(testOption));
+        expect(tree).toMatchSnapshot();
+    });
 });

package/src/App/Modules/Creator/Components/OptionsList/index.js

@@ -72,6 +72,7 @@ const OptionsList = ({ render, ...props }) => {
         LoadingComponent,
         OptionComponent,
         isAdminMode,
+        setOptionInputText,
     } = props;
 
     const classes = useStyles();
@@ -114,6 +115,7 @@ const OptionsList = ({ render, ...props }) => {
                     viewDetails={viewDetails}
                     viewStockInformation={viewStockInformation}
                     onClick={onOptionClicked}
+                    onInputTextChange={setOptionInputText}
                     onToggle={onToggle}
                     isAdminMode={isAdminMode}
                 />
@@ -183,6 +185,7 @@ OptionsList.propTypes = {
     onClose: PropTypes.func,
     onSelect: PropTypes.func,
     onToggle: PropTypes.func,
+    setOptionInputText: PropTypes.func,
     options: PropTypes.array,
     optionclassification: PropTypes.object,
     show: PropTypes.bool,

package/src/App/Modules/Creator/Components/ProductPart/index.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import get from 'lodash/get';
@@ -17,12 +17,19 @@ const ProductPart = ({
     setAnchorRef,
     classes,
     optionListVisible,
+    onCloseSelected,
 }) => {
-    const selected =
-        optionListVisible &&
-        get(selectedOption, 'identifier', null) === get(optionclassification, 'identifier', '');
+    const selected = get(selectedOption, 'identifier', null) === get(optionclassification, 'identifier', '');
+    const selectedAndVisible = optionListVisible && selected;
+
     const direction = verticalMode ? 'vertical' : 'horizontal';
 
+    useEffect(() => {
+        if (!optionListVisible && selected) {
+            onCloseSelected(optionclassification);
+        }
+    }, [optionListVisible]);
+
     const displayImage = () => {
         const imageUrl =
             displaySwitchedOptions && selectedOption
@@ -52,7 +59,7 @@ const ProductPart = ({
 
     return (
         <div className={clsx(classes.root, direction, customClassName('component'))} ref={setAnchorRef}>
-            <div className={`${classes.marker} ${direction} ${selected ? 'selected' : ''}`} />
+            <div className={`${classes.marker} ${direction} ${selectedAndVisible ? 'selected' : ''}`} />
             <div className={`${classes.content} ${direction}`} onClick={onClick}>
                 {displayImage()}
                 {displayText()}
@@ -82,6 +89,7 @@ ProductPart.propTypes = {
     setAnchorRef: PropTypes.func,
     classes: PropTypes.object,
     optionListVisible: PropTypes.bool,
+    onCloseSelected: PropTypes.func,
 };
 
 export const StyledProductPart = withStyles(