Skip to content

Commit 4eaf82f

Browse files
poojarazorpoojarazor
committed
remove dual changes
1 parent 5eef841 commit 4eaf82f

File tree

3 files changed

+315
-1
lines changed

3 files changed

+315
-1
lines changed

‎btn-1cc-checkout.js

+15-1
Original file line numberDiff line numberDiff line change
@@ -193,7 +193,12 @@ window.addEventListener('DOMContentLoaded', function() {
193193

194194
async function openRzpCheckout(e) {
195195
e.preventDefault();
196-
rzp1cc.showSpinner(true);
196+
197+
if (window.MagicCheckout) {
198+
window.MagicCheckout.showModal();
199+
} else {
200+
rzp1cc.showSpinner(true);
201+
}
197202

198203
if (accessToken !== null)
199204
{
@@ -231,6 +236,15 @@ window.addEventListener('DOMContentLoaded', function() {
231236
rzp1cc.showSpinner(false);
232237

233238
}
239+
240+
razorpayCheckout.on('render',() => {
241+
if(window.MagicCheckout){
242+
window.MagicCheckout?.hideModal();
243+
}else{
244+
rzp1cc.showSpinner(false);
245+
}
246+
247+
});
234248
})
235249
.catch(e => {
236250
// Response sent to the User when cart is empty or order creation fails

‎public/js/modal.js

+295
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,295 @@
1+
const merchantName =
2+
preloadCheckoutData || '';
3+
const styleSnippet = `
4+
#magic-modal {
5+
font-family: Inter, lato, ubuntu, helvetica, sans-serif;
6+
font-feature-settings: "liga", 0;
7+
font-size: 14px;
8+
background: white;
9+
width: 344px;
10+
box-sizing: border-box;
11+
color: rgb(38, 58, 74);
12+
display: inline-flex;
13+
flex-direction: column;
14+
white-space: normal;
15+
z-index: 1;
16+
height: 560px;
17+
vertical-align: middle;
18+
}
19+
20+
@media (min-width: 992px) {
21+
#magic-modal {
22+
height: 600px;
23+
}
24+
}
25+
26+
#magic-wrapper {
27+
position: fixed;
28+
top: 0;
29+
width: 100%;
30+
height: 100%;
31+
max-height: 100%;
32+
bottom: 0;
33+
left: 0;
34+
right: 0;
35+
text-align: center;
36+
z-index: 2147483647;
37+
background: rgba(0, 0, 0, 0.6);
38+
39+
-webkit-transition: opacity 0.6s ease-in;
40+
-moz-transition: opacity 0.6s ease-in;
41+
-ms-transition: opacity 0.6s ease-in;
42+
-o-transition: opacity 0.6s ease-in;
43+
transition: opacity 0.6s ease-in;
44+
}
45+
46+
#magic-wrapper::after {
47+
content: '';
48+
height: 96%;
49+
display: inline-block;
50+
width: 0;
51+
vertical-align: middle;
52+
}
53+
54+
.magic-shimmer {
55+
background: #F0F0F0;
56+
}
57+
58+
.magic-shimmer::after {
59+
content: '';
60+
width: 100%;
61+
height: 100%;
62+
background-image: linear-gradient(114deg, #F0F0F0 0%, rgba(255, 255, 255, 0.7) 30%, rgba(255, 255, 255, 0) 40%, #F0F0F0 100%);
63+
background-repeat: no-repeat;
64+
background-size: 800px 104px;
65+
display: inline-block;
66+
position: relative;
67+
68+
-webkit-animation-duration: 2s;
69+
-webkit-animation-fill-mode: forwards;
70+
-webkit-animation-iteration-count: infinite;
71+
-webkit-animation-name: magicShimmer;
72+
-webkit-animation-timing-function: linear;
73+
}
74+
75+
.magic-w-100 {
76+
width: 100%;
77+
}
78+
79+
@-webkit-keyframes magicShimmer {
80+
0% {
81+
background-position: -468px 0;
82+
}
83+
84+
100% {
85+
background-position: 468px 0;
86+
}
87+
}
88+
89+
#magic-merchant-heading {
90+
padding: 8px 16px 18px;
91+
height: 76px;
92+
min-height: 76px;
93+
box-sizing: border-box;
94+
display: flex;
95+
justify-content: space-between;
96+
align-items: end;
97+
}
98+
99+
#magic-close-action {
100+
display: block;
101+
width: 60px;
102+
height: 20px;
103+
}
104+
105+
#magic-navigation-section {
106+
box-shadow: 10px 10px 30px rgb(107 108 109 / 10%);
107+
border-top: 1px solid #e1e5ea;
108+
border-bottom: 1px solid #e1e5ea;
109+
display: flex;
110+
padding: 10px 16px;
111+
gap: 7px;
112+
}
113+
114+
#magic-back-action {
115+
display: block;
116+
width: 20px;
117+
height: 22px;
118+
}
119+
120+
.magic-flex-1 {
121+
flex: 1;
122+
}
123+
124+
#magic-contact-widget {
125+
display: block;
126+
padding: 26px 16px 27px 16px;
127+
text-align: start;
128+
}
129+
130+
#magic-contact-heading {
131+
height: 29px;
132+
display: flex;
133+
gap: 7px;
134+
}
135+
136+
#magic-contact-icon {
137+
display: block;
138+
width: 29px;
139+
}
140+
141+
#magic-contact-title {
142+
display: block;
143+
width: 120px;
144+
}
145+
146+
#magic-contact-input {
147+
display: block;
148+
height: 29px;
149+
margin-top: 15px;
150+
}
151+
152+
#magic-email-input {
153+
display: block;
154+
height: 29px;
155+
margin-top: 18px;
156+
}
157+
158+
#magic-contact-extra {
159+
display: block;
160+
width: 156px;
161+
height: 29px;
162+
margin-top: 18px;
163+
}
164+
165+
div.magic-seperator {
166+
display: block;
167+
height: 10px;
168+
background-color: #f8fafd;
169+
}
170+
171+
#magic-coupons-widget {
172+
display: flex;
173+
justify-content: start;
174+
gap: 7px;
175+
padding: 20px 16px;
176+
}
177+
178+
#magic-coupon-icon {
179+
display: block;
180+
width: 29px;
181+
height: 29px;
182+
}
183+
184+
#magic-coupon-label {
185+
display: block;
186+
width: 120px;
187+
height: 29px;
188+
}
189+
190+
#magic-cta-container {
191+
padding: 14px 16px;
192+
gap: 8px;
193+
display: flex;
194+
align-items: end;
195+
box-shadow: 0 -4px 8px rgb(107 108 109 / 13%);
196+
justify-content: space-between;
197+
}
198+
199+
#magic-cta-button {
200+
display: block;
201+
width: 70%;
202+
height: 53px;
203+
}
204+
205+
div.magic-cta-line {
206+
display: block;
207+
width: 66px;
208+
height: 20px;
209+
}
210+
211+
@media screen and (max-width: 414px) {
212+
#magic-modal {
213+
width: 100%;
214+
height: 100%;
215+
}
216+
}
217+
218+
.magic-scrollable {
219+
flex: 1;
220+
overflow-y: hidden;
221+
height: 100%;
222+
}
223+
224+
#magic-merchant-name {
225+
display: block;
226+
font-size: 16px;
227+
font-weight: 600;
228+
line-height: 18px;
229+
}
230+
`;
231+
232+
const htmlSnippet = `
233+
<div id="magic-modal">
234+
<div id="magic-merchant-heading">
235+
<div id="magic-merchant-name">${merchantName}</div>
236+
<div class="magic-shimmer" id="magic-close-action"></div>
237+
</div>
238+
<div id="magic-navigation-section">
239+
<div class="magic-shimmer" id="magic-back-action"></div>
240+
<div class="magic-shimmer magic-flex-1"></div>
241+
</div>
242+
<div class="magic-scrollable">
243+
<div id="magic-contact-widget">
244+
<div id="magic-contact-heading">
245+
<div class="magic-shimmer" id="magic-contact-icon"></div>
246+
<div class="magic-shimmer" id="magic-contact-title"></div>
247+
</div>
248+
<div id="magic-contact-input" class="magic-shimmer magic-w-100"></div>
249+
<div id="magic-email-input" class="magic-shimmer magic-w-100"></div>
250+
<div id="magic-contact-extra" class="magic-shimmer magic-w-100"></div>
251+
</div>
252+
<div class="magic-seperator"></div>
253+
<div id="magic-coupons-widget">
254+
<div class="magic-shimmer" id="magic-coupon-icon"></div>
255+
<div class="magic-shimmer" id="magic-coupon-label"></div>
256+
</div>
257+
<div class="magic-seperator"></div>
258+
<div id="magic-coupons-widget">
259+
<div class="magic-shimmer" id="magic-coupon-icon"></div>
260+
<div class="magic-shimmer" id="magic-coupon-label"></div>
261+
</div>
262+
<div class="magic-seperator"></div>
263+
</div>
264+
<div id="magic-cta-container">
265+
<div style="text-align: start; display: flex; flex-direction: column; gap: 13px">
266+
<div class="magic-cta-line magic-shimmer"></div>
267+
<div class="magic-cta-line magic-shimmer"></div>
268+
</div>
269+
<div id="magic-cta-button" class="magic-shimmer"></div>
270+
</div>
271+
</div>
272+
`;
273+
274+
const styleNode = document.createElement('style');
275+
styleNode.type = 'text/css';
276+
styleNode.innerHTML = styleSnippet;
277+
278+
document.head.appendChild(styleNode);
279+
280+
window.MagicCheckout = {};
281+
282+
window.MagicCheckout.showModal = function() {
283+
const modal = document.createElement('div');
284+
modal.id = 'magic-wrapper';
285+
modal.innerHTML = htmlSnippet;
286+
287+
document.body.appendChild(modal);
288+
};
289+
290+
window.MagicCheckout.hideModal = function() {
291+
const modal = document.querySelector('#magic-wrapper');
292+
293+
modal.style.opacity = '0';
294+
setTimeout(() => document.body.removeChild(modal), 600);
295+
};

‎woo-razorpay.php

+5
Original file line numberDiff line numberDiff line change
@@ -1954,6 +1954,11 @@ function enqueueScriptsFor1cc()
19541954
wp_register_style(RZP_1CC_CSS_SCRIPT, plugin_dir_url(__FILE__) . 'public/css/1cc-product-checkout.css', null, null);
19551955
wp_enqueue_style(RZP_1CC_CSS_SCRIPT);
19561956

1957+
// preload shimmer checkout data
1958+
wp_register_script('modal', plugin_dir_url(__FILE__) . 'public/js/modal.js', null, null);
1959+
wp_localize_script('modal', 'preloadCheckoutData', get_bloginfo('name') );
1960+
wp_enqueue_script('modal');
1961+
19571962
wp_register_script('btn_1cc_checkout', plugin_dir_url(__FILE__) . 'btn-1cc-checkout.js', null, null);
19581963
wp_localize_script('btn_1cc_checkout', 'rzp1ccCheckoutData', array(
19591964
'nonce' => wp_create_nonce("wp_rest"),

0 commit comments

Comments
 (0)