@licklist/design 0.61.1 → 0.62.0
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 +3 -1
- package/dist/iframe/ryft/RyftPaymentForm.d.ts.map +1 -1
- package/dist/iframe/ryft/RyftPaymentForm.js +1 -1
- 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 +1 -1
- package/package.json +1 -1
- package/src/iframe/ryft/RyftPaymentForm.tsx +10 -1
- package/src/iframe/ryft/utils/ryft-form.ts +3 -1
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { AttemptPaymentResponse } from "@licklist/plugins/dist/hooks/Ryft/useRyftPayment";
|
|
3
|
+
import { ProviderPaymentSettings } from "@licklist/core/dist/DataMapper/Setting/ProviderPaymentSettingsDataMapper";
|
|
3
4
|
export declare const ryftErrorMap: Record<string, string>;
|
|
4
5
|
export type RyftPaymentFormValues = Record<string, never>;
|
|
5
6
|
export interface RyftPaymentFormProps {
|
|
@@ -8,6 +9,7 @@ export interface RyftPaymentFormProps {
|
|
|
8
9
|
initRyft: (onSuccess: () => void, onFailure: (error?: string) => void) => Promise<void>;
|
|
9
10
|
onSubmit: () => Promise<AttemptPaymentResponse>;
|
|
10
11
|
resetReferrer?: () => void;
|
|
12
|
+
providerPaymentSettings?: ProviderPaymentSettings;
|
|
11
13
|
}
|
|
12
|
-
export declare const RyftPaymentForm: ({ accountId, isCreateLoading, initRyft, resetReferrer, onSubmit, }: RyftPaymentFormProps) => JSX.Element;
|
|
14
|
+
export declare const RyftPaymentForm: ({ accountId, isCreateLoading, providerPaymentSettings, initRyft, resetReferrer, onSubmit, }: RyftPaymentFormProps) => JSX.Element;
|
|
13
15
|
//# 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,CAAC;
|
|
1
|
+
{"version":3,"file":"RyftPaymentForm.d.ts","sourceRoot":"","sources":["../../../src/iframe/ryft/RyftPaymentForm.tsx"],"names":[],"mappings":";AAOA,OAAO,EAKL,sBAAsB,EACvB,MAAM,kDAAkD,CAAC;AAC1D,OAAO,EAAE,uBAAuB,EAAE,MAAM,0EAA0E,CAAC;AAKnH,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAW/C,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;AAE1D,MAAM,WAAW,oBAAoB;IAEnC,SAAS,EAAE,GAAG,CAAC;IACf,eAAe,EAAE,OAAO,CAAC;IACzB,QAAQ,EAAE,CACR,SAAS,EAAE,MAAM,IAAI,EACrB,SAAS,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,KAChC,OAAO,CAAC,IAAI,CAAC,CAAC;IACnB,QAAQ,EAAE,MAAM,OAAO,CAAC,sBAAsB,CAAC,CAAC;IAChD,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,uBAAuB,CAAC,EAAE,uBAAuB,CAAC;CACnD;AAED,eAAO,MAAM,eAAe,gGAOzB,oBAAoB,gBA8JtB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("tslib"),r=require("react"),n=e(r),a=require("react-router-dom"),i=require("../../static/loader/BlockLoader.js"),o=require("react-i18next"),u=e(require("react-bootstrap/Button")),
|
|
1
|
+
"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("tslib"),r=require("react"),n=e(r),a=require("react-router-dom"),i=require("../../static/loader/BlockLoader.js"),o=require("react-i18next"),u=e(require("react-bootstrap/Button")),d=require("react-hook-form"),s=require("../../static/loader/ButtonLoader.js"),l=e(require("react-bootstrap/Alert"));require("../../static/index.js");var c=require("@licklist/plugins/dist/hooks/Ryft/useRyftPayment"),f=require("./utils/ryft-form.js"),m={insufficient_funds:"insufficientFunds",declined_do_not_honour:"declinedDoNotHonour",invalid_card_number:"invalidCardNumber",restricted_card:"restrictedCard",security_violation:"securityViolation",expired_card:"expiredCard",gateway_reject:"gatewayReject",bad_track_data:"badTrackData","3ds_authentication_failure":"3dsAuthenticationFailure",unknown_error:"unknownError"};exports.RyftPaymentForm=function(e){var y,_,v=e.accountId,E=e.isCreateLoading,p=e.providerPaymentSettings,g=e.initRyft,b=e.resetReferrer,h=e.onSubmit,R=o.useTranslation(["Design","Validation","Ryft"]).t,q=r.useRef(null),S=a.useHistory(),k=t.__read(r.useState(!1),2),w=k[0],N=k[1],P=t.__read(r.useState(!1),2),T=P[0],F=P[1],A=t.__read(r.useState(!1),2),j=A[0],x=A[1],C=t.__read(r.useState(void 0),2),D=C[0],M=C[1],L=c.useRyftPayment().addEventHandler,U=d.useForm(),V=function(){b&&b()},B=function(e){(null==e?void 0:e.id)&&(null==e?void 0:e.returnUrl)&&(window.location.href="".concat(e.returnUrl,"&ps=").concat(e.id),V())};return r.useEffect((function(){return f.injectComponentsInRyftForm({t:R,additionalPaymentMethodsEnabled:null==p?void 0:p.additionalPaymentMethodsEnabled})}),[null===(_=null===(y=q.current)||void 0===y?void 0:y.childNodes)||void 0===_?void 0:_.length]),r.useEffect((function(){v.data&&!v.isError&&g((function(){L("cardValidationChanged",(function(e){N(e.isValid)})),x(!1)}),(function(){return x(!0)}))}),[v.data]),v.isLoading||v.isFetching||E?n.createElement("div",{className:"mt-5 pt-5"},n.createElement(i.BlockLoader,null)):v.isError?n.createElement("div",{className:"mt-5 ryft-init-failure"},n.createElement(l,{key:"danger",variant:"danger"},n.createElement("h5",null,R("Ryft:errorMessage")),R("Ryft:noPaymentProviderFound"))):j?n.createElement("div",{className:"mt-5 ryft-init-failure"},n.createElement(l,{key:"danger",variant:"danger"},n.createElement("h5",null,R("Ryft:errorMessage")),R("Ryft:initFailureMessage"),n.createElement("div",{className:"flex flex-column align-items-center mt-4"},n.createElement(u,{variant:"primary",onClick:function(){S.go(0)}},R("Ryft:refresh"))))):n.createElement(n.Fragment,null,n.createElement("form",{ref:q,id:"ryft-pay-form",noValidate:!0,onSubmit:U.handleSubmit((function(){return t.__awaiter(void 0,void 0,void 0,(function(){var e,r,n;return t.__generator(this,(function(t){switch(t.label){case 0:F(!0),t.label=1;case 1:return t.trys.push([1,3,4,5]),[4,h()];case 2:if((e=t.sent())||M("unknown_error"),"requiredAction"in e){if(e.status!==c.RYFT_STATUS_PENDING_ACTION||!(null===(n=e.requiredAction)||void 0===n?void 0:n.url))return B(e),[2];window.location.href=e.requiredAction.url,V()}return e.status===c.RYFT_STATUS_APPROVED||e.status===c.RYFT_STATUS_CAPTURED?(B(e),[2]):(e.lastError&&(M(e.lastError),V()),[3,5]);case 3:return r=t.sent(),M(r),[3,5];case 4:return F(!1),[7];case 5:return[2]}}))}))})),className:"ryft-payment-form"},n.createElement("div",{className:"submit-button-wrapper mt-4 p-1"},n.createElement(u,{type:"submit",disabled:T||!w},T&&n.createElement(s.ButtonLoader,null),R("Design:buyNow"))),D&&n.createElement("div",{id:"ryft-payment-error"},R("".concat(m[D])))))},exports.ryftErrorMap=m;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { TFunction } from "react-i18next";
|
|
2
|
-
export declare const injectComponentsInRyftForm: ({ t, }: {
|
|
2
|
+
export declare const injectComponentsInRyftForm: ({ t, additionalPaymentMethodsEnabled, }: {
|
|
3
3
|
t: TFunction<string[]>;
|
|
4
|
+
additionalPaymentMethodsEnabled?: boolean;
|
|
4
5
|
}) => void;
|
|
5
6
|
//# 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,CAAC;AAE1C,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,CAAC;AAE1C,eAAO,MAAM,0BAA0B;OAIlC,UAAU,MAAM,EAAE,CAAC;sCACY,OAAO;UAyC1C,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports.injectComponentsInRyftForm=function(e){var t=e.t,n=document.getElementById("ryft-pay-iframe"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports.injectComponentsInRyftForm=function(e){var t=e.t,n=e.additionalPaymentMethodsEnabled,i=document.getElementById("ryft-pay-iframe"),d=document.getElementById("card-title-container");if(i&&!d){var a=document.createElement("div"),r=document.createElement("div"),o=document.createElement("div");o.id="card-title-container",a.textContent=t("Design:enterCardDetails"),r.className="bold-text form-label",r.innerText=t("Design:paymentDetails"),o.append(a,r),null==i||i.before(o);var m=document.getElementById("ryft-pay-grid");if(m&&n){var l=document.createElement("div"),c=document.createElement("div"),s=document.createElement("div"),p=document.createElement("div");l.className="mobile-pay-title",l.innerText=t("Design:expressCheckoutWith"),c.id="mobile-pay-divider-text",c.innerText="or",s.id="mobile-pay-divider",p.id="mobile-pay-divider-container",p.append(c,s),m.before(l),m.after(p)}}};
|
package/package.json
CHANGED
|
@@ -12,6 +12,8 @@ import {
|
|
|
12
12
|
RYFT_STATUS_PENDING_ACTION,
|
|
13
13
|
AttemptPaymentResponse,
|
|
14
14
|
} from "@licklist/plugins/dist/hooks/Ryft/useRyftPayment";
|
|
15
|
+
import { ProviderPaymentSettings } from "@licklist/core/dist/DataMapper/Setting/ProviderPaymentSettingsDataMapper";
|
|
16
|
+
|
|
15
17
|
import { BlockLoader, ButtonLoader } from "../../static";
|
|
16
18
|
import { injectComponentsInRyftForm } from "./utils/ryft-form";
|
|
17
19
|
|
|
@@ -40,11 +42,13 @@ export interface RyftPaymentFormProps {
|
|
|
40
42
|
) => Promise<void>;
|
|
41
43
|
onSubmit: () => Promise<AttemptPaymentResponse>;
|
|
42
44
|
resetReferrer?: () => void;
|
|
45
|
+
providerPaymentSettings?: ProviderPaymentSettings;
|
|
43
46
|
}
|
|
44
47
|
|
|
45
48
|
export const RyftPaymentForm = ({
|
|
46
49
|
accountId,
|
|
47
50
|
isCreateLoading,
|
|
51
|
+
providerPaymentSettings,
|
|
48
52
|
initRyft,
|
|
49
53
|
resetReferrer,
|
|
50
54
|
onSubmit,
|
|
@@ -119,7 +123,12 @@ export const RyftPaymentForm = ({
|
|
|
119
123
|
};
|
|
120
124
|
|
|
121
125
|
useEffect(
|
|
122
|
-
() =>
|
|
126
|
+
() =>
|
|
127
|
+
injectComponentsInRyftForm({
|
|
128
|
+
t,
|
|
129
|
+
additionalPaymentMethodsEnabled:
|
|
130
|
+
providerPaymentSettings?.additionalPaymentMethodsEnabled,
|
|
131
|
+
}),
|
|
123
132
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
124
133
|
[formRef.current?.childNodes?.length]
|
|
125
134
|
);
|
|
@@ -2,8 +2,10 @@ import { TFunction } from "react-i18next";
|
|
|
2
2
|
|
|
3
3
|
export const injectComponentsInRyftForm = ({
|
|
4
4
|
t,
|
|
5
|
+
additionalPaymentMethodsEnabled,
|
|
5
6
|
}: {
|
|
6
7
|
t: TFunction<string[]>;
|
|
8
|
+
additionalPaymentMethodsEnabled?: boolean;
|
|
7
9
|
}) => {
|
|
8
10
|
const cardContainer = document.getElementById("ryft-pay-iframe");
|
|
9
11
|
const oldCardDividerContainer = document.getElementById(
|
|
@@ -26,7 +28,7 @@ export const injectComponentsInRyftForm = ({
|
|
|
26
28
|
|
|
27
29
|
const payGrid = document.getElementById("ryft-pay-grid");
|
|
28
30
|
|
|
29
|
-
if (!payGrid) {
|
|
31
|
+
if (!payGrid || !additionalPaymentMethodsEnabled) {
|
|
30
32
|
return;
|
|
31
33
|
}
|
|
32
34
|
|