@aglyn/plugins-outreach 1.0.0-beta.218 → 1.0.0-beta.220

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aglyn/plugins-outreach",
-  "version": "1.0.0-beta.218",
+  "version": "1.0.0-beta.220",
   "license": "Apache-2.0",
   "homepage": "https://aglyn.com",
   "repository": {
@@ -25,26 +25,26 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@aglyn/aglyn": "1.0.0-beta.218",
-    "@aglyn/shared-data-mdi": "1.0.0-beta.218",
-    "@aglyn/shared-ui-email-campaigns": "1.0.0-beta.218",
-    "@aglyn/shared-ui-jsx": "1.0.0-beta.218",
-    "@aglyn/shared-ui-next": "1.0.0-beta.218",
-    "@aglyn/shared-ui-snackstack": "1.0.0-beta.218",
-    "@aglyn/shared-util-email": "1.0.0-beta.218",
-    "@aglyn/shared-util-http": "1.0.0-beta.218",
-    "@aglyn/shared-util-timestamp": "1.0.0-beta.218",
-    "@aglyn/shared-util-tools": "1.0.0-beta.218",
-    "@aglyn/tenant-data-admin": "1.0.0-beta.218",
-    "@aglyn/tenant-feature-instance": "1.0.0-beta.218",
-    "@aglyn/tenant-runtime": "1.0.0-beta.218",
+    "@aglyn/aglyn": "1.0.0-beta.220",
+    "@aglyn/shared-data-mdi": "1.0.0-beta.220",
+    "@aglyn/shared-ui-email-campaigns": "1.0.0-beta.220",
+    "@aglyn/shared-ui-jsx": "1.0.0-beta.220",
+    "@aglyn/shared-ui-next": "1.0.0-beta.220",
+    "@aglyn/shared-ui-snackstack": "1.0.0-beta.220",
+    "@aglyn/shared-util-email": "1.0.0-beta.220",
+    "@aglyn/shared-util-http": "1.0.0-beta.220",
+    "@aglyn/shared-util-timestamp": "1.0.0-beta.220",
+    "@aglyn/shared-util-tools": "1.0.0-beta.220",
+    "@aglyn/tenant-data-admin": "1.0.0-beta.220",
+    "@aglyn/tenant-feature-instance": "1.0.0-beta.220",
+    "@aglyn/tenant-runtime": "1.0.0-beta.220",
     "@swc/helpers": "0.5.23"
   },
   "peerDependencies": {
     "@mui/material": "^9.3.1",
     "firebase": "^12.18.0",
     "firebase-admin": "^14.3.0",
-    "next": "16.3.3",
+    "next": "^16.3.3",
     "react": "^19.2.8"
   },
   "sideEffects": false,

package/src/lib/components/compliance-section.d.ts

@@ -15,6 +15,11 @@ export declare const OUTREACH_POSTAL_ADDRESS_HELP: string;
  * `composeOutreachFooter`, so the page shows the lines every email will end
  * with — or, while the legal name or the address is empty, the sentence
  * that explains why nothing can be sent and no sequence activated.
+ *
+ * Both settings cards are drawn from the one form, and each is memoized and
+ * handed only what it shows, through handlers that keep their identity
+ * (AGL-3423): a letter typed into the sender identity redraws its field and
+ * the footer, not the other fields, the countries or the domain list.
  */
 export declare function OutreachComplianceSection(props: OutreachComplianceSectionProps): import("react").JSX.Element;
 export declare namespace OutreachComplianceSection {

package/src/lib/components/compliance-section.js

@@ -21,7 +21,7 @@ import { pluginDocsHelp } from "@aglyn/aglyn";
 import { CardDisplay } from "@aglyn/shared-ui-jsx";
 import { useSnackbar } from "@aglyn/shared-ui-snackstack";
 import { Alert, Autocomplete, Button, Chip, Paper, Stack, TextField, Typography } from "@mui/material";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { composeOutreachFooter } from "../engine/compose.js";
 import { outreachComplianceSettingsEqual, outreachCountryLabel, outreachCountryOptions, OUTREACH_BRAND_NAME_MAX, OUTREACH_LEGAL_NAME_MAX, OUTREACH_POSTAL_ADDRESS_MAX, validateOutreachComplianceSettings } from "../model/compliance-settings.js";
 import { OutreachDoNotContactDomainsCard } from "./do-not-contact-domains.js";
@@ -66,6 +66,219 @@ function pickCard(settings, card) {
 function cardEqual(card, a, b) {
     return outreachComplianceSettingsEqual(_extends({}, b, pickCard(a, card)), b);
 }
+const countryName = (option)=>option.name;
+const sameCountry = (option, value)=>option.code === value.code;
+/**
+ * The allowed countries, as chips — MEMOIZED, and every prop it takes is
+ * stable while the countries are (AGL-3423).
+ *
+ * A multiple Autocomplete hands its input a new chip array as
+ * `startAdornment` on every render, and MUI's `InputBase` copies that into
+ * its `FormControl` from a passive effect: a state update left pending after
+ * every commit the field takes part in. React 19 counts each such commit as a
+ * nested update, and keystrokes delivered back to back commit one after
+ * another with nothing to clear the count, so the fifty-first throws
+ * "Maximum update depth exceeded" (#185) — the sequence editor's countries
+ * field did exactly that. The legal name and address share one form with
+ * this list, so each keystroke in them re-rendered it; kept out of those
+ * renders, it commits only when it changes.
+ */ const ComplianceCountriesField = /*#__PURE__*/ memo(function ComplianceCountriesField(props) {
+    const { onChange } = props;
+    return /*#__PURE__*/ _jsx(Autocomplete, {
+        multiple: true,
+        options: props.options,
+        value: props.value,
+        getOptionLabel: countryName,
+        isOptionEqualToValue: sameCountry,
+        onChange: (_event, next)=>onChange(next),
+        renderValue: (value, getItemProps)=>value.map((option, index)=>{
+                const _getItemProps = getItemProps({
+                    index
+                }), { key } = _getItemProps, item = _object_without_properties_loose(_getItemProps, [
+                    "key"
+                ]);
+                return /*#__PURE__*/ _jsx(Chip, _extends({
+                    size: "small",
+                    label: option.name
+                }, item), key);
+            }),
+        renderInput: (params)=>/*#__PURE__*/ _jsx(TextField, _extends({}, params, {
+                label: "Countries",
+                error: Boolean(props.issue),
+                helperText: props.issue
+            }))
+    });
+});
+/** A text field that redraws only when what it shows changes (AGL-3423). */ const MemoTextField = /*#__PURE__*/ memo(TextField);
+/** Its own list and listener: nothing typed in the cards above it reaches it. */ const MemoDoNotContactDomainsCard = /*#__PURE__*/ memo(OutreachDoNotContactDomainsCard);
+const LEGAL_NAME_SLOT_PROPS = {
+    htmlInput: {
+        maxLength: OUTREACH_LEGAL_NAME_MAX + 20
+    }
+};
+const BRAND_NAME_SLOT_PROPS = {
+    htmlInput: {
+        maxLength: OUTREACH_BRAND_NAME_MAX + 20
+    }
+};
+const POSTAL_ADDRESS_SLOT_PROPS = {
+    htmlInput: {
+        maxLength: OUTREACH_POSTAL_ADDRESS_MAX + 40
+    }
+};
+const FOOTER_PAPER = {
+    p: 1.5
+};
+const FOOTER_TEXT = {
+    whiteSpace: 'pre-wrap',
+    wordBreak: 'break-word'
+};
+/** A settings card's header actions: discard its edits, or save its own fields. */ const ComplianceCardActions = /*#__PURE__*/ memo(function ComplianceCardActions(props) {
+    const { card, dirty, saving, onDiscard, onSave } = props;
+    return /*#__PURE__*/ _jsxs(Stack, {
+        direction: "row",
+        spacing: 1,
+        children: [
+            /*#__PURE__*/ _jsx(Button, {
+                size: "small",
+                variant: "text",
+                disabled: !dirty || saving !== null,
+                onClick: ()=>onDiscard(card),
+                children: "Discard changes"
+            }),
+            /*#__PURE__*/ _jsx(Button, {
+                size: "small",
+                variant: "contained",
+                disabled: !dirty || saving !== null || props.blocked,
+                onClick: ()=>onSave(card),
+                children: saving === card ? 'Saving…' : 'Save'
+            })
+        ]
+    });
+});
+/**
+ * Who every email says sent it, and the footer that says it. Each field is
+ * memoized with a handler that keeps its identity, so a letter typed into one
+ * redraws that field and the footer it changes, not the other two.
+ */ const ComplianceIdentityCard = /*#__PURE__*/ memo(function ComplianceIdentityCard(props) {
+    var _props_legalNameIssue, _props_brandNameIssue, _props_postalAddressIssue;
+    const { footer } = props;
+    return /*#__PURE__*/ _jsx(CardDisplay, {
+        header: "Sender identity",
+        help: pluginDocsHelp('sequences', {
+            anchor: '#compliance-settings'
+        }),
+        HeaderProps: {
+            action: /*#__PURE__*/ _jsx(ComplianceCardActions, {
+                card: "identity",
+                dirty: props.dirty,
+                blocked: props.blocked,
+                saving: props.saving,
+                onDiscard: props.onDiscard,
+                onSave: props.onSave
+            })
+        },
+        contentGutterX: true,
+        contentGutterY: true,
+        children: /*#__PURE__*/ _jsxs(Stack, {
+            spacing: 2,
+            children: [
+                /*#__PURE__*/ _jsx(Typography, {
+                    variant: "body2",
+                    color: "text.secondary",
+                    children: 'Every email a sequence sends ends with a footer naming your organization, its postal ' + 'address, that the email is a sales email, and how to stop more of them. The law ' + 'requires these on commercial email, so every email gets the footer automatically.'
+                }),
+                /*#__PURE__*/ _jsx(MemoTextField, {
+                    label: "Legal name",
+                    value: props.legalName,
+                    onChange: props.onLegalName,
+                    error: Boolean(props.legalNameIssue),
+                    helperText: (_props_legalNameIssue = props.legalNameIssue) != null ? _props_legalNameIssue : 'Your organization’s legal name, as the footer prints it.',
+                    slotProps: LEGAL_NAME_SLOT_PROPS,
+                    fullWidth: true
+                }),
+                /*#__PURE__*/ _jsx(MemoTextField, {
+                    label: "Brand name",
+                    value: props.brandName,
+                    onChange: props.onBrandName,
+                    error: Boolean(props.brandNameIssue),
+                    helperText: (_props_brandNameIssue = props.brandNameIssue) != null ? _props_brandNameIssue : 'The name the solicitation sentence uses. Leave empty to use the legal name.',
+                    slotProps: BRAND_NAME_SLOT_PROPS,
+                    fullWidth: true
+                }),
+                /*#__PURE__*/ _jsx(MemoTextField, {
+                    label: "Postal address",
+                    value: props.postalAddress,
+                    onChange: props.onPostalAddress,
+                    error: Boolean(props.postalAddressIssue),
+                    helperText: (_props_postalAddressIssue = props.postalAddressIssue) != null ? _props_postalAddressIssue : OUTREACH_POSTAL_ADDRESS_HELP,
+                    slotProps: POSTAL_ADDRESS_SLOT_PROPS,
+                    multiline: true,
+                    minRows: 3,
+                    fullWidth: true
+                }),
+                footer ? /*#__PURE__*/ _jsxs(Stack, {
+                    spacing: 0.5,
+                    children: [
+                        /*#__PURE__*/ _jsx(Typography, {
+                            variant: "subtitle2",
+                            children: "Every email ends with"
+                        }),
+                        /*#__PURE__*/ _jsx(Paper, {
+                            variant: "outlined",
+                            sx: FOOTER_PAPER,
+                            children: /*#__PURE__*/ _jsx(Typography, {
+                                variant: "body2",
+                                sx: FOOTER_TEXT,
+                                "data-testid": "outreach-footer-preview",
+                                children: footer
+                            })
+                        })
+                    ]
+                }) : /*#__PURE__*/ _jsx(Alert, {
+                    severity: "warning",
+                    children: 'No sequence can be activated, and no email sent, until you add your organization’s legal ' + 'name and postal address.'
+                })
+            ]
+        })
+    });
+});
+/** The countries a sequence may send to at all. */ const ComplianceCountriesCard = /*#__PURE__*/ memo(function ComplianceCountriesCard(props) {
+    return /*#__PURE__*/ _jsx(CardDisplay, {
+        header: "Allowed countries",
+        help: pluginDocsHelp('sequences', {
+            anchor: '#allowed-countries'
+        }),
+        HeaderProps: {
+            action: /*#__PURE__*/ _jsx(ComplianceCardActions, {
+                card: "countries",
+                dirty: props.dirty,
+                blocked: props.blocked,
+                saving: props.saving,
+                onDiscard: props.onDiscard,
+                onSave: props.onSave
+            })
+        },
+        contentGutterX: true,
+        contentGutterY: true,
+        children: /*#__PURE__*/ _jsxs(Stack, {
+            spacing: 2,
+            children: [
+                /*#__PURE__*/ _jsx(Typography, {
+                    variant: "body2",
+                    color: "text.secondary",
+                    children: 'Sequences may send only to people in these countries, and every sequence only to the ones ' + 'it and this list both allow. The United States is the default: Canada, the United Kingdom and most ' + 'of the European Union require a consent basis that an email to someone who never contacted ' + 'you does not have, so a cold email never goes outside the United States whatever this list ' + 'says. Add another country only for people who came to you first.'
+                }),
+                /*#__PURE__*/ _jsx(ComplianceCountriesField, {
+                    options: props.options,
+                    value: props.value,
+                    issue: props.issue,
+                    onChange: props.onChange
+                })
+            ]
+        })
+    });
+});
 /**
  * Sequences → Compliance (AGL-2980): who every email says sent it, the
  * countries a sequence may send to at all, and — below the settings, with
@@ -77,8 +290,12 @@ function cardEqual(card, a, b) {
  * `composeOutreachFooter`, so the page shows the lines every email will end
  * with — or, while the legal name or the address is empty, the sentence
  * that explains why nothing can be sent and no sequence activated.
+ *
+ * Both settings cards are drawn from the one form, and each is memoized and
+ * handed only what it shows, through handlers that keep their identity
+ * (AGL-3423): a letter typed into the sender identity redraws its field and
+ * the footer, not the other fields, the countries or the domain list.
  */ export function OutreachComplianceSection(props) {
-    var _fieldIssue, _fieldIssue1, _fieldIssue2;
     const { orgId } = props;
     const api = useOutreachApi(orgId);
     const loaded = useOutreachComplianceSettings(api, orgId);
@@ -118,16 +335,25 @@ function cardEqual(card, a, b) {
     const cardDirty = (card)=>stored ? !outreachComplianceSettingsEqual(stored, candidate(card).settings) : false;
     const cardBlocked = (card)=>candidate(card).issues.some((issue)=>CARDS[card].fields.includes(issue.field));
     const footer = composeOutreachFooter(normalized);
-    const set = (field)=>(value)=>{
-            setServerIssues((previous)=>{
-                const next = _extends({}, previous);
-                delete next[field];
-                return next;
-            });
-            setForm((previous)=>_extends({}, previous, {
-                    [field]: value
-                }));
-        };
+    const set = useCallback((field, value)=>{
+        setServerIssues((previous)=>{
+            const next = _extends({}, previous);
+            delete next[field];
+            return next;
+        });
+        setForm((previous)=>_extends({}, previous, {
+                [field]: value
+            }));
+    }, []);
+    const setLegalName = useCallback((event)=>set('legalName', event.target.value), [
+        set
+    ]);
+    const setBrandName = useCallback((event)=>set('brandName', event.target.value), [
+        set
+    ]);
+    const setPostalAddress = useCallback((event)=>set('postalAddress', event.target.value), [
+        set
+    ]);
     const clearIssues = (card)=>setServerIssues((previous)=>{
             const next = _extends({}, previous);
             for (const field of CARDS[card].fields){
@@ -135,6 +361,31 @@ function cardEqual(card, a, b) {
             }
             return next;
         });
+    // Stable, for the memoized countries field: an edit clears the card's
+    // issues and replaces the list in whatever form it lands on.
+    const setCountries = useCallback((next)=>{
+        setServerIssues((previous)=>{
+            const cleared = _extends({}, previous);
+            for (const field of CARDS.countries.fields){
+                delete cleared[field];
+            }
+            return cleared;
+        });
+        setForm((previous)=>_extends({}, previous, {
+                allowedCountries: next.map((option)=>option.code)
+            }));
+    }, []);
+    const allowedCountries = form.allowedCountries;
+    const selectedCountries = useMemo(()=>allowedCountries.map((code)=>{
+            var _countries_find;
+            return (_countries_find = countries.find((option)=>option.code === code)) != null ? _countries_find : {
+                code,
+                name: outreachCountryLabel(code)
+            };
+        }), [
+        allowedCountries,
+        countries
+    ]);
     const discard = (card)=>{
         clearIssues(card);
         if (stored) setForm((previous)=>_extends({}, previous, pickCard(stored, card)));
@@ -164,6 +415,18 @@ function cardEqual(card, a, b) {
             setSaving(null);
         }
     };
+    // The discard and save as last drawn, behind handlers that keep their
+    // identity: both read the form and the stored settings of that render.
+    const drawn = useRef({
+        discard,
+        save
+    });
+    drawn.current = {
+        discard,
+        save
+    };
+    const onDiscard = useCallback((card)=>drawn.current.discard(card), []);
+    const onSave = useCallback((card)=>void drawn.current.save(card), []);
     if (loaded.status === 'loading' || !orgId && !stored) {
         return /*#__PURE__*/ _jsx(OutreachLoading, {
             label: "Loading compliance settings…"
@@ -177,179 +440,38 @@ function cardEqual(card, a, b) {
             onRetry: loaded.reload
         });
     }
-    const selectedCountries = form.allowedCountries.map((code)=>{
-        var _countries_find;
-        return (_countries_find = countries.find((option)=>option.code === code)) != null ? _countries_find : {
-            code,
-            name: outreachCountryLabel(code)
-        };
-    });
-    const cardActions = (card)=>{
-        const dirty = cardDirty(card);
-        return /*#__PURE__*/ _jsxs(Stack, {
-            direction: "row",
-            spacing: 1,
-            children: [
-                /*#__PURE__*/ _jsx(Button, {
-                    size: "small",
-                    variant: "text",
-                    disabled: !dirty || saving !== null,
-                    onClick: ()=>discard(card),
-                    children: "Discard changes"
-                }),
-                /*#__PURE__*/ _jsx(Button, {
-                    size: "small",
-                    variant: "contained",
-                    disabled: !dirty || saving !== null || cardBlocked(card),
-                    onClick: ()=>void save(card),
-                    children: saving === card ? 'Saving…' : 'Save'
-                })
-            ]
-        });
-    };
     return /*#__PURE__*/ _jsxs(Stack, {
         spacing: 2,
         children: [
-            /*#__PURE__*/ _jsx(CardDisplay, {
-                header: "Sender identity",
-                help: pluginDocsHelp('sequences', {
-                    anchor: '#compliance-settings'
-                }),
-                HeaderProps: {
-                    action: cardActions('identity')
-                },
-                contentGutterX: true,
-                contentGutterY: true,
-                children: /*#__PURE__*/ _jsxs(Stack, {
-                    spacing: 2,
-                    children: [
-                        /*#__PURE__*/ _jsx(Typography, {
-                            variant: "body2",
-                            color: "text.secondary",
-                            children: 'Every email a sequence sends ends with a footer naming your organization, its postal ' + 'address, that the email is a sales email, and how to stop more of them. The law ' + 'requires these on commercial email, so every email gets the footer automatically.'
-                        }),
-                        /*#__PURE__*/ _jsx(TextField, {
-                            label: "Legal name",
-                            value: form.legalName,
-                            onChange: (event)=>set('legalName')(event.target.value),
-                            error: Boolean(fieldIssue('legalName')),
-                            helperText: (_fieldIssue = fieldIssue('legalName')) != null ? _fieldIssue : 'Your organization’s legal name, as the footer prints it.',
-                            slotProps: {
-                                htmlInput: {
-                                    maxLength: OUTREACH_LEGAL_NAME_MAX + 20
-                                }
-                            },
-                            fullWidth: true
-                        }),
-                        /*#__PURE__*/ _jsx(TextField, {
-                            label: "Brand name",
-                            value: form.brandName,
-                            onChange: (event)=>set('brandName')(event.target.value),
-                            error: Boolean(fieldIssue('brandName')),
-                            helperText: (_fieldIssue1 = fieldIssue('brandName')) != null ? _fieldIssue1 : 'The name the solicitation sentence uses. Leave empty to use the legal name.',
-                            slotProps: {
-                                htmlInput: {
-                                    maxLength: OUTREACH_BRAND_NAME_MAX + 20
-                                }
-                            },
-                            fullWidth: true
-                        }),
-                        /*#__PURE__*/ _jsx(TextField, {
-                            label: "Postal address",
-                            value: form.postalAddress,
-                            onChange: (event)=>set('postalAddress')(event.target.value),
-                            error: Boolean(fieldIssue('postalAddress')),
-                            helperText: (_fieldIssue2 = fieldIssue('postalAddress')) != null ? _fieldIssue2 : OUTREACH_POSTAL_ADDRESS_HELP,
-                            slotProps: {
-                                htmlInput: {
-                                    maxLength: OUTREACH_POSTAL_ADDRESS_MAX + 40
-                                }
-                            },
-                            multiline: true,
-                            minRows: 3,
-                            fullWidth: true
-                        }),
-                        footer.footer ? /*#__PURE__*/ _jsxs(Stack, {
-                            spacing: 0.5,
-                            children: [
-                                /*#__PURE__*/ _jsx(Typography, {
-                                    variant: "subtitle2",
-                                    children: "Every email ends with"
-                                }),
-                                /*#__PURE__*/ _jsx(Paper, {
-                                    variant: "outlined",
-                                    sx: {
-                                        p: 1.5
-                                    },
-                                    children: /*#__PURE__*/ _jsx(Typography, {
-                                        variant: "body2",
-                                        sx: {
-                                            whiteSpace: 'pre-wrap',
-                                            wordBreak: 'break-word'
-                                        },
-                                        "data-testid": "outreach-footer-preview",
-                                        children: footer.footer
-                                    })
-                                })
-                            ]
-                        }) : /*#__PURE__*/ _jsx(Alert, {
-                            severity: "warning",
-                            children: 'No sequence can be activated, and no email sent, until you add your organization’s legal ' + 'name and postal address.'
-                        })
-                    ]
-                })
+            /*#__PURE__*/ _jsx(ComplianceIdentityCard, {
+                legalName: form.legalName,
+                brandName: form.brandName,
+                postalAddress: form.postalAddress,
+                legalNameIssue: fieldIssue('legalName'),
+                brandNameIssue: fieldIssue('brandName'),
+                postalAddressIssue: fieldIssue('postalAddress'),
+                footer: footer.footer,
+                onLegalName: setLegalName,
+                onBrandName: setBrandName,
+                onPostalAddress: setPostalAddress,
+                dirty: cardDirty('identity'),
+                blocked: cardBlocked('identity'),
+                saving: saving,
+                onDiscard: onDiscard,
+                onSave: onSave
             }),
-            /*#__PURE__*/ _jsx(CardDisplay, {
-                header: "Allowed countries",
-                help: pluginDocsHelp('sequences', {
-                    anchor: '#allowed-countries'
-                }),
-                HeaderProps: {
-                    action: cardActions('countries')
-                },
-                contentGutterX: true,
-                contentGutterY: true,
-                children: /*#__PURE__*/ _jsxs(Stack, {
-                    spacing: 2,
-                    children: [
-                        /*#__PURE__*/ _jsx(Typography, {
-                            variant: "body2",
-                            color: "text.secondary",
-                            children: 'Sequences may send only to people in these countries, and every sequence only to the ones ' + 'it and this list both allow. The United States is the default: Canada, the United Kingdom and most ' + 'of the European Union require a consent basis that an email to someone who never contacted ' + 'you does not have, so a cold email never goes outside the United States whatever this list ' + 'says. Add another country only for people who came to you first.'
-                        }),
-                        /*#__PURE__*/ _jsx(Autocomplete, {
-                            multiple: true,
-                            options: countries,
-                            value: selectedCountries,
-                            getOptionLabel: (option)=>option.name,
-                            isOptionEqualToValue: (option, value)=>option.code === value.code,
-                            onChange: (_event, next)=>{
-                                clearIssues('countries');
-                                setForm((previous)=>_extends({}, previous, {
-                                        allowedCountries: next.map((option)=>option.code)
-                                    }));
-                            },
-                            renderValue: (value, getItemProps)=>value.map((option, index)=>{
-                                    const _getItemProps = getItemProps({
-                                        index
-                                    }), { key } = _getItemProps, item = _object_without_properties_loose(_getItemProps, [
-                                        "key"
-                                    ]);
-                                    return /*#__PURE__*/ _jsx(Chip, _extends({
-                                        size: "small",
-                                        label: option.name
-                                    }, item), key);
-                                }),
-                            renderInput: (params)=>/*#__PURE__*/ _jsx(TextField, _extends({}, params, {
-                                    label: "Countries",
-                                    error: Boolean(fieldIssue('allowedCountries')),
-                                    helperText: fieldIssue('allowedCountries')
-                                }))
-                        })
-                    ]
-                })
+            /*#__PURE__*/ _jsx(ComplianceCountriesCard, {
+                options: countries,
+                value: selectedCountries,
+                issue: fieldIssue('allowedCountries'),
+                onChange: setCountries,
+                dirty: cardDirty('countries'),
+                blocked: cardBlocked('countries'),
+                saving: saving,
+                onDiscard: onDiscard,
+                onSave: onSave
             }),
-            /*#__PURE__*/ _jsx(OutreachDoNotContactDomainsCard, {
+            /*#__PURE__*/ _jsx(MemoDoNotContactDomainsCard, {
                 orgId: orgId
             })
         ]