Notes

/* eslint-disable no-unused-vars */
import React from 'react';
import {observer} from 'mobx-react';
import queryString from 'query-string';
import Toggle from '@aosprodsys/brucke-ui-core/dist/es/components/Toggle';
import isEmpty from 'lodash-es/isEmpty';
import Header from '../../components/Header';
import PnpConfigureForm from './PnpConfigureForm';
import PnpPrototypeCustomize from './PnpPrototypeCustomize';
import {StoreContext} from '../../utils/StoreContext';
import styles from './sass/pnp-prototype-page.scss';
import pnpPrototypeCustomize_v2 from './store/pnp-prototype-customize';
import {cloneDeep} from 'lodash';
import CurrentPriceQuote from '../sharedComponents/currentPriceQuote/CurrentPriceQuote';
import CurrentDeliveryQuote from '../sharedComponents/currentDeliveryQuote/CurrentDeliveryQuote';
import {hasPermissions, ROLES} from '../../utils/hasPermissions';
import {encode} from '../utils/helpers_v2';

export class PNPPrototype extends React.Component {
static contextType = StoreContext;
componentDidMount() {
const query = this.props.location?.query;
this.context.pnpPrototype_v2.initialize(query);
}
componentWillUnmount() {
this.context.pnpPrototype_v2.reset();
this.context.appState.resetState();
}
render() {
const {isInitializing} = this.context.appState;
const {
displayConfigure,
configureForm,
revisions,
segments,
geos,
channels,
languages,
optionGroupTypes,
optionGroupTypeVariantAttributesKeys,
optionValuesWithFacets,
debugList,
customize,
priceDeltas,
enableReorder,
gridName
} = this.context.pnpPrototype_v2;
const {currentPriceQuote, zipCode} = this.context.pnpPrototypeCustomize_v2;
return (
<div className={`${styles.page} pnp-prototype-page`}>
<Header
title={
<div className="global-header-super pdp-title">
{displayConfigure ? 'CMS Simulator V2' : 'PDP Simulator V2 - (Step 1)'}
{!displayConfigure ? (
<>
<CurrentPriceQuote currentPriceQuote={currentPriceQuote} />
<CurrentDeliveryQuote currentDeliveryQuote={currentPriceQuote.delivery} zipCode={zipCode} />
</>
) : null}
</div>
}
>
{displayConfigure ? (
<button
className="button button-block"
onClick={() => {
this.context.pnpPrototype_v2.resetConfigureForm();
}}
>
Reset Configure
</button>
) : null}
{!displayConfigure && hasPermissions([ROLES.ac, ROLES.ctoUser]) ? (
<button
className="button button-block"
onClick={() => {
const {part, revision, segment, geo, language, channel} = this.props.location?.query;
const searchString = queryString.stringify({
part,
revision,
segment,
geo,
language,
channel
});
this.props.history.push({
pathname: '/pdp-prototype-collection-schema',
search: searchString
});
}}
>
Collection Schema
</button>
) : null}
{!displayConfigure ? (
<button
className="button button-block"
onClick={() => {
this.context.pnpPrototypeCustomize_v2.refreshVariantSortOrder();
}}
>
Refresh Variant Sort Order
</button>
) : null}
{!displayConfigure ? (
<>
<Toggle
{...{
className: 'brucke-form-toggle',
inputProps: {
checked: enableReorder,
disabled: !isEmpty(pnpPrototypeCustomize_v2.configureForm),
onChange: () => {
pnpPrototypeCustomize_v2.reorderGroupsToggle();
}
},
label: 'Reorder Groups'
}}
/>
</>
) : null}
{!displayConfigure ? (
<button
className="button button-block"
disabled={
pnpPrototypeCustomize_v2.optionValuesSortOrder === null &&
isEmpty(pnpPrototypeCustomize_v2.configureForm)
}
onClick={() => {
if (configureForm.showDefaultOptions) {
console.log("ifhere")
const variants = configureForm.variants.filter(item => item[0] && item[1]);
const searchString = queryString.stringify({
part: configureForm.aosContainerParts,
...(variants.length && {
variants: encode(variants),
variantChildren: encode(configureForm.variantChildren)
}),
revision: configureForm.revision.value,
segment: configureForm.segment,
geo: configureForm.geo,
language: configureForm.language,
channel: configureForm.channel
});
this.props.history.push({pathname: '/pdp-prototype-v2', search: searchString});
} else {
console.log("elsehere")
pnpPrototypeCustomize_v2.resetCustomize(optionValuesWithFacets, debugList, priceDeltas);
}
}}
>
Reset Customize
</button>
) : null}
{!displayConfigure ? (
<button
className="button button-block button-neutral"
onClick={() => {
this.props.history.push({pathname: '/pdp-prototype-v2', search: ''});
this.context.pnpPrototype_v2.reset();
}}
>
New Test
</button>
) : null}
</Header>
<div className="well-container">
{isInitializing ? (
<div className="loader" />
) : displayConfigure ? (
<>
<PnpConfigureForm
configureForm={configureForm}
optionGroupTypes={optionGroupTypes}
optionGroupTypeVariantAttributesKeys={optionGroupTypeVariantAttributesKeys}
revisions={revisions}
segments={segments}
geos={geos}
languages={languages}
channels={channels}
gridName={gridName}
updateGridName={value => {
this.context.pnpPrototype_v2.updateValue({key: 'gridName', value: value});
}}
updateConfigureForm={(field, value) => {
this.context.pnpPrototype_v2.updateValue({
key: 'configureForm',
value: {...configureForm, [field]: value}
});
if (field === 'aosContainerParts' && value && configureForm.aosContainerParts !== value) {
this.context.pnpPrototype_v2.fetchOptionGroupTypes(value);
}
}}
addConfigure={() => {
const variant = configureForm.variants
.filter(item => item[0] && item[1])
.map(item => [item[0], item[1].map(value => value.value).join(',')]);
const searchString = queryString.stringify({
part: configureForm.aosContainerParts,
...(variant.length && {variant}),
revision: configureForm.revision.value,
segment: configureForm.segment,
geo: configureForm.geo,
language: configureForm.language,
channel: configureForm.channel
});
this.context.pnpPrototype_v2.addConfigure(searchString);
this.props.history.push('/shop-mac');
}}
handlSubmit={() => {
this.context.pnpPrototype_v2.updateValue({key: 'customize', value: null});
const variants = configureForm.variants.filter(item => !!item[0]);
const searchString = queryString.stringify({
part: configureForm.aosContainerParts,
...(variants.length && {
variants: encode(variants),
variantChildren: encode(configureForm.variantChildren)
}),
revision: configureForm.revision.value,
segment: configureForm.segment,
geo: configureForm.geo,
language: configureForm.language,
channel: configureForm.channel
});
this.props.history.push({pathname: '/pdp-prototype-v2', search: searchString});
}}
/>
</>
) : (
<PnpPrototypeCustomize
optionValuesWithFacets={optionValuesWithFacets}
debugList={debugList}
customize={customize}
priceDeltas={priceDeltas}
history={this.props.history}
location={this.props.location}
enableReorder={enableReorder}
onSaveReorder={() => {
this.context.pnpPrototype_v2.updateValue({key: 'enableReorder', value: false});
}}
/>
)}
</div>
</div>
);
}
}

export default observer(PNPPrototype);