TcfVendorConfigurationFormPurposesFields:FC<{ vendor: TcfVendor }> = observer(({ vendor: { allPurposes, flexiblePurposes } }) => {const {optionStore: { tcfScopeOfConsent }} = useStores();const disableRestrictivePurposes = tcfScopeOfConsent === "global";return (<><FormHeadlineoffset={TcfVendorConfigurationFormLayout.labelCol.span}description={_i(__('The vendor specifies for which defined purposes he wants to process (personal) data of your visitors and use cookies. These can be deselected if consent should not be obtained for certain purposes. The vendor specifies the legal basis for data processing in according to {{aGdpr}}Art. 6 GDPR{{/aGdpr}} and whether you as the website operator can change this. "Legitimate Interest" means that this purpose is pre-selected on the basis of a legally designated legitimate interest, and the visitor to your website must actively object to it, if an objection is possible. "Consent" means that your visitors must explicitly agree to this purpose. The default settings are provided by the vendor, but do not have to match how you use the vendor on your website. In particular, you may need to make adjustments, if possible, in the "Legal basis" column. {{strong}}A legitimate interest exists only in a very few cases. If you are not sure, it is better to obtain consent.{{/strong}}'),{strong: <strong />,aGdpr: <a href={__("https://gdpr-info.eu/art-6-gdpr/")} target="_blank" rel="noreferrer" />})}>{__("Purposes and special purposes")}</FormHeadline>{disableRestrictivePurposes && (<div className="notice notice-info inline below-h2 notice-alt" style={{ margin: "0 0 10px 0" }}><p>{__('You are using the TCF integration in the "Global Scope". Therefore, according to the TCF specification, it is not possible to deselect purposes.')}</p></div>)}<table className="wp-list-table widefat fixed striped table-view-list" style={{ marginBottom: 25 }}><thead><tr><td width={100}>{__("Enabled")}</td><td>{__("Description")}</td><td width={210} align="right">{__("Legal basis")}</td></tr></thead><tbody>{allPurposes.map((purpose) => {const {data: { id, description, descriptionLegal },special} = purpose;const isFlexible = flexiblePurposes.indexOf(purpose) > -1;const purposeType = special ? `special` : `normal`;const sId = id.toString(); // use string to avoid antd automatically transform the list to `array`const fieldKey = ["restrictivePurposes", purposeType, sId];const key = fieldKey.join(".");return (<tr key={key} data-key={key}><td><Form.Item{...WP_LIST_TABLE_FORM_ITEM_PROPS}name={purposeType === "special" ? undefined : [...fieldKey, "enabled"]}valuePropName="checked"><Switchdisabled={disableRestrictivePurposes || purposeType !== "normal"}defaultChecked={purposeType === "special" ? true : undefined}/></Form.Item></td><td><strong>{description} {special && <Tag color="warning">{__("Special purpose")}</Tag>}</strong><br />{reactNl2Br(descriptionLegal)}</td><td><Form.ItemnoStyleshouldUpdate={(prevValues, nextValues) =>prevValues.restrictivePurposes[purposeType]?.[+sId].enabled !==nextValues.restrictivePurposes[purposeType]?.[+sId].enabled}>{({ getFieldValue }) => (<Form.Item{...WP_LIST_TABLE_FORM_ITEM_PROPS}name={purposeType === "special" ? undefined : [...fieldKey, "legInt"]}><Selectdisabled={!isFlexible ||disableRestrictivePurposes ||!getFieldValue([...fieldKey, "enabled"])}defaultValue={purposeType === "special" ? "no" : undefined}><Select.Option value="yes">{__("Legitimate interest")}</Select.Option><Select.Option value="no">{__("Consent")}</Select.Option></Select></Form.Item>)}</Form.Item></td></tr>);})}</tbody></table></>);})