Notes

import React, {useState} from 'react';
import {observer} from 'mobx-react';
import Position from '@aosprodsys/brucke-ui-core/dist/es/components/Position';
import Table from '@aosprodsys/brucke-ui-core/dist/es/components/ReactVirtualizedTable';
import Accordion from './Accordion';
import styles from '../sass/components/view-subscriptions.scss';

export const ViewSubscriptions = ({template}) => {
const AccordionHeader = props => {
return (
<div className="review-header-container">
<span className="global-header-large">Subscriptions</span>
</div>
);
};

const InnerDetails = props => {
const partnerInformationDetails = [
{
name: 'dmvs',
displayName: 'DeltaMaker Validator Service',
description: 'DeltaMaker Internal service to consume and validate feed',
enabled: true,
internalApple: true,
isRetail: true,
contacts: [
{email: '[email protected]', type: 'external', name: 'Delta Maker Dev Group'},
{email: '[email protected]', type: 'internal', name: 'Delta Maker Dev Group123'}
],
targetAttributesMapping: {
PD: {
partNumber: '/aosProducts[]/partNumber',
displayName: '/aosProducts[]/displayName',
heroType: '/aosProducts[]/heroType',
subFamily: '/aosProducts[]/subFamily',
color: '/aosProducts[]/price/currencySymbol',
capacity: '/aosProducts[]/price/currencySymbol',
discontinued: '/aosProducts[]/price/currencySymbol',
imageUrl: '/aosProducts[]/price/currencySymbol',
familyDisplayNamePDP: '/aosProducts[]/price/currencySymbol',
context: '/aosProducts[]/price/currencySymbol'
}
}
}
];
const {data} = props;
const [expandAll, setExpandAll] = useState(false);
const [expandAllAttribute, setExpandAllAttribute] = useState(false);
const toggleAll = () => {
setExpandAll(!expandAll);
};
const toggleAllAttribute = () => {
setExpandAllAttribute(!expandAllAttribute);
};
const pdAttributes = partnerInformationDetails.flatMap(detail => Object.keys(detail.targetAttributesMapping.PD));
const pdAttributesData = pdAttributes.map(attribute => ({attribute}));
const parseCondition = condition => {
const conditions = condition.match(/((.*?))/)[1].split(',');
return conditions.map(cond => {
const parts = cond
.trim()
.replace(/'/g, '')
.split('|');
return {
segment: parts[2],
geo: parts[0],
language: parts[1]
};
});
};
console.log(data, 'data');
const tableData = data
.filter(detail => detail.category === 'MARKETING_CONTEXT')
.flatMap(detail => parseCondition(detail.condition));

const includeAllParts = () => {
const includeAll = data.some(detail => detail.category === 'OTHER' && detail.enabled === true);
if (includeAll) {
return includeAll ? 'Yes' : 'No';
}
return '-';
};

const getLOBs = () => {
if (includeAllParts() === 'No') {
const heroDetail = data.find(detail => detail.category === 'HERO' && detail.sortOrder === 0);
if (heroDetail) {
const match = heroDetail.condition.match(/((.*?))/);
return match ? match[1].replace(/'/g, '') : '';
}
}
return '-';
};
const getAccessoriesDisplay = () => {
if (includeAllParts() === 'No') {
const accessoriesDetail = data.some(detail => detail.category === 'ACCESSORIES' && detail.enabled === true);
return accessoriesDetail ? 'All' : '-';
}

return '-';
};

const getProducts = () => {
if (includeAllParts() === 'No') {
const heroDetail = data.find(detail => detail.category === 'HERO' && detail.sortOrder === 1);
if (heroDetail) {
const match = heroDetail.condition.match(/((.*?))/);
return match ? match[1].replace(/'/g, '') : '';
}
}
return '-';
};

const columns = [
{
Header: 'Segment',
accessor: 'segment'
},
{
Header: 'Geo',
accessor: 'geo'
},
{
Header: 'Language',
accessor: 'language'
},
{
Header: () => {
return (
<div onClick={() => toggleAll()}>
<div className="chevron-alignment">
<i className={`icon icon-${expandAll ? 'chevrondown' : 'chevronup'}`} />
</div>
</div>
);
},
accessor: '',
width: 60
}
];
const attributeColumns = [
{
Header: 'Attribute',
accessor: 'attribute'
},
{
Header: () => {
return (
<div onClick={() => toggleAllAttribute()}>
<div className="chevron-alignment">
<i className={`icon icon-${expandAllAttribute ? 'chevrondown' : 'chevronup'}`} />
</div>
</div>
);
},
accessor: '',
width: 60
}
];

return (
<div className="inner-details-container">
<div className="form-group">
<div className="row-details">
<span className="global-body-large-bold">Marketing Contexts</span>
<span className="row-count">{tableData && tableData.length > 0 ? `${tableData.length}Rows ` : ''}</span>
</div>
<section className="table-container">
<Position>
{({windowInnerHeight = window.innerHeight, width = window.innerWidth}) => {
const tableWidth = Math.max(1000, width);
return (
<Table
className={expandAll ? 'expanded' : 'collapsed'}
height={expandAll ? windowInnerHeight - 415 : 0}
width={tableWidth}
columns={columns}
data={tableData.length > 0 ? tableData : [{segment: '-', geo: '-', language: '-'}]}
showNoResultsEmptyTable={true}
/>
);
}}
</Position>
</section>
</div>
<div className="form-group">
<div className="global-body-large-bold">Include All Parts</div>
<div className="global-body-large-gray">{includeAllParts()}</div>
</div>
<div className="form-group">
<div className="global-body-large-bold">LOBs</div>
<div className="global-body-large-gray">{getLOBs()}</div>
</div>
<div className="form-group">
<div className="global-body-large-bold">Products</div>
<div className="global-body-large-gray">{getProducts()}</div>
</div>
<div className="form-group">
<div className="global-body-large-bold">Accessories (ABA and 3PP)</div>
<div className="global-body-large-gray">{getAccessoriesDisplay()}</div>
</div>
<div className="form-group">
<div className="row-details">
<span className="global-body-large-bold">Attributes for Inclusion</span>
<span className="row-count">
<span className="row-count">
{pdAttributesData && pdAttributesData.length > 0 ? `${pdAttributesData.length}Rows ` : ''}
</span>
</span>
</div>
<section className="table-container">
<Position>
{({windowInnerHeight = window.innerHeight, width = window.innerWidth}) => {
const tableWidth = Math.max(1000, width);
return (
<Table
className={expandAllAttribute ? 'expanded' : 'collapsed'}
height={expandAllAttribute ? 500 : 0}
width={tableWidth}
columns={attributeColumns}
data={pdAttributesData.length > 0 ? pdAttributesData : [{attribute: '-'}]}
showNoResultsEmptyTable={true}
/>
);
}}
</Position>
</section>
</div>
</div>
);
};

return (
<div className={styles.accordion}>
<Accordion template={template} Inner={AccordionHeader} showIcon={true} InnerDetails={InnerDetails} />
</div>
);
};

export default observer(ViewSubscriptions);