@mintmoney/react 0.1.0-alpha-1 → 0.1.0-alpha.10

package/README.md

@@ -0,0 +1,94 @@
+# mintmoney-js
+
+Welcome to the mintmoney-js sdk. This library provides to with all the tools needed
+to integrate the mint money payments checkout into your web application.
+
+## Quickstart
+
+The quickest and easiest way to integrate mintmoney into your application is to use the
+
+`@mintmoney/react` react component.
+
+```jsx
+import ReactDOM from 'react-dom/client';
+import { createBrowserRouter, RouterProvider } from 'react-router-dom';
+
+import { routes } from './routes.tsx';
+import { ViewportProvider } from '@/contexts/viewport-context.tsx';
+import { createConfig } from "@mintmoney/react/config"
+import { MintMoneyProvider } from "@mintmoney/react/context"
+
+export const router = createBrowserRouter([routes], {
+  basename: import.meta.env.VITE_BASENAME || '/',
+});
+
+const config = createConfig("pk_8tcytWcpd8vfUuclzqWgRGzW", {
+  checkoutId: 'your-checkout-id',
+});
+
+const App = () => {
+
+  return (
+    <ViewportProvider>
+      <MintMoneyProvider config={config}>
+        <RouterProvider router={router} />;
+      </MintMoneyProvider>
+    </ViewportProvider>
+  );
+};
+
+ReactDOM.createRoot(document.getElementById('root')!).render(<App />);
+```
+
+```jsx
+import { cn } from "@/util/class-name-merge";
+import { Checkout } from "@mintmoney/react/checkout";
+import { useState } from "react";
+import "@mintmoney/react/css/styles.css";
+
+export default () => {
+  const [amount, setAmount] = (useState < number) | (null > null);
+
+  return (
+    <div className="flex flex-col gap-4 items-center">
+      <h1 className="text-center">Mint Money Connect Demo</h1>
+      <div className="flex gap-4">
+        <button onClick={() => setAmount(10.0)}>$10</button>
+        <button onClick={() => setAmount(50.0)}>$50</button>
+        <button onClick={() => setAmount(150.0)}>$150</button>
+      </div>
+      <div>
+        <Checkout amount={amount} />
+      </div>
+    </div>
+  );
+};
+```
+
+# Developer Setup
+
+🟢 Ensure you're running node version 22
+
+`nvm install 22 && nvm use 22`
+
+🟢 Install dependencies and set up package workspace.
+
+`npm install`
+
+🟢 build the packages
+
+`npm run build`
+
+🟢 create a linkable package for dev
+
+`npm run link`
+
+🟢 Install the @mintmoney/react package
+
+`cd platgrounds/vite-react-app`
+
+`npm link @mintmoney/react`
+
+🟢 Run example app
+
+`npm run dev`

package/dist/css/styles.css

@@ -1,4 +1,8 @@
-/* Checkout Modal Container */
+@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@200..1000&display=swap");
+
+.mm-root {
+  font-family: var(--mm-font-family, "Nunito Sans"), sans-serif;
+}
 
 .mm-qr-container {
   display: flex;
@@ -18,32 +22,9 @@
   border-radius: 8px;
 }
 
-.copy-button {
-  background-color: #1a53ff;
-  color: white;
-  border: none;
-  padding: 8px 16px;
-  font-size: 14px;
-  font-weight: 600;
-  border-radius: 8px;
-  cursor: pointer;
-  transition: background-color 0.2s ease-in-out;
-}
-
-.copy-button:hover {
-  background-color: #0039cc;
-}
-
-.copy-button:active {
-  background-color: #002a99;
-}
-
-.copy-button:focus {
-  outline: none;
-  box-shadow: 0 0 0 3px rgba(26, 83, 255, 0.4);
-}
-
-/* Modal Base Styles */
+/* ***********************************************
+ * MODALS
+ * **********************************************/
 .mm-modal-overlay {
   position: fixed;
   inset: 0;
@@ -57,28 +38,31 @@
   flex-direction: column;
   z-index: 50;
   position: fixed;
-  inset: 0;
-  max-width: 100%;
+  width: 100%;
+  pointer-events: auto;
+  transform: translate(-50%, -50%);
+  position: fixed;
+  left: 50%;
+  top: 50%;
   background-color: #ffffff;
   padding: 24px;
   box-sizing: border-box;
-  width: fit-content;
-  height: fit-content;
+  min-height: 300px;
+  min-width: 400px;
+  max-width: 400px;
+  max-height: 600px;
+  overflow-y: auto;
+  border-radius: 20px;
+  margin: auto;
 }
 
-@media (min-width: 768px) {
-  .mm-modal-container {
-    max-width: 600px;
-    border-radius: 20px;
-    margin: auto;
-  }
-
-  .mm-checkout-modal {
-    min-width: 426px;
-  }
+.mm-modal-content {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: calc(300px - 48px);
 }
 
-/* Modal Navigation */
 .mm-modal-nav {
   display: flex;
   margin-bottom: 16px;
@@ -98,22 +82,209 @@
   justify-content: flex-end;
 }
 
-/* Modal Header */
 .mm-modal-header {
   padding-bottom: 12px;
   font-size: 18px;
   font-weight: bold;
 }
 
-/* Modal Body */
 .mm-modal-body {
+  display: flex;
   flex-grow: 1;
   overflow-y: auto;
+  overflow-x: hidden;
 }
 
-/* Modal Footer */
 .mm-modal-footer {
   padding-top: 24px;
 }
 
-/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jc3Mvc3R5bGVzLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSIsImZpbGUiOiJzdHlsZXMuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLyogQ2hlY2tvdXQgTW9kYWwgQ29udGFpbmVyICovXG5cbi5tbS1xci1jb250YWluZXIge1xuICBkaXNwbGF5OiBmbGV4O1xuICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgcGFkZGluZzogMTZweDtcbiAgYmFja2dyb3VuZDogI2U2ZjBmZjtcbiAgYm9yZGVyLXJhZGl1czogMTJweDtcbn1cblxuLm1tLWFkZHJlc3MtY29udGFpbmVyIHtcbiAgZGlzcGxheTogZmxleDtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAganVzdGlmeS1jb250ZW50OiBzcGFjZS1iZXR3ZWVuO1xuICBiYWNrZ3JvdW5kOiAjZWVmNWZmO1xuICBwYWRkaW5nOiA4cHggMTJweDtcbiAgYm9yZGVyLXJhZGl1czogOHB4O1xufVxuXG4uY29weS1idXR0b24ge1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAjMWE1M2ZmO1xuICBjb2xvcjogd2hpdGU7XG4gIGJvcmRlcjogbm9uZTtcbiAgcGFkZGluZzogOHB4IDE2cHg7XG4gIGZvbnQtc2l6ZTogMTRweDtcbiAgZm9udC13ZWlnaHQ6IDYwMDtcbiAgYm9yZGVyLXJhZGl1czogOHB4O1xuICBjdXJzb3I6IHBvaW50ZXI7XG4gIHRyYW5zaXRpb246IGJhY2tncm91bmQtY29sb3IgMC4ycyBlYXNlLWluLW91dDtcbn1cblxuLmNvcHktYnV0dG9uOmhvdmVyIHtcbiAgYmFja2dyb3VuZC1jb2xvcjogIzAwMzljYztcbn1cblxuLmNvcHktYnV0dG9uOmFjdGl2ZSB7XG4gIGJhY2tncm91bmQtY29sb3I6ICMwMDJhOTk7XG59XG5cbi5jb3B5LWJ1dHRvbjpmb2N1cyB7XG4gIG91dGxpbmU6IG5vbmU7XG4gIGJveC1zaGFkb3c6IDAgMCAwIDNweCByZ2JhKDI2LCA4MywgMjU1LCAwLjQpO1xufVxuXG4vKiBNb2RhbCBCYXNlIFN0eWxlcyAqL1xuLm1tLW1vZGFsLW92ZXJsYXkge1xuICBwb3NpdGlvbjogZml4ZWQ7XG4gIGluc2V0OiAwO1xuICB6LWluZGV4OiA1MDtcbiAgYmFja2dyb3VuZC1jb2xvcjogcmdiYSgwLCAwLCAwLCAwLjIpO1xuICBiYWNrZHJvcC1maWx0ZXI6IGJsdXIoNHB4KTtcbn1cblxuLm1tLW1vZGFsLWNvbnRhaW5lciB7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gIHotaW5kZXg6IDUwO1xuICBwb3NpdGlvbjogZml4ZWQ7XG4gIGluc2V0OiAwO1xuICBtYXgtd2lkdGg6IDEwMCU7XG4gIGJhY2tncm91bmQtY29sb3I6ICNmZmZmZmY7XG4gIHBhZGRpbmc6IDI0cHg7XG4gIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gIHdpZHRoOiBmaXQtY29udGVudDtcbiAgaGVpZ2h0OiBmaXQtY29udGVudDtcbn1cblxuQG1lZGlhIChtaW4td2lkdGg6IDc2OHB4KSB7XG4gIC5tbS1tb2RhbC1jb250YWluZXIge1xuICAgIG1heC13aWR0aDogNjAwcHg7XG4gICAgYm9yZGVyLXJhZGl1czogMjBweDtcbiAgICBtYXJnaW46IGF1dG87XG4gIH1cblxuICAubW0tY2hlY2tvdXQtbW9kYWwge1xuICAgIG1pbi13aWR0aDogNDI2cHg7XG4gIH1cbn1cblxuLyogTW9kYWwgTmF2aWdhdGlvbiAqL1xuLm1tLW1vZGFsLW5hdiB7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIG1hcmdpbi1ib3R0b206IDE2cHg7XG4gIGp1c3RpZnktY29udGVudDogc3BhY2UtYmV0d2VlbjtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbn1cblxuLm1tLW1vZGFsLW5hdi1sZWZ0IHtcbiAganVzdGlmeS1jb250ZW50OiBmbGV4LXN0YXJ0O1xufVxuXG4ubW0tbW9kYWwtbmF2LWNlbnRlciB7XG4gIGp1c3RpZnktY29udGVudDogY2VudGVyO1xufVxuXG4ubW0tbW9kYWwtbmF2LXJpZ2h0IHtcbiAganVzdGlmeS1jb250ZW50OiBmbGV4LWVuZDtcbn1cblxuLyogTW9kYWwgSGVhZGVyICovXG4ubW0tbW9kYWwtaGVhZGVyIHtcbiAgcGFkZGluZy1ib3R0b206IDEycHg7XG4gIGZvbnQtc2l6ZTogMThweDtcbiAgZm9udC13ZWlnaHQ6IGJvbGQ7XG59XG5cbi8qIE1vZGFsIEJvZHkgKi9cbi5tbS1tb2RhbC1ib2R5IHtcbiAgZmxleC1ncm93OiAxO1xuICBvdmVyZmxvdy15OiBhdXRvO1xufVxuXG4vKiBNb2RhbCBGb290ZXIgKi9cbi5tbS1tb2RhbC1mb290ZXIge1xuICBwYWRkaW5nLXRvcDogMjRweDtcbn1cbiJdfQ== */
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+/* ***********************************************
+ * Text 
+ * **********************************************/
+
+/* ***********************************************
+ * Buttons 
+ * **********************************************/
+.copy-button {
+  background-color: #1a53ff;
+  color: white;
+  border: none;
+  padding: 8px 16px;
+  font-size: 14px;
+  font-weight: 600;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background-color 0.2s ease-in-out;
+}
+
+.copy-button:hover {
+  background-color: #0039cc;
+}
+
+.copy-button:active {
+  background-color: #002a99;
+}
+
+.copy-button:focus {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(26, 83, 255, 0.4);
+}
+
+/* ***********************************************
+ * Lists 
+ * **********************************************/
+
+.mm-empty-list__container {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  max-height: 100%;
+  justify-content: center;
+  align-items: center;
+}
+
+.mm-selectable-list__button-group {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+/* ***********************************************
+ * Loading Components
+ * **********************************************/
+.loading-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.loading-segment {
+  opacity: 0;
+  transform: scale(0.8);
+  animation: fadeInSequence 3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+}
+
+.segment-1 {
+  animation-delay: 0s;
+  animation-name: fadeInSlideUp;
+}
+.segment-2 {
+  animation-delay: 0.3s;
+  animation-name: fadeInSlideRight;
+}
+.segment-3 {
+  animation-delay: 0.6s;
+  animation-name: fadeInSlideDown;
+}
+.segment-4 {
+  animation-delay: 0.9s;
+  animation-name: fadeInSlideLeft;
+}
+
+@keyframes fadeInSlideUp {
+  0% {
+    opacity: 0;
+    transform: translateY(20px) scale(1);
+  }
+  30% {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+  70% {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+  90% {
+    opacity: 0;
+    transform: translateY(-10px) scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(-20px) scale(1);
+  }
+}
+
+@keyframes fadeInSlideRight {
+  0% {
+    opacity: 0;
+    transform: translateX(-20px) scale(1);
+  }
+  30% {
+    opacity: 1;
+    transform: translateX(0) scale(1);
+  }
+  70% {
+    opacity: 1;
+    transform: translateX(0) scale(1);
+  }
+  90% {
+    opacity: 0;
+    transform: translateX(10px) scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform: translateX(20px) scale(1);
+  }
+}
+
+@keyframes fadeInSlideDown {
+  0% {
+    opacity: 0;
+    transform: translateY(-20px) scale(1);
+  }
+  30% {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+  70% {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+  90% {
+    opacity: 0;
+    transform: translateY(10px) scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(20px) scale(1);
+  }
+}
+
+@keyframes fadeInSlideLeft {
+  0% {
+    opacity: 0;
+    transform: translateX(10px) scale(1);
+  }
+  30% {
+    opacity: 1;
+    transform: translateX(0) scale(1);
+  }
+  70% {
+    opacity: 1;
+    transform: translateX(0) scale(1);
+  }
+  90% {
+    opacity: 0;
+    transform: translateX(-10px) scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform: translateX(-20px) scale(1);
+  }
+}

package/dist/esm/api/checkouts.js

@@ -0,0 +1,16 @@
+import { api } from "../api/index.js";
+const checkoutDTO = (data) => {
+    return {
+        ...data.data,
+    };
+};
+export const getCheckoutCryptoCurrencies = (checkout) => {
+    return checkout.checkout_config.crypto?.enabled
+        ? checkout.checkout_config.crypto.assets || []
+        : [];
+};
+export async function getCheckoutById(checkoutId) {
+    const resp = await api.v1.checkoutsDetail(checkoutId);
+    return checkoutDTO(resp.data);
+}
+//# sourceMappingURL=checkouts.js.map

package/dist/esm/api/checkouts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkouts.js","sourceRoot":"","sources":["../../../src/api/checkouts.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,iBAAiB,CAAC;AAKtC,MAAM,WAAW,GAAG,CAAC,IAAyB,EAAE,EAAE;IAChD,OAAO;QACL,GAAG,IAAI,CAAC,IAAI;KACD,CAAC;AAChB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,2BAA2B,GAAG,CACzC,QAAkB,EAMhB,EAAE;IACJ,OAAO,QAAQ,CAAC,eAAe,CAAC,MAAM,EAAE,OAAO;QAC7C,CAAC,CAAC,QAAQ,CAAC,eAAe,CAAC,MAAM,CAAC,MAAM,IAAI,EAAE;QAC9C,CAAC,CAAC,EAAE,CAAC;AACT,CAAC,CAAC;AAEF,MAAM,CAAC,KAAK,UAAU,eAAe,CAAC,UAAkB;IACtD,MAAM,IAAI,GAAG,MAAM,GAAG,CAAC,EAAE,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;IACtD,OAAO,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAChC,CAAC"}