@betterstore/react 0.1.0 → 0.1.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @betterstore/sdk
 
+## 0.1.2
+
+### Patch Changes
+
+- architecture redone
+
+## 0.1.1
+
+### Patch Changes
+
+- cicd
+
 ## 0.1.0
 
 ### Minor Changes

package/dist/components/checkout-embed/index.d.ts

@@ -0,0 +1,8 @@
+import BetterStore from "@betterstore/sdk";
+import React from "react";
+declare function CheckoutEmbed({ betterStore, checkoutId, }: {
+    betterStore: InstanceType<typeof BetterStore>;
+    checkoutId: string;
+}): React.JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof CheckoutEmbed>;
+export default _default;

package/dist/components/checkout-embed/summary/index.d.ts

@@ -0,0 +1,8 @@
+import BetterStore from "@betterstore/sdk";
+import React from "react";
+export default function CheckoutSummary({ lineItems, shipping, tax, currency, }: {
+    lineItems: Awaited<Awaited<ReturnType<InstanceType<typeof BetterStore>["checkout"]["retrieve"]>>["lineItems"]>;
+    shipping?: number;
+    tax?: number;
+    currency: string;
+}): React.JSX.Element;

package/dist/components/index.d.ts

@@ -0,0 +1,3 @@
+export { default as CheckoutEmbed } from "./checkout-embed";
+export { default as PaymentElement } from "./payment-element";
+export { useCheckout } from "./payment-element/useCheckout";

package/dist/index.cjs.js

@@ -2,6 +2,113 @@
 
 var React = require('react');
 
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
+
+
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+function CheckoutSummary({ lineItems, shipping, tax, currency, }) {
+    const subtotal = lineItems.reduce((acc, item) => {
+        var _a, _b;
+        return acc + ((_b = (_a = item.product) === null || _a === void 0 ? void 0 : _a.priceInCents) !== null && _b !== void 0 ? _b : 0) * item.quantity;
+    }, 0);
+    const total = subtotal + (tax !== null && tax !== void 0 ? tax : 0) + (shipping !== null && shipping !== void 0 ? shipping : 0);
+    const formatPrice = (cents) => {
+        return `${(cents / 100).toFixed(2)} ${currency}`;
+    };
+    return (React.createElement("div", { className: "bg-black text-white p-6 rounded-lg" },
+        lineItems.map((item, index) => {
+            var _a, _b, _c, _d, _e;
+            return (React.createElement("div", { key: index, className: "flex items-center mb-6" },
+                React.createElement("div", { className: "relative" },
+                    React.createElement("div", { className: "w-16 h-16 bg-zinc-900 rounded-lg overflow-hidden relative" }, ((_a = item.product) === null || _a === void 0 ? void 0 : _a.images[0]) ? (React.createElement("img", { src: item.product.images[0] || "/placeholder.svg", alt: ((_b = item.product) === null || _b === void 0 ? void 0 : _b.title) || "Product image", className: "object-cover" })) : (React.createElement("div", { className: "w-full h-full flex items-center justify-center bg-zinc-800" },
+                        React.createElement("span", { className: "text-zinc-500" }, "No image")))),
+                    React.createElement("div", { className: "absolute -top-2 -right-2 w-6 h-6 bg-zinc-700 rounded-full flex items-center justify-center text-sm" }, item.quantity)),
+                React.createElement("div", { className: "ml-4 flex-1" },
+                    React.createElement("h3", { className: "text-lg font-medium" }, ((_c = item.product) === null || _c === void 0 ? void 0 : _c.title) || "Product"),
+                    React.createElement("p", { className: "text-zinc-400 text-sm" }, item.variantOptions.map((option) => option.name).join(" / "))),
+                React.createElement("div", { className: "text-right" },
+                    React.createElement("p", { className: "text-lg font-medium" }, formatPrice((_e = (_d = item.product) === null || _d === void 0 ? void 0 : _d.priceInCents) !== null && _e !== void 0 ? _e : 0)))));
+        }),
+        React.createElement("div", { className: "border-t border-zinc-800 pt-4 mt-2" },
+            React.createElement("div", { className: "flex justify-between py-2" },
+                React.createElement("span", { className: "text-lg" }, "Subtotal"),
+                React.createElement("span", { className: "text-lg" }, formatPrice(subtotal))),
+            React.createElement("div", { className: "flex justify-between py-2" },
+                React.createElement("span", { className: "text-lg" }, "Shipping"),
+                React.createElement("span", { className: "text-zinc-400" }, shipping !== undefined
+                    ? formatPrice(shipping)
+                    : "Calculated at next step")),
+            tax !== undefined && (React.createElement("div", { className: "flex justify-between py-2" },
+                React.createElement("span", { className: "text-lg" }, "Tax"),
+                React.createElement("span", { className: "text-lg" }, formatPrice(tax)))),
+            React.createElement("div", { className: "flex justify-between py-4 mt-2 border-t border-zinc-800 items-center" },
+                React.createElement("span", { className: "text-2xl font-bold" }, "Total"),
+                React.createElement("div", { className: "text-right" },
+                    React.createElement("span", { className: "text-zinc-400 text-sm mr-2" }, currency),
+                    React.createElement("span", { className: "text-2xl font-bold" }, formatPrice(total)))))));
+}
+
+function CheckoutEmbed({ betterStore, checkoutId, }) {
+    const [checkout, setCheckout] = React.useState(null);
+    const [loading, setLoading] = React.useState(true);
+    React.useEffect(() => {
+        function fetchCheckout() {
+            return __awaiter(this, void 0, void 0, function* () {
+                try {
+                    const data = yield betterStore.checkout.retrieve(checkoutId);
+                    setCheckout(data);
+                }
+                catch (error) {
+                    console.error("Failed to fetch checkout:", error);
+                }
+                finally {
+                    setLoading(false);
+                }
+            });
+        }
+        fetchCheckout();
+    }, [betterStore, checkoutId]);
+    if (loading) {
+        return React.createElement("div", null, "Loading...");
+    }
+    if (!checkout) {
+        return React.createElement("div", null, "Checkout not found");
+    }
+    return (React.createElement("div", { className: "grid md:grid-cols-2 gap-4" },
+        React.createElement("div", null, "forms here"),
+        React.createElement("div", null,
+            React.createElement(CheckoutSummary, { currency: checkout.currency, lineItems: checkout.lineItems, shipping: checkout === null || checkout === void 0 ? void 0 : checkout.shipping, tax: checkout === null || checkout === void 0 ? void 0 : checkout.tax }))));
+}
+var index$1 = React.memo(CheckoutEmbed);
+
 function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
 }
@@ -2109,38 +2216,6 @@ var loadStripe = function loadStripe() {
   });
 };
 
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
-
-
-function __awaiter(thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-}
-
-typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
-    var e = new Error(message);
-    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
-};
-
 const createStoreImpl = (createState) => {
   let state;
   const listeners = /* @__PURE__ */ new Set();
@@ -2230,7 +2305,8 @@ function PaymentElement({ paymentSecret, checkoutAppearance, onSuccess, onError,
     return (React.createElement(Elements, { stripe: stripePromise, options: options },
         React.createElement(CheckoutForm$1, { onSuccess: onSuccess, onError: onError, children: children })));
 }
-var paymentElement = React.memo(PaymentElement);
+var index = React.memo(PaymentElement);
 
-exports.PaymentElement = paymentElement;
+exports.CheckoutEmbed = index$1;
+exports.PaymentElement = index;
 exports.useCheckout = useCheckout;

package/dist/index.d.ts

@@ -1,2 +1 @@
-export { default as PaymentElement } from "./checkout/payment-element";
-export { useCheckout } from "./checkout/useCheckout";
+export * from "./components";

package/dist/index.esm.js

@@ -1,4 +1,111 @@
-import React, { memo, useState } from 'react';
+import React, { memo, useState, useEffect } from 'react';
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
+
+
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+function CheckoutSummary({ lineItems, shipping, tax, currency, }) {
+    const subtotal = lineItems.reduce((acc, item) => {
+        var _a, _b;
+        return acc + ((_b = (_a = item.product) === null || _a === void 0 ? void 0 : _a.priceInCents) !== null && _b !== void 0 ? _b : 0) * item.quantity;
+    }, 0);
+    const total = subtotal + (tax !== null && tax !== void 0 ? tax : 0) + (shipping !== null && shipping !== void 0 ? shipping : 0);
+    const formatPrice = (cents) => {
+        return `${(cents / 100).toFixed(2)} ${currency}`;
+    };
+    return (React.createElement("div", { className: "bg-black text-white p-6 rounded-lg" },
+        lineItems.map((item, index) => {
+            var _a, _b, _c, _d, _e;
+            return (React.createElement("div", { key: index, className: "flex items-center mb-6" },
+                React.createElement("div", { className: "relative" },
+                    React.createElement("div", { className: "w-16 h-16 bg-zinc-900 rounded-lg overflow-hidden relative" }, ((_a = item.product) === null || _a === void 0 ? void 0 : _a.images[0]) ? (React.createElement("img", { src: item.product.images[0] || "/placeholder.svg", alt: ((_b = item.product) === null || _b === void 0 ? void 0 : _b.title) || "Product image", className: "object-cover" })) : (React.createElement("div", { className: "w-full h-full flex items-center justify-center bg-zinc-800" },
+                        React.createElement("span", { className: "text-zinc-500" }, "No image")))),
+                    React.createElement("div", { className: "absolute -top-2 -right-2 w-6 h-6 bg-zinc-700 rounded-full flex items-center justify-center text-sm" }, item.quantity)),
+                React.createElement("div", { className: "ml-4 flex-1" },
+                    React.createElement("h3", { className: "text-lg font-medium" }, ((_c = item.product) === null || _c === void 0 ? void 0 : _c.title) || "Product"),
+                    React.createElement("p", { className: "text-zinc-400 text-sm" }, item.variantOptions.map((option) => option.name).join(" / "))),
+                React.createElement("div", { className: "text-right" },
+                    React.createElement("p", { className: "text-lg font-medium" }, formatPrice((_e = (_d = item.product) === null || _d === void 0 ? void 0 : _d.priceInCents) !== null && _e !== void 0 ? _e : 0)))));
+        }),
+        React.createElement("div", { className: "border-t border-zinc-800 pt-4 mt-2" },
+            React.createElement("div", { className: "flex justify-between py-2" },
+                React.createElement("span", { className: "text-lg" }, "Subtotal"),
+                React.createElement("span", { className: "text-lg" }, formatPrice(subtotal))),
+            React.createElement("div", { className: "flex justify-between py-2" },
+                React.createElement("span", { className: "text-lg" }, "Shipping"),
+                React.createElement("span", { className: "text-zinc-400" }, shipping !== undefined
+                    ? formatPrice(shipping)
+                    : "Calculated at next step")),
+            tax !== undefined && (React.createElement("div", { className: "flex justify-between py-2" },
+                React.createElement("span", { className: "text-lg" }, "Tax"),
+                React.createElement("span", { className: "text-lg" }, formatPrice(tax)))),
+            React.createElement("div", { className: "flex justify-between py-4 mt-2 border-t border-zinc-800 items-center" },
+                React.createElement("span", { className: "text-2xl font-bold" }, "Total"),
+                React.createElement("div", { className: "text-right" },
+                    React.createElement("span", { className: "text-zinc-400 text-sm mr-2" }, currency),
+                    React.createElement("span", { className: "text-2xl font-bold" }, formatPrice(total)))))));
+}
+
+function CheckoutEmbed({ betterStore, checkoutId, }) {
+    const [checkout, setCheckout] = useState(null);
+    const [loading, setLoading] = useState(true);
+    useEffect(() => {
+        function fetchCheckout() {
+            return __awaiter(this, void 0, void 0, function* () {
+                try {
+                    const data = yield betterStore.checkout.retrieve(checkoutId);
+                    setCheckout(data);
+                }
+                catch (error) {
+                    console.error("Failed to fetch checkout:", error);
+                }
+                finally {
+                    setLoading(false);
+                }
+            });
+        }
+        fetchCheckout();
+    }, [betterStore, checkoutId]);
+    if (loading) {
+        return React.createElement("div", null, "Loading...");
+    }
+    if (!checkout) {
+        return React.createElement("div", null, "Checkout not found");
+    }
+    return (React.createElement("div", { className: "grid md:grid-cols-2 gap-4" },
+        React.createElement("div", null, "forms here"),
+        React.createElement("div", null,
+            React.createElement(CheckoutSummary, { currency: checkout.currency, lineItems: checkout.lineItems, shipping: checkout === null || checkout === void 0 ? void 0 : checkout.shipping, tax: checkout === null || checkout === void 0 ? void 0 : checkout.tax }))));
+}
+var index$1 = memo(CheckoutEmbed);
 
 function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
@@ -2107,38 +2214,6 @@ var loadStripe = function loadStripe() {
   });
 };
 
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
-
-
-function __awaiter(thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-}
-
-typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
-    var e = new Error(message);
-    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
-};
-
 const createStoreImpl = (createState) => {
   let state;
   const listeners = /* @__PURE__ */ new Set();
@@ -2228,6 +2303,6 @@ function PaymentElement({ paymentSecret, checkoutAppearance, onSuccess, onError,
     return (React.createElement(Elements, { stripe: stripePromise, options: options },
         React.createElement(CheckoutForm$1, { onSuccess: onSuccess, onError: onError, children: children })));
 }
-var paymentElement = memo(PaymentElement);
+var index = memo(PaymentElement);
 
-export { paymentElement as PaymentElement, useCheckout };
+export { index$1 as CheckoutEmbed, index as PaymentElement, useCheckout };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@betterstore/react",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "E-commerce for Developers",
   "private": false,
   "publishConfig": {
@@ -9,6 +9,7 @@
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
+  "type": "module",
   "keywords": [
     "betterstore",
     "ecommerce",
@@ -23,10 +24,14 @@
     "@rollup/plugin-commonjs": "^28.0.2",
     "@rollup/plugin-node-resolve": "^16.0.0",
     "@rollup/plugin-typescript": "^12.1.2",
+    "@tailwindcss/postcss": "^4.0.12",
     "@types/react": "^19.0.10",
+    "autoprefixer": "^10.4.20",
     "babel-preset-react": "^6.24.1",
+    "postcss": "^8.5.3",
     "prettier": "^3.5.3",
     "rollup": "^4.34.9",
+    "tailwindcss": "^4.0.12",
     "tslib": "^2.8.1",
     "tsup": "^8.4.0",
     "typescript": "^5.8.2"
@@ -36,8 +41,10 @@
     "react-dom": "^19.0.0"
   },
   "dependencies": {
+    "@betterstore/sdk": "^0.2.0",
     "@stripe/react-stripe-js": "^3.3.0",
     "@stripe/stripe-js": "^5.10.0",
+    "rollup-plugin-postcss": "^4.0.2",
     "zustand": "^5.0.3"
   },
   "scripts": {

package/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

package/rollup.config.mjs

@@ -1,6 +1,9 @@
 import commonjs from "@rollup/plugin-commonjs";
 import resolve from "@rollup/plugin-node-resolve";
 import typescript from "@rollup/plugin-typescript";
+import tailwindcss from "@tailwindcss/postcss";
+import autoprefixer from "autoprefixer";
+import postcss from "rollup-plugin-postcss";
 
 export default {
   input: "src/index.ts",
@@ -14,6 +17,14 @@ export default {
       format: "esm",
     },
   ],
-  plugins: [resolve(), commonjs(), typescript()],
+  plugins: [
+    resolve(),
+    commonjs(),
+    typescript(),
+    postcss({
+      extensions: [".css", ".module.css"],
+      plugins: [tailwindcss("./tailwind.config.js"), autoprefixer()],
+    }),
+  ],
   external: ["react", "react-dom"],
 };

package/tailwind.config.js

@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./src/**/*.tsx"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};