import React, {FC} from "react"; import {Button} from "./Button"; import {__, CouponsPlus} from "../../globals"; import {CustomVariationField} from "./CustomVariationField"; import {AttributesRenderer} from "./Attributes"; import classNames from "classnames"; export type CustomAttribute = { id: string, // eg: 1520 (id of attr with name: 'pa_color') values: string[], // string of ids // eg: [ // 1679, // id is 1679 of the value 'Red' {id: 1679, name: 'Red'} // 1578, // id is 1578 of the value 'Blue' {id: 1578, name: 'Blue'} // ] // }; export type CustomAttributeOption = { type: 'any' | 'allowed' | 'excluded', attribute: CustomAttribute }; export type CustomVariation = CustomAttributeOption[] export type AttributeFieldsProps = { variations: CustomVariation[], onNewVariation: (variation: CustomVariation) => void, onRemoveVariation: (variationIndex: number) => void, onVariationChange: (variationIndex: number, attributeIndex: number, attribute: CustomAttributeOption | false) => void, onNewAttribute: (variationIndex: number, attribute: CustomAttributeOption) => void, inclusionType?: "allowed" | "forbidden" } function findAvailableAttribute(allAttributes: typeof CouponsPlus.attributes, existingVariations: CustomVariation) { return allAttributes.find(({id}) => { return !existingVariations.find(({attribute}) => { return attribute.id === id }); }); } const createDefaultAttribute = (existingVariations?: CustomVariation): CustomAttributeOption | undefined => { // get all the avaibale attributes const allAttributes = CouponsPlus.attributes || [] const idsFromExistingVariations = existingVariations?.map(variation => variation.attribute.id) || []; const firstAvailableAttribute = !existingVariations?.length ? allAttributes[0]! : findAvailableAttribute(allAttributes, existingVariations) if (!firstAvailableAttribute) { console.warn('No available attributes found in the store.'); return } return { type: 'allowed', attribute: { id: firstAvailableAttribute.id, values: [] // get the ids of the values } } }; const storeHasAttributes = (): boolean => { return CouponsPlus.attributes.length > 0; } export const AttributeFields: FC = ({ variations = [], onNewVariation, onVariationChange, onNewAttribute, onRemoveVariation, inclusionType },) => { if (!storeHasAttributes()) { return
{__('No attributes found in the store. Please add attributes to use this feature (WordPress Admin > Products > Attributes).')}
; } const hasVariations = !!variations.length // button on click will add a variation with the first avaiblae attributes and type sot to any // eg: click button and it will add a variation with one attribute (color) and type set to any return
{!hasVariations && } {hasVariations &&

{inclusionType === 'allowed' ? __('Will match any of the following variations. Each variation represents a group of products to match.') : __('Will exclude any of the following variations. Each variation represents a group of products to match.')}

} { variations?.map((variation, index) =>

{__('Custom Variation #*').replace('*', index + 1)} {__('(All attributes in this variation must match)')}

{ onVariationChange(index, attributeIndex, attribute); }} canCreateNewAttribute={!!createDefaultAttribute(variation)} onNewAttribute={() => { const attribute = createDefaultAttribute(variation); if (!attribute) { console.warn('No available attribute to add.'); return; } onNewAttribute(index, attribute); }} onRemoveAttribute={(attributeIndex) => { onVariationChange(index, attributeIndex, false) }} />
)}
} function NoVariationsIcon() { return ; } export const ANDORLabel = () =>
{__('AND / OR')}