@aclymatepackages/modules 2.1.20 → 2.1.23
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/components/CompanyOnboardingInput.js +2 -0
- package/dist/components/PdlCompanySelect.js +9 -3
- package/dist/components/PlacesAutocomplete.js +4 -1
- package/dist/components/ReportSummaryBlock.js +1 -2
- package/dist/index.js +0 -14
- package/package.json +3 -4
- package/src/components/CompanyOnboardingInput.js +2 -0
- package/src/components/PdlCompanySelect.js +18 -11
- package/src/components/PlacesAutocomplete.js +3 -0
- package/src/components/ReportSummaryBlock.js +1 -1
- package/src/index.js +0 -4
- package/dist/components/StripeElements.js +0 -94
- package/dist/components/stripeInput.js +0 -291
- package/src/components/StripeElements.js +0 -95
- package/src/components/stripeInput.js +0 -288
|
@@ -26,6 +26,7 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
|
|
|
26
26
|
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
27
27
|
const CompanyOnboardingInput = _ref => {
|
|
28
28
|
let {
|
|
29
|
+
appCheckToken,
|
|
29
30
|
companyName,
|
|
30
31
|
header,
|
|
31
32
|
onFormComplete,
|
|
@@ -60,6 +61,7 @@ const CompanyOnboardingInput = _ref => {
|
|
|
60
61
|
}, {
|
|
61
62
|
value: location,
|
|
62
63
|
input: /*#__PURE__*/_react.default.createElement(PlacesAutocompleteComponent, {
|
|
64
|
+
appCheckToken: appCheckToken,
|
|
63
65
|
place: location,
|
|
64
66
|
editPlace: editInputData("location"),
|
|
65
67
|
size: "small",
|
|
@@ -12,6 +12,7 @@ var _material = require("@mui/material");
|
|
|
12
12
|
var _Check = _interopRequireDefault(require("@mui/icons-material/Check"));
|
|
13
13
|
var _Search = _interopRequireDefault(require("@mui/icons-material/Search"));
|
|
14
14
|
var _atoms = require("@aclymatepackages/atoms");
|
|
15
|
+
var _themes = require("@aclymatepackages/themes");
|
|
15
16
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
16
17
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
17
18
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
@@ -24,6 +25,8 @@ const CompanySelectionChip = _ref => {
|
|
|
24
25
|
} = _ref;
|
|
25
26
|
return /*#__PURE__*/_react.default.createElement(_material.Grid, {
|
|
26
27
|
item: true
|
|
28
|
+
}, /*#__PURE__*/_react.default.createElement(_material.ThemeProvider, {
|
|
29
|
+
theme: _themes.mainTheme
|
|
27
30
|
}, /*#__PURE__*/_react.default.createElement(_material.Chip, {
|
|
28
31
|
label: name,
|
|
29
32
|
style: {
|
|
@@ -36,12 +39,13 @@ const CompanySelectionChip = _ref => {
|
|
|
36
39
|
}
|
|
37
40
|
}),
|
|
38
41
|
color: isSelected ? "primary" : "default"
|
|
39
|
-
}));
|
|
42
|
+
})));
|
|
40
43
|
};
|
|
41
44
|
const PdlCompanySelect = _ref2 => {
|
|
42
45
|
let {
|
|
43
46
|
onCompanyNotFound,
|
|
44
47
|
onCompanySelected,
|
|
48
|
+
onSelectClick = () => {},
|
|
45
49
|
matchingFunction,
|
|
46
50
|
label = "Enter your company's name",
|
|
47
51
|
actionLabel = "Please select your company from these options"
|
|
@@ -62,9 +66,11 @@ const PdlCompanySelect = _ref2 => {
|
|
|
62
66
|
const onSelectCompany = async (companyId, name) => {
|
|
63
67
|
setNextStepLoading(true);
|
|
64
68
|
if (!companyId || companyId === "none") {
|
|
65
|
-
|
|
69
|
+
await onCompanyNotFound(name);
|
|
70
|
+
return onSelectClick();
|
|
66
71
|
}
|
|
67
|
-
|
|
72
|
+
await onCompanySelected(companyId, name);
|
|
73
|
+
return onSelectClick();
|
|
68
74
|
};
|
|
69
75
|
const selectedCompany = matchingCompanies.find(_ref3 => {
|
|
70
76
|
let {
|
|
@@ -15,6 +15,7 @@ require("core-js/modules/esnext.string.replace-all.js");
|
|
|
15
15
|
require("core-js/modules/web.dom-collections.iterator.js");
|
|
16
16
|
var _react = _interopRequireWildcard(require("react"));
|
|
17
17
|
var _parse = _interopRequireDefault(require("autosuggest-highlight/parse"));
|
|
18
|
+
var _appCheck = require("firebase/app-check");
|
|
18
19
|
var _Autocomplete = _interopRequireDefault(require("@mui/lab/Autocomplete"));
|
|
19
20
|
var _material = require("@mui/material");
|
|
20
21
|
var _fetchAclymateApi = _interopRequireDefault(require("@aclymatepackages/fetch-aclymate-api"));
|
|
@@ -43,7 +44,8 @@ const PlacesAutocomplete = _ref => {
|
|
|
43
44
|
id,
|
|
44
45
|
style,
|
|
45
46
|
textFieldProps,
|
|
46
|
-
coordinates
|
|
47
|
+
coordinates,
|
|
48
|
+
appCheckToken
|
|
47
49
|
} = _ref;
|
|
48
50
|
const [inputValue, setInputValue] = (0, _react.useState)("");
|
|
49
51
|
const [options, setOptions] = (0, _react.useState)([]);
|
|
@@ -66,6 +68,7 @@ const PlacesAutocomplete = _ref => {
|
|
|
66
68
|
return data.predictions;
|
|
67
69
|
};
|
|
68
70
|
return await (0, _fetchAclymateApi.default)({
|
|
71
|
+
appCheckToken,
|
|
69
72
|
path: "/google-maps/autocomplete/".concat(dataString),
|
|
70
73
|
method: "GET",
|
|
71
74
|
signal,
|
|
@@ -8,7 +8,6 @@ require("core-js/modules/web.dom-collections.iterator.js");
|
|
|
8
8
|
var _react = _interopRequireDefault(require("react"));
|
|
9
9
|
var _material = require("@mui/material");
|
|
10
10
|
var _otherHelpers = require("@aclymatepackages/other-helpers");
|
|
11
|
-
var _emissionsCalcs = require("@aclymatepackages/emissions-calcs");
|
|
12
11
|
var _ReportGraphContentLayout = _interopRequireDefault(require("./ReportGraphContentLayout"));
|
|
13
12
|
var _EmissionsPieChart = _interopRequireDefault(require("./EmissionsPieChart"));
|
|
14
13
|
var _EmissionsSummarySentence = _interopRequireDefault(require("./EmissionsSummarySentence"));
|
|
@@ -30,7 +29,7 @@ const ReportSummaryBlock = _ref => {
|
|
|
30
29
|
const {
|
|
31
30
|
scope
|
|
32
31
|
} = scopeObj;
|
|
33
|
-
const scopeEmissions = (0,
|
|
32
|
+
const scopeEmissions = (0, _otherHelpers.filterEmissionsByScope)(emissions, scope);
|
|
34
33
|
return _objectSpread(_objectSpread({}, scopeObj), {}, {
|
|
35
34
|
emissions: scopeEmissions
|
|
36
35
|
});
|
package/dist/index.js
CHANGED
|
@@ -99,12 +99,6 @@ Object.defineProperty(exports, "ReportSummaryBlock", {
|
|
|
99
99
|
return _ReportSummaryBlock.default;
|
|
100
100
|
}
|
|
101
101
|
});
|
|
102
|
-
Object.defineProperty(exports, "StripeElements", {
|
|
103
|
-
enumerable: true,
|
|
104
|
-
get: function get() {
|
|
105
|
-
return _StripeElements.default;
|
|
106
|
-
}
|
|
107
|
-
});
|
|
108
102
|
Object.defineProperty(exports, "YesNoQuestion", {
|
|
109
103
|
enumerable: true,
|
|
110
104
|
get: function get() {
|
|
@@ -117,12 +111,6 @@ Object.defineProperty(exports, "useChartWarningLabels", {
|
|
|
117
111
|
return _useChartWarningLabels.default;
|
|
118
112
|
}
|
|
119
113
|
});
|
|
120
|
-
Object.defineProperty(exports, "useStripeInput", {
|
|
121
|
-
enumerable: true,
|
|
122
|
-
get: function get() {
|
|
123
|
-
return _stripeInput.default;
|
|
124
|
-
}
|
|
125
|
-
});
|
|
126
114
|
var _AccountingChart = _interopRequireDefault(require("./components/AccountingChart"));
|
|
127
115
|
var _FootprintVideo = _interopRequireDefault(require("./components/FootprintVideo"));
|
|
128
116
|
var _IndustryAutocomplete = _interopRequireDefault(require("./components/IndustryAutocomplete"));
|
|
@@ -130,8 +118,6 @@ var _PlacesAutocomplete = _interopRequireDefault(require("./components/PlacesAut
|
|
|
130
118
|
var _YesNoQuestion = _interopRequireDefault(require("./components/YesNoQuestion"));
|
|
131
119
|
var _FootprintEquivalencies = _interopRequireDefault(require("./components/FootprintEquivalencies"));
|
|
132
120
|
var _ComparisonChart = _interopRequireDefault(require("./components/ComparisonChart"));
|
|
133
|
-
var _stripeInput = _interopRequireDefault(require("./components/stripeInput"));
|
|
134
|
-
var _StripeElements = _interopRequireDefault(require("./components/StripeElements"));
|
|
135
121
|
var _EmissionsReductionGraph = _interopRequireDefault(require("./components/EmissionsReductionGraph"));
|
|
136
122
|
var _CompanyOnboardingInput = _interopRequireDefault(require("./components/CompanyOnboardingInput"));
|
|
137
123
|
var _CustomTooltipDisplayRow = _interopRequireDefault(require("./components/CustomTooltipDisplayRow"));
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@aclymatepackages/modules",
|
|
3
|
-
"version": "2.1.
|
|
3
|
+
"version": "2.1.23",
|
|
4
4
|
"description": "Aclymate modules",
|
|
5
5
|
"author": "William Loopesko",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -9,12 +9,11 @@
|
|
|
9
9
|
"@aclymatepackages/atoms": "^3.0.8",
|
|
10
10
|
"@aclymatepackages/chart-helpers": "^2.0.5",
|
|
11
11
|
"@aclymatepackages/converters": "^1.0.0",
|
|
12
|
-
"@aclymatepackages/
|
|
13
|
-
"@aclymatepackages/fetch-aclymate-api": "^1.0.0",
|
|
12
|
+
"@aclymatepackages/fetch-aclymate-api": "^2.1.6",
|
|
14
13
|
"@aclymatepackages/formatters": "^1.0.0",
|
|
15
14
|
"@aclymatepackages/lists": "^1.0.0",
|
|
16
15
|
"@aclymatepackages/multi-part-form": "^2.0.1",
|
|
17
|
-
"@aclymatepackages/other-helpers": "^1.0.
|
|
16
|
+
"@aclymatepackages/other-helpers": "^1.0.9",
|
|
18
17
|
"@aclymatepackages/reg-exp": "^1.0.0",
|
|
19
18
|
"@aclymatepackages/subcategories": "^3.1.6",
|
|
20
19
|
"@aclymatepackages/themes": "^3.0.7",
|
|
@@ -13,6 +13,7 @@ import YesNoQuestion from "./YesNoQuestion";
|
|
|
13
13
|
import PlacesAutocompleteModule from "./PlacesAutocomplete";
|
|
14
14
|
|
|
15
15
|
const CompanyOnboardingInput = ({
|
|
16
|
+
appCheckToken,
|
|
16
17
|
companyName,
|
|
17
18
|
header,
|
|
18
19
|
onFormComplete,
|
|
@@ -55,6 +56,7 @@ const CompanyOnboardingInput = ({
|
|
|
55
56
|
value: location,
|
|
56
57
|
input: (
|
|
57
58
|
<PlacesAutocompleteComponent
|
|
59
|
+
appCheckToken={appCheckToken}
|
|
58
60
|
place={location}
|
|
59
61
|
editPlace={editInputData("location")}
|
|
60
62
|
size="small"
|
|
@@ -7,11 +7,13 @@ import {
|
|
|
7
7
|
CircularProgress,
|
|
8
8
|
IconButton,
|
|
9
9
|
Typography,
|
|
10
|
+
ThemeProvider,
|
|
10
11
|
} from "@mui/material";
|
|
11
12
|
import CheckIcon from "@mui/icons-material/Check";
|
|
12
13
|
import SearchIcon from "@mui/icons-material/Search";
|
|
13
14
|
|
|
14
15
|
import { TextField, LoadingButton } from "@aclymatepackages/atoms";
|
|
16
|
+
import { mainTheme } from "@aclymatepackages/themes";
|
|
15
17
|
|
|
16
18
|
const CompanySelectionChip = ({
|
|
17
19
|
id,
|
|
@@ -20,21 +22,24 @@ const CompanySelectionChip = ({
|
|
|
20
22
|
setSelectedCompanyId,
|
|
21
23
|
}) => (
|
|
22
24
|
<Grid item>
|
|
23
|
-
<
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
25
|
+
<ThemeProvider theme={mainTheme}>
|
|
26
|
+
<Chip
|
|
27
|
+
label={name}
|
|
28
|
+
style={{ color: isSelected ? "white" : "inherit" }}
|
|
29
|
+
onClick={() =>
|
|
30
|
+
setSelectedCompanyId((currentId) => (currentId === id ? null : id))
|
|
31
|
+
}
|
|
32
|
+
icon={isSelected && <CheckIcon style={{ color: "white" }} />}
|
|
33
|
+
color={isSelected ? "primary" : "default"}
|
|
34
|
+
/>
|
|
35
|
+
</ThemeProvider>
|
|
32
36
|
</Grid>
|
|
33
37
|
);
|
|
34
38
|
|
|
35
39
|
const PdlCompanySelect = ({
|
|
36
40
|
onCompanyNotFound,
|
|
37
41
|
onCompanySelected,
|
|
42
|
+
onSelectClick = () => {},
|
|
38
43
|
matchingFunction,
|
|
39
44
|
label = "Enter your company's name",
|
|
40
45
|
actionLabel = "Please select your company from these options",
|
|
@@ -59,10 +64,12 @@ const PdlCompanySelect = ({
|
|
|
59
64
|
const onSelectCompany = async (companyId, name) => {
|
|
60
65
|
setNextStepLoading(true);
|
|
61
66
|
if (!companyId || companyId === "none") {
|
|
62
|
-
|
|
67
|
+
await onCompanyNotFound(name);
|
|
68
|
+
return onSelectClick();
|
|
63
69
|
}
|
|
64
70
|
|
|
65
|
-
|
|
71
|
+
await onCompanySelected(companyId, name);
|
|
72
|
+
return onSelectClick();
|
|
66
73
|
};
|
|
67
74
|
|
|
68
75
|
const selectedCompany = matchingCompanies.find(
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React, { useState, useEffect, useCallback } from "react";
|
|
2
2
|
import parse from "autosuggest-highlight/parse";
|
|
3
|
+
import { getToken } from "firebase/app-check";
|
|
3
4
|
|
|
4
5
|
import Autocomplete from "@mui/lab/Autocomplete";
|
|
5
6
|
import { Grid, Typography, TextField } from "@mui/material";
|
|
@@ -23,6 +24,7 @@ const PlacesAutocomplete = ({
|
|
|
23
24
|
style,
|
|
24
25
|
textFieldProps,
|
|
25
26
|
coordinates,
|
|
27
|
+
appCheckToken,
|
|
26
28
|
}) => {
|
|
27
29
|
const [inputValue, setInputValue] = useState("");
|
|
28
30
|
const [options, setOptions] = useState([]);
|
|
@@ -44,6 +46,7 @@ const PlacesAutocomplete = ({
|
|
|
44
46
|
};
|
|
45
47
|
|
|
46
48
|
return await fetchAclymateApi({
|
|
49
|
+
appCheckToken,
|
|
47
50
|
path: `/google-maps/autocomplete/${dataString}`,
|
|
48
51
|
method: "GET",
|
|
49
52
|
signal,
|
|
@@ -3,7 +3,7 @@ import React from "react";
|
|
|
3
3
|
import { Typography } from "@mui/material";
|
|
4
4
|
|
|
5
5
|
import { buildEmissionsSummarySentence } from "@aclymatepackages/other-helpers";
|
|
6
|
-
import { filterEmissionsByScope } from "@aclymatepackages/
|
|
6
|
+
import { filterEmissionsByScope } from "@aclymatepackages/other-helpers";
|
|
7
7
|
|
|
8
8
|
import ReportGraphContentLayout from "./ReportGraphContentLayout";
|
|
9
9
|
import EmissionsPieChart from "./EmissionsPieChart";
|
package/src/index.js
CHANGED
|
@@ -5,8 +5,6 @@ import PlacesAutocomplete from "./components/PlacesAutocomplete";
|
|
|
5
5
|
import YesNoQuestion from "./components/YesNoQuestion";
|
|
6
6
|
import FootprintEquivalencies from "./components/FootprintEquivalencies";
|
|
7
7
|
import ComparisonChart from "./components/ComparisonChart";
|
|
8
|
-
import useStripeInput from "./components/stripeInput";
|
|
9
|
-
import StripeElements from "./components/StripeElements";
|
|
10
8
|
import EmissionsReductionGraph from "./components/EmissionsReductionGraph";
|
|
11
9
|
import CompanyOnboardingInput from "./components/CompanyOnboardingInput";
|
|
12
10
|
import CustomTooltipDisplayRow from "./components/CustomTooltipDisplayRow";
|
|
@@ -27,8 +25,6 @@ export {
|
|
|
27
25
|
YesNoQuestion,
|
|
28
26
|
FootprintEquivalencies,
|
|
29
27
|
ComparisonChart,
|
|
30
|
-
useStripeInput,
|
|
31
|
-
StripeElements,
|
|
32
28
|
EmissionsReductionGraph,
|
|
33
29
|
CompanyOnboardingInput,
|
|
34
30
|
CustomTooltipDisplayRow,
|
|
@@ -1,94 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
require("core-js/modules/es.object.assign.js");
|
|
4
|
-
require("core-js/modules/es.weak-map.js");
|
|
5
|
-
Object.defineProperty(exports, "__esModule", {
|
|
6
|
-
value: true
|
|
7
|
-
});
|
|
8
|
-
exports.default = void 0;
|
|
9
|
-
require("core-js/modules/es.promise.js");
|
|
10
|
-
require("core-js/modules/web.dom-collections.iterator.js");
|
|
11
|
-
var _react = _interopRequireWildcard(require("react"));
|
|
12
|
-
var _reactStripeJs = require("@stripe/react-stripe-js");
|
|
13
|
-
var _stripeJs = require("@stripe/stripe-js");
|
|
14
|
-
var _material = require("@mui/material");
|
|
15
|
-
var _fetchAclymateApi = _interopRequireDefault(require("@aclymatepackages/fetch-aclymate-api"));
|
|
16
|
-
const _excluded = ["stripePublishableKey", "children"];
|
|
17
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
18
|
-
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
19
|
-
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
20
|
-
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
21
|
-
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
22
|
-
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
23
|
-
const StripeElementsWrapper = _ref => {
|
|
24
|
-
let {
|
|
25
|
-
accountData,
|
|
26
|
-
accountCollection,
|
|
27
|
-
loadingComponent,
|
|
28
|
-
baseFetchHost,
|
|
29
|
-
stripePromise,
|
|
30
|
-
children
|
|
31
|
-
} = _ref;
|
|
32
|
-
const [stripeClientSecret, setStripeClientSecret] = (0, _react.useState)("");
|
|
33
|
-
const {
|
|
34
|
-
id: accountId,
|
|
35
|
-
stripeCustomerId: accountDataCustomerId,
|
|
36
|
-
billing = {}
|
|
37
|
-
} = accountData;
|
|
38
|
-
const {
|
|
39
|
-
stripeCustomerId: billingObjStripeCustomerId
|
|
40
|
-
} = billing;
|
|
41
|
-
(0, _react.useEffect)(() => {
|
|
42
|
-
const getStripeClientSecret = async () => {
|
|
43
|
-
const {
|
|
44
|
-
clientSecret
|
|
45
|
-
} = await (0, _fetchAclymateApi.default)({
|
|
46
|
-
path: "/stripe/create-setup-intent",
|
|
47
|
-
method: "POST",
|
|
48
|
-
data: {
|
|
49
|
-
accountId,
|
|
50
|
-
accountType: accountCollection,
|
|
51
|
-
customerId: billingObjStripeCustomerId || accountDataCustomerId
|
|
52
|
-
},
|
|
53
|
-
callback: response => response,
|
|
54
|
-
baseFetchHost
|
|
55
|
-
});
|
|
56
|
-
setStripeClientSecret(clientSecret);
|
|
57
|
-
};
|
|
58
|
-
if (!stripeClientSecret) {
|
|
59
|
-
getStripeClientSecret();
|
|
60
|
-
}
|
|
61
|
-
}, [stripeClientSecret, accountDataCustomerId, accountId, billingObjStripeCustomerId, accountCollection, baseFetchHost]);
|
|
62
|
-
const appearance = {
|
|
63
|
-
theme: "stripe",
|
|
64
|
-
variables: {
|
|
65
|
-
colorPrimary: "#27aae1",
|
|
66
|
-
colorBackground: "fafafa"
|
|
67
|
-
}
|
|
68
|
-
};
|
|
69
|
-
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !stripeClientSecret ? loadingComponent ? /*#__PURE__*/_react.default.createElement(_material.Grid, {
|
|
70
|
-
container: true,
|
|
71
|
-
justifyContent: "center",
|
|
72
|
-
spacing: 2
|
|
73
|
-
}, /*#__PURE__*/_react.default.createElement(_material.Grid, {
|
|
74
|
-
item: true
|
|
75
|
-
}, loadingComponent)) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null) : /*#__PURE__*/_react.default.createElement(_reactStripeJs.Elements, {
|
|
76
|
-
stripe: stripePromise,
|
|
77
|
-
options: {
|
|
78
|
-
clientSecret: stripeClientSecret,
|
|
79
|
-
appearance
|
|
80
|
-
}
|
|
81
|
-
}, children));
|
|
82
|
-
};
|
|
83
|
-
const StripeElements = _ref2 => {
|
|
84
|
-
let {
|
|
85
|
-
stripePublishableKey,
|
|
86
|
-
children
|
|
87
|
-
} = _ref2,
|
|
88
|
-
otherProps = _objectWithoutProperties(_ref2, _excluded);
|
|
89
|
-
const stripePromise = (0, _stripeJs.loadStripe)(stripePublishableKey);
|
|
90
|
-
return /*#__PURE__*/_react.default.createElement(StripeElementsWrapper, _extends({
|
|
91
|
-
stripePromise: stripePromise
|
|
92
|
-
}, otherProps), children);
|
|
93
|
-
};
|
|
94
|
-
var _default = exports.default = StripeElements;
|
|
@@ -1,291 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
require("core-js/modules/es.weak-map.js");
|
|
4
|
-
Object.defineProperty(exports, "__esModule", {
|
|
5
|
-
value: true
|
|
6
|
-
});
|
|
7
|
-
exports.default = void 0;
|
|
8
|
-
require("core-js/modules/es.promise.js");
|
|
9
|
-
require("core-js/modules/web.dom-collections.iterator.js");
|
|
10
|
-
var _react = _interopRequireWildcard(require("react"));
|
|
11
|
-
var _dayjs = _interopRequireDefault(require("dayjs"));
|
|
12
|
-
var _reactStripeJs = require("@stripe/react-stripe-js");
|
|
13
|
-
var _material = require("@mui/material");
|
|
14
|
-
var _atoms = require("@aclymatepackages/atoms");
|
|
15
|
-
var _otherHelpers = require("@aclymatepackages/other-helpers");
|
|
16
|
-
var _fetchAclymateApi = _interopRequireDefault(require("@aclymatepackages/fetch-aclymate-api"));
|
|
17
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
18
|
-
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
19
|
-
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
20
|
-
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
21
|
-
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
22
|
-
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
23
|
-
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
|
|
24
|
-
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
25
|
-
const StripeSubmitButton = _ref => {
|
|
26
|
-
let {
|
|
27
|
-
stripeSubmit,
|
|
28
|
-
stripeError,
|
|
29
|
-
isStripeComplete,
|
|
30
|
-
buttonText
|
|
31
|
-
} = _ref;
|
|
32
|
-
const [saveLoading, setSaveLoading] = (0, _react.useState)(false);
|
|
33
|
-
const handleSave = async () => {
|
|
34
|
-
setSaveLoading(true);
|
|
35
|
-
await stripeSubmit();
|
|
36
|
-
return setSaveLoading(false);
|
|
37
|
-
};
|
|
38
|
-
return /*#__PURE__*/_react.default.createElement(_atoms.LoadingButton, {
|
|
39
|
-
isLoading: saveLoading,
|
|
40
|
-
label: buttonText || "Save Payment Info",
|
|
41
|
-
color: "secondary",
|
|
42
|
-
disabled: !isStripeComplete || !(0, _otherHelpers.isObjectEmpty)(stripeError),
|
|
43
|
-
onClick: () => handleSave()
|
|
44
|
-
});
|
|
45
|
-
};
|
|
46
|
-
const CardInput = _ref2 => {
|
|
47
|
-
let {
|
|
48
|
-
options,
|
|
49
|
-
setCardData
|
|
50
|
-
} = _ref2;
|
|
51
|
-
const defaultOptions = {
|
|
52
|
-
fields: {
|
|
53
|
-
billingDetails: {
|
|
54
|
-
name: "never",
|
|
55
|
-
email: "never"
|
|
56
|
-
}
|
|
57
|
-
},
|
|
58
|
-
wallets: {
|
|
59
|
-
applePay: "never",
|
|
60
|
-
googlePay: "never"
|
|
61
|
-
},
|
|
62
|
-
business: {
|
|
63
|
-
name: "Aclymate"
|
|
64
|
-
}
|
|
65
|
-
};
|
|
66
|
-
return /*#__PURE__*/_react.default.createElement(_reactStripeJs.PaymentElement, {
|
|
67
|
-
options: options || defaultOptions,
|
|
68
|
-
onChange: e => setCardData(e)
|
|
69
|
-
});
|
|
70
|
-
};
|
|
71
|
-
const StripeInputForm = _ref3 => {
|
|
72
|
-
let {
|
|
73
|
-
style,
|
|
74
|
-
options,
|
|
75
|
-
error = {},
|
|
76
|
-
setCardData
|
|
77
|
-
} = _ref3;
|
|
78
|
-
const {
|
|
79
|
-
message
|
|
80
|
-
} = error;
|
|
81
|
-
const CardError = () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, message && /*#__PURE__*/_react.default.createElement(_material.Typography, {
|
|
82
|
-
variant: "caption",
|
|
83
|
-
color: "error"
|
|
84
|
-
}, message));
|
|
85
|
-
if (style) {
|
|
86
|
-
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_material.Box, {
|
|
87
|
-
p: 2,
|
|
88
|
-
style: style
|
|
89
|
-
}, /*#__PURE__*/_react.default.createElement(CardInput, {
|
|
90
|
-
options: options,
|
|
91
|
-
setCardData: setCardData
|
|
92
|
-
})), /*#__PURE__*/_react.default.createElement(CardError, null));
|
|
93
|
-
}
|
|
94
|
-
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(CardInput, {
|
|
95
|
-
options: options,
|
|
96
|
-
setCardData: setCardData
|
|
97
|
-
}), /*#__PURE__*/_react.default.createElement(CardError, null));
|
|
98
|
-
};
|
|
99
|
-
const useStripeInput = _ref4 => {
|
|
100
|
-
let {
|
|
101
|
-
onButtonClick,
|
|
102
|
-
accountData,
|
|
103
|
-
authUser,
|
|
104
|
-
updateAccountData,
|
|
105
|
-
confirmSetupReturnUrl = "",
|
|
106
|
-
baseFetchHost,
|
|
107
|
-
buttonText
|
|
108
|
-
} = _ref4;
|
|
109
|
-
const stripe = (0, _reactStripeJs.useStripe)();
|
|
110
|
-
const elements = (0, _reactStripeJs.useElements)();
|
|
111
|
-
const {
|
|
112
|
-
stripeCustomerId: accountObjStripeCustomerId,
|
|
113
|
-
billing = {},
|
|
114
|
-
name: accountName
|
|
115
|
-
} = accountData || {};
|
|
116
|
-
const {
|
|
117
|
-
stripeCustomerId: billingObjStripeCustomerId
|
|
118
|
-
} = billing;
|
|
119
|
-
const [paymentData, setPaymentData] = (0, _react.useState)({});
|
|
120
|
-
const {
|
|
121
|
-
error: stripeError,
|
|
122
|
-
complete: isStripeComplete
|
|
123
|
-
} = paymentData;
|
|
124
|
-
const createBillingDetailsFullName = () => {
|
|
125
|
-
const {
|
|
126
|
-
displayName
|
|
127
|
-
} = authUser;
|
|
128
|
-
const [firstCompanyWord] = accountName.split(" ");
|
|
129
|
-
const [firstName, lastName] = displayName.split(" ");
|
|
130
|
-
if (!lastName) {
|
|
131
|
-
return "".concat(firstName, " ").concat(firstCompanyWord);
|
|
132
|
-
}
|
|
133
|
-
return "".concat(firstName, " ").concat(lastName);
|
|
134
|
-
};
|
|
135
|
-
const updateAccountBilling = async updateObj => {
|
|
136
|
-
await updateAccountData(updateObj);
|
|
137
|
-
if (onButtonClick) {
|
|
138
|
-
return await onButtonClick(updateObj);
|
|
139
|
-
}
|
|
140
|
-
return updateObj;
|
|
141
|
-
};
|
|
142
|
-
const createStripePaymentMethod = async () => {
|
|
143
|
-
const {
|
|
144
|
-
email
|
|
145
|
-
} = authUser;
|
|
146
|
-
const billingDetailsFullName = createBillingDetailsFullName();
|
|
147
|
-
const {
|
|
148
|
-
setupIntent,
|
|
149
|
-
error
|
|
150
|
-
} = await stripe.confirmSetup({
|
|
151
|
-
elements,
|
|
152
|
-
confirmParams: {
|
|
153
|
-
return_url: confirmSetupReturnUrl,
|
|
154
|
-
payment_method_data: {
|
|
155
|
-
billing_details: {
|
|
156
|
-
name: billingDetailsFullName,
|
|
157
|
-
email
|
|
158
|
-
}
|
|
159
|
-
}
|
|
160
|
-
},
|
|
161
|
-
redirect: "if_required"
|
|
162
|
-
});
|
|
163
|
-
if (error) {
|
|
164
|
-
setPaymentData(data => _objectSpread(_objectSpread({}, data), {}, {
|
|
165
|
-
error
|
|
166
|
-
}));
|
|
167
|
-
return false;
|
|
168
|
-
}
|
|
169
|
-
const {
|
|
170
|
-
payment_method,
|
|
171
|
-
status
|
|
172
|
-
} = setupIntent;
|
|
173
|
-
const paymentMethod = await (0, _fetchAclymateApi.default)({
|
|
174
|
-
path: "/stripe/get-payment-method-data",
|
|
175
|
-
method: "POST",
|
|
176
|
-
data: {
|
|
177
|
-
paymentMethodId: payment_method
|
|
178
|
-
},
|
|
179
|
-
baseFetchHost,
|
|
180
|
-
callback: res => res
|
|
181
|
-
});
|
|
182
|
-
return _objectSpread(_objectSpread({}, paymentMethod), {}, {
|
|
183
|
-
status
|
|
184
|
-
});
|
|
185
|
-
};
|
|
186
|
-
const savePaymentMethod = async paymentMethod => {
|
|
187
|
-
const {
|
|
188
|
-
paymentMethodId: existingPaymentMethodId,
|
|
189
|
-
subscriptions
|
|
190
|
-
} = billing;
|
|
191
|
-
const existingSubscriptionsObj = subscriptions ? {
|
|
192
|
-
subscriptions
|
|
193
|
-
} : {};
|
|
194
|
-
const {
|
|
195
|
-
type
|
|
196
|
-
} = paymentMethod;
|
|
197
|
-
if (existingPaymentMethodId && authUser) {
|
|
198
|
-
await (0, _fetchAclymateApi.default)({
|
|
199
|
-
path: "/stripe/detach-payment-method",
|
|
200
|
-
method: "POST",
|
|
201
|
-
data: {
|
|
202
|
-
paymentMethodId: existingPaymentMethodId
|
|
203
|
-
},
|
|
204
|
-
baseFetchHost
|
|
205
|
-
});
|
|
206
|
-
}
|
|
207
|
-
const generateCardBillingAccountObj = () => {
|
|
208
|
-
const {
|
|
209
|
-
card,
|
|
210
|
-
id: newPaymentMethodId
|
|
211
|
-
} = paymentMethod;
|
|
212
|
-
const {
|
|
213
|
-
brand,
|
|
214
|
-
exp_month,
|
|
215
|
-
exp_year,
|
|
216
|
-
last4
|
|
217
|
-
} = card;
|
|
218
|
-
const daysInMonth = (0, _dayjs.default)("".concat(exp_year, "-").concat(exp_month, "-01")).daysInMonth();
|
|
219
|
-
const expirationDate = (0, _dayjs.default)("".concat(exp_year, "-").concat(exp_month, "-").concat(daysInMonth)).toDate();
|
|
220
|
-
return {
|
|
221
|
-
billing: _objectSpread({
|
|
222
|
-
card: {
|
|
223
|
-
brand,
|
|
224
|
-
expiration: "".concat(exp_month, "/").concat(exp_year),
|
|
225
|
-
expirationDate,
|
|
226
|
-
last4
|
|
227
|
-
},
|
|
228
|
-
paymentMethodId: newPaymentMethodId
|
|
229
|
-
}, existingSubscriptionsObj),
|
|
230
|
-
stripeCustomerId: billingObjStripeCustomerId || accountObjStripeCustomerId
|
|
231
|
-
};
|
|
232
|
-
};
|
|
233
|
-
const generateBankBillingAccountObj = () => {
|
|
234
|
-
const {
|
|
235
|
-
us_bank_account,
|
|
236
|
-
id: newPaymentMethodId,
|
|
237
|
-
billing_details,
|
|
238
|
-
status
|
|
239
|
-
} = paymentMethod;
|
|
240
|
-
const {
|
|
241
|
-
name,
|
|
242
|
-
email
|
|
243
|
-
} = billing_details;
|
|
244
|
-
const {
|
|
245
|
-
account_type,
|
|
246
|
-
account_holder_type,
|
|
247
|
-
bank_name,
|
|
248
|
-
last4,
|
|
249
|
-
routing_number
|
|
250
|
-
} = us_bank_account;
|
|
251
|
-
return {
|
|
252
|
-
billing: _objectSpread({
|
|
253
|
-
us_bank_account: {
|
|
254
|
-
account_type,
|
|
255
|
-
account_holder_type,
|
|
256
|
-
bank_name,
|
|
257
|
-
last4,
|
|
258
|
-
routing_number,
|
|
259
|
-
status,
|
|
260
|
-
name,
|
|
261
|
-
email
|
|
262
|
-
},
|
|
263
|
-
paymentMethodId: newPaymentMethodId
|
|
264
|
-
}, existingSubscriptionsObj),
|
|
265
|
-
stripeCustomerId: billingObjStripeCustomerId || accountObjStripeCustomerId
|
|
266
|
-
};
|
|
267
|
-
};
|
|
268
|
-
const accountUpdateObj = type === "card" ? generateCardBillingAccountObj() : generateBankBillingAccountObj();
|
|
269
|
-
return await updateAccountBilling(accountUpdateObj);
|
|
270
|
-
};
|
|
271
|
-
const stripeSubmit = async () => {
|
|
272
|
-
if (!stripe || !elements) {
|
|
273
|
-
return;
|
|
274
|
-
}
|
|
275
|
-
const paymentMethod = await createStripePaymentMethod();
|
|
276
|
-
return await savePaymentMethod(paymentMethod);
|
|
277
|
-
};
|
|
278
|
-
return {
|
|
279
|
-
input: /*#__PURE__*/_react.default.createElement(StripeInputForm, {
|
|
280
|
-
setCardData: setPaymentData,
|
|
281
|
-
error: stripeError
|
|
282
|
-
}),
|
|
283
|
-
button: /*#__PURE__*/_react.default.createElement(StripeSubmitButton, {
|
|
284
|
-
stripeSubmit: stripeSubmit,
|
|
285
|
-
stripeError: stripeError,
|
|
286
|
-
isStripeComplete: isStripeComplete,
|
|
287
|
-
buttonText: buttonText
|
|
288
|
-
})
|
|
289
|
-
};
|
|
290
|
-
};
|
|
291
|
-
var _default = exports.default = useStripeInput;
|
|
@@ -1,95 +0,0 @@
|
|
|
1
|
-
import React, { useState, useEffect } from "react";
|
|
2
|
-
|
|
3
|
-
import { Elements } from "@stripe/react-stripe-js";
|
|
4
|
-
import { loadStripe } from "@stripe/stripe-js";
|
|
5
|
-
|
|
6
|
-
import { Grid } from "@mui/material";
|
|
7
|
-
|
|
8
|
-
import fetchAclymateApi from "@aclymatepackages/fetch-aclymate-api";
|
|
9
|
-
|
|
10
|
-
const StripeElementsWrapper = ({
|
|
11
|
-
accountData,
|
|
12
|
-
accountCollection,
|
|
13
|
-
loadingComponent,
|
|
14
|
-
baseFetchHost,
|
|
15
|
-
stripePromise,
|
|
16
|
-
children,
|
|
17
|
-
}) => {
|
|
18
|
-
const [stripeClientSecret, setStripeClientSecret] = useState("");
|
|
19
|
-
|
|
20
|
-
const {
|
|
21
|
-
id: accountId,
|
|
22
|
-
stripeCustomerId: accountDataCustomerId,
|
|
23
|
-
billing = {},
|
|
24
|
-
} = accountData;
|
|
25
|
-
const { stripeCustomerId: billingObjStripeCustomerId } = billing;
|
|
26
|
-
|
|
27
|
-
useEffect(() => {
|
|
28
|
-
const getStripeClientSecret = async () => {
|
|
29
|
-
const { clientSecret } = await fetchAclymateApi({
|
|
30
|
-
path: `/stripe/create-setup-intent`,
|
|
31
|
-
method: "POST",
|
|
32
|
-
data: {
|
|
33
|
-
accountId,
|
|
34
|
-
accountType: accountCollection,
|
|
35
|
-
customerId: billingObjStripeCustomerId || accountDataCustomerId,
|
|
36
|
-
},
|
|
37
|
-
callback: (response) => response,
|
|
38
|
-
baseFetchHost,
|
|
39
|
-
});
|
|
40
|
-
|
|
41
|
-
setStripeClientSecret(clientSecret);
|
|
42
|
-
};
|
|
43
|
-
|
|
44
|
-
if (!stripeClientSecret) {
|
|
45
|
-
getStripeClientSecret();
|
|
46
|
-
}
|
|
47
|
-
}, [
|
|
48
|
-
stripeClientSecret,
|
|
49
|
-
accountDataCustomerId,
|
|
50
|
-
accountId,
|
|
51
|
-
billingObjStripeCustomerId,
|
|
52
|
-
accountCollection,
|
|
53
|
-
baseFetchHost,
|
|
54
|
-
]);
|
|
55
|
-
|
|
56
|
-
const appearance = {
|
|
57
|
-
theme: "stripe",
|
|
58
|
-
variables: {
|
|
59
|
-
colorPrimary: "#27aae1",
|
|
60
|
-
colorBackground: "fafafa",
|
|
61
|
-
},
|
|
62
|
-
};
|
|
63
|
-
|
|
64
|
-
return (
|
|
65
|
-
<>
|
|
66
|
-
{!stripeClientSecret ? (
|
|
67
|
-
loadingComponent ? (
|
|
68
|
-
<Grid container justifyContent="center" spacing={2}>
|
|
69
|
-
<Grid item>{loadingComponent}</Grid>
|
|
70
|
-
</Grid>
|
|
71
|
-
) : (
|
|
72
|
-
<></>
|
|
73
|
-
)
|
|
74
|
-
) : (
|
|
75
|
-
<Elements
|
|
76
|
-
stripe={stripePromise}
|
|
77
|
-
options={{ clientSecret: stripeClientSecret, appearance }}
|
|
78
|
-
>
|
|
79
|
-
{children}
|
|
80
|
-
</Elements>
|
|
81
|
-
)}
|
|
82
|
-
</>
|
|
83
|
-
);
|
|
84
|
-
};
|
|
85
|
-
|
|
86
|
-
const StripeElements = ({ stripePublishableKey, children, ...otherProps }) => {
|
|
87
|
-
const stripePromise = loadStripe(stripePublishableKey);
|
|
88
|
-
|
|
89
|
-
return (
|
|
90
|
-
<StripeElementsWrapper stripePromise={stripePromise} {...otherProps}>
|
|
91
|
-
{children}
|
|
92
|
-
</StripeElementsWrapper>
|
|
93
|
-
);
|
|
94
|
-
};
|
|
95
|
-
export default StripeElements;
|
|
@@ -1,288 +0,0 @@
|
|
|
1
|
-
import React, { useState } from "react";
|
|
2
|
-
import dayjs from "dayjs";
|
|
3
|
-
import {
|
|
4
|
-
useStripe,
|
|
5
|
-
useElements,
|
|
6
|
-
PaymentElement,
|
|
7
|
-
} from "@stripe/react-stripe-js";
|
|
8
|
-
|
|
9
|
-
import { Box, Typography } from "@mui/material";
|
|
10
|
-
|
|
11
|
-
import { LoadingButton } from "@aclymatepackages/atoms";
|
|
12
|
-
import { isObjectEmpty } from "@aclymatepackages/other-helpers";
|
|
13
|
-
import fetchAclymateApi from "@aclymatepackages/fetch-aclymate-api";
|
|
14
|
-
|
|
15
|
-
const StripeSubmitButton = ({
|
|
16
|
-
stripeSubmit,
|
|
17
|
-
stripeError,
|
|
18
|
-
isStripeComplete,
|
|
19
|
-
buttonText,
|
|
20
|
-
}) => {
|
|
21
|
-
const [saveLoading, setSaveLoading] = useState(false);
|
|
22
|
-
const handleSave = async () => {
|
|
23
|
-
setSaveLoading(true);
|
|
24
|
-
await stripeSubmit();
|
|
25
|
-
|
|
26
|
-
return setSaveLoading(false);
|
|
27
|
-
};
|
|
28
|
-
|
|
29
|
-
return (
|
|
30
|
-
<LoadingButton
|
|
31
|
-
isLoading={saveLoading}
|
|
32
|
-
label={buttonText || "Save Payment Info"}
|
|
33
|
-
color="secondary"
|
|
34
|
-
disabled={!isStripeComplete || !isObjectEmpty(stripeError)}
|
|
35
|
-
onClick={() => handleSave()}
|
|
36
|
-
/>
|
|
37
|
-
);
|
|
38
|
-
};
|
|
39
|
-
|
|
40
|
-
const CardInput = ({ options, setCardData }) => {
|
|
41
|
-
const defaultOptions = {
|
|
42
|
-
fields: {
|
|
43
|
-
billingDetails: {
|
|
44
|
-
name: "never",
|
|
45
|
-
email: "never",
|
|
46
|
-
},
|
|
47
|
-
},
|
|
48
|
-
wallets: {
|
|
49
|
-
applePay: "never",
|
|
50
|
-
googlePay: "never",
|
|
51
|
-
},
|
|
52
|
-
business: {
|
|
53
|
-
name: "Aclymate",
|
|
54
|
-
},
|
|
55
|
-
};
|
|
56
|
-
|
|
57
|
-
return (
|
|
58
|
-
<PaymentElement
|
|
59
|
-
options={options || defaultOptions}
|
|
60
|
-
onChange={(e) => setCardData(e)}
|
|
61
|
-
/>
|
|
62
|
-
);
|
|
63
|
-
};
|
|
64
|
-
|
|
65
|
-
const StripeInputForm = ({ style, options, error = {}, setCardData }) => {
|
|
66
|
-
const { message } = error;
|
|
67
|
-
const CardError = () => (
|
|
68
|
-
<>
|
|
69
|
-
{message && (
|
|
70
|
-
<Typography variant="caption" color="error">
|
|
71
|
-
{message}
|
|
72
|
-
</Typography>
|
|
73
|
-
)}
|
|
74
|
-
</>
|
|
75
|
-
);
|
|
76
|
-
|
|
77
|
-
if (style) {
|
|
78
|
-
return (
|
|
79
|
-
<>
|
|
80
|
-
<Box p={2} style={style}>
|
|
81
|
-
<CardInput options={options} setCardData={setCardData} />
|
|
82
|
-
</Box>
|
|
83
|
-
<CardError />
|
|
84
|
-
</>
|
|
85
|
-
);
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
return (
|
|
89
|
-
<>
|
|
90
|
-
<CardInput options={options} setCardData={setCardData} />
|
|
91
|
-
<CardError />
|
|
92
|
-
</>
|
|
93
|
-
);
|
|
94
|
-
};
|
|
95
|
-
|
|
96
|
-
const useStripeInput = ({
|
|
97
|
-
onButtonClick,
|
|
98
|
-
accountData,
|
|
99
|
-
authUser,
|
|
100
|
-
updateAccountData,
|
|
101
|
-
confirmSetupReturnUrl = "",
|
|
102
|
-
baseFetchHost,
|
|
103
|
-
buttonText,
|
|
104
|
-
}) => {
|
|
105
|
-
const stripe = useStripe();
|
|
106
|
-
const elements = useElements();
|
|
107
|
-
|
|
108
|
-
const {
|
|
109
|
-
stripeCustomerId: accountObjStripeCustomerId,
|
|
110
|
-
billing = {},
|
|
111
|
-
name: accountName,
|
|
112
|
-
} = accountData || {};
|
|
113
|
-
const { stripeCustomerId: billingObjStripeCustomerId } = billing;
|
|
114
|
-
|
|
115
|
-
const [paymentData, setPaymentData] = useState({});
|
|
116
|
-
const { error: stripeError, complete: isStripeComplete } = paymentData;
|
|
117
|
-
|
|
118
|
-
const createBillingDetailsFullName = () => {
|
|
119
|
-
const { displayName } = authUser;
|
|
120
|
-
const [firstCompanyWord] = accountName.split(" ");
|
|
121
|
-
const [firstName, lastName] = displayName.split(" ");
|
|
122
|
-
|
|
123
|
-
if (!lastName) {
|
|
124
|
-
return `${firstName} ${firstCompanyWord}`;
|
|
125
|
-
}
|
|
126
|
-
|
|
127
|
-
return `${firstName} ${lastName}`;
|
|
128
|
-
};
|
|
129
|
-
|
|
130
|
-
const updateAccountBilling = async (updateObj) => {
|
|
131
|
-
await updateAccountData(updateObj);
|
|
132
|
-
|
|
133
|
-
if (onButtonClick) {
|
|
134
|
-
return await onButtonClick(updateObj);
|
|
135
|
-
}
|
|
136
|
-
|
|
137
|
-
return updateObj;
|
|
138
|
-
};
|
|
139
|
-
|
|
140
|
-
const createStripePaymentMethod = async () => {
|
|
141
|
-
const { email } = authUser;
|
|
142
|
-
|
|
143
|
-
const billingDetailsFullName = createBillingDetailsFullName();
|
|
144
|
-
|
|
145
|
-
const { setupIntent, error } = await stripe.confirmSetup({
|
|
146
|
-
elements,
|
|
147
|
-
confirmParams: {
|
|
148
|
-
return_url: confirmSetupReturnUrl,
|
|
149
|
-
payment_method_data: {
|
|
150
|
-
billing_details: {
|
|
151
|
-
name: billingDetailsFullName,
|
|
152
|
-
email,
|
|
153
|
-
},
|
|
154
|
-
},
|
|
155
|
-
},
|
|
156
|
-
redirect: "if_required",
|
|
157
|
-
});
|
|
158
|
-
|
|
159
|
-
if (error) {
|
|
160
|
-
setPaymentData((data) => ({ ...data, error }));
|
|
161
|
-
return false;
|
|
162
|
-
}
|
|
163
|
-
|
|
164
|
-
const { payment_method, status } = setupIntent;
|
|
165
|
-
|
|
166
|
-
const paymentMethod = await fetchAclymateApi({
|
|
167
|
-
path: "/stripe/get-payment-method-data",
|
|
168
|
-
method: "POST",
|
|
169
|
-
data: {
|
|
170
|
-
paymentMethodId: payment_method,
|
|
171
|
-
},
|
|
172
|
-
baseFetchHost,
|
|
173
|
-
callback: (res) => res,
|
|
174
|
-
});
|
|
175
|
-
|
|
176
|
-
return {
|
|
177
|
-
...paymentMethod,
|
|
178
|
-
status,
|
|
179
|
-
};
|
|
180
|
-
};
|
|
181
|
-
|
|
182
|
-
const savePaymentMethod = async (paymentMethod) => {
|
|
183
|
-
const { paymentMethodId: existingPaymentMethodId, subscriptions } = billing;
|
|
184
|
-
const existingSubscriptionsObj = subscriptions ? { subscriptions } : {};
|
|
185
|
-
const { type } = paymentMethod;
|
|
186
|
-
|
|
187
|
-
if (existingPaymentMethodId && authUser) {
|
|
188
|
-
await fetchAclymateApi({
|
|
189
|
-
path: "/stripe/detach-payment-method",
|
|
190
|
-
method: "POST",
|
|
191
|
-
data: {
|
|
192
|
-
paymentMethodId: existingPaymentMethodId,
|
|
193
|
-
},
|
|
194
|
-
baseFetchHost,
|
|
195
|
-
});
|
|
196
|
-
}
|
|
197
|
-
|
|
198
|
-
const generateCardBillingAccountObj = () => {
|
|
199
|
-
const { card, id: newPaymentMethodId } = paymentMethod;
|
|
200
|
-
const { brand, exp_month, exp_year, last4 } = card;
|
|
201
|
-
const daysInMonth = dayjs(`${exp_year}-${exp_month}-01`).daysInMonth();
|
|
202
|
-
const expirationDate = dayjs(
|
|
203
|
-
`${exp_year}-${exp_month}-${daysInMonth}`
|
|
204
|
-
).toDate();
|
|
205
|
-
|
|
206
|
-
return {
|
|
207
|
-
billing: {
|
|
208
|
-
card: {
|
|
209
|
-
brand,
|
|
210
|
-
expiration: `${exp_month}/${exp_year}`,
|
|
211
|
-
expirationDate,
|
|
212
|
-
last4,
|
|
213
|
-
},
|
|
214
|
-
paymentMethodId: newPaymentMethodId,
|
|
215
|
-
...existingSubscriptionsObj,
|
|
216
|
-
},
|
|
217
|
-
stripeCustomerId:
|
|
218
|
-
billingObjStripeCustomerId || accountObjStripeCustomerId,
|
|
219
|
-
};
|
|
220
|
-
};
|
|
221
|
-
|
|
222
|
-
const generateBankBillingAccountObj = () => {
|
|
223
|
-
const {
|
|
224
|
-
us_bank_account,
|
|
225
|
-
id: newPaymentMethodId,
|
|
226
|
-
billing_details,
|
|
227
|
-
status,
|
|
228
|
-
} = paymentMethod;
|
|
229
|
-
const { name, email } = billing_details;
|
|
230
|
-
const {
|
|
231
|
-
account_type,
|
|
232
|
-
account_holder_type,
|
|
233
|
-
bank_name,
|
|
234
|
-
last4,
|
|
235
|
-
routing_number,
|
|
236
|
-
} = us_bank_account;
|
|
237
|
-
|
|
238
|
-
return {
|
|
239
|
-
billing: {
|
|
240
|
-
us_bank_account: {
|
|
241
|
-
account_type,
|
|
242
|
-
account_holder_type,
|
|
243
|
-
bank_name,
|
|
244
|
-
last4,
|
|
245
|
-
routing_number,
|
|
246
|
-
status,
|
|
247
|
-
name,
|
|
248
|
-
email,
|
|
249
|
-
},
|
|
250
|
-
paymentMethodId: newPaymentMethodId,
|
|
251
|
-
...existingSubscriptionsObj,
|
|
252
|
-
},
|
|
253
|
-
stripeCustomerId:
|
|
254
|
-
billingObjStripeCustomerId || accountObjStripeCustomerId,
|
|
255
|
-
};
|
|
256
|
-
};
|
|
257
|
-
|
|
258
|
-
const accountUpdateObj =
|
|
259
|
-
type === "card"
|
|
260
|
-
? generateCardBillingAccountObj()
|
|
261
|
-
: generateBankBillingAccountObj();
|
|
262
|
-
|
|
263
|
-
return await updateAccountBilling(accountUpdateObj);
|
|
264
|
-
};
|
|
265
|
-
|
|
266
|
-
const stripeSubmit = async () => {
|
|
267
|
-
if (!stripe || !elements) {
|
|
268
|
-
return;
|
|
269
|
-
}
|
|
270
|
-
|
|
271
|
-
const paymentMethod = await createStripePaymentMethod();
|
|
272
|
-
|
|
273
|
-
return await savePaymentMethod(paymentMethod);
|
|
274
|
-
};
|
|
275
|
-
|
|
276
|
-
return {
|
|
277
|
-
input: <StripeInputForm setCardData={setPaymentData} error={stripeError} />,
|
|
278
|
-
button: (
|
|
279
|
-
<StripeSubmitButton
|
|
280
|
-
stripeSubmit={stripeSubmit}
|
|
281
|
-
stripeError={stripeError}
|
|
282
|
-
isStripeComplete={isStripeComplete}
|
|
283
|
-
buttonText={buttonText}
|
|
284
|
-
/>
|
|
285
|
-
),
|
|
286
|
-
};
|
|
287
|
-
};
|
|
288
|
-
export default useStripeInput;
|