@licklist/design 0.59.0-dev.6 → 0.59.0-dev.7

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.
Files changed (9) hide show
  1. package/dist/iframe/ryft/RyftPaymentForm.d.ts.map +1 -1
  2. package/dist/iframe/ryft/RyftPaymentForm.js +1 -1
  3. package/dist/iframe/ryft/utils/ryft-form.d.ts.map +1 -1
  4. package/dist/iframe/ryft/utils/ryft-form.js +1 -1
  5. package/dist/styles/ryft-payment-form/RyftPaymentForm.scss +99 -113
  6. package/package.json +1 -1
  7. package/src/iframe/ryft/RyftPaymentForm.tsx +12 -4
  8. package/src/iframe/ryft/utils/ryft-form.ts +8 -4
  9. package/src/styles/ryft-payment-form/RyftPaymentForm.scss +99 -113
package/dist/iframe/ryft/RyftPaymentForm.d.ts.map CHANGED
@@ -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;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
+ {"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,gBAsKtB,CAAC"}
package/dist/iframe/ryft/RyftPaymentForm.js CHANGED
@@ -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")),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
+ "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),i=require("react-router-dom"),a=require("../../static/loader/BlockLoader.js"),o=require("react-i18next"),d=e(require("react-bootstrap/Button")),u=require("react-hook-form"),l=require("../../static/loader/ButtonLoader.js"),c=e(require("react-bootstrap/Alert"));require("../../static/index.js");var s=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 v,y,_,E=e.accountId,g=e.isCreateLoading,h=e.providerPaymentSettings,p=e.initRyft,b=e.resetReferrer,R=e.onSubmit,q=o.useTranslation(["Design","Validation","Ryft"]).t,N=r.useRef(null),S=i.useHistory(),k=t.__read(r.useState(!1),2),w=k[0],P=k[1],T=t.__read(r.useState(!1),2),F=T[0],A=T[1],j=t.__read(r.useState(!1),2),x=j[0],C=j[1],D=t.__read(r.useState(void 0),2),M=D[0],L=D[1],U=s.useRyftPayment().addEventHandler,V=u.useForm(),B=function(){b&&b()},I=function(e){(null==e?void 0:e.id)&&(null==e?void 0:e.returnUrl)&&(window.location.href="".concat(e.returnUrl,"&ps=").concat(e.id),B())};return r.useEffect((function(){var e,t,r,n,i;!(null===(t=null===(e=N.current)||void 0===e?void 0:e.childNodes)||void 0===t?void 0:t.length)||(null===(n=null===(r=N.current)||void 0===r?void 0:r.childNodes)||void 0===n?void 0:n.length)<3||!(null===(i=E.data)||void 0===i?void 0:i.account_id)||f.injectComponentsInRyftForm({t:q,additionalPaymentMethodsEnabled:null==h?void 0:h.additionalPaymentMethodsEnabled})}),[null===(y=null===(v=N.current)||void 0===v?void 0:v.childNodes)||void 0===y?void 0:y.length]),r.useEffect((function(){var e;(null===(e=E.data)||void 0===e?void 0:e.account_id)&&!E.isError&&p((function(){U("cardValidationChanged",(function(e){P(e.isValid)})),C(!1)}),(function(){return C(!0)}))}),[null===(_=E.data)||void 0===_?void 0:_.account_id]),E.isLoading||E.isFetching||g?n.createElement("div",{className:"mt-5 pt-5"},n.createElement(a.BlockLoader,null)):E.isError?n.createElement("div",{className:"mt-5 ryft-init-failure"},n.createElement(c,{key:"danger",variant:"danger"},n.createElement("h5",null,q("Ryft:errorMessage")),q("Ryft:noPaymentProviderFound"))):x?n.createElement("div",{className:"mt-5 ryft-init-failure"},n.createElement(c,{key:"danger",variant:"danger"},n.createElement("h5",null,q("Ryft:errorMessage")),q("Ryft:initFailureMessage"),n.createElement("div",{className:"flex flex-column align-items-center mt-4"},n.createElement(d,{variant:"primary",onClick:function(){S.go(0)}},q("Ryft:refresh"))))):n.createElement(n.Fragment,null,n.createElement("form",{ref:N,id:"ryft-pay-form",noValidate:!0,onSubmit:V.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:A(!0),t.label=1;case 1:return t.trys.push([1,3,4,5]),[4,R()];case 2:if((e=t.sent())||L("unknown_error"),"requiredAction"in e){if(e.status!==s.RYFT_STATUS_PENDING_ACTION||!(null===(n=e.requiredAction)||void 0===n?void 0:n.url))return I(e),[2];window.location.href=e.requiredAction.url,B()}return e.status===s.RYFT_STATUS_APPROVED||e.status===s.RYFT_STATUS_CAPTURED?(I(e),[2]):(e.lastError&&(L(e.lastError),B()),[3,5]);case 3:return r=t.sent(),L(r),[3,5];case 4:return A(!1),[7];case 5:return[2]}}))}))})),className:"ryft-payment-form"},n.createElement("div",{className:"submit-button-wrapper mt-4 p-1"},n.createElement(d,{type:"submit",disabled:F||!w},F&&n.createElement(l.ButtonLoader,null),q("Design:buyNow"))),M&&n.createElement("div",{id:"ryft-payment-error"},q("".concat(m[M])))))},exports.ryftErrorMap=m;
package/dist/iframe/ryft/utils/ryft-form.d.ts.map CHANGED
@@ -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;OAIlC,UAAU,MAAM,EAAE,CAAC;sCACY,OAAO;UAyC1C,CAAC"}
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;UA6C1C,CAAC"}
package/dist/iframe/ryft/utils/ryft-form.js CHANGED
@@ -1 +1 @@
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)}}};
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports.injectComponentsInRyftForm=function(e){var t,n,i,d=e.t,o=e.additionalPaymentMethodsEnabled,r=document.getElementById("ryft-pay-iframe");if(r){null===(t=document.getElementById("card-title-container"))||void 0===t||t.remove();var a=document.createElement("div"),l=document.createElement("div"),m=document.createElement("div");m.id="card-title-container",a.textContent=d("Design:enterCardDetails"),l.className="bold-text form-label",l.innerText=d("Design:paymentDetails"),m.append(a,l),null==r||r.before(m);var c=document.getElementById("ryft-pay-grid");if(c&&o){null===(n=document.getElementById("mobile-pay-title"))||void 0===n||n.remove(),null===(i=document.getElementById("mobile-pay-divider-container"))||void 0===i||i.remove();var v=document.createElement("div"),u=document.createElement("div"),y=document.createElement("div"),p=document.createElement("div");v.className="mobile-pay-title",v.innerText=d("Design:expressCheckoutWith"),v.id="mobile-pay-title",u.id="mobile-pay-divider-text",u.innerText="or",y.id="mobile-pay-divider",p.id="mobile-pay-divider-container",p.append(u,y),c.before(v),c.after(p)}}};
package/dist/styles/ryft-payment-form/RyftPaymentForm.scss CHANGED
@@ -47,141 +47,127 @@
47
47
  margin-left: 0.5rem;
48
48
  }
49
49
 
50
- .ryft-payment-form {
51
- .submit-button-wrapper {
52
- margin: -1rem 0 1rem;
53
-
54
- button {
55
- width: 100%;
56
- }
57
- }
58
- #mobile-pay-divider-container {
59
- display: flex;
60
- position: relative;
61
- margin-bottom: 1rem;
62
- #mobile-pay-divider-text {
63
- margin-right: 1rem;
64
- font-size: 0.875rem;
65
- font-weight: 600;
66
- }
67
- #mobile-pay-divider {
68
- width: 100%;
69
- border-bottom: 1px #dfdfdf solid;
70
- margin-bottom: 0.6rem;
71
- }
72
- }
73
-
74
- #card-title-container {
75
- height: auto;
76
- border: none;
77
- margin-bottom: 0.5rem;
78
- text-align: left;
79
- :first-child {
80
- font-size: 1rem;
81
- font-weight: 600;
82
- margin-bottom: 1rem;
83
- }
84
-
85
- .form-label {
86
- margin-bottom: 0.5rem;
87
- }
88
- }
89
- .mobile-pay-title {
90
- display: block;
91
- font-weight: 600;
92
- font-size: 1rem;
93
- color: black;
94
- padding: 0;
95
- font-style: normal;
96
- font-family: inherit;
97
- margin-bottom: 1rem;
98
- }
99
- }
100
50
  .form {
101
51
  .input {
102
52
  border: 2px solid #525252 !important;
103
53
  }
104
54
  }
105
55
 
106
- .ryft-payment-form {
107
- @include media-breakpoint-up(md) {
108
- .submit-button-wrapper {
109
- max-width: 15.5rem;
110
- }
111
- }
112
-
113
- // it's style for Google and Apple pay container, for unknown reasons we can't move this html elements with appendChild or replaceChild
114
- .ryft-pay-grid {
115
- width: 100%;
116
- max-width: 15.5rem;
117
- margin-bottom: 1rem;
56
+ @include media-breakpoint-down(sm) {
57
+ .left-block-container {
58
+ max-height: 100%;
59
+ overflow: visible;
118
60
  }
119
- .ryft-pay-apple-pay-button {
120
- border-radius: 0.25rem;
121
- }
122
- }
123
-
124
- .divider {
125
- display: none !important;
126
- }
127
- }
128
- @include media-breakpoint-down(sm) {
129
- .left-block-container {
130
- max-height: 100%;
131
- overflow: visible;
132
61
  }
133
62
  }
134
- }
135
-
136
- @include media-breakpoint-down(sm) {
137
- flex-direction: column-reverse;
138
- overflow: scroll;
139
63
 
140
64
  @include media-breakpoint-down(sm) {
141
- .left-block {
142
- min-height: 100%;
143
- }
144
- .right-block {
145
- margin: 0 auto;
146
- width: 100%;
147
- .children-wrapper {
148
- .accordion {
149
- .collapse {
150
- overflow: visible;
151
- overflow-x: unset;
152
- scrollbar-width: unset;
65
+ flex-direction: column-reverse;
66
+ overflow: scroll;
67
+
68
+ @include media-breakpoint-down(sm) {
69
+ .left-block {
70
+ min-height: 100%;
71
+ }
72
+ .right-block {
73
+ margin: 0 auto;
74
+ width: 100%;
75
+ .children-wrapper {
76
+ .accordion {
77
+ .collapse {
78
+ overflow: visible;
79
+ overflow-x: unset;
80
+ scrollbar-width: unset;
81
+ }
153
82
  }
154
83
  }
155
84
  }
156
85
  }
157
86
  }
158
87
  }
159
- }
160
- ::-webkit-scrollbar {
161
- display: none;
162
- scrollbar-width: none;
88
+ ::-webkit-scrollbar {
89
+ display: none;
90
+ scrollbar-width: none;
91
+ }
163
92
  }
164
93
  }
165
94
 
166
- @include media-breakpoint-down(md) {
167
- .payment_link {
168
- .page-body {
169
- .left-block {
170
- .left-block-container {
171
- .ryft-payment-form {
172
- position: relative;
173
- max-height: 300px !important;
174
- .ryft-pay-grid {
175
- width: 100%;
176
- max-width: 100%;
177
- }
178
- }
179
- }
180
- }
95
+ #ryft-threeDSMethodIframe {
96
+ display: none;
97
+ }
98
+
99
+ .ryft-payment-form {
100
+ .submit-button-wrapper {
101
+ margin: -1rem 0 1rem;
102
+
103
+ button {
104
+ width: 100%;
181
105
  }
182
106
  }
107
+ #mobile-pay-divider-container {
108
+ display: flex;
109
+ position: relative;
110
+ margin-bottom: 1rem;
111
+ #mobile-pay-divider-text {
112
+ margin-right: 1rem;
113
+ font-size: 0.875rem;
114
+ font-weight: 600;
115
+ }
116
+ #mobile-pay-divider {
117
+ width: 100%;
118
+ border-bottom: 1px #dfdfdf solid;
119
+ margin-bottom: 0.6rem;
120
+ }
121
+ }
122
+
123
+ #card-title-container {
124
+ height: auto;
125
+ border: none;
126
+ margin-bottom: 0.5rem;
127
+ text-align: left;
128
+ :first-child {
129
+ font-size: 1rem;
130
+ font-weight: 600;
131
+ margin-bottom: 1rem;
132
+ }
133
+
134
+ .form-label {
135
+ margin-bottom: 0.5rem;
136
+ }
137
+ }
138
+ .mobile-pay-title {
139
+ display: block;
140
+ font-weight: 600;
141
+ font-size: 1rem;
142
+ color: black;
143
+ padding: 0;
144
+ font-style: normal;
145
+ font-family: inherit;
146
+ margin-bottom: 1rem;
147
+ }
183
148
  }
184
149
 
185
- #ryft-threeDSMethodIframe {
186
- display: none;
150
+ @include media-breakpoint-up(md) {
151
+ .ryft-payment-form,
152
+ .iframe-payment-form {
153
+ position: relative;
154
+ max-height: 300px !important;
155
+ .submit-button-wrapper {
156
+ max-width: 15.5rem;
157
+ }
158
+ }
159
+
160
+ // it's style for Google and Apple pay container, for unknown reasons we can't move this html elements with appendChild or replaceChild
161
+ .ryft-pay-grid {
162
+ width: 100%;
163
+ max-width: 15.5rem;
164
+ margin-bottom: 1rem;
165
+ }
166
+ .ryft-pay-apple-pay-button {
167
+ border-radius: 0.25rem;
168
+ }
169
+
170
+ .divider {
171
+ display: none !important;
172
+ }
187
173
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@licklist/design",
3
- "version": "0.59.0-dev.6",
3
+ "version": "0.59.0-dev.7",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "git+ssh://git@bitbucket.org/artelogicsoft/licklist_design.git"
package/src/iframe/ryft/RyftPaymentForm.tsx CHANGED
@@ -123,18 +123,26 @@ export const RyftPaymentForm = ({
123
123
  };
124
124
 
125
125
  useEffect(
126
- () =>
126
+ () => {
127
+ if (
128
+ !formRef.current?.childNodes?.length ||
129
+ formRef.current?.childNodes?.length < 3 ||
130
+ !accountId.data?.account_id
131
+ ) {
132
+ return;
133
+ }
127
134
  injectComponentsInRyftForm({
128
135
  t,
129
136
  additionalPaymentMethodsEnabled:
130
137
  providerPaymentSettings?.additionalPaymentMethodsEnabled,
131
- }),
138
+ });
139
+ },
132
140
  // eslint-disable-next-line react-hooks/exhaustive-deps
133
141
  [formRef.current?.childNodes?.length]
134
142
  );
135
143
 
136
144
  useEffect(() => {
137
- if (!accountId.data || accountId.isError) return;
145
+ if (!accountId.data?.account_id || accountId.isError) return;
138
146
 
139
147
  initRyft(
140
148
  () => {
@@ -148,7 +156,7 @@ export const RyftPaymentForm = ({
148
156
  );
149
157
 
150
158
  // eslint-disable-next-line react-hooks/exhaustive-deps
151
- }, [accountId.data]);
159
+ }, [accountId.data?.account_id]);
152
160
 
153
161
  if (accountId.isLoading || accountId.isFetching || isCreateLoading)
154
162
  return (
package/src/iframe/ryft/utils/ryft-form.ts CHANGED
@@ -8,13 +8,12 @@ export const injectComponentsInRyftForm = ({
8
8
  additionalPaymentMethodsEnabled?: boolean;
9
9
  }) => {
10
10
  const cardContainer = document.getElementById("ryft-pay-iframe");
11
- const oldCardDividerContainer = document.getElementById(
12
- "card-title-container"
13
- );
14
11
 
15
- if (!cardContainer || oldCardDividerContainer) {
12
+ if (!cardContainer) {
16
13
  return;
17
14
  }
15
+ // Removing of the old title container
16
+ document.getElementById("card-title-container")?.remove();
18
17
 
19
18
  const cardTitle = document.createElement("div");
20
19
  const cardText = document.createElement("div");
@@ -32,6 +31,10 @@ export const injectComponentsInRyftForm = ({
32
31
  return;
33
32
  }
34
33
 
34
+ // Removing of the old mobile title container and divider container
35
+ document.getElementById("mobile-pay-title")?.remove();
36
+ document.getElementById("mobile-pay-divider-container")?.remove();
37
+
35
38
  // Adding title and divider for apple and google pay button
36
39
  const mobilePayTitle = document.createElement("div");
37
40
  const dividerText = document.createElement("div");
@@ -39,6 +42,7 @@ export const injectComponentsInRyftForm = ({
39
42
  const container = document.createElement("div");
40
43
  mobilePayTitle.className = "mobile-pay-title";
41
44
  mobilePayTitle.innerText = t("Design:expressCheckoutWith");
45
+ mobilePayTitle.id = "mobile-pay-title";
42
46
  dividerText.id = "mobile-pay-divider-text";
43
47
  dividerText.innerText = "or";
44
48
  divider.id = "mobile-pay-divider";
package/src/styles/ryft-payment-form/RyftPaymentForm.scss CHANGED
@@ -47,141 +47,127 @@
47
47
  margin-left: 0.5rem;
48
48
  }
49
49
 
50
- .ryft-payment-form {
51
- .submit-button-wrapper {
52
- margin: -1rem 0 1rem;
53
-
54
- button {
55
- width: 100%;
56
- }
57
- }
58
- #mobile-pay-divider-container {
59
- display: flex;
60
- position: relative;
61
- margin-bottom: 1rem;
62
- #mobile-pay-divider-text {
63
- margin-right: 1rem;
64
- font-size: 0.875rem;
65
- font-weight: 600;
66
- }
67
- #mobile-pay-divider {
68
- width: 100%;
69
- border-bottom: 1px #dfdfdf solid;
70
- margin-bottom: 0.6rem;
71
- }
72
- }
73
-
74
- #card-title-container {
75
- height: auto;
76
- border: none;
77
- margin-bottom: 0.5rem;
78
- text-align: left;
79
- :first-child {
80
- font-size: 1rem;
81
- font-weight: 600;
82
- margin-bottom: 1rem;
83
- }
84
-
85
- .form-label {
86
- margin-bottom: 0.5rem;
87
- }
88
- }
89
- .mobile-pay-title {
90
- display: block;
91
- font-weight: 600;
92
- font-size: 1rem;
93
- color: black;
94
- padding: 0;
95
- font-style: normal;
96
- font-family: inherit;
97
- margin-bottom: 1rem;
98
- }
99
- }
100
50
  .form {
101
51
  .input {
102
52
  border: 2px solid #525252 !important;
103
53
  }
104
54
  }
105
55
 
106
- .ryft-payment-form {
107
- @include media-breakpoint-up(md) {
108
- .submit-button-wrapper {
109
- max-width: 15.5rem;
110
- }
111
- }
112
-
113
- // it's style for Google and Apple pay container, for unknown reasons we can't move this html elements with appendChild or replaceChild
114
- .ryft-pay-grid {
115
- width: 100%;
116
- max-width: 15.5rem;
117
- margin-bottom: 1rem;
56
+ @include media-breakpoint-down(sm) {
57
+ .left-block-container {
58
+ max-height: 100%;
59
+ overflow: visible;
118
60
  }
119
- .ryft-pay-apple-pay-button {
120
- border-radius: 0.25rem;
121
- }
122
- }
123
-
124
- .divider {
125
- display: none !important;
126
- }
127
- }
128
- @include media-breakpoint-down(sm) {
129
- .left-block-container {
130
- max-height: 100%;
131
- overflow: visible;
132
61
  }
133
62
  }
134
- }
135
-
136
- @include media-breakpoint-down(sm) {
137
- flex-direction: column-reverse;
138
- overflow: scroll;
139
63
 
140
64
  @include media-breakpoint-down(sm) {
141
- .left-block {
142
- min-height: 100%;
143
- }
144
- .right-block {
145
- margin: 0 auto;
146
- width: 100%;
147
- .children-wrapper {
148
- .accordion {
149
- .collapse {
150
- overflow: visible;
151
- overflow-x: unset;
152
- scrollbar-width: unset;
65
+ flex-direction: column-reverse;
66
+ overflow: scroll;
67
+
68
+ @include media-breakpoint-down(sm) {
69
+ .left-block {
70
+ min-height: 100%;
71
+ }
72
+ .right-block {
73
+ margin: 0 auto;
74
+ width: 100%;
75
+ .children-wrapper {
76
+ .accordion {
77
+ .collapse {
78
+ overflow: visible;
79
+ overflow-x: unset;
80
+ scrollbar-width: unset;
81
+ }
153
82
  }
154
83
  }
155
84
  }
156
85
  }
157
86
  }
158
87
  }
159
- }
160
- ::-webkit-scrollbar {
161
- display: none;
162
- scrollbar-width: none;
88
+ ::-webkit-scrollbar {
89
+ display: none;
90
+ scrollbar-width: none;
91
+ }
163
92
  }
164
93
  }
165
94
 
166
- @include media-breakpoint-down(md) {
167
- .payment_link {
168
- .page-body {
169
- .left-block {
170
- .left-block-container {
171
- .ryft-payment-form {
172
- position: relative;
173
- max-height: 300px !important;
174
- .ryft-pay-grid {
175
- width: 100%;
176
- max-width: 100%;
177
- }
178
- }
179
- }
180
- }
95
+ #ryft-threeDSMethodIframe {
96
+ display: none;
97
+ }
98
+
99
+ .ryft-payment-form {
100
+ .submit-button-wrapper {
101
+ margin: -1rem 0 1rem;
102
+
103
+ button {
104
+ width: 100%;
181
105
  }
182
106
  }
107
+ #mobile-pay-divider-container {
108
+ display: flex;
109
+ position: relative;
110
+ margin-bottom: 1rem;
111
+ #mobile-pay-divider-text {
112
+ margin-right: 1rem;
113
+ font-size: 0.875rem;
114
+ font-weight: 600;
115
+ }
116
+ #mobile-pay-divider {
117
+ width: 100%;
118
+ border-bottom: 1px #dfdfdf solid;
119
+ margin-bottom: 0.6rem;
120
+ }
121
+ }
122
+
123
+ #card-title-container {
124
+ height: auto;
125
+ border: none;
126
+ margin-bottom: 0.5rem;
127
+ text-align: left;
128
+ :first-child {
129
+ font-size: 1rem;
130
+ font-weight: 600;
131
+ margin-bottom: 1rem;
132
+ }
133
+
134
+ .form-label {
135
+ margin-bottom: 0.5rem;
136
+ }
137
+ }
138
+ .mobile-pay-title {
139
+ display: block;
140
+ font-weight: 600;
141
+ font-size: 1rem;
142
+ color: black;
143
+ padding: 0;
144
+ font-style: normal;
145
+ font-family: inherit;
146
+ margin-bottom: 1rem;
147
+ }
183
148
  }
184
149
 
185
- #ryft-threeDSMethodIframe {
186
- display: none;
150
+ @include media-breakpoint-up(md) {
151
+ .ryft-payment-form,
152
+ .iframe-payment-form {
153
+ position: relative;
154
+ max-height: 300px !important;
155
+ .submit-button-wrapper {
156
+ max-width: 15.5rem;
157
+ }
158
+ }
159
+
160
+ // it's style for Google and Apple pay container, for unknown reasons we can't move this html elements with appendChild or replaceChild
161
+ .ryft-pay-grid {
162
+ width: 100%;
163
+ max-width: 15.5rem;
164
+ margin-bottom: 1rem;
165
+ }
166
+ .ryft-pay-apple-pay-button {
167
+ border-radius: 0.25rem;
168
+ }
169
+
170
+ .divider {
171
+ display: none !important;
172
+ }
187
173
  }