import {CardRenderer} from "../CardRenderers"; import {ComponentMeta} from "../ComponentsMeta"; import {IncompatibleWithAnyProducts} from "../IncompatibleWithAnyProducts"; import {__, CouponsPlus} from "../../globals"; import {iconWithClassName} from "../IconWithClassName"; import {FieldType} from "../fields"; import {inclusionValueValidatorFieldsMap, InclusionValueValidatorOptions} from "./InclusionValueValidator"; import {AttributeFields, CustomVariation} from "./AttributeFields"; import {usingTestableOptions} from "./CardHelpers"; import {getAttributeName, getAttributeValueNames} from "./attributeHelpers"; export type AttributesOptions = InclusionValueValidatorOptions export const type = CouponsPlus?.components?.filters?.Attributes?.type ?? 'Attributes'; export const AttributesMeta: ComponentMeta = IncompatibleWithAnyProducts({ id: type, type: 'filters', //fieldsTitlePrefix: false, category: 'common', priority: 40, supportsCustomTitleForSuggestedScopes: (suggestedScope) => true, icon: iconWithClassName(({className, context}) => { if (context === 'card') { // solid return } // outline return }), fieldsMap: [ [ {id: 'inclusionType', renderType: FieldType.Tab, fieldProps: {size: 'normal'}}, ], [ { id: 'expectedValues', renderType: FieldType.Custom, fieldProps: (options: AttributesOptions, onUpdate, {componentRuntimeData, field}) => { return { component: { // here we need to add the new variation to the testable onUpdate( componentRuntimeData, field, newVariation, // @ts-ignore {action: 'add'} // cannot import the enum because of a circular dependency ) }} onRemoveVariation={(variationIndex) => onUpdate( componentRuntimeData, field, null, // we don't need to pass the variation here, just the index { // @ts-ignore action: 'remove', // cannot import the enum because of a circular dependency }, `[${variationIndex}]` )} onVariationChange={(variationIndex, attributeIndex, attribute) => { // here we'll send to update only // set the path using index (eg: extraNestedFieldPathRelative = `expectedValues[${variationIndex}]attribute[${attributeIndex}]`) // so that only one attribute is updated // and not th whole thing onUpdate( componentRuntimeData, field, attribute, { // @ts-ignore action: attribute ? 'update' : 'remove', // cannot import the enum because of a circular dependency }, `[${variationIndex}][${attributeIndex}]` ) }} onNewAttribute={(variationIndex, attribute) => { onUpdate( componentRuntimeData, field, attribute, { // @ts-ignore action: 'add', // cannot import the enum because of a circular dependency } , `[${variationIndex}]` ) }} /> } } } ] ] }) export const AttributesRenderer: CardRenderer = { type: AttributesMeta.id, icon: AttributesMeta.icon!, prefix: __('[Items with] [Specific] *'), example: __('Color, Size, Weight, etc.'), ComputedValue: usingTestableOptions(({expectedValues}) =>
{expectedValues.map(attributes => <>
{attributes.map(({type, attribute}) => { const attributevalues = getAttributeValueNames(attribute) return
{ type === 'excluded' ? __('Any * except').replace('*', getAttributeName(attribute)) : getAttributeName(attribute) }
{type === 'any' ? __('Any') : (attributevalues.length ? attributevalues.map(name =>
{type === 'excluded' && }{name}
) :
{__('Select values')}
)}
})}
OR
)} {!(!!expectedValues.length) &&
{__('Add custom variations')}
}
), AboveComputedValue: usingTestableOptions(({inclusionType}) => inclusionType === 'forbidden' ? __('Excluding') : false), }