@mintmoney/react 0.1.0-alpha.11 → 0.1.0-alpha.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/esm/api/checkouts.js +9 -9
- package/dist/esm/api/generated.js +544 -592
- package/dist/esm/api/index.js +10 -10
- package/dist/esm/api/payments.js +17 -21
- package/dist/esm/api/types.js +8 -2
- package/dist/esm/api/types.js.map +1 -1
- package/dist/esm/checkout/container.js +2 -2
- package/dist/esm/checkout/index.js +18 -38
- package/dist/esm/checkout/modal.js +52 -63
- package/dist/esm/checkout/views/back.js +3 -7
- package/dist/esm/checkout/views/card-intent/details.js +4 -21
- package/dist/esm/checkout/views/crypto-intent/curreny.js +18 -43
- package/dist/esm/checkout/views/crypto-intent/curreny.js.map +1 -1
- package/dist/esm/checkout/views/crypto-intent/direct-details.js +16 -60
- package/dist/esm/checkout/views/crypto-intent/methods.js +19 -27
- package/dist/esm/checkout/views/crypto-intent/processing.js +31 -39
- package/dist/esm/checkout/views/crypto-intent/processing.js.map +1 -1
- package/dist/esm/checkout/views/crypto-intent/success.js +14 -32
- package/dist/esm/checkout/views/initial.js +24 -29
- package/dist/esm/checkout/views/method-select.js +10 -24
- package/dist/esm/components/buttons/index.js +11 -20
- package/dist/esm/components/icons/checkMark.js +4 -16
- package/dist/esm/components/icons/close.js +4 -19
- package/dist/esm/components/icons/index.js +1 -1
- package/dist/esm/components/index.js +1 -1
- package/dist/esm/components/lists/empty.js +2 -5
- package/dist/esm/components/lists/index.js +8 -47
- package/dist/esm/components/loading/index.js +6 -47
- package/dist/esm/components/modals/index.js +1 -1
- package/dist/esm/components/modals/modal-with-views.js +23 -62
- package/dist/esm/components/modals/modal.js +11 -67
- package/dist/esm/components/modals/use-modal-with-views.js +22 -25
- package/dist/esm/components/text/index.js +21 -21
- package/dist/esm/config.js +14 -5
- package/dist/esm/config.js.map +1 -1
- package/dist/esm/context.js +10 -18
- package/dist/esm/index.js +1 -1
- package/dist/esm/state/checkout/store.js +144 -144
- package/dist/esm/state/checkout/store.js.map +1 -1
- package/dist/esm/themes/default.js +55 -55
- package/dist/esm/themes/index.js +1 -1
- package/dist/esm/themes/types.js +1 -1
- package/dist/esm/utils/cn.js +1 -1
- package/dist/types/api/checkouts.d.ts +5 -5
- package/dist/types/api/generated.d.ts +835 -924
- package/dist/types/api/index.d.ts +1 -1
- package/dist/types/api/payments.d.ts +3 -10
- package/dist/types/api/types.d.ts +16 -14
- package/dist/types/api/types.d.ts.map +1 -1
- package/dist/types/checkout/container.d.ts +2 -12
- package/dist/types/checkout/index.d.ts +6 -10
- package/dist/types/checkout/modal.d.ts +5 -7
- package/dist/types/checkout/views/back.d.ts +3 -5
- package/dist/types/checkout/views/card-intent/details.d.ts +1 -1
- package/dist/types/checkout/views/crypto-intent/curreny.d.ts +1 -1
- package/dist/types/checkout/views/crypto-intent/curreny.d.ts.map +1 -1
- package/dist/types/checkout/views/crypto-intent/direct-details.d.ts +2 -4
- package/dist/types/checkout/views/crypto-intent/methods.d.ts +1 -1
- package/dist/types/checkout/views/crypto-intent/processing.d.ts +1 -1
- package/dist/types/checkout/views/crypto-intent/processing.d.ts.map +1 -1
- package/dist/types/checkout/views/crypto-intent/success.d.ts +3 -5
- package/dist/types/checkout/views/initial.d.ts +3 -5
- package/dist/types/checkout/views/method-select.d.ts +1 -1
- package/dist/types/components/buttons/index.d.ts +6 -16
- package/dist/types/components/icons/checkMark.d.ts +3 -5
- package/dist/types/components/icons/close.d.ts +3 -5
- package/dist/types/components/icons/index.d.ts +1 -1
- package/dist/types/components/index.d.ts +1 -1
- package/dist/types/components/lists/empty.d.ts +3 -5
- package/dist/types/components/lists/index.d.ts +9 -17
- package/dist/types/components/loading/index.d.ts +4 -4
- package/dist/types/components/modals/index.d.ts +1 -1
- package/dist/types/components/modals/modal-with-views.d.ts +18 -23
- package/dist/types/components/modals/modal.d.ts +9 -17
- package/dist/types/components/modals/use-modal-with-views.d.ts +6 -9
- package/dist/types/components/text/index.d.ts +7 -17
- package/dist/types/config.d.ts +16 -12
- package/dist/types/config.d.ts.map +1 -1
- package/dist/types/context.d.ts +4 -7
- package/dist/types/index.d.ts +1 -1
- package/dist/types/state/checkout/store.d.ts +51 -74
- package/dist/types/state/checkout/store.d.ts.map +1 -1
- package/dist/types/themes/default.d.ts +1 -1
- package/dist/types/themes/index.d.ts +1 -1
- package/dist/types/themes/types.d.ts +26 -25
- package/dist/types/utils/cn.d.ts +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"processing.js","sourceRoot":"","sources":["../../../../../src/checkout/views/crypto-intent/processing.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,OAAO,EAAE,gBAAgB,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,kCAAkC,CAAC;AAE9D,MAAM,aAAa,GAAG,IAAI,CAAC;AAE3B,MAAM,oCAAoC,GAAG,GAAG,EAAE;IAChD,MAAM,EAAE,QAAQ,EAAE,GAAG,gBAAgB,EAAE,CAAC;IACxC,MAAM,MAAM,GAAG,kBAAkB,EAAE,CAAC;IAEpC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,SAAS,GAAG,IAAI,CAAC;QAErB,MAAM,iBAAiB,GAAG,KAAK,IAAI,EAAE;YACnC,IAAI,CAAC;gBACH,MAAM,cAAc,GAAG,MAAM,UAAU,EAAE,CAAC;gBAC1C,IAAI,CAAC,cAAc,IAAI,CAAC,SAAS;oBAAE,OAAO;gBAE1C,
|
|
1
|
+
{"version":3,"file":"processing.js","sourceRoot":"","sources":["../../../../../src/checkout/views/crypto-intent/processing.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,kCAAkC,CAAC;AAE9D,MAAM,aAAa,GAAG,IAAI,CAAC;AAE3B,MAAM,oCAAoC,GAAG,GAAG,EAAE;IAChD,MAAM,EAAE,QAAQ,EAAE,GAAG,gBAAgB,EAAE,CAAC;IACxC,MAAM,MAAM,GAAG,kBAAkB,EAAE,CAAC;IAEpC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,SAAS,GAAG,IAAI,CAAC;QAErB,MAAM,iBAAiB,GAAG,KAAK,IAAI,EAAE;YACnC,IAAI,CAAC;gBACH,MAAM,cAAc,GAAG,MAAM,UAAU,EAAE,CAAC;gBAC1C,IAAI,CAAC,cAAc,IAAI,CAAC,SAAS;oBAAE,OAAO;gBAE1C,IACE,cAAc,CAAC,MAAM;oBACrB,MAAM,CAAC,oBAAoB,CAAC,yBAAyB,EACrD,CAAC;oBACD,QAAQ,CAAC,4BAA4B,CAAC,CAAC;gBACzC,CAAC;qBAAM,IAAI,cAAc,CAAC,MAAM,KAAK,aAAa,CAAC,MAAM,EAAE,CAAC;oBAC1D,QAAQ,CAAC,QAAQ,CAAC,CAAC;gBACrB,CAAC;YACH,CAAC;YAAC,OAAO,KAAK,EAAE,CAAC;gBACf,OAAO,CAAC,KAAK,CAAC,gCAAgC,EAAE,KAAK,CAAC,CAAC;YACzD,CAAC;QACH,CAAC,CAAC;QAEF,KAAK,iBAAiB,EAAE,CAAC;QACzB,MAAM,QAAQ,GAAG,WAAW,CAC1B,KAAK,IAAI,EAAE,CAAC,MAAM,iBAAiB,EAAE,EACrC,aAAa,CACd,CAAC;QAEF,OAAO,GAAG,EAAE;YACV,SAAS,GAAG,KAAK,CAAC;YAClB,aAAa,CAAC,QAAQ,CAAC,CAAC;QAC1B,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,eAAK,SAAS,EAAC,mBAAmB,aAChC,KAAC,MAAM,IAAC,OAAO,EAAE,IAAI,GAAI,EACzB,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,mCAElD,IACH,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,OAAO,EAAE,oCAAoC,EAAE,CAAC"}
|
|
@@ -1,38 +1,20 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import {
|
|
3
|
-
StyledButton,
|
|
4
|
-
CheckMarkIcon,
|
|
5
|
-
useModalWithView,
|
|
6
|
-
} from "../../../components/index.js";
|
|
2
|
+
import { StyledButton, CheckMarkIcon, useModalWithView, } from "../../../components/index.js";
|
|
7
3
|
import { resetCheckoutStore } from "../../../state/checkout/store.js";
|
|
8
4
|
import { ModalViewContainer } from "../../container.js";
|
|
9
5
|
const CryptoIntentPaymentSuccessViewContent = ({ onClose }) => {
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
top: "calc(50% - 24px)",
|
|
23
|
-
left: "50%",
|
|
24
|
-
transform: "translate(-50%, -50%)",
|
|
25
|
-
},
|
|
26
|
-
children: _jsx(CheckMarkIcon, { size: 64 }),
|
|
27
|
-
}),
|
|
28
|
-
_jsx(StyledButton, {
|
|
29
|
-
style: { marginTop: "auto" },
|
|
30
|
-
variant: "primary",
|
|
31
|
-
onClick: handleClose,
|
|
32
|
-
children: "Complete",
|
|
33
|
-
}),
|
|
34
|
-
],
|
|
35
|
-
});
|
|
6
|
+
const { goToView } = useModalWithView();
|
|
7
|
+
const handleClose = () => {
|
|
8
|
+
resetCheckoutStore();
|
|
9
|
+
goToView("initial");
|
|
10
|
+
onClose(false);
|
|
11
|
+
};
|
|
12
|
+
return (_jsxs(ModalViewContainer, { style: { justifyContent: "flex-end" }, children: [_jsx("div", { style: {
|
|
13
|
+
position: "absolute",
|
|
14
|
+
top: "calc(50% - 24px)",
|
|
15
|
+
left: "50%",
|
|
16
|
+
transform: "translate(-50%, -50%)",
|
|
17
|
+
}, children: _jsx(CheckMarkIcon, { size: 64 }) }), _jsx(StyledButton, { style: { marginTop: "auto" }, variant: "primary", onClick: handleClose, children: "Complete" })] }));
|
|
36
18
|
};
|
|
37
19
|
export { CryptoIntentPaymentSuccessViewContent };
|
|
38
|
-
//# sourceMappingURL=success.js.map
|
|
20
|
+
//# sourceMappingURL=success.js.map
|
|
@@ -1,35 +1,30 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { useEffect, useState } from "react";
|
|
3
3
|
import { Loader, useModalWithView } from "../../components/index.js";
|
|
4
|
-
import {
|
|
5
|
-
ACTIONS,
|
|
6
|
-
initialiseStore,
|
|
7
|
-
useCheckoutStore,
|
|
8
|
-
} from "../../state/checkout/store.js";
|
|
4
|
+
import { ACTIONS, initialiseStore, useCheckoutStore, } from "../../state/checkout/store.js";
|
|
9
5
|
const InitialiseCheckoutViewContent = (props) => {
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
return loading ? _jsx(Loader, {}) : null;
|
|
6
|
+
const { goToView } = useModalWithView();
|
|
7
|
+
const { error, checkout, payment } = useCheckoutStore();
|
|
8
|
+
const [loading, setLoading] = useState(true);
|
|
9
|
+
useEffect(() => {
|
|
10
|
+
const setup = async () => {
|
|
11
|
+
await initialiseStore(props.payment);
|
|
12
|
+
};
|
|
13
|
+
void setup();
|
|
14
|
+
const timeout = setTimeout(() => setLoading(false), 1500);
|
|
15
|
+
return () => clearTimeout(timeout);
|
|
16
|
+
}, [props.payment]);
|
|
17
|
+
useEffect(() => {
|
|
18
|
+
const hasErrors = error[ACTIONS.GET_CHECKOUT_CONFIG] || error[ACTIONS.CREATE_PAYMENT];
|
|
19
|
+
if (hasErrors) {
|
|
20
|
+
goToView("failed", { reason: "get_checkout" });
|
|
21
|
+
return;
|
|
22
|
+
}
|
|
23
|
+
if (checkout && payment && !loading) {
|
|
24
|
+
goToView("methods");
|
|
25
|
+
}
|
|
26
|
+
}, [error, checkout, payment, loading]);
|
|
27
|
+
return loading ? _jsx(Loader, {}) : null;
|
|
33
28
|
};
|
|
34
29
|
export { InitialiseCheckoutViewContent };
|
|
35
|
-
//# sourceMappingURL=initial.js.map
|
|
30
|
+
//# sourceMappingURL=initial.js.map
|
|
@@ -1,31 +1,17 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { useRef } from "react";
|
|
3
3
|
import { useModalWithView, SelectableList } from "../../components/index.js";
|
|
4
|
-
import {
|
|
5
|
-
useCheckoutStore,
|
|
6
|
-
ACTIONS,
|
|
7
|
-
setCheckoutMethod,
|
|
8
|
-
} from "../../state/checkout/store.js";
|
|
4
|
+
import { useCheckoutStore, ACTIONS, setCheckoutMethod, } from "../../state/checkout/store.js";
|
|
9
5
|
import { ModalViewContainer } from "../container.js";
|
|
10
6
|
const MethodSelectViewContent = () => {
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
ref: modalRef,
|
|
20
|
-
children: _jsx(SelectableList, {
|
|
21
|
-
title: "Select payment method",
|
|
22
|
-
items: methods || [],
|
|
23
|
-
getKey: (method) => method.name,
|
|
24
|
-
getLabel: (method) => method.name,
|
|
25
|
-
onSelect: handleSelectMethod,
|
|
26
|
-
loading: loading[ACTIONS.GET_CHECKOUT_CONFIG],
|
|
27
|
-
}),
|
|
28
|
-
});
|
|
7
|
+
const { goToView } = useModalWithView();
|
|
8
|
+
const modalRef = useRef(null);
|
|
9
|
+
const { methods, loading } = useCheckoutStore();
|
|
10
|
+
const handleSelectMethod = (method) => {
|
|
11
|
+
setCheckoutMethod(method);
|
|
12
|
+
goToView(method.intentName);
|
|
13
|
+
};
|
|
14
|
+
return (_jsx(ModalViewContainer, { ref: modalRef, children: _jsx(SelectableList, { title: "Select payment method", items: methods || [], getKey: (method) => method.name, getLabel: (method) => method.name, onSelect: handleSelectMethod, loading: loading[ACTIONS.GET_CHECKOUT_CONFIG] }) }));
|
|
29
15
|
};
|
|
30
16
|
export { MethodSelectViewContent };
|
|
31
|
-
//# sourceMappingURL=method-select.js.map
|
|
17
|
+
//# sourceMappingURL=method-select.js.map
|
|
@@ -1,17 +1,14 @@
|
|
|
1
1
|
import { styled } from "styled-components";
|
|
2
|
-
const StyledButton = styled.button`
|
|
2
|
+
const StyledButton = styled.button `
|
|
3
3
|
width: 100%;
|
|
4
4
|
height: 48px;
|
|
5
5
|
padding: 10px 16px;
|
|
6
6
|
border-radius: 48px;
|
|
7
7
|
font-family: var(--mm-font-family);
|
|
8
8
|
border: 2px solid
|
|
9
|
-
${({ theme, variant = "primary" }) =>
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
theme?.btn?.[variant]?.default.backgroundColor};
|
|
13
|
-
color: ${({ theme, variant = "primary" }) =>
|
|
14
|
-
theme?.btn?.[variant]?.default.textColor};
|
|
9
|
+
${({ theme, variant = "primary" }) => theme?.btn?.[variant]?.default.borderColor};
|
|
10
|
+
background-color: ${({ theme, variant = "primary" }) => theme?.btn?.[variant]?.default.backgroundColor};
|
|
11
|
+
color: ${({ theme, variant = "primary" }) => theme?.btn?.[variant]?.default.textColor};
|
|
15
12
|
transition: all 0.3s ease-in-out;
|
|
16
13
|
font-size: 16px;
|
|
17
14
|
font-weight: 700;
|
|
@@ -24,23 +21,17 @@ const StyledButton = styled.button`
|
|
|
24
21
|
color 0.3s ease-in-out;
|
|
25
22
|
|
|
26
23
|
&:hover {
|
|
27
|
-
background-color: ${({ theme, variant = "primary" }) =>
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
theme?.btn?.[variant]?.hover.borderColor};
|
|
31
|
-
color: ${({ theme, variant = "primary" }) =>
|
|
32
|
-
theme?.btn?.[variant]?.hover.textColor};
|
|
24
|
+
background-color: ${({ theme, variant = "primary" }) => theme?.btn?.[variant]?.hover.backgroundColor};
|
|
25
|
+
border-color: ${({ theme, variant = "primary" }) => theme?.btn?.[variant]?.hover.borderColor};
|
|
26
|
+
color: ${({ theme, variant = "primary" }) => theme?.btn?.[variant]?.hover.textColor};
|
|
33
27
|
}
|
|
34
28
|
|
|
35
29
|
&:disabled {
|
|
36
|
-
background-color: ${({ theme, variant = "primary" }) =>
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
theme?.btn?.[variant]?.disabled.borderColor};
|
|
40
|
-
color: ${({ theme, variant = "primary" }) =>
|
|
41
|
-
theme?.btn?.[variant]?.disabled.textColor};
|
|
30
|
+
background-color: ${({ theme, variant = "primary" }) => theme?.btn?.[variant]?.disabled.backgroundColor};
|
|
31
|
+
border-color: ${({ theme, variant = "primary" }) => theme?.btn?.[variant]?.disabled.borderColor};
|
|
32
|
+
color: ${({ theme, variant = "primary" }) => theme?.btn?.[variant]?.disabled.textColor};
|
|
42
33
|
cursor: not-allowed;
|
|
43
34
|
}
|
|
44
35
|
`;
|
|
45
36
|
export { StyledButton };
|
|
46
|
-
//# sourceMappingURL=index.js.map
|
|
37
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { styled } from "styled-components";
|
|
3
3
|
import { useMintMoneyConfig } from "../../context.js";
|
|
4
|
-
const StyledSvg = styled.svg`
|
|
4
|
+
const StyledSvg = styled.svg `
|
|
5
5
|
stroke: ${({ color }) => color};
|
|
6
6
|
width: ${({ width }) => width}px;
|
|
7
7
|
height: ${({ height }) => height}px;
|
|
@@ -13,20 +13,8 @@ const StyledSvg = styled.svg`
|
|
|
13
13
|
}
|
|
14
14
|
`;
|
|
15
15
|
const CheckMarkIcon = ({ size = 20 }) => {
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
19
|
-
width: size,
|
|
20
|
-
height: size,
|
|
21
|
-
viewBox: "0 0 24 24",
|
|
22
|
-
fill: "none",
|
|
23
|
-
stroke: theme.icon.check.strokeColor,
|
|
24
|
-
strokeWidth: "2",
|
|
25
|
-
strokeLinecap: "round",
|
|
26
|
-
strokeLinejoin: "round",
|
|
27
|
-
color: theme.icon.check.color,
|
|
28
|
-
children: _jsx("polyline", { points: "20 6 9 17 4 12" }),
|
|
29
|
-
});
|
|
16
|
+
const { theme } = useMintMoneyConfig();
|
|
17
|
+
return (_jsx(StyledSvg, { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: theme.icon.check.strokeColor, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", color: theme.icon.check.color, children: _jsx("polyline", { points: "20 6 9 17 4 12" }) }));
|
|
30
18
|
};
|
|
31
19
|
export { CheckMarkIcon };
|
|
32
|
-
//# sourceMappingURL=checkMark.js.map
|
|
20
|
+
//# sourceMappingURL=checkMark.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { styled } from "styled-components";
|
|
3
3
|
import { useMintMoneyConfig } from "../../context.js";
|
|
4
|
-
const StyledSvg = styled.svg`
|
|
4
|
+
const StyledSvg = styled.svg `
|
|
5
5
|
stroke: ${({ color }) => color};
|
|
6
6
|
width: ${({ width }) => width}px;
|
|
7
7
|
height: ${({ height }) => height}px;
|
|
@@ -13,23 +13,8 @@ const StyledSvg = styled.svg`
|
|
|
13
13
|
}
|
|
14
14
|
`;
|
|
15
15
|
const CloseIcon = ({ size = 20 }) => {
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
19
|
-
width: size,
|
|
20
|
-
height: size,
|
|
21
|
-
viewBox: "0 0 24 24",
|
|
22
|
-
fill: "none",
|
|
23
|
-
stroke: theme.icon.close.strokeColor,
|
|
24
|
-
strokeWidth: "2",
|
|
25
|
-
strokeLinecap: "round",
|
|
26
|
-
strokeLinejoin: "round",
|
|
27
|
-
color: theme.icon.close.color,
|
|
28
|
-
children: [
|
|
29
|
-
_jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
|
|
30
|
-
_jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" }),
|
|
31
|
-
],
|
|
32
|
-
});
|
|
16
|
+
const { theme } = useMintMoneyConfig();
|
|
17
|
+
return (_jsxs(StyledSvg, { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: theme.icon.close.strokeColor, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", color: theme.icon.close.color, children: [_jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), _jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }));
|
|
33
18
|
};
|
|
34
19
|
export { CloseIcon };
|
|
35
|
-
//# sourceMappingURL=close.js.map
|
|
20
|
+
//# sourceMappingURL=close.js.map
|
|
@@ -1,9 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { Text } from "../text/index.js";
|
|
3
3
|
export const ListEmpty = ({ content }) => {
|
|
4
|
-
|
|
5
|
-
className: "mm-empty-list__container",
|
|
6
|
-
children: _jsx(Text, { size: "lg", children: content }),
|
|
7
|
-
});
|
|
4
|
+
return (_jsx("div", { className: "mm-empty-list__container", children: _jsx(Text, { size: "lg", children: content }) }));
|
|
8
5
|
};
|
|
9
|
-
//# sourceMappingURL=empty.js.map
|
|
6
|
+
//# sourceMappingURL=empty.js.map
|
|
@@ -1,54 +1,15 @@
|
|
|
1
|
-
import {
|
|
2
|
-
jsx as _jsx,
|
|
3
|
-
Fragment as _Fragment,
|
|
4
|
-
jsxs as _jsxs,
|
|
5
|
-
} from "react/jsx-runtime";
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
6
2
|
import { useMintMoneyConfig } from "../../context.js";
|
|
7
3
|
import { StyledButton } from "../buttons/index.js";
|
|
8
4
|
import { Loader } from "../loading/index.js";
|
|
9
5
|
import { Text } from "../text/index.js";
|
|
10
6
|
import { ListEmpty } from "./empty.js";
|
|
11
|
-
const SelectableList = ({
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
loading = false,
|
|
18
|
-
noItemsMsg = "No options available",
|
|
19
|
-
}) => {
|
|
20
|
-
const config = useMintMoneyConfig();
|
|
21
|
-
if (loading) {
|
|
22
|
-
return _jsx(Loader, { asChild: true });
|
|
23
|
-
}
|
|
24
|
-
return _jsxs(_Fragment, {
|
|
25
|
-
children: [
|
|
26
|
-
title &&
|
|
27
|
-
_jsx(Text, {
|
|
28
|
-
size: "base",
|
|
29
|
-
color: config.theme.font.color.secondary,
|
|
30
|
-
weight: "semibold",
|
|
31
|
-
children: title,
|
|
32
|
-
}),
|
|
33
|
-
_jsx("div", {
|
|
34
|
-
className: "mm-selectable-list__button-group",
|
|
35
|
-
children:
|
|
36
|
-
items.length > 0
|
|
37
|
-
? items.map((item) =>
|
|
38
|
-
_jsx(
|
|
39
|
-
StyledButton,
|
|
40
|
-
{
|
|
41
|
-
onClick: () => onSelect(item),
|
|
42
|
-
variant: "primary",
|
|
43
|
-
children: getLabel(item),
|
|
44
|
-
},
|
|
45
|
-
getKey(item),
|
|
46
|
-
),
|
|
47
|
-
)
|
|
48
|
-
: _jsx(ListEmpty, { content: noItemsMsg }),
|
|
49
|
-
}),
|
|
50
|
-
],
|
|
51
|
-
});
|
|
7
|
+
const SelectableList = ({ title, items, getKey, getLabel, onSelect, loading = false, noItemsMsg = "No options available", }) => {
|
|
8
|
+
const config = useMintMoneyConfig();
|
|
9
|
+
if (loading) {
|
|
10
|
+
return _jsx(Loader, { asChild: true });
|
|
11
|
+
}
|
|
12
|
+
return (_jsxs(_Fragment, { children: [title && (_jsx(Text, { size: "base", color: config.theme.font.color.secondary, weight: "semibold", children: title })), _jsx("div", { className: "mm-selectable-list__button-group", children: items.length > 0 ? (items.map((item) => (_jsx(StyledButton, { onClick: () => onSelect(item), variant: "primary", children: getLabel(item) }, getKey(item))))) : (_jsx(ListEmpty, { content: noItemsMsg })) })] }));
|
|
52
13
|
};
|
|
53
14
|
export { SelectableList, ListEmpty };
|
|
54
|
-
//# sourceMappingURL=index.js.map
|
|
15
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -1,52 +1,11 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useMintMoneyConfig } from "../../context.js";
|
|
3
|
-
const LoadingSvg = ({ color, width, height }) => {
|
|
4
|
-
|
|
5
|
-
width: width,
|
|
6
|
-
height: height,
|
|
7
|
-
viewBox: "0 0 280 280",
|
|
8
|
-
fill: "none",
|
|
9
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
10
|
-
children: [
|
|
11
|
-
_jsx("path", {
|
|
12
|
-
d: "M54.2176 109.195C58.1631 100.647 66.7189 95.1726 76.1339 95.1726H85.4871C90.2278 95.1726 93.555 99.8452 92.0042 104.325L80.4361 137.744C79.9302 139.206 79.9302 140.795 80.4361 142.256L92.0042 175.675C93.555 180.155 90.2278 184.828 85.4871 184.828H76.1339C66.7189 184.828 58.1631 179.354 54.2176 170.805L41.3339 142.89C40.4875 141.056 40.4875 138.944 41.3339 137.11L54.2176 109.195Z",
|
|
13
|
-
fill: color,
|
|
14
|
-
className: "loading-segment segment-4",
|
|
15
|
-
}),
|
|
16
|
-
_jsx("path", {
|
|
17
|
-
d: "M225.782 170.805C221.837 179.353 213.281 184.828 203.866 184.828L194.513 184.828C189.772 184.828 186.445 180.155 187.996 175.675L199.564 142.256C200.07 140.795 200.07 139.206 199.564 137.744L187.996 104.325C186.445 99.8451 189.772 95.1725 194.513 95.1725L203.866 95.1725C213.281 95.1725 221.837 100.647 225.782 109.195L238.666 137.11C239.512 138.944 239.512 141.056 238.666 142.89L225.782 170.805Z",
|
|
18
|
-
fill: color,
|
|
19
|
-
className: "loading-segment segment-2",
|
|
20
|
-
}),
|
|
21
|
-
_jsx("path", {
|
|
22
|
-
d: "M109.195 225.782C100.647 221.837 95.1724 213.281 95.1724 203.866L95.1724 194.513C95.1724 189.772 99.845 186.445 104.325 187.996L137.744 199.564C139.205 200.07 140.794 200.07 142.256 199.564L175.675 187.996C180.155 186.445 184.828 189.772 184.828 194.513L184.828 203.866C184.828 213.281 179.353 221.837 170.805 225.782L142.89 238.666C141.056 239.512 138.944 239.512 137.11 238.666L109.195 225.782Z",
|
|
23
|
-
fill: color,
|
|
24
|
-
className: "loading-segment segment-3",
|
|
25
|
-
}),
|
|
26
|
-
_jsx("path", {
|
|
27
|
-
d: "M170.805 54.2176C179.353 58.1631 184.828 66.7189 184.828 76.1339L184.828 85.4871C184.828 90.2278 180.155 93.555 175.675 92.0042L142.256 80.4361C140.795 79.9302 139.206 79.9302 137.744 80.4361L104.325 92.0042C99.8451 93.555 95.1725 90.2278 95.1725 85.4871L95.1725 76.1339C95.1725 66.7188 100.647 58.1631 109.195 54.2176L137.11 41.3339C138.944 40.4875 141.056 40.4875 142.89 41.3339L170.805 54.2176Z",
|
|
28
|
-
fill: color,
|
|
29
|
-
className: "loading-segment segment-1",
|
|
30
|
-
}),
|
|
31
|
-
],
|
|
32
|
-
});
|
|
3
|
+
const LoadingSvg = ({ color, width, height, }) => {
|
|
4
|
+
return (_jsxs("svg", { width: width, height: height, viewBox: "0 0 280 280", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M54.2176 109.195C58.1631 100.647 66.7189 95.1726 76.1339 95.1726H85.4871C90.2278 95.1726 93.555 99.8452 92.0042 104.325L80.4361 137.744C79.9302 139.206 79.9302 140.795 80.4361 142.256L92.0042 175.675C93.555 180.155 90.2278 184.828 85.4871 184.828H76.1339C66.7189 184.828 58.1631 179.354 54.2176 170.805L41.3339 142.89C40.4875 141.056 40.4875 138.944 41.3339 137.11L54.2176 109.195Z", fill: color, className: "loading-segment segment-4" }), _jsx("path", { d: "M225.782 170.805C221.837 179.353 213.281 184.828 203.866 184.828L194.513 184.828C189.772 184.828 186.445 180.155 187.996 175.675L199.564 142.256C200.07 140.795 200.07 139.206 199.564 137.744L187.996 104.325C186.445 99.8451 189.772 95.1725 194.513 95.1725L203.866 95.1725C213.281 95.1725 221.837 100.647 225.782 109.195L238.666 137.11C239.512 138.944 239.512 141.056 238.666 142.89L225.782 170.805Z", fill: color, className: "loading-segment segment-2" }), _jsx("path", { d: "M109.195 225.782C100.647 221.837 95.1724 213.281 95.1724 203.866L95.1724 194.513C95.1724 189.772 99.845 186.445 104.325 187.996L137.744 199.564C139.205 200.07 140.794 200.07 142.256 199.564L175.675 187.996C180.155 186.445 184.828 189.772 184.828 194.513L184.828 203.866C184.828 213.281 179.353 221.837 170.805 225.782L142.89 238.666C141.056 239.512 138.944 239.512 137.11 238.666L109.195 225.782Z", fill: color, className: "loading-segment segment-3" }), _jsx("path", { d: "M170.805 54.2176C179.353 58.1631 184.828 66.7189 184.828 76.1339L184.828 85.4871C184.828 90.2278 180.155 93.555 175.675 92.0042L142.256 80.4361C140.795 79.9302 139.206 79.9302 137.744 80.4361L104.325 92.0042C99.8451 93.555 95.1725 90.2278 95.1725 85.4871L95.1725 76.1339C95.1725 66.7188 100.647 58.1631 109.195 54.2176L137.11 41.3339C138.944 40.4875 141.056 40.4875 142.89 41.3339L170.805 54.2176Z", fill: color, className: "loading-segment segment-1" })] }));
|
|
33
5
|
};
|
|
34
|
-
const Loader = ({ width = 64, height = 64, asChild = false }) => {
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
? _jsx(LoadingSvg, {
|
|
38
|
-
color: config.theme.icon.loader.color,
|
|
39
|
-
width: width,
|
|
40
|
-
height: height,
|
|
41
|
-
})
|
|
42
|
-
: _jsx("div", {
|
|
43
|
-
className: "loading-container",
|
|
44
|
-
children: _jsx(LoadingSvg, {
|
|
45
|
-
color: config.theme.icon.loader.color,
|
|
46
|
-
width: width,
|
|
47
|
-
height: height,
|
|
48
|
-
}),
|
|
49
|
-
});
|
|
6
|
+
const Loader = ({ width = 64, height = 64, asChild = false, }) => {
|
|
7
|
+
const config = useMintMoneyConfig();
|
|
8
|
+
return asChild ? (_jsx(LoadingSvg, { color: config.theme.icon.loader.color, width: width, height: height })) : (_jsx("div", { className: "loading-container", children: _jsx(LoadingSvg, { color: config.theme.icon.loader.color, width: width, height: height }) }));
|
|
50
9
|
};
|
|
51
10
|
export { Loader };
|
|
52
|
-
//# sourceMappingURL=index.js.map
|
|
11
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -1,68 +1,29 @@
|
|
|
1
|
-
import {
|
|
2
|
-
jsx as _jsx,
|
|
3
|
-
Fragment as _Fragment,
|
|
4
|
-
jsxs as _jsxs,
|
|
5
|
-
} from "react/jsx-runtime";
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
6
2
|
import { useEffect } from "react";
|
|
7
3
|
import { Modal } from "./modal.js";
|
|
8
|
-
import {
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
className,
|
|
15
|
-
onOpenChange,
|
|
16
|
-
views,
|
|
17
|
-
initialView,
|
|
18
|
-
}) {
|
|
19
|
-
const { currentView, goToView, viewProps } = useModalWithView();
|
|
20
|
-
const currentViewConfig = views[currentView];
|
|
21
|
-
if (!currentViewConfig) {
|
|
22
|
-
throw new Error("No config provided");
|
|
23
|
-
}
|
|
24
|
-
useEffect(() => {
|
|
25
|
-
if (currentView.includes("success") || currentView.includes("error")) {
|
|
26
|
-
const timer = setTimeout(() => {
|
|
27
|
-
onOpenChange?.(false);
|
|
28
|
-
goToView(initialView);
|
|
29
|
-
}, 2000);
|
|
30
|
-
return () => clearTimeout(timer);
|
|
4
|
+
import { ModalWithViewProvider, useModalWithView, } from "./use-modal-with-views.js";
|
|
5
|
+
function ModalWithViewInner({ isOpen, className, onOpenChange, views, initialView, }) {
|
|
6
|
+
const { currentView, goToView, viewProps } = useModalWithView();
|
|
7
|
+
const currentViewConfig = views[currentView];
|
|
8
|
+
if (!currentViewConfig) {
|
|
9
|
+
throw new Error("No config provided");
|
|
31
10
|
}
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
},
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
className: "mm-modal-header",
|
|
47
|
-
children: currentViewConfig.header(viewProps),
|
|
48
|
-
}),
|
|
49
|
-
_jsx("div", {
|
|
50
|
-
className: "mm-modal-body",
|
|
51
|
-
children: currentViewConfig.content(viewProps),
|
|
52
|
-
}),
|
|
53
|
-
currentViewConfig.footer &&
|
|
54
|
-
_jsx("div", {
|
|
55
|
-
className: "mm-modal-footer",
|
|
56
|
-
children: currentViewConfig.footer(viewProps),
|
|
57
|
-
}),
|
|
58
|
-
],
|
|
59
|
-
}),
|
|
60
|
-
});
|
|
11
|
+
useEffect(() => {
|
|
12
|
+
if (currentView.includes("success") || currentView.includes("error")) {
|
|
13
|
+
const timer = setTimeout(() => {
|
|
14
|
+
onOpenChange?.(false);
|
|
15
|
+
goToView(initialView);
|
|
16
|
+
}, 2000);
|
|
17
|
+
return () => clearTimeout(timer);
|
|
18
|
+
}
|
|
19
|
+
return undefined;
|
|
20
|
+
}, [currentView, onOpenChange, goToView, initialView]);
|
|
21
|
+
return (_jsx(Modal, { className: className, title: currentViewConfig.title, open: isOpen, onOpenChange: (open) => {
|
|
22
|
+
onOpenChange?.(open);
|
|
23
|
+
goToView(initialView);
|
|
24
|
+
}, children: _jsxs(_Fragment, { children: [currentViewConfig.header && (_jsx("div", { className: "mm-modal-header", children: currentViewConfig.header(viewProps) })), _jsx("div", { className: "mm-modal-body", children: currentViewConfig.content(viewProps) }), currentViewConfig.footer && (_jsx("div", { className: "mm-modal-footer", children: currentViewConfig.footer(viewProps) }))] }) }));
|
|
61
25
|
}
|
|
62
26
|
export function ModalWithView(props) {
|
|
63
|
-
|
|
64
|
-
initialView: props.initialView,
|
|
65
|
-
children: _jsx(ModalWithViewInner, { ...props }),
|
|
66
|
-
});
|
|
27
|
+
return (_jsx(ModalWithViewProvider, { initialView: props.initialView, children: _jsx(ModalWithViewInner, { ...props }) }));
|
|
67
28
|
}
|
|
68
|
-
//# sourceMappingURL=modal-with-views.js.map
|
|
29
|
+
//# sourceMappingURL=modal-with-views.js.map
|
|
@@ -1,73 +1,17 @@
|
|
|
1
|
-
import {
|
|
2
|
-
jsx as _jsx,
|
|
3
|
-
Fragment as _Fragment,
|
|
4
|
-
jsxs as _jsxs,
|
|
5
|
-
} from "react/jsx-runtime";
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
6
2
|
import * as Dialog from "@radix-ui/react-dialog";
|
|
7
3
|
import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
|
|
8
4
|
import { useMintMoneyConfig } from "../../context.js";
|
|
9
5
|
import { CloseIcon } from "../icons/close.js";
|
|
10
6
|
import { Text } from "../text/index.js";
|
|
11
|
-
export const Modal = ({
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
})
|
|
20
|
-
const config = useMintMoneyConfig();
|
|
21
|
-
return _jsx(Dialog.Root, {
|
|
22
|
-
open: open,
|
|
23
|
-
onOpenChange: (open) => {
|
|
24
|
-
onOpenChange?.(open);
|
|
25
|
-
},
|
|
26
|
-
children: _jsxs(Dialog.Portal, {
|
|
27
|
-
children: [
|
|
28
|
-
_jsx(Dialog.Overlay, { className: "mm-modal-overlay" }),
|
|
29
|
-
_jsxs(Dialog.Content, {
|
|
30
|
-
className: `mm-modal-container ${className || ""}`,
|
|
31
|
-
onInteractOutside: (e) => {
|
|
32
|
-
if (disableCloseOnInteractOutside) {
|
|
33
|
-
e.preventDefault();
|
|
34
|
-
}
|
|
35
|
-
},
|
|
36
|
-
children: [
|
|
37
|
-
_jsx(VisuallyHidden, {
|
|
38
|
-
children: _jsx(Dialog.Title, { children: title }),
|
|
39
|
-
}),
|
|
40
|
-
_jsxs("div", {
|
|
41
|
-
className: "mm-modal-content",
|
|
42
|
-
children: [
|
|
43
|
-
_jsx("div", {
|
|
44
|
-
className: `mm-modal-nav`,
|
|
45
|
-
children:
|
|
46
|
-
navBarComponent ||
|
|
47
|
-
_jsxs(_Fragment, {
|
|
48
|
-
children: [
|
|
49
|
-
_jsx(Text, {
|
|
50
|
-
size: "xl",
|
|
51
|
-
weight: "semibold",
|
|
52
|
-
color: config.theme.font.color.primary,
|
|
53
|
-
children: title,
|
|
54
|
-
}),
|
|
55
|
-
_jsx(Dialog.Close, {
|
|
56
|
-
asChild: true,
|
|
57
|
-
children: _jsx("button", {
|
|
58
|
-
children: _jsx(CloseIcon, {}),
|
|
59
|
-
}),
|
|
60
|
-
}),
|
|
61
|
-
],
|
|
62
|
-
}),
|
|
63
|
-
}),
|
|
64
|
-
children,
|
|
65
|
-
],
|
|
66
|
-
}),
|
|
67
|
-
],
|
|
68
|
-
}),
|
|
69
|
-
],
|
|
70
|
-
}),
|
|
71
|
-
});
|
|
7
|
+
export const Modal = ({ className, open, onOpenChange, navBarComponent, disableCloseOnInteractOutside, title, children, }) => {
|
|
8
|
+
const config = useMintMoneyConfig();
|
|
9
|
+
return (_jsx(Dialog.Root, { open: open, onOpenChange: (open) => {
|
|
10
|
+
onOpenChange?.(open);
|
|
11
|
+
}, children: _jsxs(Dialog.Portal, { children: [_jsx(Dialog.Overlay, { className: "mm-modal-overlay" }), _jsxs(Dialog.Content, { className: `mm-modal-container ${className || ""}`, onInteractOutside: (e) => {
|
|
12
|
+
if (disableCloseOnInteractOutside) {
|
|
13
|
+
e.preventDefault();
|
|
14
|
+
}
|
|
15
|
+
}, children: [_jsx(VisuallyHidden, { children: _jsx(Dialog.Title, { children: title }) }), _jsxs("div", { className: "mm-modal-content", children: [_jsx("div", { className: `mm-modal-nav`, children: navBarComponent || (_jsxs(_Fragment, { children: [_jsx(Text, { size: "xl", weight: "semibold", color: config.theme.font.color.primary, children: title }), _jsx(Dialog.Close, { asChild: true, children: _jsx("button", { children: _jsx(CloseIcon, {}) }) })] })) }), children] })] })] }) }));
|
|
72
16
|
};
|
|
73
|
-
//# sourceMappingURL=modal.js.map
|
|
17
|
+
//# sourceMappingURL=modal.js.map
|