@licklist/design 0.59.0-dev.5 → 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 (11) 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/iframe-external-modal/IframeExternalModal.scss +1 -0
  6. package/dist/styles/ryft-payment-form/RyftPaymentForm.scss +99 -113
  7. package/package.json +1 -1
  8. package/src/iframe/ryft/RyftPaymentForm.tsx +12 -4
  9. package/src/iframe/ryft/utils/ryft-form.ts +8 -4
  10. package/src/styles/iframe-external-modal/IframeExternalModal.scss +1 -0
  11. 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/iframe-external-modal/IframeExternalModal.scss CHANGED
@@ -100,6 +100,7 @@ body[bkdt-scrollable="false"] .bkdt-mask {
100
100
  .bkdt-modal-content {
101
101
  .bkdt-modal-body {
102
102
  height: 35rem;
103
+ max-height: 85vh;
103
104
  }
104
105
  }
105
106
  }
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.5",
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/iframe-external-modal/IframeExternalModal.scss CHANGED
@@ -100,6 +100,7 @@ body[bkdt-scrollable="false"] .bkdt-mask {
100
100
  .bkdt-modal-content {
101
101
  .bkdt-modal-body {
102
102
  height: 35rem;
103
+ max-height: 85vh;
103
104
  }
104
105
  }
105
106
  }
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
  }