@licklist/design 0.69.1-dev.3 → 0.69.1-dev.4
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/iframe/ryft/RyftPaymentForm.d.ts +2 -2
- package/dist/iframe/ryft/RyftPaymentForm.d.ts.map +1 -1
- package/dist/iframe/ryft/RyftPaymentForm.js +8 -2
- package/dist/iframe/ryft/utils/ryft-form.d.ts +2 -1
- package/dist/iframe/ryft/utils/ryft-form.d.ts.map +1 -1
- package/dist/iframe/ryft/utils/ryft-form.js +20 -1
- package/dist/styles/ryft-payment-form/RyftPaymentForm.scss +28 -1
- package/package.json +3 -2
- package/src/iframe/ryft/RyftPaymentForm.tsx +13 -5
- package/src/iframe/ryft/utils/ryft-form.ts +26 -2
- package/src/styles/ryft-payment-form/RyftPaymentForm.scss +28 -1
- package/yarn.lock +18 -18
|
@@ -7,11 +7,11 @@ export interface RyftPaymentFormProps {
|
|
|
7
7
|
isCreateLoading: boolean;
|
|
8
8
|
isAppUsingInIframe?: boolean;
|
|
9
9
|
onApplePayButtonClick?: () => void;
|
|
10
|
-
|
|
10
|
+
payButtonDisabled?: boolean;
|
|
11
11
|
initRyft: (onSuccess: () => void, onFailure: (error?: string) => void) => Promise<void>;
|
|
12
12
|
onSubmit: () => Promise<AttemptPaymentResponse>;
|
|
13
13
|
resetReferrer?: () => void;
|
|
14
14
|
providerPaymentSettings?: ProviderPaymentSettings;
|
|
15
15
|
}
|
|
16
|
-
export declare const RyftPaymentForm: ({ accountId, isCreateLoading, isAppUsingInIframe, providerPaymentSettings, onApplePayButtonClick, initRyft, resetReferrer, onSubmit, }: RyftPaymentFormProps) => import("react/jsx-runtime").JSX.Element;
|
|
16
|
+
export declare const RyftPaymentForm: ({ accountId, isCreateLoading, isAppUsingInIframe, providerPaymentSettings, onApplePayButtonClick, initRyft, resetReferrer, onSubmit, payButtonDisabled, }: RyftPaymentFormProps) => import("react/jsx-runtime").JSX.Element;
|
|
17
17
|
//# sourceMappingURL=RyftPaymentForm.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RyftPaymentForm.d.ts","sourceRoot":"","sources":["../../../src/iframe/ryft/RyftPaymentForm.tsx"],"names":[],"mappings":"AAOA,OAAO,EAKL,sBAAsB,EACvB,MAAM,kDAAkD,CAAA;AACzD,OAAO,EAAE,uBAAuB,EAAE,MAAM,0EAA0E,CAAA;AAKlH,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAW/C,CAAA;AAED,MAAM,MAAM,qBAAqB,GAAG,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,CAAA;AAEzD,MAAM,WAAW,oBAAoB;IAEnC,SAAS,EAAE,GAAG,CAAA;IACd,eAAe,EAAE,OAAO,CAAA;IACxB,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,qBAAqB,CAAC,EAAE,MAAM,IAAI,CAAA;IAClC,
|
|
1
|
+
{"version":3,"file":"RyftPaymentForm.d.ts","sourceRoot":"","sources":["../../../src/iframe/ryft/RyftPaymentForm.tsx"],"names":[],"mappings":"AAOA,OAAO,EAKL,sBAAsB,EACvB,MAAM,kDAAkD,CAAA;AACzD,OAAO,EAAE,uBAAuB,EAAE,MAAM,0EAA0E,CAAA;AAKlH,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAW/C,CAAA;AAED,MAAM,MAAM,qBAAqB,GAAG,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,CAAA;AAEzD,MAAM,WAAW,oBAAoB;IAEnC,SAAS,EAAE,GAAG,CAAA;IACd,eAAe,EAAE,OAAO,CAAA;IACxB,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,qBAAqB,CAAC,EAAE,MAAM,IAAI,CAAA;IAClC,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,QAAQ,EAAE,CACR,SAAS,EAAE,MAAM,IAAI,EACrB,SAAS,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,KAChC,OAAO,CAAC,IAAI,CAAC,CAAA;IAClB,QAAQ,EAAE,MAAM,OAAO,CAAC,sBAAsB,CAAC,CAAA;IAC/C,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IAC1B,uBAAuB,CAAC,EAAE,uBAAuB,CAAA;CAClD;AAED,eAAO,MAAM,eAAe,8JAUzB,oBAAoB,4CAiLtB,CAAA"}
|
|
@@ -196,7 +196,7 @@ var ryftErrorMap = {
|
|
|
196
196
|
unknown_error: 'unknownError'
|
|
197
197
|
};
|
|
198
198
|
var RyftPaymentForm = function(param) {
|
|
199
|
-
var accountId = param.accountId, isCreateLoading = param.isCreateLoading, isAppUsingInIframe = param.isAppUsingInIframe, providerPaymentSettings = param.providerPaymentSettings, onApplePayButtonClick = param.onApplePayButtonClick, initRyft = param.initRyft, resetReferrer = param.resetReferrer, onSubmit = param.onSubmit;
|
|
199
|
+
var accountId = param.accountId, isCreateLoading = param.isCreateLoading, isAppUsingInIframe = param.isAppUsingInIframe, providerPaymentSettings = param.providerPaymentSettings, onApplePayButtonClick = param.onApplePayButtonClick, initRyft = param.initRyft, resetReferrer = param.resetReferrer, onSubmit = param.onSubmit, payButtonDisabled = param.payButtonDisabled;
|
|
200
200
|
var _formRef_current_childNodes, _formRef_current, _accountId_data;
|
|
201
201
|
var t = useTranslation([
|
|
202
202
|
'Design',
|
|
@@ -303,12 +303,14 @@ var RyftPaymentForm = function(param) {
|
|
|
303
303
|
t: t,
|
|
304
304
|
isAppUsingInIframe: isAppUsingInIframe,
|
|
305
305
|
onApplePayButtonClick: onApplePayButtonClick,
|
|
306
|
+
isDisableButton: !payButtonDisabled,
|
|
306
307
|
additionalPaymentMethodsEnabled: providerPaymentSettings === null || providerPaymentSettings === void 0 ? void 0 : providerPaymentSettings.additionalPaymentMethodsEnabled
|
|
307
308
|
});
|
|
308
309
|
}, // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
309
310
|
[
|
|
310
311
|
(_formRef_current = formRef.current) === null || _formRef_current === void 0 ? void 0 : (_formRef_current_childNodes = _formRef_current.childNodes) === null || _formRef_current_childNodes === void 0 ? void 0 : _formRef_current_childNodes.length,
|
|
311
|
-
showApplePayButton
|
|
312
|
+
showApplePayButton,
|
|
313
|
+
payButtonDisabled
|
|
312
314
|
]);
|
|
313
315
|
useEffect(function() {
|
|
314
316
|
var _accountId_data;
|
|
@@ -375,6 +377,10 @@ var RyftPaymentForm = function(param) {
|
|
|
375
377
|
onSubmit: methods.handleSubmit(handleSubmit),
|
|
376
378
|
className: "ryft-payment-form",
|
|
377
379
|
children: [
|
|
380
|
+
/*#__PURE__*/ jsx("div", {
|
|
381
|
+
className: "form-disable-box",
|
|
382
|
+
id: "form-disable-box"
|
|
383
|
+
}),
|
|
378
384
|
/*#__PURE__*/ jsx("div", {
|
|
379
385
|
className: "submit-button-wrapper mt-4 p-1",
|
|
380
386
|
children: /*#__PURE__*/ jsxs(Button, {
|
|
@@ -2,8 +2,9 @@ import { TFunction } from 'react-i18next';
|
|
|
2
2
|
import { RyftPaymentFormProps } from '../RyftPaymentForm';
|
|
3
3
|
interface InjectComponentsInRyftForm extends Pick<RyftPaymentFormProps, 'onApplePayButtonClick' | 'isAppUsingInIframe'> {
|
|
4
4
|
t: TFunction<string[]>;
|
|
5
|
+
isDisableButton?: boolean;
|
|
5
6
|
additionalPaymentMethodsEnabled?: boolean;
|
|
6
7
|
}
|
|
7
|
-
export declare const injectComponentsInRyftForm: ({ t, additionalPaymentMethodsEnabled, isAppUsingInIframe, onApplePayButtonClick, }: InjectComponentsInRyftForm) => void;
|
|
8
|
+
export declare const injectComponentsInRyftForm: ({ t, additionalPaymentMethodsEnabled, isAppUsingInIframe, isDisableButton, onApplePayButtonClick, }: InjectComponentsInRyftForm) => void;
|
|
8
9
|
export {};
|
|
9
10
|
//# sourceMappingURL=ryft-form.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ryft-form.d.ts","sourceRoot":"","sources":["../../../../src/iframe/ryft/utils/ryft-form.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AACzC,OAAO,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAA;AAEzD,UAAU,0BACR,SAAQ,IAAI,CACV,oBAAoB,EACpB,uBAAuB,GAAG,oBAAoB,CAC/C;IACD,CAAC,EAAE,SAAS,CAAC,MAAM,EAAE,CAAC,CAAA;IACtB,+BAA+B,CAAC,EAAE,OAAO,CAAA;CAC1C;AAED,eAAO,MAAM,0BAA0B,
|
|
1
|
+
{"version":3,"file":"ryft-form.d.ts","sourceRoot":"","sources":["../../../../src/iframe/ryft/utils/ryft-form.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AACzC,OAAO,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAA;AAEzD,UAAU,0BACR,SAAQ,IAAI,CACV,oBAAoB,EACpB,uBAAuB,GAAG,oBAAoB,CAC/C;IACD,CAAC,EAAE,SAAS,CAAC,MAAM,EAAE,CAAC,CAAA;IACtB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,+BAA+B,CAAC,EAAE,OAAO,CAAA;CAC1C;AAED,eAAO,MAAM,0BAA0B,wGAMpC,0BAA0B,SA4E5B,CAAA"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
var injectComponentsInRyftForm = function(param) {
|
|
2
|
-
var t = param.t, additionalPaymentMethodsEnabled = param.additionalPaymentMethodsEnabled, isAppUsingInIframe = param.isAppUsingInIframe, onApplePayButtonClick = param.onApplePayButtonClick;
|
|
2
|
+
var t = param.t, additionalPaymentMethodsEnabled = param.additionalPaymentMethodsEnabled, isAppUsingInIframe = param.isAppUsingInIframe, isDisableButton = param.isDisableButton, onApplePayButtonClick = param.onApplePayButtonClick;
|
|
3
3
|
var // Removing of the old title container
|
|
4
4
|
_document_getElementById, // Removing of the old mobile title container and divider container
|
|
5
5
|
_document_getElementById1, _document_getElementById2, _document_getElementById3;
|
|
@@ -8,6 +8,8 @@ var injectComponentsInRyftForm = function(param) {
|
|
|
8
8
|
return;
|
|
9
9
|
}
|
|
10
10
|
(_document_getElementById = document.getElementById('card-title-container')) === null || _document_getElementById === void 0 ? void 0 : _document_getElementById.remove();
|
|
11
|
+
cardContainer.style.opacity = isDisableButton ? '0.6' : '1';
|
|
12
|
+
cardContainer.ariaDisabled = isDisableButton === null || isDisableButton === void 0 ? void 0 : isDisableButton.toString();
|
|
11
13
|
var cardTitle = document.createElement('div');
|
|
12
14
|
var cardText = document.createElement('div');
|
|
13
15
|
var cardTitleContainer = document.createElement('div');
|
|
@@ -37,6 +39,23 @@ var injectComponentsInRyftForm = function(param) {
|
|
|
37
39
|
divider.id = 'mobile-pay-divider';
|
|
38
40
|
container.id = 'mobile-pay-divider-container';
|
|
39
41
|
container.append(dividerText, divider);
|
|
42
|
+
var payIframe = document.getElementById("ryft-pay-iframe");
|
|
43
|
+
if (payIframe) {
|
|
44
|
+
var formBox = document.getElementById('form-disable-box');
|
|
45
|
+
if (formBox) {
|
|
46
|
+
formBox.style.display = isDisableButton ? "block" : "none";
|
|
47
|
+
}
|
|
48
|
+
var googleButton = document.getElementById('gpay-button-online-api-id');
|
|
49
|
+
var appleButton = document.getElementById("ryft-pay-apple-pay-button");
|
|
50
|
+
if (googleButton) {
|
|
51
|
+
googleButton.disabled = isDisableButton;
|
|
52
|
+
googleButton.style.opacity = isDisableButton ? '1' : '0.6';
|
|
53
|
+
}
|
|
54
|
+
if (appleButton) {
|
|
55
|
+
appleButton.disabled = isDisableButton;
|
|
56
|
+
appleButton.style.opacity = isDisableButton ? '1' : '0.6';
|
|
57
|
+
}
|
|
58
|
+
}
|
|
40
59
|
if (isAppUsingInIframe) {
|
|
41
60
|
var applePayButton = document.createElement('button');
|
|
42
61
|
applePayButton.id = 'apple-pay';
|
|
@@ -14,6 +14,7 @@
|
|
|
14
14
|
|
|
15
15
|
.navigation {
|
|
16
16
|
display: block;
|
|
17
|
+
|
|
17
18
|
@include media-breakpoint-down(sm) {
|
|
18
19
|
padding: 0;
|
|
19
20
|
}
|
|
@@ -23,6 +24,7 @@
|
|
|
23
24
|
margin-left: 0;
|
|
24
25
|
height: calc(100vh - 2rem);
|
|
25
26
|
max-height: calc(100vh - 1rem);
|
|
27
|
+
|
|
26
28
|
@include media-breakpoint-down(sm) {
|
|
27
29
|
width: calc(100% - 2rem);
|
|
28
30
|
max-width: unset;
|
|
@@ -69,9 +71,11 @@
|
|
|
69
71
|
.left-block {
|
|
70
72
|
min-height: 100%;
|
|
71
73
|
}
|
|
74
|
+
|
|
72
75
|
.right-block {
|
|
73
76
|
margin: 0 auto;
|
|
74
77
|
width: 100%;
|
|
78
|
+
|
|
75
79
|
.children-wrapper {
|
|
76
80
|
.accordion {
|
|
77
81
|
.collapse {
|
|
@@ -85,6 +89,7 @@
|
|
|
85
89
|
}
|
|
86
90
|
}
|
|
87
91
|
}
|
|
92
|
+
|
|
88
93
|
::-webkit-scrollbar {
|
|
89
94
|
display: none;
|
|
90
95
|
scrollbar-width: none;
|
|
@@ -97,6 +102,14 @@
|
|
|
97
102
|
}
|
|
98
103
|
|
|
99
104
|
.ryft-payment-form {
|
|
105
|
+
|
|
106
|
+
.form-disable-box {
|
|
107
|
+
display: none;
|
|
108
|
+
position: absolute;
|
|
109
|
+
width: 100%;
|
|
110
|
+
height: 100%;
|
|
111
|
+
}
|
|
112
|
+
|
|
100
113
|
.submit-button-wrapper {
|
|
101
114
|
margin: -1rem 0 1rem;
|
|
102
115
|
|
|
@@ -104,15 +117,18 @@
|
|
|
104
117
|
width: 100%;
|
|
105
118
|
}
|
|
106
119
|
}
|
|
120
|
+
|
|
107
121
|
#mobile-pay-divider-container {
|
|
108
122
|
display: flex;
|
|
109
123
|
position: relative;
|
|
110
124
|
margin-bottom: 1rem;
|
|
125
|
+
|
|
111
126
|
#mobile-pay-divider-text {
|
|
112
127
|
margin-right: 1rem;
|
|
113
128
|
font-size: 0.875rem;
|
|
114
129
|
font-weight: 600;
|
|
115
130
|
}
|
|
131
|
+
|
|
116
132
|
#mobile-pay-divider {
|
|
117
133
|
width: 100%;
|
|
118
134
|
border-bottom: 1px #dfdfdf solid;
|
|
@@ -125,6 +141,7 @@
|
|
|
125
141
|
border: none;
|
|
126
142
|
margin-bottom: 0.5rem;
|
|
127
143
|
text-align: left;
|
|
144
|
+
|
|
128
145
|
:first-child {
|
|
129
146
|
font-size: 1rem;
|
|
130
147
|
font-weight: 600;
|
|
@@ -135,14 +152,17 @@
|
|
|
135
152
|
margin-bottom: 0.5rem;
|
|
136
153
|
}
|
|
137
154
|
}
|
|
155
|
+
|
|
138
156
|
.ryft-pay-grid {
|
|
139
157
|
display: flex;
|
|
140
158
|
flex-direction: column;
|
|
159
|
+
|
|
141
160
|
.apple-pay-button {
|
|
142
161
|
height: 2.5rem;
|
|
143
162
|
margin-top: 1rem;
|
|
144
163
|
}
|
|
145
164
|
}
|
|
165
|
+
|
|
146
166
|
.mobile-pay-title {
|
|
147
167
|
display: block;
|
|
148
168
|
font-weight: 600;
|
|
@@ -156,10 +176,16 @@
|
|
|
156
176
|
}
|
|
157
177
|
|
|
158
178
|
@include media-breakpoint-up(md) {
|
|
179
|
+
|
|
159
180
|
.ryft-payment-form,
|
|
181
|
+
.form-disable-box {
|
|
182
|
+
height: 50%;
|
|
183
|
+
top: 15rem;
|
|
184
|
+
}
|
|
160
185
|
.iframe-payment-form {
|
|
161
186
|
position: relative;
|
|
162
187
|
max-height: 300px !important;
|
|
188
|
+
|
|
163
189
|
.submit-button-wrapper {
|
|
164
190
|
max-width: 15.5rem;
|
|
165
191
|
}
|
|
@@ -171,6 +197,7 @@
|
|
|
171
197
|
max-width: 15.5rem;
|
|
172
198
|
margin-bottom: 1rem;
|
|
173
199
|
}
|
|
200
|
+
|
|
174
201
|
.ryft-pay-apple-pay-button {
|
|
175
202
|
border-radius: 0.25rem;
|
|
176
203
|
}
|
|
@@ -178,4 +205,4 @@
|
|
|
178
205
|
.divider {
|
|
179
206
|
display: none !important;
|
|
180
207
|
}
|
|
181
|
-
}
|
|
208
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@licklist/design",
|
|
3
|
-
"version": "0.69.1-dev.
|
|
3
|
+
"version": "0.69.1-dev.4",
|
|
4
4
|
"repository": {
|
|
5
5
|
"type": "git",
|
|
6
6
|
"url": "git+ssh://git@bitbucket.org/artelogicsoft/licklist_design.git"
|
|
@@ -206,5 +206,6 @@
|
|
|
206
206
|
"volta": {
|
|
207
207
|
"node": "20.9.0",
|
|
208
208
|
"yarn": "4.4.0"
|
|
209
|
-
}
|
|
209
|
+
},
|
|
210
|
+
"stableVersion": "0.69.1-dev.3"
|
|
210
211
|
}
|
|
@@ -38,7 +38,7 @@ export interface RyftPaymentFormProps {
|
|
|
38
38
|
isCreateLoading: boolean
|
|
39
39
|
isAppUsingInIframe?: boolean
|
|
40
40
|
onApplePayButtonClick?: () => void
|
|
41
|
-
|
|
41
|
+
payButtonDisabled?: boolean
|
|
42
42
|
initRyft: (
|
|
43
43
|
onSuccess: () => void,
|
|
44
44
|
onFailure: (error?: string) => void,
|
|
@@ -57,6 +57,7 @@ export const RyftPaymentForm = ({
|
|
|
57
57
|
initRyft,
|
|
58
58
|
resetReferrer,
|
|
59
59
|
onSubmit,
|
|
60
|
+
payButtonDisabled,
|
|
60
61
|
}: RyftPaymentFormProps) => {
|
|
61
62
|
const { t } = useTranslation(['Design', 'Validation', 'Ryft'])
|
|
62
63
|
const formRef = useRef<HTMLFormElement | null>(null)
|
|
@@ -89,7 +90,6 @@ export const RyftPaymentForm = ({
|
|
|
89
90
|
|
|
90
91
|
const handleSubmit = async () => {
|
|
91
92
|
setIsBtnDisabled(true)
|
|
92
|
-
|
|
93
93
|
try {
|
|
94
94
|
const paymentSession = await onSubmit()
|
|
95
95
|
|
|
@@ -142,17 +142,21 @@ export const RyftPaymentForm = ({
|
|
|
142
142
|
t,
|
|
143
143
|
isAppUsingInIframe,
|
|
144
144
|
onApplePayButtonClick,
|
|
145
|
+
isDisableButton: !payButtonDisabled,
|
|
145
146
|
additionalPaymentMethodsEnabled:
|
|
146
147
|
providerPaymentSettings?.additionalPaymentMethodsEnabled,
|
|
147
148
|
})
|
|
148
149
|
},
|
|
149
150
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
150
|
-
[
|
|
151
|
+
[
|
|
152
|
+
formRef.current?.childNodes?.length,
|
|
153
|
+
showApplePayButton,
|
|
154
|
+
payButtonDisabled,
|
|
155
|
+
],
|
|
151
156
|
)
|
|
152
157
|
|
|
153
158
|
useEffect(() => {
|
|
154
159
|
if (!accountId.data?.account_id || accountId.isError) return
|
|
155
|
-
|
|
156
160
|
initRyft(
|
|
157
161
|
() => {
|
|
158
162
|
addEventHandler('cardValidationChanged', (e: MessageEvent['data']) => {
|
|
@@ -215,8 +219,12 @@ export const RyftPaymentForm = ({
|
|
|
215
219
|
onSubmit={methods.handleSubmit(handleSubmit)}
|
|
216
220
|
className='ryft-payment-form'
|
|
217
221
|
>
|
|
222
|
+
<div className='form-disable-box' id="form-disable-box"/>
|
|
218
223
|
<div className='submit-button-wrapper mt-4 p-1'>
|
|
219
|
-
<Button
|
|
224
|
+
<Button
|
|
225
|
+
type='submit'
|
|
226
|
+
disabled={isBtnDisabled || !isValid}
|
|
227
|
+
>
|
|
220
228
|
{isBtnDisabled && <ButtonLoader />}
|
|
221
229
|
{t('Design:buyNow')}
|
|
222
230
|
</Button>
|
|
@@ -7,6 +7,7 @@ interface InjectComponentsInRyftForm
|
|
|
7
7
|
'onApplePayButtonClick' | 'isAppUsingInIframe'
|
|
8
8
|
> {
|
|
9
9
|
t: TFunction<string[]>
|
|
10
|
+
isDisableButton?: boolean
|
|
10
11
|
additionalPaymentMethodsEnabled?: boolean
|
|
11
12
|
}
|
|
12
13
|
|
|
@@ -14,16 +15,19 @@ export const injectComponentsInRyftForm = ({
|
|
|
14
15
|
t,
|
|
15
16
|
additionalPaymentMethodsEnabled,
|
|
16
17
|
isAppUsingInIframe,
|
|
18
|
+
isDisableButton,
|
|
17
19
|
onApplePayButtonClick,
|
|
18
20
|
}: InjectComponentsInRyftForm) => {
|
|
19
21
|
const cardContainer = document.getElementById('ryft-pay-iframe')
|
|
20
|
-
|
|
21
22
|
if (!cardContainer) {
|
|
22
23
|
return
|
|
23
24
|
}
|
|
24
25
|
// Removing of the old title container
|
|
25
26
|
document.getElementById('card-title-container')?.remove()
|
|
26
27
|
|
|
28
|
+
cardContainer.style.opacity = isDisableButton ? '0.6' : '1'
|
|
29
|
+
cardContainer.ariaDisabled = isDisableButton?.toString()
|
|
30
|
+
|
|
27
31
|
const cardTitle = document.createElement('div')
|
|
28
32
|
const cardText = document.createElement('div')
|
|
29
33
|
const cardTitleContainer = document.createElement('div')
|
|
@@ -35,7 +39,6 @@ export const injectComponentsInRyftForm = ({
|
|
|
35
39
|
cardContainer?.before(cardTitleContainer)
|
|
36
40
|
|
|
37
41
|
const payGrid = document.getElementById('ryft-pay-grid')
|
|
38
|
-
|
|
39
42
|
if (!payGrid || !additionalPaymentMethodsEnabled) {
|
|
40
43
|
return
|
|
41
44
|
}
|
|
@@ -58,6 +61,27 @@ export const injectComponentsInRyftForm = ({
|
|
|
58
61
|
divider.id = 'mobile-pay-divider'
|
|
59
62
|
container.id = 'mobile-pay-divider-container'
|
|
60
63
|
container.append(dividerText, divider)
|
|
64
|
+
const payIframe = document.getElementById("ryft-pay-iframe");
|
|
65
|
+
if (payIframe) {
|
|
66
|
+
const formBox = document.getElementById('form-disable-box')
|
|
67
|
+
if (formBox) {
|
|
68
|
+
formBox.style.display = isDisableButton ? "block" : "none"
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
const googleButton = document.getElementById(
|
|
72
|
+
'gpay-button-online-api-id',
|
|
73
|
+
) as HTMLButtonElement
|
|
74
|
+
const appleButton =document.getElementById("ryft-pay-apple-pay-button") as HTMLButtonElement
|
|
75
|
+
if (googleButton) {
|
|
76
|
+
googleButton.disabled = isDisableButton
|
|
77
|
+
googleButton.style.opacity = isDisableButton ? '1' : '0.6'
|
|
78
|
+
}
|
|
79
|
+
if (appleButton) {
|
|
80
|
+
appleButton.disabled = isDisableButton
|
|
81
|
+
appleButton.style.opacity = isDisableButton ? '1' : '0.6'
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
|
|
61
85
|
if (isAppUsingInIframe) {
|
|
62
86
|
const applePayButton = document.createElement('button')
|
|
63
87
|
applePayButton.id = 'apple-pay'
|
|
@@ -14,6 +14,7 @@
|
|
|
14
14
|
|
|
15
15
|
.navigation {
|
|
16
16
|
display: block;
|
|
17
|
+
|
|
17
18
|
@include media-breakpoint-down(sm) {
|
|
18
19
|
padding: 0;
|
|
19
20
|
}
|
|
@@ -23,6 +24,7 @@
|
|
|
23
24
|
margin-left: 0;
|
|
24
25
|
height: calc(100vh - 2rem);
|
|
25
26
|
max-height: calc(100vh - 1rem);
|
|
27
|
+
|
|
26
28
|
@include media-breakpoint-down(sm) {
|
|
27
29
|
width: calc(100% - 2rem);
|
|
28
30
|
max-width: unset;
|
|
@@ -69,9 +71,11 @@
|
|
|
69
71
|
.left-block {
|
|
70
72
|
min-height: 100%;
|
|
71
73
|
}
|
|
74
|
+
|
|
72
75
|
.right-block {
|
|
73
76
|
margin: 0 auto;
|
|
74
77
|
width: 100%;
|
|
78
|
+
|
|
75
79
|
.children-wrapper {
|
|
76
80
|
.accordion {
|
|
77
81
|
.collapse {
|
|
@@ -85,6 +89,7 @@
|
|
|
85
89
|
}
|
|
86
90
|
}
|
|
87
91
|
}
|
|
92
|
+
|
|
88
93
|
::-webkit-scrollbar {
|
|
89
94
|
display: none;
|
|
90
95
|
scrollbar-width: none;
|
|
@@ -97,6 +102,14 @@
|
|
|
97
102
|
}
|
|
98
103
|
|
|
99
104
|
.ryft-payment-form {
|
|
105
|
+
|
|
106
|
+
.form-disable-box {
|
|
107
|
+
display: none;
|
|
108
|
+
position: absolute;
|
|
109
|
+
width: 100%;
|
|
110
|
+
height: 100%;
|
|
111
|
+
}
|
|
112
|
+
|
|
100
113
|
.submit-button-wrapper {
|
|
101
114
|
margin: -1rem 0 1rem;
|
|
102
115
|
|
|
@@ -104,15 +117,18 @@
|
|
|
104
117
|
width: 100%;
|
|
105
118
|
}
|
|
106
119
|
}
|
|
120
|
+
|
|
107
121
|
#mobile-pay-divider-container {
|
|
108
122
|
display: flex;
|
|
109
123
|
position: relative;
|
|
110
124
|
margin-bottom: 1rem;
|
|
125
|
+
|
|
111
126
|
#mobile-pay-divider-text {
|
|
112
127
|
margin-right: 1rem;
|
|
113
128
|
font-size: 0.875rem;
|
|
114
129
|
font-weight: 600;
|
|
115
130
|
}
|
|
131
|
+
|
|
116
132
|
#mobile-pay-divider {
|
|
117
133
|
width: 100%;
|
|
118
134
|
border-bottom: 1px #dfdfdf solid;
|
|
@@ -125,6 +141,7 @@
|
|
|
125
141
|
border: none;
|
|
126
142
|
margin-bottom: 0.5rem;
|
|
127
143
|
text-align: left;
|
|
144
|
+
|
|
128
145
|
:first-child {
|
|
129
146
|
font-size: 1rem;
|
|
130
147
|
font-weight: 600;
|
|
@@ -135,14 +152,17 @@
|
|
|
135
152
|
margin-bottom: 0.5rem;
|
|
136
153
|
}
|
|
137
154
|
}
|
|
155
|
+
|
|
138
156
|
.ryft-pay-grid {
|
|
139
157
|
display: flex;
|
|
140
158
|
flex-direction: column;
|
|
159
|
+
|
|
141
160
|
.apple-pay-button {
|
|
142
161
|
height: 2.5rem;
|
|
143
162
|
margin-top: 1rem;
|
|
144
163
|
}
|
|
145
164
|
}
|
|
165
|
+
|
|
146
166
|
.mobile-pay-title {
|
|
147
167
|
display: block;
|
|
148
168
|
font-weight: 600;
|
|
@@ -156,10 +176,16 @@
|
|
|
156
176
|
}
|
|
157
177
|
|
|
158
178
|
@include media-breakpoint-up(md) {
|
|
179
|
+
|
|
159
180
|
.ryft-payment-form,
|
|
181
|
+
.form-disable-box {
|
|
182
|
+
height: 50%;
|
|
183
|
+
top: 15rem;
|
|
184
|
+
}
|
|
160
185
|
.iframe-payment-form {
|
|
161
186
|
position: relative;
|
|
162
187
|
max-height: 300px !important;
|
|
188
|
+
|
|
163
189
|
.submit-button-wrapper {
|
|
164
190
|
max-width: 15.5rem;
|
|
165
191
|
}
|
|
@@ -171,6 +197,7 @@
|
|
|
171
197
|
max-width: 15.5rem;
|
|
172
198
|
margin-bottom: 1rem;
|
|
173
199
|
}
|
|
200
|
+
|
|
174
201
|
.ryft-pay-apple-pay-button {
|
|
175
202
|
border-radius: 0.25rem;
|
|
176
203
|
}
|
|
@@ -178,4 +205,4 @@
|
|
|
178
205
|
.divider {
|
|
179
206
|
display: none !important;
|
|
180
207
|
}
|
|
181
|
-
}
|
|
208
|
+
}
|
package/yarn.lock
CHANGED
|
@@ -6578,11 +6578,11 @@ __metadata:
|
|
|
6578
6578
|
linkType: hard
|
|
6579
6579
|
|
|
6580
6580
|
"acorn@npm:^8.12.1, acorn@npm:^8.5.0, acorn@npm:^8.8.2":
|
|
6581
|
-
version: 8.
|
|
6582
|
-
resolution: "acorn@npm:8.
|
|
6581
|
+
version: 8.13.0
|
|
6582
|
+
resolution: "acorn@npm:8.13.0"
|
|
6583
6583
|
bin:
|
|
6584
6584
|
acorn: bin/acorn
|
|
6585
|
-
checksum: 10c0/
|
|
6585
|
+
checksum: 10c0/f35dd53d68177c90699f4c37d0bb205b8abe036d955d0eb011ddb7f14a81e6fd0f18893731c457c1b5bd96754683f4c3d80d9a5585ddecaa53cdf84e0b3d68f7
|
|
6586
6586
|
languageName: node
|
|
6587
6587
|
linkType: hard
|
|
6588
6588
|
|
|
@@ -8057,9 +8057,9 @@ __metadata:
|
|
|
8057
8057
|
linkType: hard
|
|
8058
8058
|
|
|
8059
8059
|
"caniuse-lite@npm:^1.0.0, caniuse-lite@npm:^1.0.30001109, caniuse-lite@npm:^1.0.30001125, caniuse-lite@npm:^1.0.30001646, caniuse-lite@npm:^1.0.30001663":
|
|
8060
|
-
version: 1.0.
|
|
8061
|
-
resolution: "caniuse-lite@npm:1.0.
|
|
8062
|
-
checksum: 10c0/
|
|
8060
|
+
version: 1.0.30001669
|
|
8061
|
+
resolution: "caniuse-lite@npm:1.0.30001669"
|
|
8062
|
+
checksum: 10c0/f125f23440d3dbb6c25ffb8d55f4ce48af36a84d0932b152b3b74f143a4170cbe92e02b0a9676209c86609bf7bf34119ff10cc2bc7c1b7ea40e936cc16598408
|
|
8063
8063
|
languageName: node
|
|
8064
8064
|
linkType: hard
|
|
8065
8065
|
|
|
@@ -9816,9 +9816,9 @@ __metadata:
|
|
|
9816
9816
|
linkType: hard
|
|
9817
9817
|
|
|
9818
9818
|
"electron-to-chromium@npm:^1.3.564, electron-to-chromium@npm:^1.5.28":
|
|
9819
|
-
version: 1.5.
|
|
9820
|
-
resolution: "electron-to-chromium@npm:1.5.
|
|
9821
|
-
checksum: 10c0/
|
|
9819
|
+
version: 1.5.39
|
|
9820
|
+
resolution: "electron-to-chromium@npm:1.5.39"
|
|
9821
|
+
checksum: 10c0/36364f9c68a7d20c54b020fe81cabf3e6022b7feb91f63695dd1039612cac031cc98bbcc0c3ba957f1876dde89853ba48407c590a4227fd13616a028ac1a0944
|
|
9822
9822
|
languageName: node
|
|
9823
9823
|
linkType: hard
|
|
9824
9824
|
|
|
@@ -10910,9 +10910,9 @@ __metadata:
|
|
|
10910
10910
|
linkType: hard
|
|
10911
10911
|
|
|
10912
10912
|
"fast-uri@npm:^3.0.1":
|
|
10913
|
-
version: 3.0.
|
|
10914
|
-
resolution: "fast-uri@npm:3.0.
|
|
10915
|
-
checksum: 10c0/
|
|
10913
|
+
version: 3.0.3
|
|
10914
|
+
resolution: "fast-uri@npm:3.0.3"
|
|
10915
|
+
checksum: 10c0/4b2c5ce681a062425eae4f15cdc8fc151fd310b2f69b1f96680677820a8b49c3cd6e80661a406e19d50f0c40a3f8bffdd458791baf66f4a879d80be28e10a320
|
|
10916
10916
|
languageName: node
|
|
10917
10917
|
linkType: hard
|
|
10918
10918
|
|
|
@@ -14165,12 +14165,12 @@ __metadata:
|
|
|
14165
14165
|
linkType: hard
|
|
14166
14166
|
|
|
14167
14167
|
"match-sorter@npm:^6.0.2":
|
|
14168
|
-
version: 6.
|
|
14169
|
-
resolution: "match-sorter@npm:6.
|
|
14168
|
+
version: 6.4.0
|
|
14169
|
+
resolution: "match-sorter@npm:6.4.0"
|
|
14170
14170
|
dependencies:
|
|
14171
14171
|
"@babel/runtime": "npm:^7.23.8"
|
|
14172
14172
|
remove-accents: "npm:0.5.0"
|
|
14173
|
-
checksum: 10c0/
|
|
14173
|
+
checksum: 10c0/2b8ea3933416d16570888e4ca44c67d7deeccb0a378852e14ee6eebcf52e9a1df3ca1279cbf3f5bcae02edab28304c3bd1199d1782ff2a148448bfc0b314242e
|
|
14174
14174
|
languageName: node
|
|
14175
14175
|
linkType: hard
|
|
14176
14176
|
|
|
@@ -20546,9 +20546,9 @@ __metadata:
|
|
|
20546
20546
|
linkType: hard
|
|
20547
20547
|
|
|
20548
20548
|
"tslib@npm:^2, tslib@npm:^2.0.0, tslib@npm:^2.0.1, tslib@npm:^2.0.3, tslib@npm:^2.1.0, tslib@npm:^2.3.0, tslib@npm:^2.4.0":
|
|
20549
|
-
version: 2.
|
|
20550
|
-
resolution: "tslib@npm:2.
|
|
20551
|
-
checksum: 10c0/
|
|
20549
|
+
version: 2.8.0
|
|
20550
|
+
resolution: "tslib@npm:2.8.0"
|
|
20551
|
+
checksum: 10c0/31e4d14dc1355e9b89e4d3c893a18abb7f90b6886b089c2da91224d0a7752c79f3ddc41bc1aa0a588ac895bd97bb99c5bc2bfdb2f86de849f31caeb3ba79bbe5
|
|
20552
20552
|
languageName: node
|
|
20553
20553
|
linkType: hard
|
|
20554
20554
|
|