@drawbridge/components 0.0.77 → 0.1.0

package/dist/dashboard/drawer-subscription.js

@@ -0,0 +1,762 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var drawer_subscription_exports = {};
+__export(drawer_subscription_exports, {
+  default: () => drawer_subscription_default
+});
+module.exports = __toCommonJS(drawer_subscription_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_react_query = require("@tanstack/react-query");
+var import_drawbridge_utils = require("@drawbridge/drawbridge-utils");
+var import_form = require("../shared/lib/form");
+var import_yup = __toESM(require("../shared/lib/yup"));
+var import_fetch = require("@drawbridge/drawbridge-utils/fetch");
+var import_fieldset = __toESM(require("../shared/fieldset"));
+var import_provider_resource = __toESM(require("./provider-resource"));
+var import_form_stripe_promotion = __toESM(require("./form-stripe-promotion"));
+var import_form_payment_methods = __toESM(require("./form-payment-methods"));
+var import_form_action = __toESM(require("./form-action"));
+var import_card_task = __toESM(require("./card-task"));
+var import_card_overage = __toESM(require("./card-overage"));
+var import_card_plan = __toESM(require("./card-plan"));
+var import_card_payment_method = __toESM(require("./card-payment-method"));
+var import_link_back = __toESM(require("./link-back"));
+var import_button = __toESM(require("../shared/button"));
+var import_trash = __toESM(require("../icons/trash"));
+const error = ({ error: error2 }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  "div",
+  {
+    ...{
+      className: "p-6"
+    },
+    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: error2.message })
+  }
+);
+const DrawerSubscriptionPromotionRecovery = ({
+  onRemove
+}) => {
+  const queryClient = (0, import_react_query.useQueryClient)();
+  (0, import_react.useEffect)(() => {
+    queryClient.setQueryData(
+      ["notice"],
+      {
+        active: true,
+        response: {
+          message: "Promotion code is not valid"
+        }
+      }
+    );
+    onRemove();
+  }, []);
+  return null;
+};
+const renderLine = (key, value) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+  "div",
+  {
+    ...{
+      className: "flex items-center justify-between"
+    },
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: key }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: value })
+    ]
+  }
+);
+const label = (content) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  "div",
+  {
+    ...{
+      className: "w-full mb-3 disabled"
+    },
+    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: content })
+  }
+);
+const DrawerPlans = ({
+  action = "Select",
+  canceledAt,
+  onCancel,
+  onSuccess,
+  onResume,
+  pending,
+  values
+}) => {
+  var _a, _b;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_provider_resource.default,
+    {
+      ...{
+        cache: "no-store",
+        // The organization is named so the feed can include a negotiated
+        // plan prepared for it. That plan is not on the public menu — it has
+        // no catalog price and belongs to one org — so the API verifies
+        // ownership before returning it.
+        endpoint: "/account/payment?current=" + ((_a = values == null ? void 0 : values.plan) == null ? void 0 : _a.id) + "&organization=" + (values == null ? void 0 : values.organization),
+        error,
+        loader: true,
+        queryKey: ["organization-payment", (_b = values == null ? void 0 : values.plan) == null ? void 0 : _b.id, values == null ? void 0 : values.organization],
+        // The global default is staleTime Infinity, which means the
+        // provider's refetchOnMount never actually refetches — nothing is
+        // ever stale. Reopening the drawer therefore replayed the cached
+        // plan list, so an admin editing a negotiated price could not be
+        // seen without a full browser reload; the admin's own cache
+        // invalidation runs in the ADMIN's browser and cannot reach the
+        // customer's. A negotiated plan is edited by someone else while
+        // this list is open, so it has to re-read every time it mounts.
+        refetchOnMount: "always"
+      },
+      children: (query) => {
+        var _a2;
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            ...{
+              className: "divide-y divide-gray"
+            },
+            children: (((_a2 = query == null ? void 0 : query.data) == null ? void 0 : _a2.plans) || []).map((plan, key) => {
+              var _a3, _b2, _c;
+              return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_card_plan.default,
+                {
+                  ...{
+                    action,
+                    canceledAt,
+                    // The payload says whether a card is an offer. Free is not
+                    // one — it cannot be bought and there is no subscription on
+                    // it to cancel or resume — so it arrives with
+                    // `selectable : false` and renders as a description of what
+                    // a cancellation returns you to. The handlers follow the
+                    // data rather than the client testing the row's identity.
+                    ...(plan == null ? void 0 : plan.selectable) !== false && {
+                      onCancel,
+                      onClick: () => onSuccess(plan),
+                      onResume
+                    },
+                    // The current card's badge names the plan it moves to.
+                    pending: pending && { ...pending, title: (_c = (_b2 = (_a3 = query == null ? void 0 : query.data) == null ? void 0 : _a3.plans) == null ? void 0 : _b2.find(({ id }) => id === pending.plan)) == null ? void 0 : _c.title },
+                    ...plan
+                  }
+                },
+                key
+              );
+            })
+          }
+        );
+      }
+    }
+  );
+};
+const DrawerSubscriptionPrepare = ({
+  children,
+  endpoint,
+  error: errorComponent = error,
+  plan
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_provider_resource.default,
+    {
+      ...{
+        cache: "no-store",
+        endpoint,
+        error: errorComponent,
+        loader: true,
+        queryKey: ["organization-subscription-prepare", endpoint],
+        refetchOnMount: "always"
+      },
+      children: (query) => {
+        var _a, _b, _c, _d, _e;
+        if ((((_a = query == null ? void 0 : query.data) == null ? void 0 : _a.blocked) || []).length > 0) {
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_card_task.default,
+            {
+              ...{
+                message: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "ul",
+                  {
+                    ...{
+                      className: "pt-1 list-disc list-inside"
+                    },
+                    children: query.data.blocked.map((item, key) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { children: item }, key))
+                  }
+                ),
+                title: "Error",
+                type: "error"
+              }
+            }
+          );
+        }
+        ;
+        if (((_c = ((_b = query == null ? void 0 : query.data) == null ? void 0 : _b.restricted) || []) == null ? void 0 : _c.length) > 0) {
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "div",
+            {
+              ...{
+                className: "space-y-4"
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_card_overage.default,
+                {
+                  ...{
+                    label: "Unable to downgrade to " + plan.title,
+                    overages: query.data.restricted
+                  }
+                }
+              )
+            }
+          ) });
+        }
+        ;
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.Fragment, { children: [
+          (((_d = query == null ? void 0 : query.data) == null ? void 0 : _d.difference) || []).length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "div",
+            {
+              ...{
+                className: "pb-3"
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_card_task.default,
+                {
+                  ...{
+                    message: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      "ul",
+                      {
+                        ...{
+                          className: "pt-1 list-disc list-inside"
+                        },
+                        children: (_e = query == null ? void 0 : query.data) == null ? void 0 : _e.difference.map((item, key) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { children: item }, key))
+                      }
+                    ),
+                    title: "The following items will be disabled/reset",
+                    type: "error"
+                  }
+                }
+              )
+            }
+          ),
+          children(query)
+        ] });
+      }
+    }
+  );
+};
+const DrawerSubscriptionSummary = ({
+  data = {},
+  plan = {}
+}) => {
+  const invoice = (data == null ? void 0 : data.invoice) || {};
+  const first = invoice.first || invoice;
+  const renews = Boolean(invoice.first) && invoice.first.total !== invoice.total;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      ...{
+        className: "pb-6"
+      },
+      children: [
+        label("Summary"),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "div",
+          {
+            ...{
+              className: "space-y-1.5"
+            },
+            children: [
+              (plan == null ? void 0 : plan.title) && renderLine(
+                "Plan",
+                plan.title
+              ),
+              renderLine(
+                "Subtotal",
+                "$" + (0, import_drawbridge_utils.formatNumber)((first.subtotal || 0) / 100, 2)
+              ),
+              renderLine(
+                "Discount",
+                "-$" + (0, import_drawbridge_utils.formatNumber)((first.discount || 0) / 100, 2)
+              ),
+              renderLine(
+                "Tax",
+                "$" + (0, import_drawbridge_utils.formatNumber)((first.tax || 0) / 100, 2)
+              ),
+              renderLine(
+                "Total",
+                "$" + (0, import_drawbridge_utils.formatNumber)((first.total || 0) / 100, 2)
+              ),
+              renews && renderLine(
+                "Renews at",
+                "$" + (0, import_drawbridge_utils.formatNumber)((invoice.total || 0) / 100, 2)
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+const DrawerSubscriptionChange = ({
+  canceledAt,
+  onCancel,
+  onError,
+  onSuccess,
+  onResume,
+  pending,
+  values
+}) => {
+  var _a, _b, _c;
+  const { control, setValue } = (0, import_form.useForm)({
+    guard: false,
+    resolver: (0, import_yup.resolver)(
+      import_yup.default.object({
+        method: import_yup.default.string().label("Payment method").required(),
+        plan: import_yup.default.object().label("Plan").required()
+      })
+    ),
+    values
+  });
+  const plan = (0, import_form.useWatch)({
+    control,
+    name: "plan"
+  });
+  if ((plan == null ? void 0 : plan.id) === ((_a = values == null ? void 0 : values.plan) == null ? void 0 : _a.id)) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      DrawerPlans,
+      {
+        ...{
+          canceledAt,
+          onCancel,
+          onError,
+          onSuccess: async (plan2) => setValue("plan", plan2),
+          onResume,
+          pending,
+          values
+        }
+      }
+    );
+  } else {
+    const endpoint = "/organization/" + (values == null ? void 0 : values.organization) + "/subscription/prepare?" + import_fetch.queryString.stringify(
+      {
+        method: (_c = (_b = values == null ? void 0 : values.subscription) == null ? void 0 : _b.method) == null ? void 0 : _c.id,
+        plan: plan == null ? void 0 : plan.id
+      },
+      {
+        encodeValuesOnly: true
+      }
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        ...{
+          className: "space-y-6 p-6"
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_link_back.default,
+            {
+              ...{
+                // Back to plans steps BETWEEN views of the same open form,
+                // so nothing is discarded and the unsaved-changes confirm
+                // does not apply. LinkBack carries the scope for the case
+                // it was written for — leaving a panel entirely — and this
+                // clears it.
+                "data-guard": null,
+                element: "button",
+                onClick: () => setValue("plan", values == null ? void 0 : values.plan),
+                size: "small",
+                type: "button"
+              },
+              children: "Back to plans"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            DrawerSubscriptionPrepare,
+            {
+              ...{
+                endpoint,
+                plan
+              },
+              children: ({ data, isLoading, isRefetching }) => {
+                var _a2;
+                return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                    "div",
+                    {
+                      ...{
+                        className: "pb-3"
+                      },
+                      children: [
+                        label("Payment method"),
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                          import_card_payment_method.default,
+                          {
+                            ...(_a2 = values == null ? void 0 : values.subscription) == null ? void 0 : _a2.method
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    DrawerSubscriptionSummary,
+                    {
+                      ...{
+                        data,
+                        plan
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    import_form_action.default,
+                    {
+                      ...{
+                        action: "Confirm",
+                        disabled: isLoading || isRefetching,
+                        callback: () => {
+                          var _a3;
+                          return (0, import_fetch.request)({
+                            body: {
+                              plan: plan == null ? void 0 : plan.id
+                            },
+                            cache: "no-store",
+                            endpoint: "/organization/" + (values == null ? void 0 : values.organization) + "/subscription/" + ((_a3 = values == null ? void 0 : values.subscription) == null ? void 0 : _a3.id),
+                            method: "PUT"
+                          });
+                        },
+                        onError,
+                        onSuccess
+                      }
+                    }
+                  )
+                ] });
+              }
+            },
+            endpoint
+          )
+        ]
+      }
+    );
+  }
+};
+const DrawerSubscriptionStart = ({
+  onClickAdd,
+  onError,
+  onSuccess,
+  values
+}) => {
+  const { control, clearErrors, formState, handleSubmit, setValue } = (0, import_form.useForm)({
+    guard: false,
+    resolver: (0, import_yup.resolver)(
+      import_yup.default.object({
+        method: import_yup.default.object().label("Payment method").required(),
+        plan: import_yup.default.object().label("Plan").required()
+      })
+    )
+  });
+  const onSubmit = async ({
+    method: method2,
+    promotion: promotion2,
+    plan: plan2
+  }) => {
+    try {
+      const response = await (0, import_fetch.request)({
+        body: {
+          method: method2 == null ? void 0 : method2.id,
+          plan: plan2 == null ? void 0 : plan2.id,
+          // A custom plan takes no discounts and the API REFUSES a code
+          // rather than ignoring it — a stale one entered before switching
+          // plans would fail the purchase.
+          ...!(plan2 == null ? void 0 : plan2.custom) && { promotion: promotion2 == null ? void 0 : promotion2.id }
+        },
+        endpoint: "/organization/" + (values == null ? void 0 : values.organization) + "/subscription",
+        method: "POST"
+      });
+      onSuccess(response);
+    } catch (error2) {
+      onError(error2);
+    }
+  };
+  const method = (0, import_form.useWatch)({
+    control,
+    name: "method"
+  });
+  const plan = (0, import_form.useWatch)({
+    control,
+    name: "plan"
+  });
+  const promotion = (0, import_form.useWatch)({
+    control,
+    name: "promotion"
+  });
+  if (plan) {
+    const endpoint = "/organization/" + (values == null ? void 0 : values.organization) + "/subscription/prepare?" + import_fetch.queryString.stringify(
+      {
+        ...method && {
+          method: method == null ? void 0 : method.id
+        },
+        plan: plan == null ? void 0 : plan.id,
+        ...promotion && !(plan == null ? void 0 : plan.custom) && {
+          promotion: promotion == null ? void 0 : promotion.id
+        }
+      },
+      {
+        encodeValuesOnly: true
+      }
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_fieldset.default,
+      {
+        ...{
+          className: "p-6 space-y-6",
+          disabled: formState == null ? void 0 : formState.isSubmitting
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_link_back.default,
+            {
+              ...{
+                // Back to plans steps BETWEEN views of the same open form,
+                // so nothing is discarded and the unsaved-changes confirm
+                // does not apply. LinkBack carries the scope for the case
+                // it was written for — leaving a panel entirely — and this
+                // clears it.
+                "data-guard": null,
+                element: "button",
+                onClick: () => setValue("plan", null),
+                size: "small",
+                type: "button"
+              },
+              children: "Back to plans"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            DrawerSubscriptionPrepare,
+            {
+              ...{
+                endpoint,
+                plan,
+                ...promotion && !(plan == null ? void 0 : plan.custom) && {
+                  error: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    DrawerSubscriptionPromotionRecovery,
+                    {
+                      ...{
+                        onRemove: () => setValue("promotion", null)
+                      }
+                    }
+                  )
+                }
+              },
+              children: ({ data, isLoading, isRefetching }) => {
+                var _a;
+                return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                  import_fieldset.default,
+                  {
+                    ...{
+                      className: "space-y-6 mb-6",
+                      disabled: (formState == null ? void 0 : formState.isSubmitting) || isLoading || isRefetching
+                    },
+                    children: [
+                      !(plan == null ? void 0 : plan.custom) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                        "div",
+                        {
+                          ...{
+                            className: "pb-3"
+                          },
+                          children: [
+                            label("Promotion code"),
+                            (promotion == null ? void 0 : promotion.code) ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                              "div",
+                              {
+                                ...{
+                                  className: "w-full flex items-center justify-between"
+                                },
+                                children: [
+                                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { children: [
+                                    '"' + promotion.code + '"',
+                                    " added"
+                                  ] }),
+                                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                    import_button.default,
+                                    {
+                                      ...{
+                                        "aria-label": "Remove promotion code",
+                                        icon: import_trash.default,
+                                        inline: true,
+                                        onClick: () => setValue("promotion", null),
+                                        // Small: the square keeps the promotion row at its height.
+                                        size: "small"
+                                      }
+                                    }
+                                  )
+                                ]
+                              }
+                            ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                              import_form_stripe_promotion.default,
+                              {
+                                ...{
+                                  // shouldDirty marks the selection as made rather than
+                                  // defaulted. It no longer arms the navigation guard —
+                                  // this form runs with guard off — so nothing here
+                                  // prompts on close. Same for both method setValues below.
+                                  onSuccess: ({ result }) => setValue("promotion", result, { shouldDirty: true }),
+                                  plan
+                                }
+                              }
+                            )
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                        "div",
+                        {
+                          ...{
+                            className: "pb-3"
+                          },
+                          children: [
+                            label("Payment"),
+                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                              import_form_payment_methods.default,
+                              {
+                                ...{
+                                  onClickAdd: (callback) => onClickAdd((method2) => {
+                                    setValue("method", method2, { shouldDirty: true });
+                                    clearErrors(["method"]);
+                                    callback();
+                                  }),
+                                  onChange: (method2) => setValue("method", method2, { shouldDirty: true }),
+                                  values: {
+                                    method
+                                  }
+                                }
+                              }
+                            ),
+                            ((_a = formState == null ? void 0 : formState.errors) == null ? void 0 : _a.method) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                              "div",
+                              {
+                                ...{
+                                  className: "pt-4 text-red-dark"
+                                },
+                                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: formState.errors.method.message })
+                              }
+                            )
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        DrawerSubscriptionSummary,
+                        {
+                          ...{
+                            data,
+                            plan
+                          }
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        import_button.default,
+                        {
+                          ...{
+                            disabled: Boolean(!plan),
+                            loading: formState == null ? void 0 : formState.isSubmitting,
+                            onClick: () => handleSubmit(onSubmit)()
+                          },
+                          children: "Start"
+                        }
+                      )
+                    ]
+                  }
+                );
+              }
+            },
+            endpoint
+          )
+        ]
+      }
+    );
+  } else {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      DrawerPlans,
+      {
+        ...{
+          onError,
+          onSuccess: async (plan2) => setValue("plan", plan2),
+          // Without `values` the feed is fetched with
+          // `organization=undefined`, so the API cannot verify ownership
+          // and the org's own custom plan never comes back. This is the
+          // path a FREE org takes, which is exactly who a custom plan is
+          // most often built for.
+          values
+        }
+      }
+    );
+  }
+};
+const DrawerSubscription = ({
+  canceledAt,
+  onCancel,
+  onClickAdd,
+  onError,
+  onSuccess,
+  onResume,
+  pending,
+  values,
+  view
+}) => {
+  const views = {
+    change: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      DrawerSubscriptionChange,
+      {
+        ...{
+          canceledAt,
+          onCancel,
+          onError,
+          onSuccess,
+          onResume,
+          pending,
+          values
+        }
+      }
+    ),
+    start: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      DrawerSubscriptionStart,
+      {
+        ...{
+          onClickAdd,
+          onError,
+          onSuccess,
+          values
+        }
+      }
+    )
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      ...{
+        className: "h-full overflow-scroll scroll-smooth hide-scrollbar"
+      },
+      children: views == null ? void 0 : views[view]
+    }
+  );
+};
+var drawer_subscription_default = DrawerSubscription;