@drawbridge/components 0.1.7 → 0.1.8

package/dist/dashboard/form-organization-workflow.js

@@ -30,7 +30,12 @@ __export(form_organization_workflow_exports, {
   FormOrganizationWorkflow: () => FormOrganizationWorkflow,
   FormOrganizationWorkflowEdit: () => FormOrganizationWorkflowEdit,
   campaignFilterId: () => campaignFilterId,
-  stepRow: () => stepRow
+  campaignFilterIds: () => campaignFilterIds,
+  filterMissing: () => filterMissing,
+  filterRows: () => filterRows,
+  filterSeed: () => filterSeed,
+  stepRow: () => stepRow,
+  workflowSchema: () => workflowSchema
 });
 module.exports = __toCommonJS(form_organization_workflow_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -46,6 +51,7 @@ var import_fieldset = __toESM(require("../shared/fieldset"));
 var import_input_group = __toESM(require("../input-group"));
 var import_error = __toESM(require("../shared/error"));
 var import_input_text = __toESM(require("../input-text"));
+var import_input_textarea = __toESM(require("../input-textarea"));
 var import_input_url = __toESM(require("../shared/input-url"));
 var import_input_resource = __toESM(require("./input-resource"));
 var import_input_combobox = __toESM(require("./input-combobox"));
@@ -54,6 +60,7 @@ var import_input_array = require("./input-array");
 var import_badge = __toESM(require("../shared/badge"));
 var import_card_task = __toESM(require("./card-task"));
 var import_loader = require("../shared/loader");
+var import_sms = require("./lib/sms");
 var import_trash = __toESM(require("../icons/trash"));
 var import_button = __toESM(require("../shared/button"));
 const emailSteps = ["step.email.send", "step.email.digest"];
@@ -230,32 +237,45 @@ const WorkflowTitleField = ({ control, formState }) => /* @__PURE__ */ (0, impor
   }
 );
 const campaignFilterId = (campaign) => (campaign == null ? void 0 : campaign.id) || campaign || null;
+const campaignFilterIds = (filters) => (Array.isArray(filters == null ? void 0 : filters.campaigns) ? filters.campaigns : [filters == null ? void 0 : filters.campaign]).map(campaignFilterId).filter(Boolean);
+const filterRows = (ids, docs) => ids.map((id) => docs.find((doc) => (doc == null ? void 0 : doc.id) === id) || { id });
+const filterSeed = (seeds, id) => (seeds || []).find((doc) => (doc == null ? void 0 : doc.id) === id);
+const filterMissing = (error) => {
+  if ((error == null ? void 0 : error.status) === 404) return { result: null };
+  throw error;
+};
 const WorkflowFilterField = ({
   collection,
   control,
   label,
   message,
   model,
+  multiple = false,
   name,
   organization,
-  resource
+  resource,
+  seeds
 }) => {
   const queryClient = (0, import_react_query.useQueryClient)();
-  const id = (0, import_form.useWatch)({
+  const value = (0, import_form.useWatch)({
     control,
     name
   });
-  const selected = (0, import_react_query.useQuery)({
-    queryKey: ["workflow-filter", model, organization, id],
-    queryFn: async () => {
-      const { result } = await (0, import_fetch.request)({
-        endpoint: "/organization/" + organization + "/" + resource + "/" + id
-      }).catch(() => ({ result: null }));
-      return result;
-    },
-    enabled: Boolean(id),
-    staleTime: Infinity
-  });
+  const ids = multiple ? value || [] : [value].filter(Boolean);
+  const docs = (0, import_react_query.useQueries)({
+    queries: ids.map((id) => ({
+      queryKey: ["workflow-filter", model, organization, id],
+      queryFn: async () => {
+        const { result } = await (0, import_fetch.request)({
+          endpoint: "/organization/" + organization + "/" + resource + "/" + id
+        }).catch(filterMissing);
+        return result;
+      },
+      initialData: () => filterSeed(seeds, id),
+      staleTime: Infinity
+    }))
+  }).map((query) => query.data);
+  const seed = (doc) => (doc == null ? void 0 : doc.id) && queryClient.setQueryData(["workflow-filter", model, organization, doc.id], doc);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_form.Controller,
     {
@@ -272,11 +292,15 @@ const WorkflowFilterField = ({
                   ...{
                     endpoint: "/organization/" + organization + "/" + collection,
                     model,
-                    onChange: (doc) => {
-                      if (doc == null ? void 0 : doc.id) queryClient.setQueryData(["workflow-filter", model, organization, doc.id], doc);
+                    multiple,
+                    onChange: multiple ? (picked) => {
+                      picked.forEach(seed);
+                      onChange(picked.map((doc) => doc == null ? void 0 : doc.id).filter(Boolean));
+                    } : (doc) => {
+                      seed(doc);
                       onChange((doc == null ? void 0 : doc.id) || null);
                     },
-                    value: selected.data || null
+                    value: multiple ? filterRows(ids, docs) : docs[0] || null
                   }
                 }
               ),
@@ -363,7 +387,7 @@ const FormOrganizationWorkflow = ({
               // Both blank, meaning every campaign and every segment. The
               // create drawer asks for a trigger and a title only; narrowing
               // is done on the workflow page afterwards.
-              campaign: null,
+              campaigns: [],
               segment: null
             }
           }
@@ -432,6 +456,48 @@ const FormOrganizationWorkflow = ({
     }
   );
 };
+const workflowSchema = import_yup.default.object({
+  title: import_yup.default.string().required().max(100).label("Title"),
+  triggerEvent: import_yup.default.string().label("Trigger").required("A trigger is required"),
+  steps: import_yup.default.array().of(
+    import_yup.default.object({
+      type: import_yup.default.string().label("Step").required("A step is required"),
+      url: import_yup.default.string().when("type", ([type], schema) => {
+        if (type === "step.webhook.send") {
+          return schema.url().required("URL is required").label("URL");
+        }
+        return schema;
+      }),
+      subject: import_yup.default.string().when("type", ([type], schema) => {
+        if (emailSteps.includes(type)) {
+          return schema.required("Subject is required").label("Subject");
+        }
+        return schema;
+      }),
+      message: import_yup.default.string().when("type", ([type], schema) => {
+        if (type === "step.sms.send") {
+          return schema.required("Message is required").max(1500).label("Message");
+        }
+        if (messageSteps.includes(type)) {
+          return schema.required("Message is required").label("Message");
+        }
+        return schema;
+      }),
+      // No minimum. The organization owner is always a recipient, so a
+      // step with no members chosen is complete — requiring one here
+      // made the step unsaveable for a solo merchant, who has no
+      // member documents to choose and cannot reach the members
+      // endpoint at all.
+      members: import_yup.default.array().label("Recipients"),
+      discount: import_yup.default.object().nullable().when("type", ([type], schema) => {
+        if (type === "step.commerce.code.issue") {
+          return schema.required("Discount is required").label("Discount");
+        }
+        return schema;
+      })
+    })
+  )
+});
 const FormOrganizationWorkflowEdit = ({
   disabled,
   onClose,
@@ -439,11 +505,13 @@ const FormOrganizationWorkflowEdit = ({
   onSuccess,
   values
 }) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o;
   const { catalog, catalogList, triggerOptions } = useWorkflowCatalog(values == null ? void 0 : values.organization, (_a = values == null ? void 0 : values.trigger) == null ? void 0 : _a.event);
   const { items: memberItems, loading: membersLoading } = useOrganizationMembers(values == null ? void 0 : values.organization);
   const queryClient = (0, import_react_query.useQueryClient)();
-  const ownerEmail = queryClient.getQueryData(["organization", values == null ? void 0 : values.organization]).owner.email;
+  const organizationData = queryClient.getQueryData(["organization", values == null ? void 0 : values.organization]);
+  const ownerEmail = organizationData.owner.email;
+  const smsActive = (0, import_sms.smsNumberActive)(organizationData);
   const commerceConnectionId = ((_b = catalogList.flatMap((item) => item.steps || []).find(
     (s) => s.value === "step.commerce.customer.insert" || s.value === "step.commerce.code.issue"
   )) == null ? void 0 : _b.connectionId) || null;
@@ -471,55 +539,15 @@ const FormOrganizationWorkflowEdit = ({
   const { control, formState, getValues, handleSubmit, setValue } = (0, import_form.useForm)({
     values: {
       steps: defaultSteps,
-      filterCampaign: campaignFilterId((_h = (_g = values == null ? void 0 : values.trigger) == null ? void 0 : _g.filters) == null ? void 0 : _h.campaign),
+      filterCampaigns: campaignFilterIds((_g = values == null ? void 0 : values.trigger) == null ? void 0 : _g.filters),
       // Stored and returned as a plain id — extend.workflow() $lookup-hydrates
       // only the campaign — but read through the same reducer, so the field
       // stays right if the segment is ever hydrated too.
-      filterSegment: campaignFilterId((_j = (_i = values == null ? void 0 : values.trigger) == null ? void 0 : _i.filters) == null ? void 0 : _j.segment),
+      filterSegment: campaignFilterId((_i = (_h = values == null ? void 0 : values.trigger) == null ? void 0 : _h.filters) == null ? void 0 : _i.segment),
       title: (values == null ? void 0 : values.title) || "",
-      triggerEvent: ((_k = values == null ? void 0 : values.trigger) == null ? void 0 : _k.event) || ""
+      triggerEvent: ((_j = values == null ? void 0 : values.trigger) == null ? void 0 : _j.event) || ""
     },
-    resolver: (0, import_yup.resolver)(
-      import_yup.default.object({
-        title: import_yup.default.string().required().max(100).label("Title"),
-        triggerEvent: import_yup.default.string().label("Trigger").required("A trigger is required"),
-        steps: import_yup.default.array().of(
-          import_yup.default.object({
-            type: import_yup.default.string().label("Step").required("A step is required"),
-            url: import_yup.default.string().when("type", ([type], schema) => {
-              if (type === "step.webhook.send") {
-                return schema.url().required("URL is required").label("URL");
-              }
-              return schema;
-            }),
-            subject: import_yup.default.string().when("type", ([type], schema) => {
-              if (messageSteps.includes(type)) {
-                return schema.required("Subject is required").label("Subject");
-              }
-              return schema;
-            }),
-            message: import_yup.default.string().when("type", ([type], schema) => {
-              if (messageSteps.includes(type)) {
-                return schema.required("Message is required").label("Message");
-              }
-              return schema;
-            }),
-            // No minimum. The organization owner is always a recipient, so a
-            // step with no members chosen is complete — requiring one here
-            // made the step unsaveable for a solo merchant, who has no
-            // member documents to choose and cannot reach the members
-            // endpoint at all.
-            members: import_yup.default.array().label("Recipients"),
-            discount: import_yup.default.object().nullable().when("type", ([type], schema) => {
-              if (type === "step.commerce.code.issue") {
-                return schema.required("Discount is required").label("Discount");
-              }
-              return schema;
-            })
-          })
-        )
-      })
-    )
+    resolver: (0, import_yup.resolver)(workflowSchema)
   });
   const watchedTrigger = (0, import_form.useWatch)({
     control,
@@ -529,7 +557,7 @@ const FormOrganizationWorkflowEdit = ({
     control,
     name: "steps"
   });
-  const issueIndex = ((_l = values == null ? void 0 : values.issue) == null ? void 0 : _l.step) ? (watchedSteps || []).findIndex((step) => (step == null ? void 0 : step.type) === values.issue.step) : -1;
+  const issueIndex = ((_k = values == null ? void 0 : values.issue) == null ? void 0 : _k.step) ? (watchedSteps || []).findIndex((step) => (step == null ? void 0 : step.type) === values.issue.step) : -1;
   const selectedTriggerEntry = catalogList.find((item) => item.trigger === watchedTrigger) || null;
   const getAvailableVariables = (index) => {
     return watchedSteps.slice(0, index).flatMap((watchedStep) => {
@@ -569,6 +597,22 @@ const FormOrganizationWorkflowEdit = ({
             href: "/organizations/" + (values == null ? void 0 : values.organization) + "/connections/" + step.slug,
             onClick: onClose
           }
+        } : {},
+        // The same link-shaped option, greyed: it cannot be picked, and
+        // clicking it opens Settings, where the number is bought.
+        ...step.value === "step.sms.send" && !smsActive ? {
+          badge: {
+            text: "Settings"
+          },
+          className: "opacity-50",
+          disabled: false,
+          element: import_link.default,
+          key: step == null ? void 0 : step.key,
+          props: {
+            "aria-disabled": true,
+            href: "/organizations/" + (values == null ? void 0 : values.organization) + "/settings",
+            onClick: onClose
+          }
         } : {}
       }))
     ];
@@ -615,7 +659,7 @@ const FormOrganizationWorkflowEdit = ({
   };
   const onSubmit = async ({
     steps,
-    filterCampaign,
+    filterCampaigns,
     filterSegment,
     title,
     triggerEvent
@@ -625,10 +669,8 @@ const FormOrganizationWorkflowEdit = ({
         steps: steps.map(({ connectionId, discount, members, message, score, slug, subject, text, type, url }, index) => {
           const settings = {};
           if (type === "step.webhook.send") settings.url = url;
-          if (messageSteps.includes(type)) {
-            settings.subject = subject;
-            settings.message = message;
-          }
+          if (emailSteps.includes(type)) settings.subject = subject;
+          if (messageSteps.includes(type)) settings.message = message;
           if (emailSteps.includes(type)) {
             if (score && score.subject === subject && score.message === message) settings.score = score;
             else if (score) setValue("steps." + index + ".score", null);
@@ -651,7 +693,7 @@ const FormOrganizationWorkflowEdit = ({
         trigger: {
           event: triggerEvent,
           filters: {
-            campaign: filterCampaign || null,
+            campaigns: filterCampaigns || [],
             segment: filterSegment || null
           }
         }
@@ -721,12 +763,14 @@ const FormOrganizationWorkflowEdit = ({
                 ...{
                   collection: "campaigns",
                   control,
-                  label: "Campaign",
-                  message: "Only trigger for leads from a specific campaign. Leaving blank will trigger for all campaigns.",
+                  label: "Campaigns",
+                  message: "Only runs for leads from the campaigns you add. With none added, it runs for every campaign.",
                   model: "campaign",
-                  name: "filterCampaign",
+                  multiple: true,
+                  name: "filterCampaigns",
                   organization: values == null ? void 0 : values.organization,
-                  resource: "campaign"
+                  resource: "campaign",
+                  seeds: (_m = (_l = values == null ? void 0 : values.trigger) == null ? void 0 : _l.filters) == null ? void 0 : _m.campaigns
                 }
               }
             ),
@@ -749,7 +793,7 @@ const FormOrganizationWorkflowEdit = ({
               import_input_group.default,
               {
                 ...{
-                  error: (_n = (_m = formState == null ? void 0 : formState.errors) == null ? void 0 : _m.steps) == null ? void 0 : _n.message,
+                  error: (_o = (_n = formState == null ? void 0 : formState.errors) == null ? void 0 : _n.steps) == null ? void 0 : _o.message,
                   input: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                     import_input_array.InputArraySortable,
                     {
@@ -979,36 +1023,6 @@ const FormOrganizationWorkflowEdit = ({
                                   }
                                 }
                               ),
-                              step.type === "step.sms.send" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                                import_form.Controller,
-                                {
-                                  ...{
-                                    control,
-                                    name: `steps.${index}.subject`,
-                                    render: ({ field: { value, onChange } }) => {
-                                      var _a2, _b2, _c2, _d2;
-                                      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                                        import_input_group.default,
-                                        {
-                                          ...{
-                                            error: (_d2 = (_c2 = (_b2 = (_a2 = formState == null ? void 0 : formState.errors) == null ? void 0 : _a2.steps) == null ? void 0 : _b2[index]) == null ? void 0 : _c2.subject) == null ? void 0 : _d2.message,
-                                            input: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                                              import_input_text.default,
-                                              {
-                                                ...{
-                                                  onChange,
-                                                  value: value || ""
-                                                }
-                                              }
-                                            ),
-                                            label: "Subject"
-                                          }
-                                        }
-                                      );
-                                    }
-                                  }
-                                }
-                              ),
                               step.type === "step.sms.send" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                                 import_form.Controller,
                                 {
@@ -1023,10 +1037,11 @@ const FormOrganizationWorkflowEdit = ({
                                           ...{
                                             error: (_d2 = (_c2 = (_b2 = (_a2 = formState == null ? void 0 : formState.errors) == null ? void 0 : _a2.steps) == null ? void 0 : _b2[index]) == null ? void 0 : _c2.message) == null ? void 0 : _d2.message,
                                             input: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                                              import_input_text.default,
+                                              import_input_textarea.default,
                                               {
                                                 ...{
                                                   onChange,
+                                                  rows: 3,
                                                   value: value || ""
                                                 }
                                               }
@@ -1141,5 +1156,10 @@ const FormOrganizationWorkflowEdit = ({
   FormOrganizationWorkflow,
   FormOrganizationWorkflowEdit,
   campaignFilterId,
-  stepRow
+  campaignFilterIds,
+  filterMissing,
+  filterRows,
+  filterSeed,
+  stepRow,
+  workflowSchema
 });