@mobilizehub/payload-plugin 0.1.0 → 0.2.0

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":"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"}

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;

package/dist/components/email-activity.js

@@ -0,0 +1,359 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+function getIconForEventType(type) {
+    switch(type){
+        case 'bounced':
+            return /*#__PURE__*/ _jsxs("svg", {
+                fill: "none",
+                height: "14",
+                stroke: "var(--theme-elevation-500)",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: "2",
+                viewBox: "0 0 24 24",
+                width: "14",
+                xmlns: "http://www.w3.org/2000/svg",
+                children: [
+                    /*#__PURE__*/ _jsx("path", {
+                        d: "M11.1 7.1a16.55 16.55 0 0 1 10.9 4"
+                    }),
+                    /*#__PURE__*/ _jsx("path", {
+                        d: "M12 12a12.6 12.6 0 0 1-8.7 5"
+                    }),
+                    /*#__PURE__*/ _jsx("path", {
+                        d: "M16.8 13.6a16.55 16.55 0 0 1-9 7.5"
+                    }),
+                    /*#__PURE__*/ _jsx("path", {
+                        d: "M20.7 17a12.8 12.8 0 0 0-8.7-5 13.3 13.3 0 0 1 0-10"
+                    }),
+                    /*#__PURE__*/ _jsx("path", {
+                        d: "M6.3 3.8a16.55 16.55 0 0 0 1.9 11.5"
+                    }),
+                    /*#__PURE__*/ _jsx("circle", {
+                        cx: "12",
+                        cy: "12",
+                        r: "10"
+                    })
+                ]
+            });
+        case 'canceled':
+            return /*#__PURE__*/ _jsxs("svg", {
+                fill: "none",
+                height: "14",
+                stroke: "var(--theme-elevation-500)",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: "2",
+                viewBox: "0 0 24 24",
+                width: "14",
+                xmlns: "http://www.w3.org/2000/svg",
+                children: [
+                    /*#__PURE__*/ _jsx("circle", {
+                        cx: "12",
+                        cy: "12",
+                        r: "10"
+                    }),
+                    /*#__PURE__*/ _jsx("line", {
+                        x1: "15",
+                        x2: "9",
+                        y1: "9",
+                        y2: "15"
+                    }),
+                    /*#__PURE__*/ _jsx("line", {
+                        x1: "9",
+                        x2: "15",
+                        y1: "9",
+                        y2: "15"
+                    })
+                ]
+            });
+        case 'clicked':
+            return /*#__PURE__*/ _jsx("svg", {
+                fill: "none",
+                height: "14",
+                stroke: "var(--theme-elevation-500)",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: "2",
+                viewBox: "0 0 24 24",
+                width: "14",
+                xmlns: "http://www.w3.org/2000/svg",
+                children: /*#__PURE__*/ _jsx("path", {
+                    d: "M4.037 4.688a.495.495 0 0 1 .651-.651l16 6.5a.5.5 0 0 1-.063.947l-6.124 1.58a2 2 0 0 0-1.438 1.435l-1.579 6.126a.5.5 0 0 1-.947.063z"
+                })
+            });
+        case 'complained':
+            return /*#__PURE__*/ _jsxs("svg", {
+                fill: "none",
+                height: "14",
+                stroke: "var(--theme-elevation-500)",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: "2",
+                viewBox: "0 0 24 24",
+                width: "14",
+                xmlns: "http://www.w3.org/2000/svg",
+                children: [
+                    /*#__PURE__*/ _jsx("path", {
+                        d: "M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719"
+                    }),
+                    /*#__PURE__*/ _jsx("path", {
+                        d: "M12 8v4"
+                    }),
+                    /*#__PURE__*/ _jsx("path", {
+                        d: "M12 16h.01"
+                    })
+                ]
+            });
+        case 'delivered':
+            return /*#__PURE__*/ _jsxs("svg", {
+                fill: "none",
+                height: "14",
+                stroke: "var(--theme-elevation-500)",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: "2",
+                viewBox: "0 0 24 24",
+                width: "14",
+                xmlns: "http://www.w3.org/2000/svg",
+                children: [
+                    /*#__PURE__*/ _jsx("path", {
+                        d: "M22 17a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9.5C2 7 4 5 6.5 5H18c2.2 0 4 1.8 4 4v8Z"
+                    }),
+                    /*#__PURE__*/ _jsx("polyline", {
+                        points: "15,9 18,9 18,11"
+                    }),
+                    /*#__PURE__*/ _jsx("path", {
+                        d: "M6.5 5C9 5 11 7 11 9.5V17a2 2 0 0 1-2 2"
+                    }),
+                    /*#__PURE__*/ _jsx("line", {
+                        x1: "6",
+                        x2: "7",
+                        y1: "10",
+                        y2: "10"
+                    })
+                ]
+            });
+        case 'delivery_delayed':
+            return /*#__PURE__*/ _jsxs("svg", {
+                fill: "none",
+                height: "14",
+                stroke: "var(--theme-elevation-500)",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: "2",
+                viewBox: "0 0 24 24",
+                width: "14",
+                xmlns: "http://www.w3.org/2000/svg",
+                children: [
+                    /*#__PURE__*/ _jsx("path", {
+                        d: "M12 6v6l4 2"
+                    }),
+                    /*#__PURE__*/ _jsx("path", {
+                        d: "M20 12v5"
+                    }),
+                    /*#__PURE__*/ _jsx("path", {
+                        d: "M20 21h.01"
+                    }),
+                    /*#__PURE__*/ _jsx("path", {
+                        d: "M21.25 8.2A10 10 0 1 0 16 21.16"
+                    })
+                ]
+            });
+        case 'failed':
+            return /*#__PURE__*/ _jsxs("svg", {
+                fill: "none",
+                height: "14",
+                stroke: "var(--theme-elevation-500)",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: "2",
+                viewBox: "0 0 24 24",
+                width: "14",
+                xmlns: "http://www.w3.org/2000/svg",
+                children: [
+                    /*#__PURE__*/ _jsx("path", {
+                        d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"
+                    }),
+                    /*#__PURE__*/ _jsx("path", {
+                        d: "M12 9v4"
+                    }),
+                    /*#__PURE__*/ _jsx("path", {
+                        d: "M12 17h.01"
+                    })
+                ]
+            });
+        case 'opened':
+            return /*#__PURE__*/ _jsxs("svg", {
+                fill: "none",
+                height: "14",
+                stroke: "var(--theme-elevation-500)",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: "2",
+                viewBox: "0 0 24 24",
+                width: "14",
+                xmlns: "http://www.w3.org/2000/svg",
+                children: [
+                    /*#__PURE__*/ _jsx("path", {
+                        d: "M21.2 8.4c.5.38.8.97.8 1.6v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V10a2 2 0 0 1 .8-1.6l8-6a2 2 0 0 1 2.4 0l8 6Z"
+                    }),
+                    /*#__PURE__*/ _jsx("path", {
+                        d: "m22 10-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 10"
+                    })
+                ]
+            });
+        case 'queued':
+            return /*#__PURE__*/ _jsxs("svg", {
+                fill: "none",
+                height: "14",
+                stroke: "var(--theme-elevation-500)",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: "2",
+                viewBox: "0 0 24 24",
+                width: "14",
+                xmlns: "http://www.w3.org/2000/svg",
+                children: [
+                    /*#__PURE__*/ _jsx("path", {
+                        d: "M3 5h.01"
+                    }),
+                    /*#__PURE__*/ _jsx("path", {
+                        d: "M3 12h.01"
+                    }),
+                    /*#__PURE__*/ _jsx("path", {
+                        d: "M3 19h.01"
+                    }),
+                    /*#__PURE__*/ _jsx("path", {
+                        d: "M8 5h13"
+                    }),
+                    /*#__PURE__*/ _jsx("path", {
+                        d: "M8 12h13"
+                    }),
+                    /*#__PURE__*/ _jsx("path", {
+                        d: "M8 19h13"
+                    })
+                ]
+            });
+        case 'sent':
+            return /*#__PURE__*/ _jsxs("svg", {
+                fill: "none",
+                height: "14",
+                stroke: "var(--theme-elevation-500)",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: "2",
+                viewBox: "0 0 24 24",
+                width: "14",
+                xmlns: "http://www.w3.org/2000/svg",
+                children: [
+                    /*#__PURE__*/ _jsx("path", {
+                        d: "M3.714 3.048a.498.498 0 0 0-.683.627l2.843 7.627a2 2 0 0 1 0 1.396l-2.842 7.627a.498.498 0 0 0 .682.627l18-8.5a.5.5 0 0 0 0-.904z"
+                    }),
+                    /*#__PURE__*/ _jsx("path", {
+                        d: "M6 12h16"
+                    })
+                ]
+            });
+        default:
+            return null;
+    }
+}
+export const EmailActivityField = ({ data })=>{
+    const activity = data.activity;
+    return /*#__PURE__*/ _jsxs("div", {
+        style: {
+            paddingTop: '1rem'
+        },
+        children: [
+            /*#__PURE__*/ _jsx("div", {
+                style: {
+                    marginBottom: '1.5rem'
+                },
+                children: /*#__PURE__*/ _jsx("p", {
+                    children: "Email Events"
+                })
+            }),
+            (!activity || activity.length === 0) && /*#__PURE__*/ _jsx("div", {
+                children: /*#__PURE__*/ _jsx("p", {
+                    style: {
+                        color: 'var(--theme-text-secondary-color)',
+                        fontSize: '12px'
+                    },
+                    children: "No email events recorded."
+                })
+            }),
+            activity?.map((event, index)=>/*#__PURE__*/ _jsxs("div", {
+                    style: {
+                        alignItems: 'flex-start',
+                        display: 'flex',
+                        position: 'relative'
+                    },
+                    children: [
+                        /*#__PURE__*/ _jsxs("div", {
+                            style: {
+                                alignItems: 'center',
+                                display: 'flex',
+                                flexDirection: 'column',
+                                marginRight: '16px'
+                            },
+                            children: [
+                                /*#__PURE__*/ _jsx("div", {
+                                    style: {
+                                        alignItems: 'center',
+                                        border: '1px solid var(--theme-border-color)',
+                                        borderRadius: 'var(--style-radius-m)',
+                                        display: 'flex',
+                                        fontSize: '10px',
+                                        height: '34px',
+                                        justifyContent: 'center',
+                                        width: '34px',
+                                        zIndex: 1
+                                    },
+                                    children: getIconForEventType(event.type)
+                                }),
+                                index < activity.length - 1 && /*#__PURE__*/ _jsx("div", {
+                                    style: {
+                                        backgroundColor: 'var(--theme-border-color)',
+                                        height: '40px',
+                                        width: '1px'
+                                    }
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsxs("div", {
+                            style: {
+                                marginTop: '-2px',
+                                paddingBottom: '16px'
+                            },
+                            children: [
+                                /*#__PURE__*/ _jsx("p", {
+                                    style: {
+                                        fontSize: '12px',
+                                        fontWeight: 'bold',
+                                        textTransform: 'capitalize'
+                                    },
+                                    children: event.type.replace('_', ' ')
+                                }),
+                                /*#__PURE__*/ _jsx("p", {
+                                    style: {
+                                        color: 'var(--theme-text-secondary-color)',
+                                        fontSize: '12px'
+                                    },
+                                    children: new Date(event.timestamp).toLocaleString('en-US', {
+                                        day: 'numeric',
+                                        hour: '2-digit',
+                                        minute: '2-digit',
+                                        month: 'long',
+                                        year: 'numeric'
+                                    })
+                                })
+                            ]
+                        })
+                    ]
+                }, event.id ?? index))
+        ]
+    });
+};
+
+//# sourceMappingURL=email-activity.js.map

package/dist/components/email-activity.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/email-activity.tsx"],"sourcesContent":["import React from 'react'\n\ninterface EmailEvent {\n  id?: string\n  timestamp: string\n  type:\n    | 'bounced'\n    | 'canceled'\n    | 'clicked'\n    | 'complained'\n    | 'delivered'\n    | 'delivery_delayed'\n    | 'failed'\n    | 'opened'\n    | 'queued'\n    | 'sent'\n}\n\nfunction getIconForEventType(type: EmailEvent['type']): React.ReactNode {\n  switch (type) {\n    case 'bounced':\n      return (\n        <svg\n          fill=\"none\"\n          height=\"14\"\n          stroke=\"var(--theme-elevation-500)\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"2\"\n          viewBox=\"0 0 24 24\"\n          width=\"14\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path d=\"M11.1 7.1a16.55 16.55 0 0 1 10.9 4\" />\n          <path d=\"M12 12a12.6 12.6 0 0 1-8.7 5\" />\n          <path d=\"M16.8 13.6a16.55 16.55 0 0 1-9 7.5\" />\n          <path d=\"M20.7 17a12.8 12.8 0 0 0-8.7-5 13.3 13.3 0 0 1 0-10\" />\n          <path d=\"M6.3 3.8a16.55 16.55 0 0 0 1.9 11.5\" />\n          <circle cx=\"12\" cy=\"12\" r=\"10\" />\n        </svg>\n      )\n    case 'canceled':\n      return (\n        <svg\n          fill=\"none\"\n          height=\"14\"\n          stroke=\"var(--theme-elevation-500)\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"2\"\n          viewBox=\"0 0 24 24\"\n          width=\"14\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <circle cx=\"12\" cy=\"12\" r=\"10\" />\n          <line x1=\"15\" x2=\"9\" y1=\"9\" y2=\"15\" />\n          <line x1=\"9\" x2=\"15\" y1=\"9\" y2=\"15\" />\n        </svg>\n      )\n    case 'clicked':\n      return (\n        <svg\n          fill=\"none\"\n          height=\"14\"\n          stroke=\"var(--theme-elevation-500)\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"2\"\n          viewBox=\"0 0 24 24\"\n          width=\"14\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path d=\"M4.037 4.688a.495.495 0 0 1 .651-.651l16 6.5a.5.5 0 0 1-.063.947l-6.124 1.58a2 2 0 0 0-1.438 1.435l-1.579 6.126a.5.5 0 0 1-.947.063z\" />\n        </svg>\n      )\n    case 'complained':\n      return (\n        <svg\n          fill=\"none\"\n          height=\"14\"\n          stroke=\"var(--theme-elevation-500)\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"2\"\n          viewBox=\"0 0 24 24\"\n          width=\"14\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path d=\"M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719\" />\n          <path d=\"M12 8v4\" />\n          <path d=\"M12 16h.01\" />\n        </svg>\n      )\n    case 'delivered':\n      return (\n        <svg\n          fill=\"none\"\n          height=\"14\"\n          stroke=\"var(--theme-elevation-500)\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"2\"\n          viewBox=\"0 0 24 24\"\n          width=\"14\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path d=\"M22 17a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9.5C2 7 4 5 6.5 5H18c2.2 0 4 1.8 4 4v8Z\" />\n          <polyline points=\"15,9 18,9 18,11\" />\n          <path d=\"M6.5 5C9 5 11 7 11 9.5V17a2 2 0 0 1-2 2\" />\n          <line x1=\"6\" x2=\"7\" y1=\"10\" y2=\"10\" />\n        </svg>\n      )\n    case 'delivery_delayed':\n      return (\n        <svg\n          fill=\"none\"\n          height=\"14\"\n          stroke=\"var(--theme-elevation-500)\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"2\"\n          viewBox=\"0 0 24 24\"\n          width=\"14\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path d=\"M12 6v6l4 2\" />\n          <path d=\"M20 12v5\" />\n          <path d=\"M20 21h.01\" />\n          <path d=\"M21.25 8.2A10 10 0 1 0 16 21.16\" />\n        </svg>\n      )\n    case 'failed':\n      return (\n        <svg\n          fill=\"none\"\n          height=\"14\"\n          stroke=\"var(--theme-elevation-500)\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"2\"\n          viewBox=\"0 0 24 24\"\n          width=\"14\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path d=\"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3\" />\n          <path d=\"M12 9v4\" />\n          <path d=\"M12 17h.01\" />\n        </svg>\n      )\n    case 'opened':\n      return (\n        <svg\n          fill=\"none\"\n          height=\"14\"\n          stroke=\"var(--theme-elevation-500)\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"2\"\n          viewBox=\"0 0 24 24\"\n          width=\"14\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path d=\"M21.2 8.4c.5.38.8.97.8 1.6v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V10a2 2 0 0 1 .8-1.6l8-6a2 2 0 0 1 2.4 0l8 6Z\" />\n          <path d=\"m22 10-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 10\" />\n        </svg>\n      )\n    case 'queued':\n      return (\n        <svg\n          fill=\"none\"\n          height=\"14\"\n          stroke=\"var(--theme-elevation-500)\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"2\"\n          viewBox=\"0 0 24 24\"\n          width=\"14\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path d=\"M3 5h.01\" />\n          <path d=\"M3 12h.01\" />\n          <path d=\"M3 19h.01\" />\n          <path d=\"M8 5h13\" />\n          <path d=\"M8 12h13\" />\n          <path d=\"M8 19h13\" />\n        </svg>\n      )\n    case 'sent':\n      return (\n        <svg\n          fill=\"none\"\n          height=\"14\"\n          stroke=\"var(--theme-elevation-500)\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"2\"\n          viewBox=\"0 0 24 24\"\n          width=\"14\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path d=\"M3.714 3.048a.498.498 0 0 0-.683.627l2.843 7.627a2 2 0 0 1 0 1.396l-2.842 7.627a.498.498 0 0 0 .682.627l18-8.5a.5.5 0 0 0 0-.904z\" />\n          <path d=\"M6 12h16\" />\n        </svg>\n      )\n    default:\n      return null\n  }\n}\n\nexport const EmailActivityField = ({ data }: { data: Record<string, unknown> }) => {\n  const activity = data.activity as EmailEvent[] | undefined\n\n  return (\n    <div style={{ paddingTop: '1rem' }}>\n      <div style={{ marginBottom: '1.5rem' }}>\n        <p>Email Events</p>\n      </div>\n      {(!activity || activity.length === 0) && (\n        <div>\n          <p style={{ color: 'var(--theme-text-secondary-color)', fontSize: '12px' }}>\n            No email events recorded.\n          </p>\n        </div>\n      )}\n      {activity?.map((event, index) => (\n        <div\n          key={event.id ?? index}\n          style={{ alignItems: 'flex-start', display: 'flex', position: 'relative' }}\n        >\n          <div\n            style={{\n              alignItems: 'center',\n              display: 'flex',\n              flexDirection: 'column',\n              marginRight: '16px',\n            }}\n          >\n            <div\n              style={{\n                alignItems: 'center',\n                border: '1px solid var(--theme-border-color)',\n                borderRadius: 'var(--style-radius-m)',\n                display: 'flex',\n                fontSize: '10px',\n                height: '34px',\n                justifyContent: 'center',\n                width: '34px',\n                zIndex: 1,\n              }}\n            >\n              {getIconForEventType(event.type)}\n            </div>\n            {index < activity.length - 1 && (\n              <div\n                style={{\n                  backgroundColor: 'var(--theme-border-color)',\n                  height: '40px',\n                  width: '1px',\n                }}\n              />\n            )}\n          </div>\n          <div style={{ marginTop: '-2px', paddingBottom: '16px' }}>\n            <p style={{ fontSize: '12px', fontWeight: 'bold', textTransform: 'capitalize' }}>\n              {event.type.replace('_', ' ')}\n            </p>\n            <p style={{ color: 'var(--theme-text-secondary-color)', fontSize: '12px' }}>\n              {new Date(event.timestamp).toLocaleString('en-US', {\n                day: 'numeric',\n                hour: '2-digit',\n                minute: '2-digit',\n                month: 'long',\n                year: 'numeric',\n              })}\n            </p>\n          </div>\n        </div>\n      ))}\n    </div>\n  )\n}\n"],"names":["React","getIconForEventType","type","svg","fill","height","stroke","strokeLinecap","strokeLinejoin","strokeWidth","viewBox","width","xmlns","path","d","circle","cx","cy","r","line","x1","x2","y1","y2","polyline","points","EmailActivityField","data","activity","div","style","paddingTop","marginBottom","p","length","color","fontSize","map","event","index","alignItems","display","position","flexDirection","marginRight","border","borderRadius","justifyContent","zIndex","backgroundColor","marginTop","paddingBottom","fontWeight","textTransform","replace","Date","timestamp","toLocaleString","day","hour","minute","month","year","id"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const EmailPreviewField: React.FC;