@drawbridge/components 0.0.78 → 0.1.1

package/dist/dashboard/drawer-subscription.mjs

@@ -0,0 +1,733 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, useEffect } from "react";
+import { useQueryClient } from "@tanstack/react-query";
+import { formatNumber } from "@drawbridge/drawbridge-utils";
+import { useForm, useWatch } from "../shared/lib/form.mjs";
+import yup, { resolver } from "../shared/lib/yup.mjs";
+import { queryString, request } from "@drawbridge/drawbridge-utils/fetch";
+import Fieldset from "../shared/fieldset.mjs";
+import ProviderResource from "./provider-resource.mjs";
+import FormStripePromotion from "./form-stripe-promotion.mjs";
+import FormPaymentMethods from "./form-payment-methods.mjs";
+import FormAction from "./form-action.mjs";
+import CardTask from "./card-task.mjs";
+import CardOverage from "./card-overage.mjs";
+import CardPlan from "./card-plan.mjs";
+import CardPaymentMethod from "./card-payment-method.mjs";
+import LinkBack from "./link-back.mjs";
+import Button from "../shared/button.mjs";
+import Trash from "../icons/trash.mjs";
+const error = ({ error: error2 }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ...{
+      className: "p-6"
+    },
+    children: /* @__PURE__ */ jsx("p", { children: error2.message })
+  }
+);
+const DrawerSubscriptionPromotionRecovery = ({
+  onRemove
+}) => {
+  const queryClient = useQueryClient();
+  useEffect(() => {
+    queryClient.setQueryData(
+      ["notice"],
+      {
+        active: true,
+        response: {
+          message: "Promotion code is not valid"
+        }
+      }
+    );
+    onRemove();
+  }, []);
+  return null;
+};
+const renderLine = (key, value) => /* @__PURE__ */ jsxs(
+  "div",
+  {
+    ...{
+      className: "flex items-center justify-between"
+    },
+    children: [
+      /* @__PURE__ */ jsx("p", { children: key }),
+      /* @__PURE__ */ jsx("p", { children: value })
+    ]
+  }
+);
+const label = (content) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ...{
+      className: "w-full mb-3 disabled"
+    },
+    children: /* @__PURE__ */ jsx("p", { children: content })
+  }
+);
+const DrawerPlans = ({
+  action = "Select",
+  canceledAt,
+  onCancel,
+  onSuccess,
+  onResume,
+  pending,
+  values
+}) => {
+  var _a, _b;
+  return /* @__PURE__ */ jsx(
+    ProviderResource,
+    {
+      ...{
+        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__ */ 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__ */ jsx(
+                CardPlan,
+                {
+                  ...{
+                    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__ */ jsx(
+    ProviderResource,
+    {
+      ...{
+        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__ */ jsx(
+            CardTask,
+            {
+              ...{
+                message: /* @__PURE__ */ jsx(
+                  "ul",
+                  {
+                    ...{
+                      className: "pt-1 list-disc list-inside"
+                    },
+                    children: query.data.blocked.map((item, key) => /* @__PURE__ */ 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__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              ...{
+                className: "space-y-4"
+              },
+              children: /* @__PURE__ */ jsx(
+                CardOverage,
+                {
+                  ...{
+                    label: "Unable to downgrade to " + plan.title,
+                    overages: query.data.restricted
+                  }
+                }
+              )
+            }
+          ) });
+        }
+        ;
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          (((_d = query == null ? void 0 : query.data) == null ? void 0 : _d.difference) || []).length > 0 && /* @__PURE__ */ jsx(
+            "div",
+            {
+              ...{
+                className: "pb-3"
+              },
+              children: /* @__PURE__ */ jsx(
+                CardTask,
+                {
+                  ...{
+                    message: /* @__PURE__ */ 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__ */ 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__ */ jsxs(
+    "div",
+    {
+      ...{
+        className: "pb-6"
+      },
+      children: [
+        label("Summary"),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ...{
+              className: "space-y-1.5"
+            },
+            children: [
+              (plan == null ? void 0 : plan.title) && renderLine(
+                "Plan",
+                plan.title
+              ),
+              renderLine(
+                "Subtotal",
+                "$" + formatNumber((first.subtotal || 0) / 100, 2)
+              ),
+              renderLine(
+                "Discount",
+                "-$" + formatNumber((first.discount || 0) / 100, 2)
+              ),
+              renderLine(
+                "Tax",
+                "$" + formatNumber((first.tax || 0) / 100, 2)
+              ),
+              renderLine(
+                "Total",
+                "$" + formatNumber((first.total || 0) / 100, 2)
+              ),
+              renews && renderLine(
+                "Renews at",
+                "$" + formatNumber((invoice.total || 0) / 100, 2)
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+const DrawerSubscriptionChange = ({
+  canceledAt,
+  onCancel,
+  onError,
+  onSuccess,
+  onResume,
+  pending,
+  values
+}) => {
+  var _a, _b, _c;
+  const { control, setValue } = useForm({
+    guard: false,
+    resolver: resolver(
+      yup.object({
+        method: yup.string().label("Payment method").required(),
+        plan: yup.object().label("Plan").required()
+      })
+    ),
+    values
+  });
+  const plan = 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__ */ 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?" + 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__ */ jsxs(
+      "div",
+      {
+        ...{
+          className: "space-y-6 p-6"
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            LinkBack,
+            {
+              ...{
+                // 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__ */ jsx(
+            DrawerSubscriptionPrepare,
+            {
+              ...{
+                endpoint,
+                plan
+              },
+              children: ({ data, isLoading, isRefetching }) => {
+                var _a2;
+                return /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      ...{
+                        className: "pb-3"
+                      },
+                      children: [
+                        label("Payment method"),
+                        /* @__PURE__ */ jsx(
+                          CardPaymentMethod,
+                          {
+                            ...(_a2 = values == null ? void 0 : values.subscription) == null ? void 0 : _a2.method
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    DrawerSubscriptionSummary,
+                    {
+                      ...{
+                        data,
+                        plan
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    FormAction,
+                    {
+                      ...{
+                        action: "Confirm",
+                        disabled: isLoading || isRefetching,
+                        callback: () => {
+                          var _a3;
+                          return 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 } = useForm({
+    guard: false,
+    resolver: resolver(
+      yup.object({
+        method: yup.object().label("Payment method").required(),
+        plan: yup.object().label("Plan").required()
+      })
+    )
+  });
+  const onSubmit = async ({
+    method: method2,
+    promotion: promotion2,
+    plan: plan2
+  }) => {
+    try {
+      const response = await 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 = useWatch({
+    control,
+    name: "method"
+  });
+  const plan = useWatch({
+    control,
+    name: "plan"
+  });
+  const promotion = useWatch({
+    control,
+    name: "promotion"
+  });
+  if (plan) {
+    const endpoint = "/organization/" + (values == null ? void 0 : values.organization) + "/subscription/prepare?" + 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__ */ jsxs(
+      Fieldset,
+      {
+        ...{
+          className: "p-6 space-y-6",
+          disabled: formState == null ? void 0 : formState.isSubmitting
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            LinkBack,
+            {
+              ...{
+                // 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__ */ jsx(
+            DrawerSubscriptionPrepare,
+            {
+              ...{
+                endpoint,
+                plan,
+                ...promotion && !(plan == null ? void 0 : plan.custom) && {
+                  error: /* @__PURE__ */ jsx(
+                    DrawerSubscriptionPromotionRecovery,
+                    {
+                      ...{
+                        onRemove: () => setValue("promotion", null)
+                      }
+                    }
+                  )
+                }
+              },
+              children: ({ data, isLoading, isRefetching }) => {
+                var _a;
+                return /* @__PURE__ */ jsxs(
+                  Fieldset,
+                  {
+                    ...{
+                      className: "space-y-6 mb-6",
+                      disabled: (formState == null ? void 0 : formState.isSubmitting) || isLoading || isRefetching
+                    },
+                    children: [
+                      !(plan == null ? void 0 : plan.custom) && /* @__PURE__ */ jsxs(
+                        "div",
+                        {
+                          ...{
+                            className: "pb-3"
+                          },
+                          children: [
+                            label("Promotion code"),
+                            (promotion == null ? void 0 : promotion.code) ? /* @__PURE__ */ jsxs(
+                              "div",
+                              {
+                                ...{
+                                  className: "w-full flex items-center justify-between"
+                                },
+                                children: [
+                                  /* @__PURE__ */ jsxs("p", { children: [
+                                    '"' + promotion.code + '"',
+                                    " added"
+                                  ] }),
+                                  /* @__PURE__ */ jsx(
+                                    Button,
+                                    {
+                                      ...{
+                                        "aria-label": "Remove promotion code",
+                                        icon: Trash,
+                                        inline: true,
+                                        onClick: () => setValue("promotion", null),
+                                        // Small: the square keeps the promotion row at its height.
+                                        size: "small"
+                                      }
+                                    }
+                                  )
+                                ]
+                              }
+                            ) : /* @__PURE__ */ jsx(
+                              FormStripePromotion,
+                              {
+                                ...{
+                                  // 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__ */ jsxs(
+                        "div",
+                        {
+                          ...{
+                            className: "pb-3"
+                          },
+                          children: [
+                            label("Payment"),
+                            /* @__PURE__ */ jsx(
+                              FormPaymentMethods,
+                              {
+                                ...{
+                                  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__ */ jsx(
+                              "div",
+                              {
+                                ...{
+                                  className: "pt-4 text-red-dark"
+                                },
+                                children: /* @__PURE__ */ jsx("p", { children: formState.errors.method.message })
+                              }
+                            )
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        DrawerSubscriptionSummary,
+                        {
+                          ...{
+                            data,
+                            plan
+                          }
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        Button,
+                        {
+                          ...{
+                            disabled: Boolean(!plan),
+                            loading: formState == null ? void 0 : formState.isSubmitting,
+                            onClick: () => handleSubmit(onSubmit)()
+                          },
+                          children: "Start"
+                        }
+                      )
+                    ]
+                  }
+                );
+              }
+            },
+            endpoint
+          )
+        ]
+      }
+    );
+  } else {
+    return /* @__PURE__ */ 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__ */ jsx(
+      DrawerSubscriptionChange,
+      {
+        ...{
+          canceledAt,
+          onCancel,
+          onError,
+          onSuccess,
+          onResume,
+          pending,
+          values
+        }
+      }
+    ),
+    start: /* @__PURE__ */ jsx(
+      DrawerSubscriptionStart,
+      {
+        ...{
+          onClickAdd,
+          onError,
+          onSuccess,
+          values
+        }
+      }
+    )
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...{
+        className: "h-full overflow-scroll scroll-smooth hide-scrollbar"
+      },
+      children: views == null ? void 0 : views[view]
+    }
+  );
+};
+var drawer_subscription_default = DrawerSubscription;
+export {
+  drawer_subscription_default as default
+};