Notes

/* eslint-disable no-unused-vars */
import {makeObservable, runInAction, observable, action} from 'mobx';
import isEmpty from 'lodash-es/isEmpty';
import sortBy from 'lodash-es/sortBy';
import api from '../../../api/api';
import gatewayApi from '../../../api/gatewayApi';
import appState from '../../../stores/appState';
import {decode} from '../../utils/helpers';
import shopMac from '../../../stores/shopMac';
import {cloneDeep, isEqual} from 'lodash-es';

class PcvPrototype {
configureForm = {
steps: [
[
{
aosContainerParts: null,
variants: [[null, []]],
prepopulate: ''
}
]
],
revision: null,
segment: 'consumer',
geo: 'US',
language: 'en-us',
channel: 'internet',
showUpgradeOptions: false,
useKitPrice: false
};
page = 0;
collection = 0;
gridName = '';
aosContainerParts = [];
revisions = [];
segments = [];
geos = [];
languages = [];
channels = [];
optionGroupTypes = [[[]]];
optionGroupTypeVariantAttributesKeys = [[{}]];
pages = [{label: '1', value: 0}];
collections = [{label: '1', value: 0}];

constructor() {
this.appState = appState;
this.shopMac = shopMac;
makeObservable(this, {
configureForm: observable,
gridName: observable,
optionGroupTypes: observable,
aosContainerParts: observable,
page: observable,
collection: observable,
pages: observable,
collections: observable,
updateValue: action,
updateConfigureForm: action,
updateStep: action,
addPage: action,
addCollection: action,
selectPage: action,
selectCollection: action,
reset: action,
initialize: action,
addConfigure: action,
fetchOptionGroupTypes: action,
resetConfigureForm: action
});
}

updateValue({key, value}) {
this[key] = value;
}

reset() {
runInAction(() => {
this.gridName = '';
this.aosContainerParts = [];
});
}

resetConfigureForm() {
this.configureForm = {
steps: [
[
{
aosContainerParts: null,
variants: [[null, []]],
prepopulate: ''
}
]
],
revision: null,
segment: 'consumer',
geo: 'US',
language: 'en-us',
channel: 'internet',
showUpgradeOptions: false,
useKitPrice: false
};
this.pages = [{label: '1', value: 0}];
this.collections = [{label: '1', value: 0}];
this.page = 0;
this.collection = 0;
}

async fetchContainerParts() {
try {
const aosContainerParts = (await api.getPdpContainerParts()).data?.result;
runInAction(() => {
this.aosContainerParts = aosContainerParts.map(item => {
return {
label: `${item.collectionId}`,
value: item.collectionId
};
});
});
} catch (error) {
this.appState.handleNotification({
error,
message: 'Unable to fetch Container Parts. Please try again.',
levelType: 'danger'
});
}
}

async initialize(query = {}) {
let {revision, segment, geo, language, channel, showUpgradeOptions, useKitPrice} = query;
const steps = query.steps
? decode(query.steps).map(page => {
return page.map(coll => {
return {
aosContainerParts: (Array.isArray(coll.part) ? coll.part : [coll.part]).map(item => ({
label: item,
value: item
})),
variants: coll.variants || [[null, []]],
prepopulate: coll.prepopulate
};
});
})
: [
[
{
aosContainerParts: null,
variants: [[null, []]],
prepopulate: ''
}
]
];
this.appState.isInitializing = true;
try {
if (
isEmpty(this.revisions) ||
isEmpty(this.segments) ||
isEmpty(this.geos) ||
isEmpty(this.languages) ||
isEmpty(this.channels)
) {
let [revisions, segments, geos, languages, channels] = (await Promise.all([
gatewayApi.fetchRevisions(),
gatewayApi.fetchSegments(),
gatewayApi.fetchGeos(),
gatewayApi.fetchLanguages(),
gatewayApi.fetchChannels()
])).map(response => response.data);
revisions = [{title: 'IN_PROD', description: 'IN_PROD', revisioncode: 'IN_PROD'}, ...revisions].map(
revision => ({
label: typeof revision === 'string' ? revision : `${revision.revisioncode} - ${revision.title}`,
value: typeof revision === 'string' ? revision : revision.revisioncode,
description: typeof revision === 'string' ? revision : revision.description
})
);
segments = sortBy(segments, 'keyPath').map(item => ({
label: item.name,
value: item.id,
path: item.keyPath
}));
geos = sortBy(geos, 'keyPath').map(item => ({
label: item.name,
value: item.id,
path: item.keyPath
}));
languages = sortBy(languages, 'keyPath').map(item => ({
label: item.name,
value: item.id,
path: item.keyPath
}));
channels = sortBy(channels, 'keyPath').map(item => ({
label: item.name,
value: item.id,
path: item.keyPath
}));
runInAction(() => {
this.revisions = revisions;
this.segments = segments;
this.geos = geos;
this.languages = languages;
this.channels = channels;
this.configureForm.revision =
window.__env.environment?.name === 'ce99aws'
? revisions.find(revision => revision.value === 'R20250205')
: '';
});
}

const selectedRevision = this.revisions.find(item => item.value === revision);
if (revision && segment && geo && language && channel) {
this.configureForm = {
steps,
revision: selectedRevision,
segment: segment,
geo: geo,
language: language,
channel: channel,
showUpgradeOptions: showUpgradeOptions === 'y' ? true : false,
useKitPrice: useKitPrice === 'y' ? true : false
};
this.pages = this.configureForm.steps.map((_, idx) => ({
label: (idx + 1).toString(),
value: idx
}));
this.collections = this.configureForm.steps[this.page].map((_, idx) => ({
label: (idx + 1).toString(),
value: idx
}));

this.optionGroupTypes = this.configureForm.steps.map((page, pageIdx) => {
return page.map((coll, collIdx) => {
return [];
});
});
this.optionGroupTypeVariantAttributesKeys = this.configureForm.steps.map((page, pageIdx) => {
return page.map((coll, collIdx) => {
return {};
});
});
await Promise.all(
steps.flatMap((page, pageIdx) => {
return page.map(async (coll, collIdx) => {
await this.fetchOptionGroupTypes(coll.aosContainerParts, pageIdx, collIdx);
});
})
);
}

this.appState.isInitializing = false;
} catch (error) {
console.log(error);
this.appState.handleNotification({
error,
message: 'Unable to initialize. Please try again.',
levelType: 'danger'
});
runInAction(() => {
this.appState.err = true;
this.appState.isInitializing = false;
});
}
}

async fetchOptionGroupTypes(aosContainerParts, page, collection) {
if (!Array.isArray(aosContainerParts) || aosContainerParts.length === 0) {
runInAction(() => {
this.configureForm.steps[page][collection].variants = [[null, []]];
this.configureForm.steps[page][collection].prepopulate = '';
this.optionGroupTypes[page][collection] = [];
this.optionGroupTypeVariantAttributesKeys[page][collection] = {};
});
return;
}

try {
const parts = aosContainerParts.map(part => part?.value || part);

const response = await api.fetchPnpPrototype({
method: 'getOptionGroupTypeVariants',
collectionIds: parts
});

const {_expire, ...ogtData} = response.data || {};

const ogtSet = new Set();
const ogtvakMap = {};

for (const [ogtKey, variantValues] of Object.entries(ogtData)) {
ogtSet.add(ogtKey);
if (!ogtvakMap[ogtKey]) {
ogtvakMap[ogtKey] = new Set();
}
variantValues.forEach(val => ogtvakMap[ogtKey].add(val));
}

const ogtOptions = Array.from(ogtSet).map(key => ({label: key, value: key}));
const ogtvakOptions = {};
for (const [key, valSet] of Object.entries(ogtvakMap)) {
ogtvakOptions[key] = Array.from(valSet).map(v => ({label: v, value: v}));
}

runInAction(() => {
this.optionGroupTypes[page][collection] = ogtOptions;
this.optionGroupTypeVariantAttributesKeys[page][collection] = ogtvakOptions;

if (
!this.configureForm.steps[page][collection].variants ||
!this.configureForm.steps[page][collection].variants.length
) {
this.configureForm.steps[page][collection].variants = [[null, []]];
}

if ('processor' in ogtvakOptions) {
this.configureForm.steps[page][collection].prepopulate = 'processor';
}
});

for (const part of parts) {
const hasSchema = await this.getInputSchema(part, ogtData);
if (hasSchema) break;
}

runInAction(() => {
const currentVariants = this.configureForm.steps[page][collection].variants;
if ((!currentVariants || currentVariants.length === 0 || !currentVariants[0][0]) && ogtOptions.length) {
this.configureForm.steps[page][collection].variants = [[null, []]];
}
});
} catch (error) {
console.log(error);
this.appState.handleNotification({
error,
message: 'Unable to fetch optionGroupTypes. Please try again.',
levelType: 'danger'
});
runInAction(() => {
this.appState.err = true;
});
}
}

async getInputSchema(aosContainerPart, ogtVarAttrKeys) {
const {result} = (await api.fetchCollectionInputSchema({
method: 'getCollectionInputSchema',
collectionId: aosContainerPart
})).data;

if (!result) return false;

const variants = [];

result.forEach(res => {
const {primaryVariantGroup, subVariantGroup, groupPrimaryVariant} = res;

const isValidOgt = primaryVariantGroup?.optionGroupTypeKey in ogtVarAttrKeys;

if (isValidOgt) {
const child = subVariantGroup?.[0]?.optionGroupTypeKey;
const childVariants = subVariantGroup?.[0]?.variants || [];

const entry = [
primaryVariantGroup.optionGroupTypeKey,
(primaryVariantGroup.variants || []).map(item => ({label: item, value: item})),
child && child in ogtVarAttrKeys
? {
isGroupDefaultVariants: groupPrimaryVariant,
variants: [[child, childVariants.map(v => ({label: v, value: v}))]]
}
: undefined
];

variants.push(entry);
}
});

runInAction(() => {
const currentVariants = this.configureForm.steps[this.page][this.collection].variants;
const isDefaultVariant =
!currentVariants ||
currentVariants.length === 0 ||
(currentVariants.length === 1 && currentVariants[0][0] === null);

if (variants.length && isDefaultVariant) {
this.configureForm.steps[this.page][this.collection].variants = variants;
} else if (
!this.configureForm.steps[this.page][this.collection].variants ||
!this.configureForm.steps[this.page][this.collection].variants.length
) {
this.configureForm.steps[this.page][this.collection].variants = [[null, []]];
}
});

return variants.length > 0;
}

addConfigure(searchStr) {
this.shopMac.addConfigure(searchStr, this.gridName, '3');
this.gridName = '';
}

updateConfigureForm({key, value}) {
this.configureForm[key] = value;
}

updateStep({key, value}) {
if (key === 'aosContainerParts') {
this.fetchOptionGroupTypes(value, this.page, this.collection);
}
this.configureForm.steps[this.page][this.collection][key] = value;
}

addPage() {
const newVal = this.configureForm.steps.length;
this.configureForm.steps.push([{aosContainerParts: null, variants: [[null, []]], prepopulate: ''}]);
this.pages.push({label: (newVal + 1).toString(), value: newVal});
this.page = newVal;
this.collections = [{label: '1', value: 0}];
this.collection = 0;
this.optionGroupTypes.push([]);
this.optionGroupTypes[this.page][this.collection] = [];
this.optionGroupTypeVariantAttributesKeys.push([]);
this.optionGroupTypeVariantAttributesKeys[this.page][this.collection] = {};
}

addCollection() {
const newVal = this.configureForm.steps[this.page].length;
this.collections.push({label: (newVal + 1).toString(), value: newVal});
this.collection = newVal;
this.configureForm.steps[this.page].push({
aosContainerParts: null,
variants: [[null, []]],
prepopulate: ''
});
this.optionGroupTypes[this.page][this.collection] = [];
this.optionGroupTypeVariantAttributesKeys[this.page][this.collection] = {};
}

selectPage(val) {
if (val === undefined) {
this.configureForm.steps.splice(this.page, 1);
this.optionGroupTypes.splice(this.page, 1);
this.optionGroupTypeVariantAttributesKeys.splice(this.page, 1);
this.pages = this.configureForm.steps.map((_, idx) => ({
label: (idx + 1).toString(),
value: idx
}));
this.page = 0;
this.collections = this.configureForm.steps[this.page].map((_, idx) => ({
label: (idx + 1).toString(),
value: idx
}));
this.collection = 0;
} else {
this.page = Number(val);
this.collections = this.configureForm.steps[this.page].map((_, idx) => ({
label: (idx + 1).toString(),
value: idx
}));
this.collection = 0;
}
}

selectCollection(val) {
if (val === undefined) {
this.configureForm.steps[this.page].splice(this.collection, 1);
this.optionGroupTypes[this.page].splice(this.collection, 1);
this.optionGroupTypeVariantAttributesKeys[this.page].splice(this.collection, 1);
this.collections = this.configureForm.steps[this.page].map((_, idx) => ({
label: (idx + 1).toString(),
value: idx
}));
this.collection = 0;
} else {
this.collection = Number(val);
}
}
}

export default new PcvPrototype();