oneclick_modal_code.js

one_click_modal_code.js

var views = sr_$.views;

var modalData = {
    logo_image: sr_$.logoImage || (sr_$.assetDomain + 'shoprunner/pik/logos/' + sr_$.model.config.assetName + '.png'),
    ecEnabled: sr_$.payrunner && sr_$.payrunner.Config && sr_$.payrunner.Config.cartBuyNowEnabled(),
    signedIn: sr_$.member.signed_in
};

sr_$.templates.unCompiled.oneclickEnroll =
'<div class="sr_oce"  id="sr_oc" data-sr-scroll="false">'+
'   <div id="sr_oc_nothanks" style="height: 357px;margin:0 auto; width: 334px;">'+
'    <ul class="sr_cols"> '+
'        <li class="sr_col sr_pad sr_center"  style="padding: 40px 10px 10px 10px;"> '+
'           <span class="oval stroke"></span> <span id="oce_thankyou" class="thanks-for-your-order">Thanks for your order! </span>'+
'        </li>'+
'        <li class="sr_col sr_pad sr_center"   style="padding: 20px 10px 10px 10px;"> '+
'            <div id="oce_hero" class="next_time_hero">Next time, checkout in just 1-Click!</div> '+
'        </li>'+
'        <li class="sr_col sr_pad sr_center"   style="padding: 10px 10px 10px 10px;">     '+
'            <div class="please-check-your-em">Activate Shoprunner\s 1-Click Checkout and get a safe and secure checkout at over 100 stores!</div> '+
'        </li>'+
'        <li class="sr_col sr_pad sr_center"   style="padding: 40px 10px 10px 10px;">     '+
'                <button id="oce_activate" class="rectangle-5 sr_center" onclick="javascript:void(0);"> '+
'                      <span class="sr_center"><span class="oval-29 sr_center"></span> <span class="rectangle-27 sr_center"></span></span> &nbsp;&nbsp;&nbsp;<span class="line"></span> &nbsp;&nbsp;&nbsp;<span class="cta">Activate this device</span>'+
'                </button>'+
'        </li>'+
'       <li class="sr_col sr_center" style="padding: 3px 10px 10px 10px;">'+
'            <a class="no_thanks_oce" href="javascript:void()" onclick="sr_$.Modal.close()">No thanks,go to order confirmation</a> </li>'+
'        <li class="sr_col sr_center" style="padding: 75px 2px 5px 2px;">'+
'                <div class="by-activating-1-clic">By activating 1-Click Checkout you will receive an email to your address on file  sa*********@gmail.com</div> '+
'        </li> '+
'    </ul> '+
'    </div> '+
'</div>';


function oneclickEnroll() {
    var view = views.createViewObject();
    let template = null;

    template = sr_$.templates.getTemplate('oneclickEnroll');
    view.html = template(modalData);
    view.onload = function() {
        console.log("dhool dhil")
    };
    return view;
}

sr_$.views.oneclickEnroll = oneclickEnroll;




/// One Click CSSS

@import url('https://fonts.googleapis.com/css?family=Lato');

#{$sr-container}{
    #sr_modal {
        #sr_oneclickEnroll {
            &.sr_oce {
                max-width: 450px;
                max-height: 580px;
                height: 580px;
                width: 450px;
            }
            #sr_oc .thanks-for-your-order {
                height: 25px;
                width: 131px;
                color: #23856E;
                font-family: "Brandon Grotesque";
                font-size: 15px;
                line-height: 22px;
                text-align: center;
            }

            #sr_oc .oval {	box-sizing: border-box;	height: 19.44px;	width: 19.44px;	border: 1.44px solid #23856E;}
            #sr_oc .stroke-3 {	box-sizing: border-box;	height: 10.8px;	width: 13.68px;	border: 1.44px solid #23856E;}

            #sr_oc .next_time_hero {
                height: 72px;
                width: 329px;
                color: #000000;
                font-family: Lato;
                font-size: 30px;
                line-height: 36px;
                text-align: center;
            }
            #sr_oc .please-check-your-em {
                height: 46.14px;
                width: 329.2px;
                color: #000000;
                font-family: Lato !important;
                font-size: 14px;
                font-weight: 300;
                line-height: 19px;
                text-align: center;
            }
            #sr_oc a.no_thanks_oce {	height: 15px;	width: 223.83px;	color: #4A4A4A;	font-family: Lato;	font-size: 12px;	font-weight: bold;	line-height: 15px;	text-align: center;}

            #sr_oc .rectangle-5 {	height: 50px;	width: 334px;	border-radius: 2px;	background-color: #1C1C1C;}
            #sr_oc .rectangle-5 .oval-29 {	box-sizing: border-box;	height: 4.31px;	width: 6.6px;	border: 1.4px solid #FFFFFF;}
            #sr_oc .rectangle-5 .rectangle-27 {	height: 9.69px;	width: 11px;	border: 2.2px solid #FFFFFF;	border-radius: 1.1px;	background-color: #FFFFFF;	box-shadow: inset 0 1px 0 1px rgba(0,0,0,0.5);}
            #sr_oc .rectangle-5 .line {	box-sizing: border-box;	height: 18.16px;	width: 2px;	border: 1px solid #FFFFFF;}
            #sr_oc .rectangle-5 .cta {	height: 24px;	width: 136px;	color: #FFFFFF;	font-family: "Brandon Grotesque";}
            #sr_oc .by-activating-1-clic {	height: 25.04px;	width: 310px;	color: #000000;	font-family: Lato;	font-size: 10px;	letter-spacing: 0.5px;	line-height: 12px;	text-align: center;}
        }
    }
}