Notes

import React from 'react';
import isEmpty from 'lodash-es/isEmpty';
import CreatableLookupSelect from '../OptionValueAssortment/components/CreatableLookupSelect';
import ContextSelect from '@aosprodsys/brucke-ui-core/dist/es/components/ContextSelect';
import Select from '@aosprodsys/brucke-ui-core/dist/es/components/Select';
import Checkbox from '@aosprodsys/brucke-ui-core/dist/es/components/Checkbox';
import TypeAhead from '@aosprodsys/brucke-ui-core/dist/es/components/TypeAhead';
import Input from '@aosprodsys/brucke-ui-core/dist/es/components/Input';
import Toggle from '@aosprodsys/brucke-ui-core/dist/es/components/Toggle';
import styles from './sass/pnp-configure-form.scss';
import {ROLES, hasPermissions} from '../../utils/hasPermissions';

export default class PnpConfigureForm extends React.Component {
render() {
const {
gridName,
configureForm,
revisions,
segments,
geos,
languages,
channels,
optionGroupTypes,
optionGroupTypeVariantAttributesKeys,
aosContainerParts
} = this.props;
const stringifyContext = `${configureForm.segment} - ${configureForm.geo} - ${configureForm.language} - ${
configureForm.channel
}`;

return (
<section className={styles.pnpConfirmForm} data-testid="pnp-configure">
<div className="wrapper">
<div className="configure-title global-header-super">Configure</div>
<CreatableLookupSelect
placeholder="Collection Id"
showChevronIcon={true}
createLabel="Select Container Part"
selectOptions={{
isMulti: true,
closeMenuOnSelect: false,
hideSelectedOptions: true,
backspaceRemovesValue: true,
options: aosContainerParts,
value: isEmpty(configureForm.aosContainerParts) ? null : configureForm.aosContainerParts
}}
showSelectedValue={true}
onChange={selected => {
this.props.updateConfigureForm('aosContainerParts', selected);
}}
/>
<TypeAhead
placeholder="Select Revision"
showChevronIcon={true}
clearable={false}
selectOptions={{
isMulti: false,
closeMenuOnSelect: true,
backspaceRemovesValue: true,
options: revisions,
showSelectedValue: true,
isDisabled: isEmpty(configureForm.aosContainerParts)
}}
value={isEmpty(configureForm.revision) ? null : configureForm.revision}
onChange={selected => this.props.updateConfigureForm('revision', selected)}
/>
{configureForm.variants.map(([ogt, variants, variantChildren], idx) => {
const isOption = ogt ? optionGroupTypes.findIndex(item => item.value === ogt) !== -1 : true;
const isValidVariants =
isOption &&
(variants?.length
? variants.every(item => {
if (!item.value) return true;
return (
optionGroupTypeVariantAttributesKeys[ogt].findIndex(({value}) => value === item.value) !== -1
);
})
: true);
return (
<>
<div className="variants" key={idx}>
<Select
isClearable={true}
placeholder={'Option Group Type (Optional)'}
value={isOption ? ogt : null}
options={optionGroupTypes}
onChange={e => {
const newVariants = [...configureForm.variants];
newVariants[idx][0] = e.target.value || null;
newVariants[idx][1] = [];
this.props.updateConfigureForm('variants', newVariants);
}}
errorMessage={isOption ? null : `${ogt} doesn't match available options`}
disabled={isEmpty(configureForm.aosContainerParts)}
/>
<TypeAhead
placeholder="Variants"
showChevronIcon={true}
clearable={true}
selectOptions={{
isMulti: true,
backspaceRemovesValue: true,
options: optionGroupTypeVariantAttributesKeys[ogt],
hideSelectedOptions: true,
closeMenuOnSelect: optionGroupTypeVariantAttributesKeys[ogt]?.length === 1,
isDisabled: !ogt
}}
errorMessage={isValidVariants ? null : `variants doesn't match available options`}
value={variants}
onChange={selected => {
const newVariants = [...configureForm.variants];
newVariants[idx][1] = selected;
this.props.updateConfigureForm('variants', newVariants);
}}
/>
{idx == configureForm.variants.length - 1 && (
<button
className="icon icon-plussolid"
onClick={() => {
const newVariants = [...configureForm.variants, [null, []]];
this.props.updateConfigureForm('variants', newVariants);
}}
disabled={!ogt}
/>
)}
</div>
<div className="variants-children-actions">
<div>
{variantChildren ? (
<Checkbox
{...{
className: 'group-by-default-variants-checkbox',
inputProps: {
checked: variantChildren.isGroupDefaultVariants,
onChange: () => {
const newVariants = [...configureForm.variants];
const newVariantChildren = {...variantChildren};
newVariantChildren.isGroupDefaultVariants = !newVariantChildren.isGroupDefaultVariants;
newVariants[idx][2] = newVariantChildren;
this.props.updateConfigureForm('variants', newVariants);
}
},
label: 'Group By Default Variants'
}}
/>
) : null}
</div>
<div className="variants-add-child">
{ogt && !variantChildren ? (
<button
className="icon icon-plussolid icon-before global-body-medium"
onClick={() => {
const newVariants = [...configureForm.variants];
newVariants[idx][2] = {
isGroupDefaultVariants: false,
variants: [[null, []]]
};
this.props.updateConfigureForm('variants', newVariants);
}}
>
Add Child
</button>
) : null}
</div>
</div>
<div className="variants-children">
{variantChildren
? variantChildren.variants.map((child, childIdx) => {
const [ogt, variants] = child;
const isOption = ogt ? optionGroupTypes.findIndex(item => item.value === ogt) !== -1 : true;
const isValidVariants =
isOption &&
(variants?.length
? variants.every(item => {
return (
optionGroupTypeVariantAttributesKeys[ogt].findIndex(
({value}) => value === item.value
) !== -1
);
})
: true);
return (
<div className="variants" key={`${idx}-${childIdx}`}>
<Select
isClearable={true}
placeholder={'Option Group Type (Optional)'}
value={isOption ? ogt : null}
options={optionGroupTypes}
onChange={e => {
const newVariants = [...configureForm.variants];
const newVariantChildren = {...variantChildren};
newVariantChildren.variants = [[e.target.value || null, []]];
newVariants[idx][2] = newVariantChildren;
this.props.updateConfigureForm('variants', newVariants);
}}
errorMessage={isOption ? null : `${ogt} doesn't match available options`}
disabled={isEmpty(configureForm.aosContainerParts)}
/>
<TypeAhead
placeholder="Variants"
showChevronIcon={true}
clearable={true}
selectOptions={{
isMulti: true,
backspaceRemovesValue: true,
options: optionGroupTypeVariantAttributesKeys[ogt],
hideSelectedOptions: true,
closeMenuOnSelect: optionGroupTypeVariantAttributesKeys[ogt]?.length === 1,
isDisabled: !ogt
}}
errorMessage={isValidVariants ? null : `variants doesn't match available options`}
value={variants}
onChange={selected => {
const newVariants = [...configureForm.variants];
const newVariantChildren = {...variantChildren};
newVariantChildren.variants[0][1] = selected;
newVariants[idx][2] = newVariantChildren;
this.props.updateConfigureForm('variants', newVariants);
}}
/>
</div>
);
})
: null}
</div>
</>
);
})}
<Toggle
{...{
className: 'show-upgrade-options-toggle',
inputProps: {
checked: configureForm.showUpgradeOptions,
onChange: () => {
if (configureForm.showUpgradeOptions) {
this.props.updateConfigureForm('showUpgradeOptions', false);
} else {
this.props.updateConfigureForm('showUpgradeOptions', true);
}
}
},
label: 'Show Upgrade Options'
}}
/>
<Toggle
{...{
className: 'show-upgrade-options-toggle',
inputProps: {
checked: configureForm.useKitPrice,
onChange: () => {
if (configureForm.useKitPrice) {
this.props.updateConfigureForm('useKitPrice', false);
} else {
this.props.updateConfigureForm('useKitPrice', true);
}
}
},
label: 'Use Kit Price'
}}
/>
<div>
<Select
className="context-all-select"
placeholder={'Set Marketing Context'}
value={stringifyContext}
options={[{label: stringifyContext, value: stringifyContext}]}
disabled
/>
</div>
<div className="context-select-view">
<div className="select-wrapper">
<ContextSelect
header={'Segment'}
options={segments}
selected={configureForm.segment}
updateSelection={value => this.props.updateConfigureForm('segment', value)}
/>
<ContextSelect
header={'Geography'}
options={geos}
selected={configureForm.geo}
updateSelection={value => this.props.updateConfigureForm('geo', value)}
/>
<ContextSelect
header={'Language'}
options={languages}
selected={configureForm.language}
updateSelection={value => this.props.updateConfigureForm('language', value)}
/>
<ContextSelect
header={'Channel'}
options={channels}
selected={configureForm.channel}
updateSelection={value => this.props.updateConfigureForm('channel', value)}
/>
</div>
</div>
<hr />
<Input
clearable
placeholder={'Input a Grid Name'}
inputProps={{
debounceTimeout: 500,
value: gridName,
disabled: !hasPermissions([ROLES.ac, ROLES.shopMac]),
onChange: e => {
this.props.updateGridName(e.target.value);
}
}}
/>
<button
disabled={
!hasPermissions([ROLES.ac, ROLES.shopMac]) ||
isEmpty(gridName) ||
isEmpty(configureForm.aosContainerParts) ||
isEmpty(configureForm.revision) ||
isEmpty(configureForm.channel) ||
isEmpty(configureForm.language) ||
isEmpty(configureForm.geo) ||
isEmpty(configureForm.segment) ||
configureForm.variants.some(item => {
if (!item[0]) return false;
else if (optionGroupTypes.findIndex(ogt => ogt.value === item[0]) === -1) return true;
else {
return (
item[1].length &&
item[1].some(variant => {
return (
optionGroupTypeVariantAttributesKeys[item[0]].findIndex(
({value}) => value === variant.value
) === -1
);
})
);
}
})
}
className="button button-block button-elevated button-neutral"
onClick={this.props.addConfigure}
>
Add to Grid
</button>
<br />
<button
disabled={
isEmpty(configureForm.aosContainerParts) ||
isEmpty(configureForm.revision) ||
isEmpty(configureForm.channel) ||
isEmpty(configureForm.language) ||
isEmpty(configureForm.geo) ||
isEmpty(configureForm.segment) ||
configureForm.variants.some(item => {
if (!item[0]) return false;
else if (optionGroupTypes.findIndex(ogt => ogt.value === item[0]) === -1) return true;
else {
return (
item[1].length &&
item[1].some(variant => {
if (!variant.value) return false;
return (
optionGroupTypeVariantAttributesKeys[item[0]].findIndex(
({value}) => value === variant.value
) === -1
);
})
);
}
})
}
type="submit"
className="button button-block button-elevated"
onClick={this.props.handlSubmit}
>
Submit
</button>
</div>
</section>
);
}
}
1. Show “(-) Remove Child” when Child has been added
2. Show (-) to remove parent variant