strapi5-plugin-for-stripe 1.0.0 → 1.0.1

package/dist/_chunks/App-JPkXp0Gh.mjs

@@ -0,0 +1,564 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useFetchClient, Page } from "@strapi/strapi/admin";
+import { Routes, Route } from "react-router-dom";
+import { useState, useEffect } from "react";
+import { Box, Flex, Typography, Button, Table, Thead, Tr, Th, Tbody, Td, IconButtonGroup, IconButton, Alert, SingleSelect, SingleSelectOption, NumberInput, TextInput } from "@strapi/design-system";
+import { CodeBlock, Pencil, Trash } from "@strapi/icons";
+const HomePage = () => {
+  const { get, post, del, put } = useFetchClient();
+  const [productsAndPrices, setProductsAndPrices] = useState({
+    prices: [],
+    products: []
+  });
+  const [settings, setSettings] = useState({});
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [mode, setMode] = useState("create");
+  const [hasChanges, setHasChanges] = useState(false);
+  const [isEmbedModalOpen, setIsEmbedModalOpen] = useState(false);
+  const [selectedProduct, setSelectedProduct] = useState(null);
+  const [editingIndex, setEditingIndex] = useState(null);
+  const [paymentType, setPaymentType] = useState("oneTime");
+  const [name, setName] = useState("");
+  const [price, setPrice] = useState(0);
+  const [paymentInterval, setPaymentInterval] = useState("");
+  const [trialPeriodDays, setTrialPeriodDays] = useState(0);
+  const [error, setError] = useState("");
+  const [success, setSuccess] = useState("");
+  const isSubscription = paymentType === "subscription";
+  const resetForm = () => {
+    setPaymentType("oneTime");
+    setName("");
+    setPrice();
+    setPaymentInterval("");
+    setTrialPeriodDays(0);
+    setHasChanges(false);
+  };
+  const loadProducts = async () => {
+    const res = await get("/strapi5-plugin-stripe/products");
+    setProductsAndPrices(res.data);
+  };
+  const getSettings = async () => {
+    const res = await get("/strapi5-plugin-stripe/settings");
+    setSettings(res.data || {});
+  };
+  useEffect(() => {
+    loadProducts();
+    getSettings();
+  }, []);
+  const openCreateModal = () => {
+    setMode("create");
+    resetForm();
+    setIsModalOpen(true);
+  };
+  const openEditModal = (product, price2, index) => {
+    setMode("edit");
+    setHasChanges(false);
+    setEditingIndex(index);
+    setName(product.name);
+    setPrice(price2.unit_amount / 100);
+    if (price2.recurring) {
+      setPaymentType("subscription");
+      setPaymentInterval(
+        price2.recurring.interval_count ? `${price2.recurring.interval_count}${price2.recurring.interval}s` : price2.recurring.interval
+      );
+      setTrialPeriodDays(price2.recurring.trial_period_days || 0);
+    } else {
+      setPaymentType("oneTime");
+      setPaymentInterval("");
+      setTrialPeriodDays(0);
+    }
+    setIsModalOpen(true);
+  };
+  const createProduct = async () => {
+    setError("");
+    setSuccess("");
+    try {
+      await post("/strapi5-plugin-stripe/products", {
+        currency: settings.currency,
+        unit_amount: price * 100,
+        product_data: {
+          name
+        },
+        ...isSubscription && {
+          recurring: {
+            interval: paymentInterval.includes("2") || paymentInterval.includes("6") ? paymentInterval.slice(1, paymentInterval.length - 1) : paymentInterval,
+            interval_count: paymentInterval.includes("2") ? "2" : paymentInterval.includes("6") ? "6" : null,
+            trial_period_days: isSubscription ? trialPeriodDays : null
+          }
+        }
+      });
+      setSuccess("Product created successfully.");
+      setIsModalOpen(false);
+      resetForm();
+      loadProducts();
+    } catch (err) {
+      setError(
+        err?.response?.data?.error?.message || err?.response?.data?.message || err?.message || "An unexpected error occurred."
+      );
+    }
+  };
+  const deleteProduct = async (productId, priceId) => {
+    setError("");
+    setSuccess("");
+    try {
+      await del(`/strapi5-plugin-stripe/products/${productId}&${priceId}`);
+      setSuccess("Product deleted successfully.");
+      loadProducts();
+    } catch (err) {
+      setError(
+        err?.response?.data?.error?.message || err?.response?.data?.message || err?.message || "An unexpected error occurred."
+      );
+    }
+  };
+  const updateProduct = async (productArr, priceArr) => {
+    setError("");
+    setSuccess("");
+    try {
+      let productUpdate = {};
+      let mustCreateNewPrice = false;
+      if (name !== productArr.name) {
+        productUpdate.name = name;
+      }
+      if (Object.keys(productUpdate).length > 0) {
+        await put(
+          `/strapi5-plugin-stripe/products/${productArr.id}`,
+          productUpdate
+        );
+      }
+      if (priceArr.unit_amount !== price * 100) {
+        mustCreateNewPrice = true;
+      }
+      if (priceArr.recurring) {
+        const currentInterval = priceArr.recurring.interval_count ? `${priceArr.recurring.interval_count}${priceArr.recurring.interval}s` : priceArr.recurring.interval;
+        if (currentInterval !== paymentInterval) {
+          mustCreateNewPrice = true;
+        }
+        if (priceArr.recurring.trial_period_days !== trialPeriodDays) {
+          mustCreateNewPrice = true;
+        }
+      }
+      if (mustCreateNewPrice) {
+        const newPrice = await post("/strapi5-plugin-stripe/products", {
+          currency: priceArr.currency,
+          unit_amount: price * 100,
+          product: productArr.id,
+          ...isSubscription && {
+            recurring: {
+              interval: paymentInterval.includes("2") || paymentInterval.includes("6") ? paymentInterval.slice(1, paymentInterval.length - 1) : paymentInterval,
+              interval_count: paymentInterval.includes("2") ? 2 : paymentInterval.includes("6") ? 6 : void 0,
+              trial_period_days: trialPeriodDays || void 0
+            }
+          }
+        });
+        await del(
+          `/strapi5-plugin-stripe/prices/${productArr.id}&${priceArr.id}&${newPrice.data.id}`
+        );
+      }
+      setSuccess("Product updated successfully.");
+      setIsModalOpen(false);
+      resetForm();
+      loadProducts();
+    } catch (err) {
+      setError(
+        err?.response?.data?.error?.message || err?.response?.data?.message || err?.message || "An unexpected error occurred."
+      );
+    }
+  };
+  const currencySymbol = (price2) => {
+    if (price2.currency === "eur") return "€";
+    if (price2.currency === "usd") return "$";
+    if (price2.currency === "gbp") return "£";
+    if (price2.currency === "cad") return "CA$";
+  };
+  return /* @__PURE__ */ jsxs(Box, { padding: 8, children: [
+    /* @__PURE__ */ jsxs(
+      Flex,
+      {
+        justifyContent: "space-between",
+        alignItems: "center",
+        paddingBottom: 6,
+        children: [
+          /* @__PURE__ */ jsx(Typography, { variant: "beta", fontWeight: "bold", children: "Stripe Products" }),
+          /* @__PURE__ */ jsx(Button, { onClick: openCreateModal, children: "Create product" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(Table, { colCount: 5, rowCount: productsAndPrices.length, children: [
+      /* @__PURE__ */ jsx(Thead, { children: /* @__PURE__ */ jsxs(Tr, { children: [
+        /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: "Name" }) }),
+        /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: "Price" }) }),
+        /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: "Type" }) }),
+        /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: "Interval" }) }),
+        /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: "IDs" }) }),
+        /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: "Actions" }) })
+      ] }) }),
+      /* @__PURE__ */ jsx(Tbody, { children: productsAndPrices.prices.map((elm, index) => {
+        return /* @__PURE__ */ jsxs(Tr, { children: [
+          /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { children: productsAndPrices.products[index].name }) }),
+          /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsxs(Typography, { children: [
+            elm.unit_amount / 100,
+            " ",
+            currencySymbol(elm)
+          ] }) }),
+          /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { children: elm.type.split("_").map((word) => {
+            return word.charAt(0).toUpperCase() + word.slice(1) + " ";
+          }) }) }),
+          /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { children: elm.recurring ? elm.recurring.interval_count ? elm.recurring.interval_count + " " + elm.recurring.interval + "s" : elm.recurring.interval : "-" }) }),
+          /* @__PURE__ */ jsxs(Td, { children: [
+            /* @__PURE__ */ jsx(
+              Typography,
+              {
+                background: "rgba(173, 216, 230, 0.3)",
+                padding: "5px",
+                borderRadius: "8px",
+                children: productsAndPrices.products[index].id
+              }
+            ),
+            /* @__PURE__ */ jsx(Typography, { children: ", " }),
+            /* @__PURE__ */ jsx(
+              Typography,
+              {
+                background: "rgba(173, 216, 230, 0.3)",
+                padding: "5px",
+                borderRadius: "8px",
+                children: elm.id
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsxs(IconButtonGroup, { children: [
+            /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                onClick: () => {
+                  setSelectedProduct({
+                    product: productsAndPrices.products[index],
+                    price: elm
+                  });
+                  setIsEmbedModalOpen(true);
+                },
+                children: /* @__PURE__ */ jsx(CodeBlock, {})
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                variant: "secondary",
+                onClick: () => {
+                  openEditModal(
+                    productsAndPrices.products[index],
+                    elm,
+                    index
+                  );
+                },
+                children: /* @__PURE__ */ jsx(Pencil, {})
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                variant: "danger",
+                onClick: () => deleteProduct(
+                  productsAndPrices.products[index].id,
+                  elm.id
+                ),
+                children: /* @__PURE__ */ jsx(Trash, {})
+              }
+            )
+          ] }) })
+        ] }, elm.id);
+      }) })
+    ] }),
+    /* @__PURE__ */ jsx(Box, { paddingTop: 6, children: success && /* @__PURE__ */ jsx(Box, { paddingBottom: 4, children: /* @__PURE__ */ jsx(Alert, { variant: "success", title: "Success", children: success }) }) }),
+    isModalOpen && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        Box,
+        {
+          position: "fixed",
+          top: 0,
+          left: 0,
+          width: "100vw",
+          height: "100vh",
+          background: "rgba(0,0,0,0.5)",
+          pointerEvents: "none",
+          onClick: () => {
+            setIsModalOpen(false);
+            resetForm();
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Box,
+        {
+          display: "flex",
+          style: {
+            flexDirection: "column",
+            justifyContent: "center",
+            position: "fixed",
+            top: "0",
+            left: "0",
+            width: "100%",
+            height: "100%"
+          },
+          children: /* @__PURE__ */ jsxs(
+            Box,
+            {
+              background: "neutral0",
+              width: "900px",
+              maxWidth: "90%",
+              margin: "auto",
+              borderRadius: "8px",
+              zIndex: 1e3,
+              children: [
+                /* @__PURE__ */ jsx(Box, { padding: 6, children: /* @__PURE__ */ jsx(Typography, { variant: "beta", fontWeight: "bold", children: "Create Product / Subscription" }) }),
+                /* @__PURE__ */ jsx(Box, { padding: 6, children: /* @__PURE__ */ jsxs(Flex, { wrap: "wrap", gap: 4, children: [
+                  /* @__PURE__ */ jsxs(Box, { width: "50%", children: [
+                    /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", children: "Payment Type" }),
+                    /* @__PURE__ */ jsxs(
+                      SingleSelect,
+                      {
+                        value: paymentType,
+                        onChange: (value) => {
+                          setPaymentType(value);
+                          setHasChanges(true);
+                        },
+                        children: [
+                          /* @__PURE__ */ jsx(SingleSelectOption, { value: "oneTime", children: "One-Time" }),
+                          /* @__PURE__ */ jsx(SingleSelectOption, { value: "subscription", children: "Subscription" })
+                        ]
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxs(Box, { width: "50%", children: [
+                    /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", children: "Price" }),
+                    /* @__PURE__ */ jsx(
+                      NumberInput,
+                      {
+                        value: price,
+                        onValueChange: (value) => {
+                          setPrice(value);
+                          setHasChanges(true);
+                        },
+                        required: true
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxs(Box, { width: "50%", children: [
+                    /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", children: "Name" }),
+                    /* @__PURE__ */ jsx(
+                      TextInput,
+                      {
+                        value: name,
+                        onChange: (e) => {
+                          setName(e.target.value);
+                          setHasChanges(true);
+                        },
+                        required: true
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxs(Box, { width: "50%", children: [
+                    /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", children: "Payment Interval" }),
+                    /* @__PURE__ */ jsxs(
+                      SingleSelect,
+                      {
+                        value: paymentInterval,
+                        onChange: (value) => {
+                          setPaymentInterval(value);
+                          setHasChanges(true);
+                        },
+                        disabled: paymentType !== "subscription",
+                        children: [
+                          /* @__PURE__ */ jsx(SingleSelectOption, { value: "week", children: "Every week" }),
+                          /* @__PURE__ */ jsx(SingleSelectOption, { value: "2weeks", children: "Every 2 weeks" }),
+                          /* @__PURE__ */ jsx(SingleSelectOption, { value: "month", children: "Every month" }),
+                          /* @__PURE__ */ jsx(SingleSelectOption, { value: "6months", children: "Every 6 months" }),
+                          /* @__PURE__ */ jsx(SingleSelectOption, { value: "year", children: "Every year" })
+                        ]
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxs(Box, { width: "50%", children: [
+                    /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", children: "Trial Period Days" }),
+                    /* @__PURE__ */ jsx(
+                      NumberInput,
+                      {
+                        value: trialPeriodDays,
+                        onValueChange: (value) => {
+                          setTrialPeriodDays(value);
+                          setHasChanges(true);
+                        },
+                        disabled: paymentType !== "subscription"
+                      }
+                    )
+                  ] })
+                ] }) }),
+                /* @__PURE__ */ jsx(Box, { padding: 6, children: error && /* @__PURE__ */ jsx(Box, { paddingBottom: 4, children: /* @__PURE__ */ jsx(Alert, { variant: "danger", title: "Action failed", children: error }) }) }),
+                /* @__PURE__ */ jsx(Box, { padding: 6, background: "neutral100", children: /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", children: [
+                  /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      variant: "tertiary",
+                      onClick: () => {
+                        setIsModalOpen(false);
+                      },
+                      children: "Cancel"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      onClick: () => mode === "create" ? createProduct() : updateProduct(
+                        productsAndPrices.products[editingIndex],
+                        productsAndPrices.prices[editingIndex]
+                      ),
+                      disabled: !hasChanges,
+                      children: mode === "create" ? "Create" : "Update"
+                    }
+                  )
+                ] }) })
+              ]
+            }
+          )
+        }
+      )
+    ] }),
+    isEmbedModalOpen && selectedProduct && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        Box,
+        {
+          position: "fixed",
+          top: 0,
+          left: 0,
+          width: "100vw",
+          height: "100vh",
+          background: "rgba(0,0,0,0.5)",
+          onClick: () => {
+            setIsModalOpen(false);
+            resetForm();
+          },
+          zIndex: 90
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Box,
+        {
+          display: "flex",
+          style: {
+            flexDirection: "column",
+            justifyContent: "center",
+            position: "relative",
+            top: "-100px",
+            width: "100%",
+            height: "100%"
+          },
+          children: /* @__PURE__ */ jsxs(
+            Box,
+            {
+              background: "neutral0",
+              width: "900px",
+              maxWidth: "90%",
+              margin: "auto",
+              borderRadius: "8px",
+              zIndex: 100,
+              children: [
+                /* @__PURE__ */ jsx(Box, { padding: 6, children: /* @__PURE__ */ jsx(Typography, { variant: "beta", fontWeight: "bold", children: "Payment button integration" }) }),
+                /* @__PURE__ */ jsxs(Box, { padding: 6, children: [
+                  /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", children: "1. Import the script" }),
+                  /* @__PURE__ */ jsx(
+                    Box,
+                    {
+                      background: "neutral100",
+                      padding: 4,
+                      borderRadius: "4px",
+                      marginTop: 2,
+                      children: /* @__PURE__ */ jsx("pre", { children: `<script>
+  window.addEventListener('load', () => {
+    document.querySelectorAll('[data-stripe-checkout]').forEach((btn) => {
+      btn.addEventListener('click', () => checkout(btn));
+    });
+
+    const sessionId = new URLSearchParams(location.search).get('session_id');
+    if (sessionId) retrieve(sessionId);
+  });
+
+  function checkout(btn) {
+    const apiUrl = btn.dataset.apiUrl;
+    const priceId = btn.dataset.priceId;
+
+    if (!apiUrl || !priceId) return;
+
+    const metadata = {};
+    Object.keys(btn.dataset).forEach((k) => {
+      if (k.startsWith('metadata')) {
+        metadata[k.replace('metadata', '').toLowerCase()] = btn.dataset[k];
+      }
+    });
+
+    fetch(apiUrl + "/api/strapi5-plugin-stripe/checkout", {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        priceId,
+        customer_email: btn.dataset.email,
+        metadata,
+      }),
+    })
+      .then((r) => r.json())
+      .then((r) => r.url && (location.href = r.url));
+  }
+<\/script>` })
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(Box, { paddingTop: 4, children: [
+                    /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", children: "2. Add the payment button" }),
+                    /* @__PURE__ */ jsx(
+                      Box,
+                      {
+                        background: "neutral100",
+                        padding: 4,
+                        borderRadius: "4px",
+                        marginTop: 2,
+                        children: /* @__PURE__ */ jsx("pre", { children: `<button
+  data-stripe-checkout
+  data-api-url="${window.location.origin}"
+  data-price-id="${selectedProduct.price.id}"
+  data-email="customer@email.com"
+  data-metadata-order-id="ORDER_123"
+>
+  Pay now
+</button>` })
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxs(Box, { paddingTop: 4, children: [
+                    /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", children: "3. Notes" }),
+                    /* @__PURE__ */ jsxs(Typography, { variant: "pi", children: [
+                      /* @__PURE__ */ jsx("br", {}),
+                      "• ",
+                      /* @__PURE__ */ jsx("b", { children: "priceId" }),
+                      " identifies the product price",
+                      /* @__PURE__ */ jsx("br", {}),
+                      "• Metadata is optional and available in webhooks",
+                      /* @__PURE__ */ jsx("br", {}),
+                      "• Redirect is handled automatically by Stripe, with the session ID as a query parameter"
+                    ] })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsx(Box, { padding: 6, background: "neutral100", children: /* @__PURE__ */ jsx(Flex, { justifyContent: "flex-end", children: /* @__PURE__ */ jsx(Button, { onClick: () => setIsEmbedModalOpen(false), children: "Close" }) }) })
+              ]
+            }
+          )
+        }
+      )
+    ] })
+  ] });
+};
+const App = () => {
+  return /* @__PURE__ */ jsxs(Routes, { children: [
+    /* @__PURE__ */ jsx(Route, { index: true, element: /* @__PURE__ */ jsx(HomePage, {}) }),
+    /* @__PURE__ */ jsx(Route, { path: "*", element: /* @__PURE__ */ jsx(Page.Error, {}) })
+  ] });
+};
+export {
+  App
+};