@mobilizehub/payload-plugin 0.0.1 → 0.2.0

package/dist/components/broadcast-metrics-card.js

@@ -0,0 +1,159 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function roundToTwo(num) {
+    return Math.round(num * 100) / 100;
+}
+export const MetricsCards = async ({ data, payload })=>{
+    const broadcastId = data.id;
+    if (!broadcastId) {
+        return null;
+    }
+    const broadcast = await payload.find({
+        collection: 'broadcasts',
+        limit: 1,
+        where: {
+            id: {
+                equals: broadcastId
+            }
+        }
+    });
+    if (!broadcast.totalDocs) {
+        return null;
+    }
+    const contacts = broadcast.docs[0].meta.contactsCount;
+    // Run all count queries in parallel for better performance
+    const [{ totalDocs: emails }, { totalDocs: delivered }, { totalDocs: bounced }, { totalDocs: unsubscribed }, { totalDocs: complained }] = await Promise.all([
+        payload.count({
+            collection: 'emails',
+            where: {
+                broadcast: {
+                    equals: broadcastId
+                }
+            }
+        }),
+        payload.count({
+            collection: 'emails',
+            where: {
+                broadcast: {
+                    equals: broadcastId
+                },
+                status: {
+                    equals: 'delivered'
+                }
+            }
+        }),
+        payload.count({
+            collection: 'emails',
+            where: {
+                broadcast: {
+                    equals: broadcastId
+                },
+                status: {
+                    equals: 'bounced'
+                }
+            }
+        }),
+        payload.count({
+            collection: 'emails',
+            where: {
+                broadcast: {
+                    equals: broadcastId
+                },
+                status: {
+                    equals: 'unsubscribed'
+                }
+            }
+        }),
+        payload.count({
+            collection: 'emails',
+            where: {
+                broadcast: {
+                    equals: broadcastId
+                },
+                status: {
+                    equals: 'complained'
+                }
+            }
+        })
+    ]);
+    return /*#__PURE__*/ _jsxs("div", {
+        style: {
+            marginBottom: '2.5rem'
+        },
+        children: [
+            /*#__PURE__*/ _jsx("div", {
+                style: {
+                    marginBottom: '1rem'
+                },
+                children: /*#__PURE__*/ _jsx("p", {
+                    children: "Metrics"
+                })
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                className: "metrics-grid",
+                style: {
+                    display: 'grid',
+                    gap: '1.5rem',
+                    gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))'
+                },
+                children: [
+                    {
+                        name: 'Contacts',
+                        value: contacts
+                    },
+                    {
+                        name: 'Emails',
+                        value: emails
+                    },
+                    {
+                        name: 'Delivered',
+                        value: delivered
+                    },
+                    {
+                        name: 'Bounced',
+                        value: bounced
+                    },
+                    {
+                        name: 'Unsubscribed',
+                        value: unsubscribed
+                    },
+                    {
+                        name: 'Complained',
+                        value: complained
+                    }
+                ].map((stat)=>/*#__PURE__*/ _jsxs("div", {
+                        className: "card",
+                        children: [
+                            /*#__PURE__*/ _jsxs("div", {
+                                children: [
+                                    /*#__PURE__*/ _jsx("dt", {
+                                        className: "card__title",
+                                        children: stat.name
+                                    }),
+                                    /*#__PURE__*/ _jsx("dd", {
+                                        style: {
+                                            color: 'var(--theme-elevation-1000)',
+                                            fontSize: '1.5rem',
+                                            fontWeight: '600',
+                                            letterSpacing: '-0.025em',
+                                            lineHeight: '2.5rem',
+                                            margin: 0
+                                        },
+                                        children: stat.value.toLocaleString()
+                                    })
+                                ]
+                            }),
+                            stat.name !== 'Emails' && stat.name !== 'Contacts' && emails > 0 && /*#__PURE__*/ _jsxs("dd", {
+                                className: "card__action",
+                                children: [
+                                    roundToTwo(stat.value / emails * 100),
+                                    "%"
+                                ]
+                            })
+                        ]
+                    }, stat.name))
+            })
+        ]
+    });
+};
+
+//# sourceMappingURL=broadcast-metrics-card.js.map

package/dist/components/broadcast-metrics-card.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/broadcast-metrics-card.tsx"],"sourcesContent":["import type { Payload } from 'payload'\n\nfunction roundToTwo(num: number): number {\n  return Math.round(num * 100) / 100\n}\n\nexport const MetricsCards = async ({\n  data,\n  payload,\n}: {\n  data: { id: number }\n  payload: Payload\n}) => {\n  const broadcastId = data.id\n\n  if (!broadcastId) {\n    return null\n  }\n\n  const broadcast = await payload.find({\n    collection: 'broadcasts',\n    limit: 1,\n    where: {\n      id: {\n        equals: broadcastId,\n      },\n    },\n  })\n\n  if (!broadcast.totalDocs) {\n    return null\n  }\n\n  const contacts = broadcast.docs[0].meta.contactsCount as number\n\n  // Run all count queries in parallel for better performance\n  const [\n    { totalDocs: emails },\n    { totalDocs: delivered },\n    { totalDocs: bounced },\n    { totalDocs: unsubscribed },\n    { totalDocs: complained },\n  ] = await Promise.all([\n    payload.count({\n      collection: 'emails',\n      where: {\n        broadcast: { equals: broadcastId },\n      },\n    }),\n    payload.count({\n      collection: 'emails',\n      where: {\n        broadcast: { equals: broadcastId },\n        status: { equals: 'delivered' },\n      },\n    }),\n    payload.count({\n      collection: 'emails',\n      where: {\n        broadcast: { equals: broadcastId },\n        status: { equals: 'bounced' },\n      },\n    }),\n    payload.count({\n      collection: 'emails',\n      where: {\n        broadcast: { equals: broadcastId },\n        status: { equals: 'unsubscribed' },\n      },\n    }),\n    payload.count({\n      collection: 'emails',\n      where: {\n        broadcast: { equals: broadcastId },\n        status: { equals: 'complained' },\n      },\n    }),\n  ])\n\n  return (\n    <div style={{ marginBottom: '2.5rem' }}>\n      <div style={{ marginBottom: '1rem' }}>\n        <p>Metrics</p>\n      </div>\n      <div\n        className=\"metrics-grid\"\n        style={{\n          display: 'grid',\n          gap: '1.5rem',\n          gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))',\n        }}\n      >\n        {[\n          { name: 'Contacts', value: contacts },\n          { name: 'Emails', value: emails },\n          { name: 'Delivered', value: delivered },\n          { name: 'Bounced', value: bounced },\n          { name: 'Unsubscribed', value: unsubscribed },\n          { name: 'Complained', value: complained },\n        ].map((stat) => (\n          <div className=\"card\" key={stat.name}>\n            <div>\n              <dt className=\"card__title\">{stat.name}</dt>\n              <dd\n                style={{\n                  color: 'var(--theme-elevation-1000)',\n                  fontSize: '1.5rem',\n                  fontWeight: '600',\n                  letterSpacing: '-0.025em',\n                  lineHeight: '2.5rem',\n                  margin: 0,\n                }}\n              >\n                {stat.value.toLocaleString()}\n              </dd>\n            </div>\n            {stat.name !== 'Emails' && stat.name !== 'Contacts' && emails > 0 && (\n              <dd className=\"card__action\">{roundToTwo((stat.value / emails) * 100)}%</dd>\n            )}\n          </div>\n        ))}\n      </div>\n    </div>\n  )\n}\n"],"names":["roundToTwo","num","Math","round","MetricsCards","data","payload","broadcastId","id","broadcast","find","collection","limit","where","equals","totalDocs","contacts","docs","meta","contactsCount","emails","delivered","bounced","unsubscribed","complained","Promise","all","count","status","div","style","marginBottom","p","className","display","gap","gridTemplateColumns","name","value","map","stat","dt","dd","color","fontSize","fontWeight","letterSpacing","lineHeight","margin","toLocaleString"],"mappings":"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"}

package/dist/components/broadcast-send-modal.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface SendBroadcastModalProps {
+    buttonLabel?: string;
+    modalBody?: string;
+    modalSlug?: string;
+    modalTitle?: string;
+}
+export declare const SendBroadcastModal: React.FC<SendBroadcastModalProps>;
+export {};

package/dist/components/broadcast-send-modal.js

@@ -0,0 +1,51 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button, ConfirmationModal, toast, useDocumentInfo, useFormModified, useModal } from '@payloadcms/ui';
+import React from 'react';
+const apiEndpoint = '/api/send-broadcast';
+export const SendBroadcastModal = ({ buttonLabel = 'Send broadcast', modalBody = 'Are you sure you want to send this broadcast?', modalSlug = 'send-broadcast-modal', modalTitle = 'Send Broadcast' })=>{
+    const { id, initialData } = useDocumentInfo();
+    const modified = useFormModified();
+    const isDraft = initialData?.status === 'draft';
+    const { toggleModal } = useModal();
+    if (!id) {
+        return null;
+    }
+    const handleOpenModal = ()=>{
+        toggleModal(modalSlug);
+    };
+    const handleConfirm = async ()=>{
+        await fetch(apiEndpoint, {
+            body: JSON.stringify({
+                broadcastId: id
+            }),
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            method: 'POST'
+        });
+        toast.success('Broadcast queued for sending');
+        window.location.reload();
+        toggleModal(modalSlug);
+    };
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(Button, {
+                disabled: modified || !isDraft,
+                onClick: handleOpenModal,
+                size: "medium",
+                children: buttonLabel
+            }),
+            /*#__PURE__*/ _jsx(ConfirmationModal, {
+                body: modalBody || /*#__PURE__*/ _jsx("p", {
+                    children: "Are you sure you want to proceed with this action?"
+                }),
+                heading: modalTitle,
+                modalSlug: modalSlug,
+                onConfirm: handleConfirm
+            })
+        ]
+    });
+};
+
+//# sourceMappingURL=broadcast-send-modal.js.map

package/dist/components/broadcast-send-modal.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/broadcast-send-modal.tsx"],"sourcesContent":["'use client'\n\nimport {\n  Button,\n  ConfirmationModal,\n  toast,\n  useDocumentInfo,\n  useFormModified,\n  useModal,\n} from '@payloadcms/ui'\nimport React from 'react'\n\ninterface SendBroadcastModalProps {\n  buttonLabel?: string\n  modalBody?: string\n  modalSlug?: string\n  modalTitle?: string\n}\n\nconst apiEndpoint = '/api/send-broadcast'\n\nexport const SendBroadcastModal: React.FC<SendBroadcastModalProps> = ({\n  buttonLabel = 'Send broadcast',\n  modalBody = 'Are you sure you want to send this broadcast?',\n  modalSlug = 'send-broadcast-modal',\n  modalTitle = 'Send Broadcast',\n}) => {\n  const { id, initialData } = useDocumentInfo()\n  const modified = useFormModified()\n\n  const isDraft = initialData?.status === 'draft'\n\n  const { toggleModal } = useModal()\n  if (!id) {\n    return null\n  }\n\n  const handleOpenModal = () => {\n    toggleModal(modalSlug)\n  }\n\n  const handleConfirm = async () => {\n    await fetch(apiEndpoint, {\n      body: JSON.stringify({ broadcastId: id }),\n      headers: {\n        'Content-Type': 'application/json',\n      },\n      method: 'POST',\n    })\n\n    toast.success('Broadcast queued for sending')\n    window.location.reload()\n    toggleModal(modalSlug)\n  }\n\n  return (\n    <>\n      <Button disabled={modified || !isDraft} onClick={handleOpenModal} size=\"medium\">\n        {buttonLabel}\n      </Button>\n\n      <ConfirmationModal\n        body={modalBody || <p>Are you sure you want to proceed with this action?</p>}\n        heading={modalTitle}\n        modalSlug={modalSlug}\n        onConfirm={handleConfirm}\n      />\n    </>\n  )\n}\n"],"names":["Button","ConfirmationModal","toast","useDocumentInfo","useFormModified","useModal","React","apiEndpoint","SendBroadcastModal","buttonLabel","modalBody","modalSlug","modalTitle","id","initialData","modified","isDraft","status","toggleModal","handleOpenModal","handleConfirm","fetch","body","JSON","stringify","broadcastId","headers","method","success","window","location","reload","disabled","onClick","size","p","heading","onConfirm"],"mappings":"AAAA;;AAEA,SACEA,MAAM,EACNC,iBAAiB,EACjBC,KAAK,EACLC,eAAe,EACfC,eAAe,EACfC,QAAQ,QACH,iBAAgB;AACvB,OAAOC,WAAW,QAAO;AASzB,MAAMC,cAAc;AAEpB,OAAO,MAAMC,qBAAwD,CAAC,EACpEC,cAAc,gBAAgB,EAC9BC,YAAY,+CAA+C,EAC3DC,YAAY,sBAAsB,EAClCC,aAAa,gBAAgB,EAC9B;IACC,MAAM,EAAEC,EAAE,EAAEC,WAAW,EAAE,GAAGX;IAC5B,MAAMY,WAAWX;IAEjB,MAAMY,UAAUF,aAAaG,WAAW;IAExC,MAAM,EAAEC,WAAW,EAAE,GAAGb;IACxB,IAAI,CAACQ,IAAI;QACP,OAAO;IACT;IAEA,MAAMM,kBAAkB;QACtBD,YAAYP;IACd;IAEA,MAAMS,gBAAgB;QACpB,MAAMC,MAAMd,aAAa;YACvBe,MAAMC,KAAKC,SAAS,CAAC;gBAAEC,aAAaZ;YAAG;YACvCa,SAAS;gBACP,gBAAgB;YAClB;YACAC,QAAQ;QACV;QAEAzB,MAAM0B,OAAO,CAAC;QACdC,OAAOC,QAAQ,CAACC,MAAM;QACtBb,YAAYP;IACd;IAEA,qBACE;;0BACE,KAACX;gBAAOgC,UAAUjB,YAAY,CAACC;gBAASiB,SAASd;gBAAiBe,MAAK;0BACpEzB;;0BAGH,KAACR;gBACCqB,MAAMZ,2BAAa,KAACyB;8BAAE;;gBACtBC,SAASxB;gBACTD,WAAWA;gBACX0B,WAAWjB;;;;AAInB,EAAC"}

package/dist/components/broadcast-send-test-drawer.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface TestBroadcastDrawerProps {
+    broadcastId?: string;
+    buttonLabel?: string;
+}
+export declare const SendTestBroadcastDrawer: React.FC<TestBroadcastDrawerProps>;
+export {};

package/dist/components/broadcast-send-test-drawer.js

@@ -0,0 +1,154 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button, Drawer, toast, useDocumentInfo, useFormModified, useModal } from '@payloadcms/ui';
+import React, { useCallback, useState } from 'react';
+import { isValidEmail } from '../utils/email.js';
+const apiEndpoint = '/api/send-test-email';
+export const SendTestBroadcastDrawer = ({ buttonLabel = 'Test email' })=>{
+    const [email, setEmail] = useState('');
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const { id, initialData } = useDocumentInfo();
+    const { toggleModal } = useModal();
+    const modified = useFormModified();
+    const isDraft = initialData?.status === 'draft';
+    const drawerSlug = 'test-broadcast-drawer';
+    const handleSendTest = useCallback(async ()=>{
+        setError(null);
+        if (!email) {
+            setError('Please enter an email address');
+            return;
+        }
+        if (!isValidEmail(email)) {
+            setError('Please enter a valid email address');
+            return;
+        }
+        setIsLoading(true);
+        try {
+            const response = await fetch(apiEndpoint, {
+                body: JSON.stringify({
+                    broadcastId: id,
+                    testEmail: email
+                }),
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                method: 'POST'
+            });
+            const data = await response.json();
+            if (response.ok) {
+                setEmail(''); // Clear the input
+                toast.success('Test broadcast sent successfully');
+                toggleModal(drawerSlug);
+            } else {
+                toast.error('Failed to send test broadcast');
+                setError(data.message || 'Failed to send test broadcast');
+            }
+        } catch  {
+            toast.error('Failed to send test broadcast');
+            setError('An error occurred while sending the test broadcast');
+        } finally{
+            setIsLoading(false);
+        }
+    }, [
+        email,
+        id,
+        toggleModal
+    ]);
+    if (!id) {
+        return null;
+    }
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(Button, {
+                disabled: !isDraft || modified,
+                onClick: ()=>toggleModal(drawerSlug),
+                size: "medium",
+                children: buttonLabel
+            }),
+            /*#__PURE__*/ _jsx(Drawer, {
+                slug: drawerSlug,
+                title: "Send Test",
+                children: /*#__PURE__*/ _jsxs("form", {
+                    className: "form",
+                    noValidate: true,
+                    onSubmit: handleSendTest,
+                    children: [
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: "render-fields",
+                            children: [
+                                error && /*#__PURE__*/ _jsx("div", {
+                                    className: "field-type",
+                                    style: {
+                                        backgroundColor: 'var(--theme-error-50)',
+                                        border: '1px solid var(--theme-error-500)',
+                                        borderRadius: '4px',
+                                        color: 'var(--theme-error-900)',
+                                        marginBottom: 'var(--base-unit)',
+                                        padding: '0.75rem'
+                                    },
+                                    children: error
+                                }),
+                                /*#__PURE__*/ _jsxs("div", {
+                                    className: "field-type text",
+                                    children: [
+                                        /*#__PURE__*/ _jsxs("label", {
+                                            className: "field-label",
+                                            htmlFor: "field-test-email",
+                                            children: [
+                                                "Email Address",
+                                                /*#__PURE__*/ _jsx("span", {
+                                                    className: "required",
+                                                    children: "*"
+                                                })
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ _jsx("div", {
+                                            className: "field-type__wrap",
+                                            children: /*#__PURE__*/ _jsx("input", {
+                                                "aria-label": "Email address",
+                                                "data-rtl": "false",
+                                                disabled: isLoading,
+                                                id: "field-test-email",
+                                                name: "testEmail",
+                                                onChange: (e)=>{
+                                                    setEmail(e.target.value);
+                                                    setError(null);
+                                                },
+                                                placeholder: "name@example.com",
+                                                type: "email",
+                                                value: email
+                                            })
+                                        }),
+                                        /*#__PURE__*/ _jsx("div", {
+                                            className: "field-description field-description-testEmail",
+                                            children: "A test version of this broadcast will be sent to the email address above. The test email will be clearly marked as a test."
+                                        })
+                                    ]
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsx("div", {
+                            className: "form-submit",
+                            children: /*#__PURE__*/ _jsx("button", {
+                                "aria-label": "Send test broadcast",
+                                className: "btn btn--icon-style-without-border btn--size-medium btn--style-primary",
+                                disabled: isLoading || !email,
+                                type: "submit",
+                                children: /*#__PURE__*/ _jsx("span", {
+                                    className: "btn__content",
+                                    children: /*#__PURE__*/ _jsx("span", {
+                                        className: "btn__label",
+                                        children: isLoading ? 'Sending...' : 'Send Test'
+                                    })
+                                })
+                            })
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+};
+
+//# sourceMappingURL=broadcast-send-test-drawer.js.map

package/dist/components/broadcast-send-test-drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/broadcast-send-test-drawer.tsx"],"sourcesContent":["'use client'\n\nimport { Button, Drawer, toast, useDocumentInfo, useFormModified, useModal } from '@payloadcms/ui'\nimport React, { useCallback, useState } from 'react'\n\nimport { isValidEmail } from '../utils/email.js'\n\ninterface TestBroadcastDrawerProps {\n  broadcastId?: string\n  buttonLabel?: string\n}\n\nconst apiEndpoint = '/api/send-test-email'\n\nexport const SendTestBroadcastDrawer: React.FC<TestBroadcastDrawerProps> = ({\n  buttonLabel = 'Test email',\n}) => {\n  const [email, setEmail] = useState('')\n  const [isLoading, setIsLoading] = useState(false)\n  const [error, setError] = useState<null | string>(null)\n  const { id, initialData } = useDocumentInfo()\n  const { toggleModal } = useModal()\n  const modified = useFormModified()\n\n  const isDraft = initialData?.status === 'draft'\n\n  const drawerSlug = 'test-broadcast-drawer'\n\n  const handleSendTest = useCallback(async () => {\n    setError(null)\n\n    if (!email) {\n      setError('Please enter an email address')\n      return\n    }\n\n    if (!isValidEmail(email)) {\n      setError('Please enter a valid email address')\n      return\n    }\n\n    setIsLoading(true)\n\n    try {\n      const response = await fetch(apiEndpoint, {\n        body: JSON.stringify({\n          broadcastId: id,\n          testEmail: email,\n        }),\n        headers: {\n          'Content-Type': 'application/json',\n        },\n        method: 'POST',\n      })\n\n      const data = await response.json()\n\n      if (response.ok) {\n        setEmail('') // Clear the input\n        toast.success('Test broadcast sent successfully')\n        toggleModal(drawerSlug)\n      } else {\n        toast.error('Failed to send test broadcast')\n        setError(data.message || 'Failed to send test broadcast')\n      }\n    } catch {\n      toast.error('Failed to send test broadcast')\n      setError('An error occurred while sending the test broadcast')\n    } finally {\n      setIsLoading(false)\n    }\n  }, [email, id, toggleModal])\n\n  if (!id) {\n    return null\n  }\n\n  return (\n    <>\n      <Button disabled={!isDraft || modified} onClick={() => toggleModal(drawerSlug)} size=\"medium\">\n        {buttonLabel}\n      </Button>\n\n      <Drawer slug={drawerSlug} title=\"Send Test\">\n        <form className=\"form\" noValidate onSubmit={handleSendTest}>\n          <div className=\"render-fields\">\n            {error && (\n              <div\n                className=\"field-type\"\n                style={{\n                  backgroundColor: 'var(--theme-error-50)',\n                  border: '1px solid var(--theme-error-500)',\n                  borderRadius: '4px',\n                  color: 'var(--theme-error-900)',\n                  marginBottom: 'var(--base-unit)',\n                  padding: '0.75rem',\n                }}\n              >\n                {error}\n              </div>\n            )}\n\n            <div className=\"field-type text\">\n              <label className=\"field-label\" htmlFor=\"field-test-email\">\n                Email Address\n                <span className=\"required\">*</span>\n              </label>\n              <div className=\"field-type__wrap\">\n                <input\n                  aria-label=\"Email address\"\n                  data-rtl=\"false\"\n                  disabled={isLoading}\n                  id=\"field-test-email\"\n                  name=\"testEmail\"\n                  onChange={(e) => {\n                    setEmail(e.target.value)\n                    setError(null)\n                  }}\n                  placeholder=\"name@example.com\"\n                  type=\"email\"\n                  value={email}\n                />\n              </div>\n              <div className=\"field-description field-description-testEmail\">\n                A test version of this broadcast will be sent to the email address above. The test\n                email will be clearly marked as a test.\n              </div>\n            </div>\n          </div>\n\n          <div className=\"form-submit\">\n            <button\n              aria-label=\"Send test broadcast\"\n              className=\"btn btn--icon-style-without-border btn--size-medium btn--style-primary\"\n              disabled={isLoading || !email}\n              type=\"submit\"\n            >\n              <span className=\"btn__content\">\n                <span className=\"btn__label\">{isLoading ? 'Sending...' : 'Send Test'}</span>\n              </span>\n            </button>\n          </div>\n        </form>\n      </Drawer>\n    </>\n  )\n}\n"],"names":["Button","Drawer","toast","useDocumentInfo","useFormModified","useModal","React","useCallback","useState","isValidEmail","apiEndpoint","SendTestBroadcastDrawer","buttonLabel","email","setEmail","isLoading","setIsLoading","error","setError","id","initialData","toggleModal","modified","isDraft","status","drawerSlug","handleSendTest","response","fetch","body","JSON","stringify","broadcastId","testEmail","headers","method","data","json","ok","success","message","disabled","onClick","size","slug","title","form","className","noValidate","onSubmit","div","style","backgroundColor","border","borderRadius","color","marginBottom","padding","label","htmlFor","span","input","aria-label","data-rtl","name","onChange","e","target","value","placeholder","type","button"],"mappings":"AAAA;;AAEA,SAASA,MAAM,EAAEC,MAAM,EAAEC,KAAK,EAAEC,eAAe,EAAEC,eAAe,EAAEC,QAAQ,QAAQ,iBAAgB;AAClG,OAAOC,SAASC,WAAW,EAAEC,QAAQ,QAAQ,QAAO;AAEpD,SAASC,YAAY,QAAQ,oBAAmB;AAOhD,MAAMC,cAAc;AAEpB,OAAO,MAAMC,0BAA8D,CAAC,EAC1EC,cAAc,YAAY,EAC3B;IACC,MAAM,CAACC,OAAOC,SAAS,GAAGN,SAAS;IACnC,MAAM,CAACO,WAAWC,aAAa,GAAGR,SAAS;IAC3C,MAAM,CAACS,OAAOC,SAAS,GAAGV,SAAwB;IAClD,MAAM,EAAEW,EAAE,EAAEC,WAAW,EAAE,GAAGjB;IAC5B,MAAM,EAAEkB,WAAW,EAAE,GAAGhB;IACxB,MAAMiB,WAAWlB;IAEjB,MAAMmB,UAAUH,aAAaI,WAAW;IAExC,MAAMC,aAAa;IAEnB,MAAMC,iBAAiBnB,YAAY;QACjCW,SAAS;QAET,IAAI,CAACL,OAAO;YACVK,SAAS;YACT;QACF;QAEA,IAAI,CAACT,aAAaI,QAAQ;YACxBK,SAAS;YACT;QACF;QAEAF,aAAa;QAEb,IAAI;YACF,MAAMW,WAAW,MAAMC,MAAMlB,aAAa;gBACxCmB,MAAMC,KAAKC,SAAS,CAAC;oBACnBC,aAAab;oBACbc,WAAWpB;gBACb;gBACAqB,SAAS;oBACP,gBAAgB;gBAClB;gBACAC,QAAQ;YACV;YAEA,MAAMC,OAAO,MAAMT,SAASU,IAAI;YAEhC,IAAIV,SAASW,EAAE,EAAE;gBACfxB,SAAS,KAAI,kBAAkB;gBAC/BZ,MAAMqC,OAAO,CAAC;gBACdlB,YAAYI;YACd,OAAO;gBACLvB,MAAMe,KAAK,CAAC;gBACZC,SAASkB,KAAKI,OAAO,IAAI;YAC3B;QACF,EAAE,OAAM;YACNtC,MAAMe,KAAK,CAAC;YACZC,SAAS;QACX,SAAU;YACRF,aAAa;QACf;IACF,GAAG;QAACH;QAAOM;QAAIE;KAAY;IAE3B,IAAI,CAACF,IAAI;QACP,OAAO;IACT;IAEA,qBACE;;0BACE,KAACnB;gBAAOyC,UAAU,CAAClB,WAAWD;gBAAUoB,SAAS,IAAMrB,YAAYI;gBAAakB,MAAK;0BAClF/B;;0BAGH,KAACX;gBAAO2C,MAAMnB;gBAAYoB,OAAM;0BAC9B,cAAA,MAACC;oBAAKC,WAAU;oBAAOC,UAAU;oBAACC,UAAUvB;;sCAC1C,MAACwB;4BAAIH,WAAU;;gCACZ9B,uBACC,KAACiC;oCACCH,WAAU;oCACVI,OAAO;wCACLC,iBAAiB;wCACjBC,QAAQ;wCACRC,cAAc;wCACdC,OAAO;wCACPC,cAAc;wCACdC,SAAS;oCACX;8CAECxC;;8CAIL,MAACiC;oCAAIH,WAAU;;sDACb,MAACW;4CAAMX,WAAU;4CAAcY,SAAQ;;gDAAmB;8DAExD,KAACC;oDAAKb,WAAU;8DAAW;;;;sDAE7B,KAACG;4CAAIH,WAAU;sDACb,cAAA,KAACc;gDACCC,cAAW;gDACXC,YAAS;gDACTtB,UAAU1B;gDACVI,IAAG;gDACH6C,MAAK;gDACLC,UAAU,CAACC;oDACTpD,SAASoD,EAAEC,MAAM,CAACC,KAAK;oDACvBlD,SAAS;gDACX;gDACAmD,aAAY;gDACZC,MAAK;gDACLF,OAAOvD;;;sDAGX,KAACqC;4CAAIH,WAAU;sDAAgD;;;;;;sCAOnE,KAACG;4BAAIH,WAAU;sCACb,cAAA,KAACwB;gCACCT,cAAW;gCACXf,WAAU;gCACVN,UAAU1B,aAAa,CAACF;gCACxByD,MAAK;0CAEL,cAAA,KAACV;oCAAKb,WAAU;8CACd,cAAA,KAACa;wCAAKb,WAAU;kDAAchC,YAAY,eAAe;;;;;;;;;;AAQzE,EAAC"}

package/dist/components/email-activity.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const EmailActivityField: ({ data }: {
+    data: Record<string, unknown>;
+}) => React.JSX.Element;