tango-app-ui-auth 3.1.5-dev → 3.1.6-dev

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 (18) hide show
  1. package/esm2022/lib/components/tango-auth/tango-auth.component.mjs +3 -3
  2. package/esm2022/lib/components/tango-auth-forgot-password/tango-auth-forgot-password.component.mjs +3 -3
  3. package/esm2022/lib/components/tango-auth-login/tango-auth-login.component.mjs +7 -7
  4. package/esm2022/lib/components/tango-auth-signup/step/calendly-modal/calendly-modal.component.mjs +3 -3
  5. package/esm2022/lib/components/tango-auth-signup/step/modal-content/modal-content.component.mjs +3 -3
  6. package/esm2022/lib/components/tango-auth-signup/step/services/conversion.service.mjs +3 -3
  7. package/esm2022/lib/components/tango-auth-signup/step/step1/step1.component.mjs +3 -3
  8. package/esm2022/lib/components/tango-auth-signup/step/step2/step2.component.mjs +3 -3
  9. package/esm2022/lib/components/tango-auth-signup/step/step3/step3.component.mjs +3 -3
  10. package/esm2022/lib/components/tango-auth-signup/tango-auth-signup.component.mjs +3 -3
  11. package/esm2022/lib/components/tango-auth-signup/vertical/vertical.component.mjs +3 -3
  12. package/esm2022/lib/guards/auth.guard.mjs +3 -3
  13. package/esm2022/lib/services/auth.service.mjs +3 -3
  14. package/esm2022/lib/tango-auth-routing.module.mjs +4 -4
  15. package/esm2022/lib/tango-auth.module.mjs +4 -4
  16. package/fesm2022/tango-app-ui-auth.mjs +50 -50
  17. package/fesm2022/tango-app-ui-auth.mjs.map +1 -1
  18. package/package.json +1 -1
package/esm2022/lib/components/tango-auth-signup/step/step2/step2.component.mjs CHANGED
@@ -347,10 +347,10 @@ export class Step2Component {
347
347
  onPriceChange() {
348
348
  this.getPricingData();
349
349
  }
350
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: Step2Component, deps: [{ token: i1.NgbModal }, { token: i2.ConversionService }, { token: i3.AuthService }, { token: i4.FormBuilder }, { token: i0.ChangeDetectorRef }, { token: i5.ToastService }], target: i0.ɵɵFactoryTarget.Component });
351
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: Step2Component, selector: "lib-step2", ngImport: i0, template: "<div class=\"card mt-10 mx-15\">\r\n <div class=\"h-100 px-5 mx-5 mt-7\">\r\n <!-- <img class=\"bubble\" src=\"./assets/tango/Icons/Signup-bubble-icon.svg\"\r\n alt=\"\" srcset=\"\"> -->\r\n\r\n <div class=\"d-flex flex-column beforeChoosing my-12\">\r\n <h1 class=\"heading mb-5\">How many stores do you have?</h1>\r\n <div class=\"row\">\r\n <div class=\"col-md-12 col-lg-9 col-xl-8 col-xxl-8 w-auto\">\r\n <div class=\"d-flex align-items-center bg-gray\">\r\n <div class=\"d-flex align-items-center justify-content-center activeClass cursor-pointer \"\r\n *ngFor=\"let count of storeCounts\" (click)=\"activeStoreCount(count)\" \r\n [class.activeClass]=\"count.active\">\r\n <div class=\"d-flex align-items-center mx-2\">\r\n <div class=\"fs-4 fw-bold\" [ngClass]=\"count.active === true? 'store-primary':'text-color'\">{{ count.text }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"storedetials\">\r\n <h2 class=\"heading mt-10 mb-5 \">What's the average size of your store?</h2>\r\n <div class=\"row\">\r\n <div class=\"col-md-12 col-lg-12 col-xl-12 col-xxl-12 w-auto\">\r\n <div class=\"d-flex align-items-center bg-gray\">\r\n <div class=\"d-flex align-items-center justify-content-center activeClass cursor-pointer\"\r\n [class.activeClass]=\"i.active\" [class.disabled]=\"i.disabled\" *ngFor=\"let i of featAreaOptions\"\r\n (click)=\"activefeatArea(i)\">\r\n <div class=\"d-flex align-items-center mx-2\">\r\n <div class=\"fs-4 fw-bold\" [ngClass]=\"i.active === true? 'store-primary':'text-color'\">{{ i.text }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"featAreaCamera\" class=\"notice d-flex mt-5\">\r\n <div class=\"d-flex justify-content-center align-items-center gap-16px\">\r\n <span class=\"border-store\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M1.3335 9.66667L8.00016 13L14.6668 9.66667M8.00016 3L1.3335 6.33333L8.00016 9.66667L14.6668 6.33333L8.00016 3Z\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <div class=\"featareaval ms-4\">Maximum {{featAreaCamera}} Cameras are permitted in stores with\r\n square feet between\r\n {{featArea}}.</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"pricevalue\">\r\n <div class=\"card-body px-0 mt-10\">\r\n <!--begin::Plans-->\r\n <div class=\"d-flex flex-column\">\r\n <!--begin::Heading-->\r\n <div class=\"mb-10 text-start\">\r\n <h1 class=\"heading mb-5\">Plan Details</h1>\r\n </div>\r\n <!--end::Heading-->\r\n\r\n <!--begin::Nav group-->\r\n <div class=\"nav-group nav-group-outline mx-auto mb-15\">\r\n <button class=\"btn btn-color-gray-600 btn-active btn-active-secondary px-6 py-3 me-2\"\r\n [ngClass]=\"plan === 'monthly'? 'activePlanBtn':'inactivePlanBtn'\" data-kt-plan=\"month\"\r\n (click)=\"selectPlan('monthly')\">\r\n Monthly\r\n </button>\r\n\r\n <button class=\"btn btn-color-gray-600 btn-active btn-active-secondary px-6 py-3\"\r\n [ngClass]=\"plan === 'quarterly'? 'activePlanBtn':'inactivePlanBtn'\"\r\n data-kt-plan=\"Quarterly\" (click)=\"selectPlan('quarterly')\">\r\n Quarterly - 10%\r\n </button>\r\n <button class=\"btn btn-color-gray-600 btn-active btn-active-secondary px-6 py-3\"\r\n [ngClass]=\"plan === 'annual'? 'activePlanBtn':'inactivePlanBtn'\" data-kt-plan=\"annual\"\r\n (click)=\"selectPlan('annual')\">\r\n Annual - 15%\r\n </button>\r\n </div>\r\n <!--end::Nav group-->\r\n\r\n <!--begin::Row-->\r\n <div class=\"row g-10\">\r\n <!--begin::Col-->\r\n <div class=\"col-md-6 col-lg-4 col-xl-4 col-xxl-4 h-100\">\r\n <div class=\"d-flex align-items-center\">\r\n <!--begin::Option-->\r\n <div class=\"w-100 d-flex flex-column flex-start rounded-3 py-15 px-10\"\r\n [ngClass]=\"countOfStore === '1'? 'freeplan':'bg-light'\">\r\n <!--begin::Heading-->\r\n <div class=\"mb-7 text-start\">\r\n <!--begin::Title-->\r\n <h1 class=\"price-head mb-5\">Free <span\r\n class=\"life-title fw-semibold mx-2\">Lifetime</span></h1>\r\n <!--end::Title-->\r\n\r\n <!--begin::Description-->\r\n <div class=\"price-sub-head mb-5\">\r\n Integrated Solution for single store owners\r\n </div>\r\n <!--end::Description-->\r\n\r\n <!--begin::Price-->\r\n <div class=\"text-start \">\r\n <span class=\"mb-2 text-primary text-val ms-1\" *ngIf=\"this.aboutFormData.countryCode==='91'\">\u20B9</span>\r\n <span class=\"mb-2 text-primary text-val ms-1\" *ngIf=\"this.aboutFormData.countryCode !=='91'\">$</span>\r\n <span class=\"fs-3x fw-bold text-primary text-val\">0 </span>\r\n </div>\r\n <!--end::Price-->\r\n <div class=\"fw-semibold\">\r\n <span class=\"period\">per store per month</span>\r\n </div>\r\n </div>\r\n <!--end::Heading-->\r\n\r\n <!--begin::Features-->\r\n <div class=\"w-100\">\r\n <div class=\"d-flex flex-stack mb-10\"><span\r\n class=\"plan-head me-2 fs-14px\">Tango Traffic</span>\r\n <div class=\"form-check form-switch\">\r\n <input class=\"form-check-input\" type=\"checkbox\" role=\"switch\"\r\n id=\"tangotraffic\" checked=\"\" disabled=\"\">\r\n\r\n </div>\r\n </div>\r\n <!--begin::Item-->\r\n <div class=\"d-flex align-items-center mb-10\">\r\n <span class=\"plan-head\">\r\n To accurately measure traffic and map shopper\u2019s in-store journey\r\n </span>\r\n </div>\r\n <!--end::Item-->\r\n <!--begin::Item-->\r\n <div class=\"d-flex align-items-start mb-5\">\r\n <span class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\"\r\n height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1199_8736)\">\r\n <path\r\n d=\"M14.6668 7.38625V7.99958C14.666 9.4372 14.2005 10.836 13.3397 11.9875C12.4789 13.1389 11.269 13.9812 9.8904 14.3889C8.51178 14.7965 7.03834 14.7475 5.68981 14.2493C4.34128 13.7511 3.18993 12.8303 2.40747 11.6243C1.62501 10.4183 1.25336 8.99163 1.34795 7.55713C1.44254 6.12263 1.9983 4.75713 2.93235 3.6643C3.8664 2.57146 5.12869 1.80984 6.53096 1.49301C7.93323 1.17619 9.40034 1.32114 10.7135 1.90625M14.6668 2.66625L8.00017 9.33958L6.00017 7.33958\"\r\n stroke=\"#667085\" stroke-width=\"1.3\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1199_8736\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n <span class=\"plan-sub \">\r\n Footfall Analysis </span>\r\n </div>\r\n <!--end::Item-->\r\n <!--begin::Item-->\r\n <div class=\"d-flex align-items-start mb-5\">\r\n <span class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\"\r\n height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1199_8736)\">\r\n <path\r\n d=\"M14.6668 7.38625V7.99958C14.666 9.4372 14.2005 10.836 13.3397 11.9875C12.4789 13.1389 11.269 13.9812 9.8904 14.3889C8.51178 14.7965 7.03834 14.7475 5.68981 14.2493C4.34128 13.7511 3.18993 12.8303 2.40747 11.6243C1.62501 10.4183 1.25336 8.99163 1.34795 7.55713C1.44254 6.12263 1.9983 4.75713 2.93235 3.6643C3.8664 2.57146 5.12869 1.80984 6.53096 1.49301C7.93323 1.17619 9.40034 1.32114 10.7135 1.90625M14.6668 2.66625L8.00017 9.33958L6.00017 7.33958\"\r\n stroke=\"#667085\" stroke-width=\"1.3\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1199_8736\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n <span class=\"plan-sub \">\r\n Bounced vs Engager Analysis </span>\r\n\r\n </div>\r\n <!--end::Item-->\r\n <!--begin::Item-->\r\n <div class=\"d-flex align-items-start mb-5\">\r\n <span class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\"\r\n height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1199_8736)\">\r\n <path\r\n d=\"M14.6668 7.38625V7.99958C14.666 9.4372 14.2005 10.836 13.3397 11.9875C12.4789 13.1389 11.269 13.9812 9.8904 14.3889C8.51178 14.7965 7.03834 14.7475 5.68981 14.2493C4.34128 13.7511 3.18993 12.8303 2.40747 11.6243C1.62501 10.4183 1.25336 8.99163 1.34795 7.55713C1.44254 6.12263 1.9983 4.75713 2.93235 3.6643C3.8664 2.57146 5.12869 1.80984 6.53096 1.49301C7.93323 1.17619 9.40034 1.32114 10.7135 1.90625M14.6668 2.66625L8.00017 9.33958L6.00017 7.33958\"\r\n stroke=\"#667085\" stroke-width=\"1.3\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1199_8736\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n <span class=\"plan-sub \">\r\n Missed Opportunity Vs Conversion Rate </span>\r\n\r\n </div>\r\n <!--end::Item-->\r\n <!--begin::Item-->\r\n <div class=\"d-flex align-items-start mb-5\">\r\n <span class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\"\r\n height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1199_8736)\">\r\n <path\r\n d=\"M14.6668 7.38625V7.99958C14.666 9.4372 14.2005 10.836 13.3397 11.9875C12.4789 13.1389 11.269 13.9812 9.8904 14.3889C8.51178 14.7965 7.03834 14.7475 5.68981 14.2493C4.34128 13.7511 3.18993 12.8303 2.40747 11.6243C1.62501 10.4183 1.25336 8.99163 1.34795 7.55713C1.44254 6.12263 1.9983 4.75713 2.93235 3.6643C3.8664 2.57146 5.12869 1.80984 6.53096 1.49301C7.93323 1.17619 9.40034 1.32114 10.7135 1.90625M14.6668 2.66625L8.00017 9.33958L6.00017 7.33958\"\r\n stroke=\"#667085\" stroke-width=\"1.3\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1199_8736\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n <span class=\"plan-sub \">\r\n Footfall Image Directory by the hour. </span>\r\n\r\n </div>\r\n <!--end::Item-->\r\n\r\n\r\n\r\n </div>\r\n <!--end::Features-->\r\n <!--begin::Select-->\r\n <button [disabled]=\"selectedCounts.value !== '1'\" class=\"btn btn-sm btn-primary w-100 button-size\"\r\n (click)=\"plandet('free')\">Get Started</button>\r\n <!--end::Select-->\r\n </div>\r\n <!--end::Option-->\r\n </div>\r\n </div>\r\n <!--end::Col-->\r\n <!--begin::Col-->\r\n <div class=\"col-md-6 col-lg-4 col-xl-4 col-xxl-4 h-100\">\r\n <div class=\"d-flex align-items-center\">\r\n <!--begin::Option-->\r\n <div class=\"w-100 d-flex flex-column flex-start rounded-3 text-container py-15 px-10\"\r\n [ngClass]=\"countOfStore === '2-25' || countOfStore === '26-50' || countOfStore === '26-50' || countOfStore === '51-75' || countOfStore === '76-100'? 'freeplan':'bg-light'\">\r\n <!--begin::Heading-->\r\n <div class=\"mb-7 text-start text-container\">\r\n <!--begin::Title-->\r\n <h1 class=\"price-head mb-5\">Premium</h1>\r\n <!--end::Title-->\r\n\r\n <!--begin::Description-->\r\n <div class=\"price-sub-head mb-5\">\r\n Integrated Solution for Growing Business\r\n </div>\r\n <!--end::Description-->\r\n <button\r\n class=\"top-right btn-margin btn btn-lg btn-primary btn-height py-1 cursor-auto mt-3\">Recommended</button>\r\n <!--begin::Price-->\r\n <div class=\"text-start mt-15\">\r\n <span class=\"price-sub-head\">Starts from</span>\r\n <span class=\"mb-2 text-primary text-val ms-1\" *ngIf=\"this.aboutFormData.countryCode==='91'\">\u20B9</span>\r\n <span class=\"mb-2 text-primary text-val ms-1\" *ngIf=\"this.aboutFormData.countryCode !=='91'\">$</span>\r\n <span class=\"pricecodesize\" ><b\r\n class=\"pricecodecolor text-set mx-2\"> {{pricingData?.OriginalPrice}}\r\n </b>\r\n </span>\r\n <span class=\"fs-3x fw-bold text-primary text-val\">{{pricingData?.price}}</span>\r\n </div>\r\n <!--end::Price-->\r\n <div class=\"fw-semibold\">\r\n <span class=\"period\">per store per month</span>\r\n </div>\r\n </div>\r\n <!--end::Heading-->\r\n <form [formGroup]=\"productForm\" action=\"\" class=\"w-100 mb-3\">\r\n <!--begin::Features-->\r\n <div class=\"w-100\">\r\n <!--begin::Item-->\r\n <div class=\"d-flex flex-stack mt-10 mb-5\"><span\r\n class=\"plan-head me-2 fs-14px line-height\"\r\n (click)=\"showViewMore('traffic')\">Tango Traffic\r\n <span class=\"ms-1 cursor-pointer\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\"\r\n height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1199_8686)\">\r\n <path\r\n d=\"M6 8.16699V6.16699M6 4.16699H6.005M11 6.16699C11 8.92842 8.76142 11.167 6 11.167C3.23858 11.167 1 8.92842 1 6.16699C1 3.40557 3.23858 1.16699 6 1.16699C8.76142 1.16699 11 3.40557 11 6.16699Z\"\r\n stroke=\"#98A2B3\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1199_8686\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"\r\n transform=\"translate(0 0.166992)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n </span>\r\n <div class=\"form-check form-switch\">\r\n <input (change)=\"onPriceChange()\" style=\"pointer-events: none; background-color: #6BCAFF !important; border-color: #6BCAFF !important;\" formControlName=\"tangoTraffic\" class=\"form-check-input\"\r\n type=\"checkbox\" role=\"switch\" id=\"tangotraffic\" checked=\"\">\r\n </div>\r\n </div>\r\n <!--end::Item-->\r\n <!--begin::Item-->\r\n <div class=\"d-flex flex-stack mb-5\"><span class=\"plan-head me-2 fs-14px line-height\"\r\n (click)=\"showViewMore('zone')\">Tango Zone\r\n <span class=\"ms-1 cursor-pointer\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\"\r\n height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1199_8686)\">\r\n <path\r\n d=\"M6 8.16699V6.16699M6 4.16699H6.005M11 6.16699C11 8.92842 8.76142 11.167 6 11.167C3.23858 11.167 1 8.92842 1 6.16699C1 3.40557 3.23858 1.16699 6 1.16699C8.76142 1.16699 11 3.40557 11 6.16699Z\"\r\n stroke=\"#98A2B3\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1199_8686\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"\r\n transform=\"translate(0 0.166992)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n </span>\r\n <div class=\"form-check form-switch\">\r\n <input (change)=\"onPriceChange()\" formControlName=\"tangoZone\" class=\"form-check-input\"\r\n type=\"checkbox\" role=\"switch\" id=\"tangozone\" checked=\"\">\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-stack mb-5\"><span class=\"plan-head me-2 fs-14px line-height\"\r\n (click)=\"showViewMore('sop')\">Tango SOP\r\n <span class=\"ms-1 cursor-pointer\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\"\r\n height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1199_8686)\">\r\n <path\r\n d=\"M6 8.16699V6.16699M6 4.16699H6.005M11 6.16699C11 8.92842 8.76142 11.167 6 11.167C3.23858 11.167 1 8.92842 1 6.16699C1 3.40557 3.23858 1.16699 6 1.16699C8.76142 1.16699 11 3.40557 11 6.16699Z\"\r\n stroke=\"#98A2B3\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1199_8686\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"\r\n transform=\"translate(0 0.166992)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n </span>\r\n <div class=\"form-check form-switch\">\r\n <input (change)=\"onPriceChange()\" formControlName=\"tangoSop\" class=\"form-check-input\"\r\n type=\"checkbox\" role=\"switch\" id=\"tangosop\" checked=\"\">\r\n\r\n </div>\r\n </div>\r\n <!--end::Item-->\r\n <!--begin::Item-->\r\n <div class=\"d-flex flex-stack mb-5\"><span class=\"plan-head me-2 fs-14px line-height\"\r\n (click)=\"showViewMore('support')\">Priority Support\r\n <span class=\"ms-1 cursor-pointer\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\"\r\n height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1199_8686)\">\r\n <path\r\n d=\"M6 8.16699V6.16699M6 4.16699H6.005M11 6.16699C11 8.92842 8.76142 11.167 6 11.167C3.23858 11.167 1 8.92842 1 6.16699C1 3.40557 3.23858 1.16699 6 1.16699C8.76142 1.16699 11 3.40557 11 6.16699Z\"\r\n stroke=\"#98A2B3\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1199_8686\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"\r\n transform=\"translate(0 0.166992)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n </span>\r\n <div class=\"form-check form-switch\">\r\n <input (change)=\"onPriceChange()\" formControlName=\"prioritySupport\"\r\n class=\"form-check-input\" type=\"checkbox\" role=\"switch\"\r\n id=\"support\" checked=\"\">\r\n\r\n </div>\r\n </div>\r\n <!--end::Item-->\r\n\r\n\r\n </div>\r\n <!--end::Features-->\r\n </form>\r\n\r\n\r\n <!--begin::Select-->\r\n <button class=\"btn btn-sm btn-primary button-size w-100\"\r\n (click)=\"plandet('premium')\">Start 14 day trial</button>\r\n <!--end::Select-->\r\n </div>\r\n <!--end::Option-->\r\n </div>\r\n </div>\r\n <!--end::Col-->\r\n <!--begin::Col-->\r\n <div class=\"col-md-6 col-lg-4 col-xl-4 col-xxl-4 h-100\">\r\n <div class=\"d-flex align-items-center\">\r\n <!--begin::Option-->\r\n <div class=\"w-100 d-flex flex-column flex-start rounded-3 py-15 px-10\"\r\n [ngClass]=\"countOfStore === '101-150'? 'freeplan':'bg-light'\">\r\n <!--begin::Heading-->\r\n <div class=\"mb-7 text-start\">\r\n <!--begin::Title-->\r\n <h1 class=\"price-head mb-5\">Enterprise</h1>\r\n <!--end::Title-->\r\n\r\n <!--begin::Description-->\r\n <div class=\"price-sub-head mb-5\">\r\n Integrated Solutions for Larger Business\r\n </div>\r\n <!--end::Description-->\r\n\r\n <!--begin::Price-->\r\n <div class=\"text-start mt-12\">\r\n\r\n <span class=\"fs-3x fw-bold text-primary text-val\">\r\n Let\u2019s Talk!</span>\r\n\r\n </div>\r\n <!--end::Price-->\r\n </div>\r\n <!--end::Heading-->\r\n\r\n <!--begin::Features-->\r\n <div class=\"w-100 h-239px mb-10\">\r\n <!--begin::Item-->\r\n <div class=\"d-flex align-items-start mb-5\">\r\n <span class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\"\r\n height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1199_8736)\">\r\n <path\r\n d=\"M14.6668 7.38625V7.99958C14.666 9.4372 14.2005 10.836 13.3397 11.9875C12.4789 13.1389 11.269 13.9812 9.8904 14.3889C8.51178 14.7965 7.03834 14.7475 5.68981 14.2493C4.34128 13.7511 3.18993 12.8303 2.40747 11.6243C1.62501 10.4183 1.25336 8.99163 1.34795 7.55713C1.44254 6.12263 1.9983 4.75713 2.93235 3.6643C3.8664 2.57146 5.12869 1.80984 6.53096 1.49301C7.93323 1.17619 9.40034 1.32114 10.7135 1.90625M14.6668 2.66625L8.00017 9.33958L6.00017 7.33958\"\r\n stroke=\"#667085\" stroke-width=\"1.3\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1199_8736\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n <span class=\"price-sub-head fw-semibold \">\r\n Do you have more than 100 stores?</span>\r\n\r\n </div>\r\n <!--end::Item-->\r\n <!--begin::Item-->\r\n <div class=\"d-flex align-items-start mb-5\">\r\n <span class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\"\r\n height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1199_8736)\">\r\n <path\r\n d=\"M14.6668 7.38625V7.99958C14.666 9.4372 14.2005 10.836 13.3397 11.9875C12.4789 13.1389 11.269 13.9812 9.8904 14.3889C8.51178 14.7965 7.03834 14.7475 5.68981 14.2493C4.34128 13.7511 3.18993 12.8303 2.40747 11.6243C1.62501 10.4183 1.25336 8.99163 1.34795 7.55713C1.44254 6.12263 1.9983 4.75713 2.93235 3.6643C3.8664 2.57146 5.12869 1.80984 6.53096 1.49301C7.93323 1.17619 9.40034 1.32114 10.7135 1.90625M14.6668 2.66625L8.00017 9.33958L6.00017 7.33958\"\r\n stroke=\"#667085\" stroke-width=\"1.3\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1199_8736\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n <span class=\"price-sub-head fw-semibold \">\r\n Rest assured, our dedicated account managers are here to support you\r\n every\r\n step of the way.</span>\r\n\r\n </div>\r\n <!--end::Item-->\r\n\r\n\r\n </div>\r\n <!--end::Features-->\r\n\r\n <!--begin::Select-->\r\n <button class=\"btn btn-sm btn-primary button-size w-100\"\r\n (click)=\"plandet('enterprise')\">Request Call Back</button>\r\n <!--end::Select-->\r\n </div>\r\n <!--end::Option-->\r\n </div>\r\n </div>\r\n <!--end::Col-->\r\n </div>\r\n <!--end::Row-->\r\n </div>\r\n <!--end::Plans-->\r\n </div>\r\n </div>\r\n <div class=\"row mt-12\">\r\n <div class=\"col-md-2\">\r\n <button type=\"button\" class=\"btn btn-lg text-nowrap btn-set me-5\" (click)=\"prevStep()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\" viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path d=\"M13 15L8 10L13 5\" stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg> Previous\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"mb-3 d-flex flex-column flex-md-row flex-md-stack pt-3 container-fluid\">\r\n <div class=\"text-gray-900 order-2 order-md-1 ms-10\">\r\n <span class=\"me-1 footer\">\u00A9 2024 </span>\r\n <a target=\"_blank\" href=\"https://tangoeye.ai\" class=\"footer\">Tango IT Solutions India Pvt Ltd</a>\r\n </div>\r\n <ul class=\"menu menu-gray-600 menu-hover-primary fw-semibold order-1 me-7\">\r\n <li class=\"menu-item footer\"><a target=\"_blank\" href=\"https://tangoeye.ai/#aboutus\" class=\"menu-link px-5\">About us</a></li>\r\n <li class=\"menu-item footer\"><a target=\"_blank\" href=\"https://tangoeye.ai/#contact\" class=\"menu-link px-5\">Contact Us</a></li>\r\n <li class=\"menu-item footer\"><a target=\"_blank\" href=\"https://tangoeye.ai/privacy-policy-2/\" class=\"menu-link px-5\">Privacy & policy</a></li>\r\n </ul>\r\n </div>\r\n</div>\r\n\r\n<div class=\"overlay\" *ngIf=\"popup\">\r\n <div class=\"popup\">\r\n <svg width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#DAF1FF\" />\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#EAF8FF\" stroke-width=\"8\" />\r\n <path d=\"M38 18L27 29M38 18L31 38L27 29M38 18L18 25L27 29\" stroke=\"#00A3FF\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <h3 class=\"fw-bold get-touch my-5\">Get In Touch</h3>\r\n <div class=\"fw-normal get-sub mb-5\">Have questions? We\u2019re here to help. Send us a message, and we\u2019ll respond\r\n within\r\n 24 hours.</div>\r\n <div class=\"notice d-flex bg-light-primary rounded border-primary cursor-pointer my-4\"\r\n (click)=\"checkvalue('time')\" [ngClass]=\"timevalue === 'time'? 'touch-primary':'untouch-primary'\">\r\n <svg width=\"56\" height=\"56\" viewBox=\"0 0 36 36\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"2\" y=\"2\" width=\"32\" height=\"32\" rx=\"16\" fill=\"#DAF1FF\" />\r\n <rect x=\"2\" y=\"2\" width=\"32\" height=\"32\" rx=\"16\" stroke=\"#EAF8FF\" stroke-width=\"4\" />\r\n <path d=\"M25.3332 14.6663L20.6665 17.9997L25.3332 21.333V14.6663Z\" stroke=\"#00A3FF\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M19.3332 13.333H11.9998C11.2635 13.333 10.6665 13.93 10.6665 14.6663V21.333C10.6665 22.0694 11.2635 22.6663 11.9998 22.6663H19.3332C20.0695 22.6663 20.6665 22.0694 20.6665 21.333V14.6663C20.6665 13.93 20.0695 13.333 19.3332 13.333Z\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <div class=\"d-flex flex-stack flex-grow-1 flex-wrap flex-md-nowrap\">\r\n <div class=\"mb-3 mb-md-0 \">\r\n <h4 class=\"fw-semibold\" [ngClass]=\"timevalue === 'time'? 'video-title':'untouch-title'\">Schedule\r\n with\r\n Calendly</h4>\r\n <div class=\"fw-normal pe-7\" [ngClass]=\"timevalue === 'time'? 'video-sub':'untouch-sub'\">Choose your\r\n time\r\n slot in the next step.</div>\r\n </div><span *ngIf=\"timevalue ==='time'\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"0.5\" y=\"0.5\" width=\"15\" height=\"15\" rx=\"7.5\" fill=\"#00A3FF\" />\r\n <rect x=\"0.5\" y=\"0.5\" width=\"15\" height=\"15\" rx=\"7.5\" stroke=\"#00A3FF\" />\r\n <path d=\"M11.3332 5.5L6.74984 10.0833L4.6665 8\" stroke=\"white\" stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n <span *ngIf=\"timevalue !=='time'\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"0.5\" y=\"0.5\" width=\"15\" height=\"15\" rx=\"7.5\" fill=\"white\" />\r\n <rect x=\"0.5\" y=\"0.5\" width=\"15\" height=\"15\" rx=\"7.5\" stroke=\"#D0D5DD\" />\r\n </svg></span>\r\n\r\n </div>\r\n </div>\r\n <div class=\"notice d-flex bg-light-primary rounded border-primary cursor-pointer my-4\"\r\n (click)=\"checkvalue('call back')\" [ngClass]=\"timevalue === 'call back'? 'touch-primary':'untouch-primary'\">\r\n <svg width=\"56\" height=\"56\" viewBox=\"0 0 36 36\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"2\" y=\"2\" width=\"32\" height=\"32\" rx=\"16\" fill=\"#DAF1FF\" />\r\n <rect x=\"2\" y=\"2\" width=\"32\" height=\"32\" rx=\"16\" stroke=\"#EAF8FF\" stroke-width=\"4\" />\r\n <g clip-path=\"url(#clip0_1731_70116)\">\r\n <path\r\n d=\"M24.6665 21.2797V23.2797C24.6672 23.4654 24.6292 23.6492 24.5548 23.8193C24.4804 23.9894 24.3713 24.1421 24.2345 24.2676C24.0977 24.3932 23.9362 24.4887 23.7603 24.5482C23.5844 24.6077 23.398 24.6298 23.2131 24.6131C21.1617 24.3902 19.1911 23.6892 17.4598 22.5664C15.849 21.5428 14.4834 20.1772 13.4598 18.5664C12.3331 16.8272 11.632 14.8471 11.4131 12.7864C11.3965 12.6021 11.4184 12.4162 11.4775 12.2408C11.5365 12.0654 11.6315 11.9042 11.7563 11.7675C11.8811 11.6308 12.033 11.5215 12.2023 11.4468C12.3716 11.372 12.5547 11.3332 12.7398 11.3331H14.7398C15.0633 11.3299 15.377 11.4445 15.6223 11.6554C15.8676 11.8664 16.0278 12.1594 16.0731 12.4797C16.1575 13.1198 16.3141 13.7482 16.5398 14.3531C16.6295 14.5917 16.6489 14.851 16.5957 15.1003C16.5426 15.3496 16.419 15.5785 16.2398 15.7597L15.3931 16.6064C16.3422 18.2754 17.7241 19.6574 19.3931 20.6064L20.2398 19.7597C20.4211 19.5805 20.6499 19.457 20.8992 19.4038C21.1485 19.3506 21.4078 19.37 21.6465 19.4597C22.2513 19.6854 22.8797 19.842 23.5198 19.9264C23.8436 19.9721 24.1394 20.1352 24.3508 20.3847C24.5622 20.6343 24.6746 20.9528 24.6665 21.2797Z\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1731_70116\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" transform=\"translate(10 10)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <div class=\"d-flex flex-stack flex-grow-1 flex-wrap flex-md-nowrap\">\r\n <div class=\"mb-3 mb-md-0 \">\r\n <h4 class=\"fw-semibold\" [ngClass]=\"timevalue === 'call back'? 'video-title':'untouch-title'\">Request\r\n a\r\n call back</h4>\r\n <div class=\"fw-normal pe-7\" [ngClass]=\"timevalue === 'call back'? 'video-title':'untouch-sub'\">We\u2019ll\r\n call\r\n you on +91 987-654-3219</div>\r\n </div><span *ngIf=\"timevalue ==='time'\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"0.5\" y=\"0.5\" width=\"15\" height=\"15\" rx=\"7.5\" fill=\"white\" />\r\n <rect x=\"0.5\" y=\"0.5\" width=\"15\" height=\"15\" rx=\"7.5\" stroke=\"#D0D5DD\" />\r\n </svg></span>\r\n <span *ngIf=\"timevalue !=='time'\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"0.5\" y=\"0.5\" width=\"15\" height=\"15\" rx=\"7.5\" fill=\"#00A3FF\" />\r\n <rect x=\"0.5\" y=\"0.5\" width=\"15\" height=\"15\" rx=\"7.5\" stroke=\"#00A3FF\" />\r\n <path d=\"M11.3332 5.5L6.74984 10.0833L4.6665 8\" stroke=\"white\" stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </div>\r\n </div>\r\n <div *ngIf=\"timevalue === 'call back'\">\r\n\r\n <h3 class=\"title-val fw-semibold my-3\">Select Preferred Timing</h3>\r\n <div class=\"btn-group\" role=\"group\" aria-label=\"Basic example\">\r\n <button [ngClass]=\"callbackPreferredTiming === '9am -12pm' ? 'popup-tab-selected': ''\" (click)=\"callbackPreferredTiming = '9am -12pm'\" type=\"button\" class=\"btn btn-secondary\">9am -12pm</button>\r\n <button [ngClass]=\"callbackPreferredTiming === '12pm - 5pm' ? 'popup-tab-selected': ''\" (click)=\"callbackPreferredTiming = '12pm - 5pm'\" type=\"button\" class=\"btn btn-secondary\">12pm - 5pm</button>\r\n <button [ngClass]=\"callbackPreferredTiming === '5pm - 8pm' ? 'popup-tab-selected': ''\" (click)=\"callbackPreferredTiming = '5pm - 8pm'\" type=\"button\" class=\"btn btn-secondary\">5pm - 8pm</button>\r\n </div>\r\n <h5 class=\"title-sub fw-normal my-3\">We'll call you back in next 24 business hours</h5>\r\n <textarea [formControl]=\"callbackDescription\" class=\"form-control text-area fw-normal\" placeholder=\"Be more specific...\" row=\"2\"></textarea>\r\n\r\n </div>\r\n <div class=\"row mt-10 mb-7\">\r\n <div class=\"col-md-6\">\r\n <button class=\"btn btn-default fw-bold w-100\" (click)=\"close()\">Cancel</button>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <button class=\"btn btn-primary submit fw-bold w-100\" (click)=\"submitvalue()\">Confirm</button>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div class=\"overlay\" *ngIf=\"requestpopup\">\r\n <div class=\"popup\">\r\n <svg width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g id=\"Featured icon\">\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#DAF1FF\"/>\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#EAF8FF\" stroke-width=\"8\"/>\r\n <g id=\"Check icon\">\r\n <rect x=\"16\" y=\"16\" width=\"24\" height=\"24\" rx=\"10\" fill=\"#DAF1FF\"/>\r\n <g id=\"Icon\">\r\n <mask id=\"path-3-inside-1_4346_82646\" fill=\"white\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M33.0965 23.3897L25.9365 30.2997L24.0365 28.2697C23.6865 27.9397 23.1365 27.9197 22.7365 28.1997C22.3465 28.4897 22.2365 28.9997 22.4765 29.4097L24.7265 33.0697C24.9465 33.4097 25.3265 33.6197 25.7565 33.6197C26.1665 33.6197 26.5565 33.4097 26.7765 33.0697C27.1365 32.5997 34.0065 24.4097 34.0065 24.4097C34.9065 23.4897 33.8165 22.6797 33.0965 23.3797V23.3897Z\"/>\r\n </mask>\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M33.0965 23.3897L25.9365 30.2997L24.0365 28.2697C23.6865 27.9397 23.1365 27.9197 22.7365 28.1997C22.3465 28.4897 22.2365 28.9997 22.4765 29.4097L24.7265 33.0697C24.9465 33.4097 25.3265 33.6197 25.7565 33.6197C26.1665 33.6197 26.5565 33.4097 26.7765 33.0697C27.1365 32.5997 34.0065 24.4097 34.0065 24.4097C34.9065 23.4897 33.8165 22.6797 33.0965 23.3797V23.3897Z\" fill=\"#33B5FF\" stroke=\"#00A3FF\" stroke-width=\"4\" mask=\"url(#path-3-inside-1_4346_82646)\"/>\r\n </g>\r\n </g>\r\n </g>\r\n </svg>\r\n \r\n <h3 class=\"fw-bold get-touch my-5\">Thanks for your request!</h3>\r\n <div class=\"fw-normal get-sub mb-5\">Our team will get back to you shortly. Meanwhile explore more about us.\r\n </div>\r\n <div class=\"row mt-10 mb-7\">\r\n <div class=\"col-md-12\">\r\n <button class=\"btn btn-primary fw-bold w-100\" (click)=\"continuesignup()\">Continue Signing Up</button>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".bubble{position:fixed;top:0;right:3%}.activeClass{padding:8px 12px!important;gap:8px!important;border-radius:6px!important;background:var(--Primary-25, #F6FCFF)!important;padding:8px 12px;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a!important}.activeClass .store-primary{color:var(--Gray-700, #344054)!important;font-size:16px!important;font-weight:600;line-height:24px}.bg-gray{padding:4px!important;gap:36px!important;border-radius:8px!important;border:1px solid var(--Gray-100, #F2F4F7)!important;background:var(--Gray-50, #F9FAFB)!important}.text-color{color:var(--Gray-500, #667085)!important;font-size:16px!important;font-weight:600!important;line-height:24px}.heading{color:#000!important;font-size:20px!important;font-weight:600!important;line-height:30px}.textval{color:var(--Gray-500, #2654b9)!important}.border-store{width:32px;height:32px;padding:8px;border-radius:28px!important;background:var(--Primary-100, #DAF1FF)!important}.gap-16px{display:flex;height:40px;padding:16px;align-items:center;gap:4px;border-radius:8px;border:1px solid var(--Primary-300, #6BCAFF);background:var(--Primary-50, #EAF8FF)}.featareaval{color:var(--Primary-800, #008EDF)!important;font-size:14px;font-weight:500;line-height:20px}.bg-light{padding:24px!important;border-radius:8px;border:1px solid var(--Gray-100, #F2F4F7)!important;background:var(--Gray-25, #FCFCFD)!important;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.price-head{color:var(--Gray-900, #101828)!important;font-size:24px!important;font-weight:600!important;line-height:32px}.price-sub-head{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:400;line-height:20px}.period{color:var(--Gray-500, #667085)!important;font-size:16px!important;font-weight:400!important;line-height:24px}.plan-sub{color:var(--Gray-500, #667085)!important;font-size:12px!important;font-weight:400!important;line-height:18px}.plan-head{color:var(--Gray-700, #344054)!important;font-size:12px!important;font-weight:500;line-height:18px}.fs-14px{font-size:14px!important;line-height:20px!important}.text-container{position:relative}.top-right{position:absolute;top:68px;left:173px;font-size:18px}.btn-margin{color:var(--White, #FFF)!important;font-size:12px!important;font-weight:600!important;line-height:18px;padding:6px 11px!important;border-radius:4px!important;background:var(--Primary-700, #009BF3)!important}.h-239px{height:239px}.button-size{color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;padding:10px 16px!important}.form-check-input:checked{border-color:#009bf3;border-radius:12px;background-color:var(--Primary-600, #00A3FF)!important}@media (min-width: 1396px) and (max-width: 1440px){.plan-sub{color:var(--Gray-500, #667085)!important;font-size:10px!important;font-weight:400!important;line-height:18px}}@media (min-width: 1920px) and (max-width: 2100px){.top-right{left:272px}}@media (min-width: 1745px) and (max-width: 1910px){.top-right{left:225px}}@media (min-width: 1706px) and (max-width: 1744px){.top-right{left:216px}}@media (min-width: 1430px) and (max-width: 1439px){.top-right{left:158px}}@media (min-width: 1396px) and (max-width: 1410px){.top-right{left:148px}}@media (min-width: 1410px) and (max-width: 1430px){.top-right{left:153px}}@media (min-width: 1439px) and (max-width: 1475px){.top-right{left:162px}}@media (min-width: 1475px) and (max-width: 1500px){.top-right{left:165px}}@media (min-width: 1547px) and (max-width: 1600px){.top-right{left:189px}}@media (min-width: 1600px) and (max-width: 1635px){.top-right{left:199px}}@media (min-width: 1635px) and (max-width: 1675px){.top-right{left:209px}}@media (min-width: 2160px) and (max-width: 2560px){.top-right{left:438px}}.activePlanBtn{border-radius:6px;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a!important;color:var(--Gray-700, #344054);font-size:14px!important;font-weight:500!important;line-height:20px}.inactivePlanBtn{color:var(--Gray-500, #667085)!important;font-size:14px;font-weight:500!important;line-height:20px}.nav-group{background:var(--Gray-50, #F9FAFB)!important;border-radius:8px!important;border:1px solid var(--Gray-100, #F2F4F7)!important}.freeplan{padding:24px!important;border-radius:8px!important;border:1px solid var(--Primary-100, #DAF1FF)!important;background:var(--Primary-25, #F6FCFF)!important;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a!important;width:100%}.text-val{color:var(--Primary-700, #009BF3)!important;font-size:24px!important;font-weight:600!important;line-height:32px}.text-set{color:var(--Primary-700, #009BF3)!important;font-size:18px!important;font-weight:600!important;line-height:32px;text-decoration-line:line-through!important}.btn-set{color:var(--Primary-700, #009BF3)!important;font-size:16px!important;font-weight:600!important;line-height:24px;border-radius:8px;border:1px solid var(--Primary-50, #EAF8FF)!important;background:var(--Primary-50, #EAF8FF)!important;box-shadow:0 1px 2px #1018280d!important}.life-title{color:var(--Primary-700, #009BF3)!important;text-align:center;font-size:12px!important;line-height:18px;padding:2px 8px!important;border-radius:16px!important;background:var(--Primary-50, #EAF8FF)!important}.get-touch{color:var(--Gray-900, #101828);font-size:18px;line-height:28px}.get-sub{color:var(--Gray-500, #667085);font-size:14px;line-height:20px}.touch-primary{padding:16px;border-radius:8px!important;border:1px solid var(--Primary-300, #6BCAFF)!important;background:var(--Primary-50, #EAF8FF)!important}.video-title{color:var(--Primary-800, #008EDF);font-size:14px;line-height:20px}.video-sub{color:var(--Primary-600, #00A3FF);font-size:14px;line-height:20px}.untouch-primary{padding:16px!important;border-radius:8px!important;border:1px solid var(--Gray-200, #EAECF0)!important;background:var(--White, #FFF)!important}.untouch-title{color:var(--Gray-700, #344054)!important;font-size:14px!important;line-height:20px}.untouch-sub{color:var(--Gray-500, #667085)!important;font-size:14px!important;line-height:20px}.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:16px!important;line-height:24px;text-transform:capitalize}.btn-primary.submit{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:16px!important;line-height:24px;text-transform:capitalize}.btn-group{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;box-shadow:0 1px 2px #1018280d!important}.btn-secondary{border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important}.btn-check:checked+.btn.btn-secondary,.btn-check:active+.btn.btn-secondary,.btn.btn-secondary:focus:not(.btn-active),.btn.btn-secondary:hover:not(.btn-active),.btn.btn-secondary:active:not(.btn-active),.btn.btn-secondary.active,.btn.btn-secondary.show,.show>.btn.btn-secondary{background-color:var(--Gray-50, #F9FAFB)!important}.title-val{color:var(--Gray-700, #344054);font-size:14px;line-height:20px}.title-sub{color:var(--Primary-500, #33B5FF);font-size:12px;line-height:19.5px}.text-area{color:var(--Gray-500, #667085)!important;font-size:16px!important;line-height:24px!important}.overlay{position:fixed;inset:0;background:#6e6e6eb3;transition:opacity .5s;visibility:visible;opacity:1}.popup{position:absolute;left:62%;top:50%;transform:translate(-50%,-50%);padding:24px;background:var(--White, #FFF);box-shadow:0 8px 8px -4px #10182808,0 20px 24px -4px #10182814;border-radius:12px;width:480px;position:relative;transition:all 5s ease-in-out}.popup h2{margin-top:0;color:#333;font-family:Tahoma,Arial,sans-serif}.popup .close{position:absolute;transition:all .2s;font-size:30px;font-weight:700;text-decoration:none;color:#333}.popup .close:hover{color:#06d85f;cursor:pointer}.popup .content{max-height:30%;overflow:auto}.popup-tab-selected{background-color:#f9fafb!important}.footer{color:#7e8299!important;font-size:16px!important;font-weight:500!important}.line-height{line-height:32px!important}.disabled{opacity:.5;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
350
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: Step2Component, deps: [{ token: i1.NgbModal }, { token: i2.ConversionService }, { token: i3.AuthService }, { token: i4.FormBuilder }, { token: i0.ChangeDetectorRef }, { token: i5.ToastService }], target: i0.ɵɵFactoryTarget.Component });
351
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: Step2Component, selector: "lib-step2", ngImport: i0, template: "<div class=\"card mt-10 mx-15\">\r\n <div class=\"h-100 px-5 mx-5 mt-7\">\r\n <!-- <img class=\"bubble\" src=\"./assets/tango/Icons/Signup-bubble-icon.svg\"\r\n alt=\"\" srcset=\"\"> -->\r\n\r\n <div class=\"d-flex flex-column beforeChoosing my-12\">\r\n <h1 class=\"heading mb-5\">How many stores do you have?</h1>\r\n <div class=\"row\">\r\n <div class=\"col-md-12 col-lg-9 col-xl-8 col-xxl-8 w-auto\">\r\n <div class=\"d-flex align-items-center bg-gray\">\r\n <div class=\"d-flex align-items-center justify-content-center activeClass cursor-pointer \"\r\n *ngFor=\"let count of storeCounts\" (click)=\"activeStoreCount(count)\" \r\n [class.activeClass]=\"count.active\">\r\n <div class=\"d-flex align-items-center mx-2\">\r\n <div class=\"fs-4 fw-bold\" [ngClass]=\"count.active === true? 'store-primary':'text-color'\">{{ count.text }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"storedetials\">\r\n <h2 class=\"heading mt-10 mb-5 \">What's the average size of your store?</h2>\r\n <div class=\"row\">\r\n <div class=\"col-md-12 col-lg-12 col-xl-12 col-xxl-12 w-auto\">\r\n <div class=\"d-flex align-items-center bg-gray\">\r\n <div class=\"d-flex align-items-center justify-content-center activeClass cursor-pointer\"\r\n [class.activeClass]=\"i.active\" [class.disabled]=\"i.disabled\" *ngFor=\"let i of featAreaOptions\"\r\n (click)=\"activefeatArea(i)\">\r\n <div class=\"d-flex align-items-center mx-2\">\r\n <div class=\"fs-4 fw-bold\" [ngClass]=\"i.active === true? 'store-primary':'text-color'\">{{ i.text }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"featAreaCamera\" class=\"notice d-flex mt-5\">\r\n <div class=\"d-flex justify-content-center align-items-center gap-16px\">\r\n <span class=\"border-store\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M1.3335 9.66667L8.00016 13L14.6668 9.66667M8.00016 3L1.3335 6.33333L8.00016 9.66667L14.6668 6.33333L8.00016 3Z\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <div class=\"featareaval ms-4\">Maximum {{featAreaCamera}} Cameras are permitted in stores with\r\n square feet between\r\n {{featArea}}.</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"pricevalue\">\r\n <div class=\"card-body px-0 mt-10\">\r\n <!--begin::Plans-->\r\n <div class=\"d-flex flex-column\">\r\n <!--begin::Heading-->\r\n <div class=\"mb-10 text-start\">\r\n <h1 class=\"heading mb-5\">Plan Details</h1>\r\n </div>\r\n <!--end::Heading-->\r\n\r\n <!--begin::Nav group-->\r\n <div class=\"nav-group nav-group-outline mx-auto mb-15\">\r\n <button class=\"btn btn-color-gray-600 btn-active btn-active-secondary px-6 py-3 me-2\"\r\n [ngClass]=\"plan === 'monthly'? 'activePlanBtn':'inactivePlanBtn'\" data-kt-plan=\"month\"\r\n (click)=\"selectPlan('monthly')\">\r\n Monthly\r\n </button>\r\n\r\n <button class=\"btn btn-color-gray-600 btn-active btn-active-secondary px-6 py-3\"\r\n [ngClass]=\"plan === 'quarterly'? 'activePlanBtn':'inactivePlanBtn'\"\r\n data-kt-plan=\"Quarterly\" (click)=\"selectPlan('quarterly')\">\r\n Quarterly - 10%\r\n </button>\r\n <button class=\"btn btn-color-gray-600 btn-active btn-active-secondary px-6 py-3\"\r\n [ngClass]=\"plan === 'annual'? 'activePlanBtn':'inactivePlanBtn'\" data-kt-plan=\"annual\"\r\n (click)=\"selectPlan('annual')\">\r\n Annual - 15%\r\n </button>\r\n </div>\r\n <!--end::Nav group-->\r\n\r\n <!--begin::Row-->\r\n <div class=\"row g-10\">\r\n <!--begin::Col-->\r\n <div class=\"col-md-6 col-lg-4 col-xl-4 col-xxl-4 h-100\">\r\n <div class=\"d-flex align-items-center\">\r\n <!--begin::Option-->\r\n <div class=\"w-100 d-flex flex-column flex-start rounded-3 py-15 px-10\"\r\n [ngClass]=\"countOfStore === '1'? 'freeplan':'bg-light'\">\r\n <!--begin::Heading-->\r\n <div class=\"mb-7 text-start\">\r\n <!--begin::Title-->\r\n <h1 class=\"price-head mb-5\">Free <span\r\n class=\"life-title fw-semibold mx-2\">Lifetime</span></h1>\r\n <!--end::Title-->\r\n\r\n <!--begin::Description-->\r\n <div class=\"price-sub-head mb-5\">\r\n Integrated Solution for single store owners\r\n </div>\r\n <!--end::Description-->\r\n\r\n <!--begin::Price-->\r\n <div class=\"text-start \">\r\n <span class=\"mb-2 text-primary text-val ms-1\" *ngIf=\"this.aboutFormData.countryCode==='91'\">\u20B9</span>\r\n <span class=\"mb-2 text-primary text-val ms-1\" *ngIf=\"this.aboutFormData.countryCode !=='91'\">$</span>\r\n <span class=\"fs-3x fw-bold text-primary text-val\">0 </span>\r\n </div>\r\n <!--end::Price-->\r\n <div class=\"fw-semibold\">\r\n <span class=\"period\">per store per month</span>\r\n </div>\r\n </div>\r\n <!--end::Heading-->\r\n\r\n <!--begin::Features-->\r\n <div class=\"w-100\">\r\n <div class=\"d-flex flex-stack mb-10\"><span\r\n class=\"plan-head me-2 fs-14px\">Tango Traffic</span>\r\n <div class=\"form-check form-switch\">\r\n <input class=\"form-check-input\" type=\"checkbox\" role=\"switch\"\r\n id=\"tangotraffic\" checked=\"\" disabled=\"\">\r\n\r\n </div>\r\n </div>\r\n <!--begin::Item-->\r\n <div class=\"d-flex align-items-center mb-10\">\r\n <span class=\"plan-head\">\r\n To accurately measure traffic and map shopper\u2019s in-store journey\r\n </span>\r\n </div>\r\n <!--end::Item-->\r\n <!--begin::Item-->\r\n <div class=\"d-flex align-items-start mb-5\">\r\n <span class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\"\r\n height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1199_8736)\">\r\n <path\r\n d=\"M14.6668 7.38625V7.99958C14.666 9.4372 14.2005 10.836 13.3397 11.9875C12.4789 13.1389 11.269 13.9812 9.8904 14.3889C8.51178 14.7965 7.03834 14.7475 5.68981 14.2493C4.34128 13.7511 3.18993 12.8303 2.40747 11.6243C1.62501 10.4183 1.25336 8.99163 1.34795 7.55713C1.44254 6.12263 1.9983 4.75713 2.93235 3.6643C3.8664 2.57146 5.12869 1.80984 6.53096 1.49301C7.93323 1.17619 9.40034 1.32114 10.7135 1.90625M14.6668 2.66625L8.00017 9.33958L6.00017 7.33958\"\r\n stroke=\"#667085\" stroke-width=\"1.3\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1199_8736\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n <span class=\"plan-sub \">\r\n Footfall Analysis </span>\r\n </div>\r\n <!--end::Item-->\r\n <!--begin::Item-->\r\n <div class=\"d-flex align-items-start mb-5\">\r\n <span class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\"\r\n height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1199_8736)\">\r\n <path\r\n d=\"M14.6668 7.38625V7.99958C14.666 9.4372 14.2005 10.836 13.3397 11.9875C12.4789 13.1389 11.269 13.9812 9.8904 14.3889C8.51178 14.7965 7.03834 14.7475 5.68981 14.2493C4.34128 13.7511 3.18993 12.8303 2.40747 11.6243C1.62501 10.4183 1.25336 8.99163 1.34795 7.55713C1.44254 6.12263 1.9983 4.75713 2.93235 3.6643C3.8664 2.57146 5.12869 1.80984 6.53096 1.49301C7.93323 1.17619 9.40034 1.32114 10.7135 1.90625M14.6668 2.66625L8.00017 9.33958L6.00017 7.33958\"\r\n stroke=\"#667085\" stroke-width=\"1.3\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1199_8736\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n <span class=\"plan-sub \">\r\n Bounced vs Engager Analysis </span>\r\n\r\n </div>\r\n <!--end::Item-->\r\n <!--begin::Item-->\r\n <div class=\"d-flex align-items-start mb-5\">\r\n <span class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\"\r\n height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1199_8736)\">\r\n <path\r\n d=\"M14.6668 7.38625V7.99958C14.666 9.4372 14.2005 10.836 13.3397 11.9875C12.4789 13.1389 11.269 13.9812 9.8904 14.3889C8.51178 14.7965 7.03834 14.7475 5.68981 14.2493C4.34128 13.7511 3.18993 12.8303 2.40747 11.6243C1.62501 10.4183 1.25336 8.99163 1.34795 7.55713C1.44254 6.12263 1.9983 4.75713 2.93235 3.6643C3.8664 2.57146 5.12869 1.80984 6.53096 1.49301C7.93323 1.17619 9.40034 1.32114 10.7135 1.90625M14.6668 2.66625L8.00017 9.33958L6.00017 7.33958\"\r\n stroke=\"#667085\" stroke-width=\"1.3\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1199_8736\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n <span class=\"plan-sub \">\r\n Missed Opportunity Vs Conversion Rate </span>\r\n\r\n </div>\r\n <!--end::Item-->\r\n <!--begin::Item-->\r\n <div class=\"d-flex align-items-start mb-5\">\r\n <span class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\"\r\n height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1199_8736)\">\r\n <path\r\n d=\"M14.6668 7.38625V7.99958C14.666 9.4372 14.2005 10.836 13.3397 11.9875C12.4789 13.1389 11.269 13.9812 9.8904 14.3889C8.51178 14.7965 7.03834 14.7475 5.68981 14.2493C4.34128 13.7511 3.18993 12.8303 2.40747 11.6243C1.62501 10.4183 1.25336 8.99163 1.34795 7.55713C1.44254 6.12263 1.9983 4.75713 2.93235 3.6643C3.8664 2.57146 5.12869 1.80984 6.53096 1.49301C7.93323 1.17619 9.40034 1.32114 10.7135 1.90625M14.6668 2.66625L8.00017 9.33958L6.00017 7.33958\"\r\n stroke=\"#667085\" stroke-width=\"1.3\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1199_8736\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n <span class=\"plan-sub \">\r\n Footfall Image Directory by the hour. </span>\r\n\r\n </div>\r\n <!--end::Item-->\r\n\r\n\r\n\r\n </div>\r\n <!--end::Features-->\r\n <!--begin::Select-->\r\n <button [disabled]=\"selectedCounts.value !== '1'\" class=\"btn btn-sm btn-primary w-100 button-size\"\r\n (click)=\"plandet('free')\">Get Started</button>\r\n <!--end::Select-->\r\n </div>\r\n <!--end::Option-->\r\n </div>\r\n </div>\r\n <!--end::Col-->\r\n <!--begin::Col-->\r\n <div class=\"col-md-6 col-lg-4 col-xl-4 col-xxl-4 h-100\">\r\n <div class=\"d-flex align-items-center\">\r\n <!--begin::Option-->\r\n <div class=\"w-100 d-flex flex-column flex-start rounded-3 text-container py-15 px-10\"\r\n [ngClass]=\"countOfStore === '2-25' || countOfStore === '26-50' || countOfStore === '26-50' || countOfStore === '51-75' || countOfStore === '76-100'? 'freeplan':'bg-light'\">\r\n <!--begin::Heading-->\r\n <div class=\"mb-7 text-start text-container\">\r\n <!--begin::Title-->\r\n <h1 class=\"price-head mb-5\">Premium</h1>\r\n <!--end::Title-->\r\n\r\n <!--begin::Description-->\r\n <div class=\"price-sub-head mb-5\">\r\n Integrated Solution for Growing Business\r\n </div>\r\n <!--end::Description-->\r\n <button\r\n class=\"top-right btn-margin btn btn-lg btn-primary btn-height py-1 cursor-auto mt-3\">Recommended</button>\r\n <!--begin::Price-->\r\n <div class=\"text-start mt-15\">\r\n <span class=\"price-sub-head\">Starts from</span>\r\n <span class=\"mb-2 text-primary text-val ms-1\" *ngIf=\"this.aboutFormData.countryCode==='91'\">\u20B9</span>\r\n <span class=\"mb-2 text-primary text-val ms-1\" *ngIf=\"this.aboutFormData.countryCode !=='91'\">$</span>\r\n <span class=\"pricecodesize\" ><b\r\n class=\"pricecodecolor text-set mx-2\"> {{pricingData?.OriginalPrice}}\r\n </b>\r\n </span>\r\n <span class=\"fs-3x fw-bold text-primary text-val\">{{pricingData?.price}}</span>\r\n </div>\r\n <!--end::Price-->\r\n <div class=\"fw-semibold\">\r\n <span class=\"period\">per store per month</span>\r\n </div>\r\n </div>\r\n <!--end::Heading-->\r\n <form [formGroup]=\"productForm\" action=\"\" class=\"w-100 mb-3\">\r\n <!--begin::Features-->\r\n <div class=\"w-100\">\r\n <!--begin::Item-->\r\n <div class=\"d-flex flex-stack mt-10 mb-5\"><span\r\n class=\"plan-head me-2 fs-14px line-height\"\r\n (click)=\"showViewMore('traffic')\">Tango Traffic\r\n <span class=\"ms-1 cursor-pointer\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\"\r\n height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1199_8686)\">\r\n <path\r\n d=\"M6 8.16699V6.16699M6 4.16699H6.005M11 6.16699C11 8.92842 8.76142 11.167 6 11.167C3.23858 11.167 1 8.92842 1 6.16699C1 3.40557 3.23858 1.16699 6 1.16699C8.76142 1.16699 11 3.40557 11 6.16699Z\"\r\n stroke=\"#98A2B3\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1199_8686\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"\r\n transform=\"translate(0 0.166992)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n </span>\r\n <div class=\"form-check form-switch\">\r\n <input (change)=\"onPriceChange()\" style=\"pointer-events: none; background-color: #6BCAFF !important; border-color: #6BCAFF !important;\" formControlName=\"tangoTraffic\" class=\"form-check-input\"\r\n type=\"checkbox\" role=\"switch\" id=\"tangotraffic\" checked=\"\">\r\n </div>\r\n </div>\r\n <!--end::Item-->\r\n <!--begin::Item-->\r\n <div class=\"d-flex flex-stack mb-5\"><span class=\"plan-head me-2 fs-14px line-height\"\r\n (click)=\"showViewMore('zone')\">Tango Zone\r\n <span class=\"ms-1 cursor-pointer\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\"\r\n height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1199_8686)\">\r\n <path\r\n d=\"M6 8.16699V6.16699M6 4.16699H6.005M11 6.16699C11 8.92842 8.76142 11.167 6 11.167C3.23858 11.167 1 8.92842 1 6.16699C1 3.40557 3.23858 1.16699 6 1.16699C8.76142 1.16699 11 3.40557 11 6.16699Z\"\r\n stroke=\"#98A2B3\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1199_8686\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"\r\n transform=\"translate(0 0.166992)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n </span>\r\n <div class=\"form-check form-switch\">\r\n <input (change)=\"onPriceChange()\" formControlName=\"tangoZone\" class=\"form-check-input\"\r\n type=\"checkbox\" role=\"switch\" id=\"tangozone\" checked=\"\">\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-stack mb-5\"><span class=\"plan-head me-2 fs-14px line-height\"\r\n (click)=\"showViewMore('sop')\">Tango SOP\r\n <span class=\"ms-1 cursor-pointer\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\"\r\n height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1199_8686)\">\r\n <path\r\n d=\"M6 8.16699V6.16699M6 4.16699H6.005M11 6.16699C11 8.92842 8.76142 11.167 6 11.167C3.23858 11.167 1 8.92842 1 6.16699C1 3.40557 3.23858 1.16699 6 1.16699C8.76142 1.16699 11 3.40557 11 6.16699Z\"\r\n stroke=\"#98A2B3\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1199_8686\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"\r\n transform=\"translate(0 0.166992)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n </span>\r\n <div class=\"form-check form-switch\">\r\n <input (change)=\"onPriceChange()\" formControlName=\"tangoSop\" class=\"form-check-input\"\r\n type=\"checkbox\" role=\"switch\" id=\"tangosop\" checked=\"\">\r\n\r\n </div>\r\n </div>\r\n <!--end::Item-->\r\n <!--begin::Item-->\r\n <div class=\"d-flex flex-stack mb-5\"><span class=\"plan-head me-2 fs-14px line-height\"\r\n (click)=\"showViewMore('support')\">Priority Support\r\n <span class=\"ms-1 cursor-pointer\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\"\r\n height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1199_8686)\">\r\n <path\r\n d=\"M6 8.16699V6.16699M6 4.16699H6.005M11 6.16699C11 8.92842 8.76142 11.167 6 11.167C3.23858 11.167 1 8.92842 1 6.16699C1 3.40557 3.23858 1.16699 6 1.16699C8.76142 1.16699 11 3.40557 11 6.16699Z\"\r\n stroke=\"#98A2B3\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1199_8686\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"\r\n transform=\"translate(0 0.166992)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n </span>\r\n <div class=\"form-check form-switch\">\r\n <input (change)=\"onPriceChange()\" formControlName=\"prioritySupport\"\r\n class=\"form-check-input\" type=\"checkbox\" role=\"switch\"\r\n id=\"support\" checked=\"\">\r\n\r\n </div>\r\n </div>\r\n <!--end::Item-->\r\n\r\n\r\n </div>\r\n <!--end::Features-->\r\n </form>\r\n\r\n\r\n <!--begin::Select-->\r\n <button class=\"btn btn-sm btn-primary button-size w-100\"\r\n (click)=\"plandet('premium')\">Start 14 day trial</button>\r\n <!--end::Select-->\r\n </div>\r\n <!--end::Option-->\r\n </div>\r\n </div>\r\n <!--end::Col-->\r\n <!--begin::Col-->\r\n <div class=\"col-md-6 col-lg-4 col-xl-4 col-xxl-4 h-100\">\r\n <div class=\"d-flex align-items-center\">\r\n <!--begin::Option-->\r\n <div class=\"w-100 d-flex flex-column flex-start rounded-3 py-15 px-10\"\r\n [ngClass]=\"countOfStore === '101-150'? 'freeplan':'bg-light'\">\r\n <!--begin::Heading-->\r\n <div class=\"mb-7 text-start\">\r\n <!--begin::Title-->\r\n <h1 class=\"price-head mb-5\">Enterprise</h1>\r\n <!--end::Title-->\r\n\r\n <!--begin::Description-->\r\n <div class=\"price-sub-head mb-5\">\r\n Integrated Solutions for Larger Business\r\n </div>\r\n <!--end::Description-->\r\n\r\n <!--begin::Price-->\r\n <div class=\"text-start mt-12\">\r\n\r\n <span class=\"fs-3x fw-bold text-primary text-val\">\r\n Let\u2019s Talk!</span>\r\n\r\n </div>\r\n <!--end::Price-->\r\n </div>\r\n <!--end::Heading-->\r\n\r\n <!--begin::Features-->\r\n <div class=\"w-100 h-239px mb-10\">\r\n <!--begin::Item-->\r\n <div class=\"d-flex align-items-start mb-5\">\r\n <span class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\"\r\n height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1199_8736)\">\r\n <path\r\n d=\"M14.6668 7.38625V7.99958C14.666 9.4372 14.2005 10.836 13.3397 11.9875C12.4789 13.1389 11.269 13.9812 9.8904 14.3889C8.51178 14.7965 7.03834 14.7475 5.68981 14.2493C4.34128 13.7511 3.18993 12.8303 2.40747 11.6243C1.62501 10.4183 1.25336 8.99163 1.34795 7.55713C1.44254 6.12263 1.9983 4.75713 2.93235 3.6643C3.8664 2.57146 5.12869 1.80984 6.53096 1.49301C7.93323 1.17619 9.40034 1.32114 10.7135 1.90625M14.6668 2.66625L8.00017 9.33958L6.00017 7.33958\"\r\n stroke=\"#667085\" stroke-width=\"1.3\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1199_8736\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n <span class=\"price-sub-head fw-semibold \">\r\n Do you have more than 100 stores?</span>\r\n\r\n </div>\r\n <!--end::Item-->\r\n <!--begin::Item-->\r\n <div class=\"d-flex align-items-start mb-5\">\r\n <span class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\"\r\n height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1199_8736)\">\r\n <path\r\n d=\"M14.6668 7.38625V7.99958C14.666 9.4372 14.2005 10.836 13.3397 11.9875C12.4789 13.1389 11.269 13.9812 9.8904 14.3889C8.51178 14.7965 7.03834 14.7475 5.68981 14.2493C4.34128 13.7511 3.18993 12.8303 2.40747 11.6243C1.62501 10.4183 1.25336 8.99163 1.34795 7.55713C1.44254 6.12263 1.9983 4.75713 2.93235 3.6643C3.8664 2.57146 5.12869 1.80984 6.53096 1.49301C7.93323 1.17619 9.40034 1.32114 10.7135 1.90625M14.6668 2.66625L8.00017 9.33958L6.00017 7.33958\"\r\n stroke=\"#667085\" stroke-width=\"1.3\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1199_8736\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n <span class=\"price-sub-head fw-semibold \">\r\n Rest assured, our dedicated account managers are here to support you\r\n every\r\n step of the way.</span>\r\n\r\n </div>\r\n <!--end::Item-->\r\n\r\n\r\n </div>\r\n <!--end::Features-->\r\n\r\n <!--begin::Select-->\r\n <button class=\"btn btn-sm btn-primary button-size w-100\"\r\n (click)=\"plandet('enterprise')\">Request Call Back</button>\r\n <!--end::Select-->\r\n </div>\r\n <!--end::Option-->\r\n </div>\r\n </div>\r\n <!--end::Col-->\r\n </div>\r\n <!--end::Row-->\r\n </div>\r\n <!--end::Plans-->\r\n </div>\r\n </div>\r\n <div class=\"row mt-12\">\r\n <div class=\"col-md-2\">\r\n <button type=\"button\" class=\"btn btn-lg text-nowrap btn-set me-5\" (click)=\"prevStep()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\" viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path d=\"M13 15L8 10L13 5\" stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg> Previous\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"mb-3 d-flex flex-column flex-md-row flex-md-stack pt-3 container-fluid\">\r\n <div class=\"text-gray-900 order-2 order-md-1 ms-10\">\r\n <span class=\"me-1 footer\">\u00A9 2024 </span>\r\n <a target=\"_blank\" href=\"https://tangoeye.ai\" class=\"footer\">Tango IT Solutions India Pvt Ltd</a>\r\n </div>\r\n <ul class=\"menu menu-gray-600 menu-hover-primary fw-semibold order-1 me-7\">\r\n <li class=\"menu-item footer\"><a target=\"_blank\" href=\"https://tangoeye.ai/#aboutus\" class=\"menu-link px-5\">About us</a></li>\r\n <li class=\"menu-item footer\"><a target=\"_blank\" href=\"https://tangoeye.ai/#contact\" class=\"menu-link px-5\">Contact Us</a></li>\r\n <li class=\"menu-item footer\"><a target=\"_blank\" href=\"https://tangoeye.ai/privacy-policy-2/\" class=\"menu-link px-5\">Privacy & policy</a></li>\r\n </ul>\r\n </div>\r\n</div>\r\n\r\n<div class=\"overlay\" *ngIf=\"popup\">\r\n <div class=\"popup\">\r\n <svg width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#DAF1FF\" />\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#EAF8FF\" stroke-width=\"8\" />\r\n <path d=\"M38 18L27 29M38 18L31 38L27 29M38 18L18 25L27 29\" stroke=\"#00A3FF\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <h3 class=\"fw-bold get-touch my-5\">Get In Touch</h3>\r\n <div class=\"fw-normal get-sub mb-5\">Have questions? We\u2019re here to help. Send us a message, and we\u2019ll respond\r\n within\r\n 24 hours.</div>\r\n <div class=\"notice d-flex bg-light-primary rounded border-primary cursor-pointer my-4\"\r\n (click)=\"checkvalue('time')\" [ngClass]=\"timevalue === 'time'? 'touch-primary':'untouch-primary'\">\r\n <svg width=\"56\" height=\"56\" viewBox=\"0 0 36 36\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"2\" y=\"2\" width=\"32\" height=\"32\" rx=\"16\" fill=\"#DAF1FF\" />\r\n <rect x=\"2\" y=\"2\" width=\"32\" height=\"32\" rx=\"16\" stroke=\"#EAF8FF\" stroke-width=\"4\" />\r\n <path d=\"M25.3332 14.6663L20.6665 17.9997L25.3332 21.333V14.6663Z\" stroke=\"#00A3FF\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M19.3332 13.333H11.9998C11.2635 13.333 10.6665 13.93 10.6665 14.6663V21.333C10.6665 22.0694 11.2635 22.6663 11.9998 22.6663H19.3332C20.0695 22.6663 20.6665 22.0694 20.6665 21.333V14.6663C20.6665 13.93 20.0695 13.333 19.3332 13.333Z\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <div class=\"d-flex flex-stack flex-grow-1 flex-wrap flex-md-nowrap\">\r\n <div class=\"mb-3 mb-md-0 \">\r\n <h4 class=\"fw-semibold\" [ngClass]=\"timevalue === 'time'? 'video-title':'untouch-title'\">Schedule\r\n with\r\n Calendly</h4>\r\n <div class=\"fw-normal pe-7\" [ngClass]=\"timevalue === 'time'? 'video-sub':'untouch-sub'\">Choose your\r\n time\r\n slot in the next step.</div>\r\n </div><span *ngIf=\"timevalue ==='time'\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"0.5\" y=\"0.5\" width=\"15\" height=\"15\" rx=\"7.5\" fill=\"#00A3FF\" />\r\n <rect x=\"0.5\" y=\"0.5\" width=\"15\" height=\"15\" rx=\"7.5\" stroke=\"#00A3FF\" />\r\n <path d=\"M11.3332 5.5L6.74984 10.0833L4.6665 8\" stroke=\"white\" stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n <span *ngIf=\"timevalue !=='time'\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"0.5\" y=\"0.5\" width=\"15\" height=\"15\" rx=\"7.5\" fill=\"white\" />\r\n <rect x=\"0.5\" y=\"0.5\" width=\"15\" height=\"15\" rx=\"7.5\" stroke=\"#D0D5DD\" />\r\n </svg></span>\r\n\r\n </div>\r\n </div>\r\n <div class=\"notice d-flex bg-light-primary rounded border-primary cursor-pointer my-4\"\r\n (click)=\"checkvalue('call back')\" [ngClass]=\"timevalue === 'call back'? 'touch-primary':'untouch-primary'\">\r\n <svg width=\"56\" height=\"56\" viewBox=\"0 0 36 36\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"2\" y=\"2\" width=\"32\" height=\"32\" rx=\"16\" fill=\"#DAF1FF\" />\r\n <rect x=\"2\" y=\"2\" width=\"32\" height=\"32\" rx=\"16\" stroke=\"#EAF8FF\" stroke-width=\"4\" />\r\n <g clip-path=\"url(#clip0_1731_70116)\">\r\n <path\r\n d=\"M24.6665 21.2797V23.2797C24.6672 23.4654 24.6292 23.6492 24.5548 23.8193C24.4804 23.9894 24.3713 24.1421 24.2345 24.2676C24.0977 24.3932 23.9362 24.4887 23.7603 24.5482C23.5844 24.6077 23.398 24.6298 23.2131 24.6131C21.1617 24.3902 19.1911 23.6892 17.4598 22.5664C15.849 21.5428 14.4834 20.1772 13.4598 18.5664C12.3331 16.8272 11.632 14.8471 11.4131 12.7864C11.3965 12.6021 11.4184 12.4162 11.4775 12.2408C11.5365 12.0654 11.6315 11.9042 11.7563 11.7675C11.8811 11.6308 12.033 11.5215 12.2023 11.4468C12.3716 11.372 12.5547 11.3332 12.7398 11.3331H14.7398C15.0633 11.3299 15.377 11.4445 15.6223 11.6554C15.8676 11.8664 16.0278 12.1594 16.0731 12.4797C16.1575 13.1198 16.3141 13.7482 16.5398 14.3531C16.6295 14.5917 16.6489 14.851 16.5957 15.1003C16.5426 15.3496 16.419 15.5785 16.2398 15.7597L15.3931 16.6064C16.3422 18.2754 17.7241 19.6574 19.3931 20.6064L20.2398 19.7597C20.4211 19.5805 20.6499 19.457 20.8992 19.4038C21.1485 19.3506 21.4078 19.37 21.6465 19.4597C22.2513 19.6854 22.8797 19.842 23.5198 19.9264C23.8436 19.9721 24.1394 20.1352 24.3508 20.3847C24.5622 20.6343 24.6746 20.9528 24.6665 21.2797Z\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1731_70116\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" transform=\"translate(10 10)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <div class=\"d-flex flex-stack flex-grow-1 flex-wrap flex-md-nowrap\">\r\n <div class=\"mb-3 mb-md-0 \">\r\n <h4 class=\"fw-semibold\" [ngClass]=\"timevalue === 'call back'? 'video-title':'untouch-title'\">Request\r\n a\r\n call back</h4>\r\n <div class=\"fw-normal pe-7\" [ngClass]=\"timevalue === 'call back'? 'video-title':'untouch-sub'\">We\u2019ll\r\n call\r\n you on +91 987-654-3219</div>\r\n </div><span *ngIf=\"timevalue ==='time'\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"0.5\" y=\"0.5\" width=\"15\" height=\"15\" rx=\"7.5\" fill=\"white\" />\r\n <rect x=\"0.5\" y=\"0.5\" width=\"15\" height=\"15\" rx=\"7.5\" stroke=\"#D0D5DD\" />\r\n </svg></span>\r\n <span *ngIf=\"timevalue !=='time'\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"0.5\" y=\"0.5\" width=\"15\" height=\"15\" rx=\"7.5\" fill=\"#00A3FF\" />\r\n <rect x=\"0.5\" y=\"0.5\" width=\"15\" height=\"15\" rx=\"7.5\" stroke=\"#00A3FF\" />\r\n <path d=\"M11.3332 5.5L6.74984 10.0833L4.6665 8\" stroke=\"white\" stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </div>\r\n </div>\r\n <div *ngIf=\"timevalue === 'call back'\">\r\n\r\n <h3 class=\"title-val fw-semibold my-3\">Select Preferred Timing</h3>\r\n <div class=\"btn-group\" role=\"group\" aria-label=\"Basic example\">\r\n <button [ngClass]=\"callbackPreferredTiming === '9am -12pm' ? 'popup-tab-selected': ''\" (click)=\"callbackPreferredTiming = '9am -12pm'\" type=\"button\" class=\"btn btn-secondary\">9am -12pm</button>\r\n <button [ngClass]=\"callbackPreferredTiming === '12pm - 5pm' ? 'popup-tab-selected': ''\" (click)=\"callbackPreferredTiming = '12pm - 5pm'\" type=\"button\" class=\"btn btn-secondary\">12pm - 5pm</button>\r\n <button [ngClass]=\"callbackPreferredTiming === '5pm - 8pm' ? 'popup-tab-selected': ''\" (click)=\"callbackPreferredTiming = '5pm - 8pm'\" type=\"button\" class=\"btn btn-secondary\">5pm - 8pm</button>\r\n </div>\r\n <h5 class=\"title-sub fw-normal my-3\">We'll call you back in next 24 business hours</h5>\r\n <textarea [formControl]=\"callbackDescription\" class=\"form-control text-area fw-normal\" placeholder=\"Be more specific...\" row=\"2\"></textarea>\r\n\r\n </div>\r\n <div class=\"row mt-10 mb-7\">\r\n <div class=\"col-md-6\">\r\n <button class=\"btn btn-default fw-bold w-100\" (click)=\"close()\">Cancel</button>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <button class=\"btn btn-primary submit fw-bold w-100\" (click)=\"submitvalue()\">Confirm</button>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div class=\"overlay\" *ngIf=\"requestpopup\">\r\n <div class=\"popup\">\r\n <svg width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g id=\"Featured icon\">\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#DAF1FF\"/>\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#EAF8FF\" stroke-width=\"8\"/>\r\n <g id=\"Check icon\">\r\n <rect x=\"16\" y=\"16\" width=\"24\" height=\"24\" rx=\"10\" fill=\"#DAF1FF\"/>\r\n <g id=\"Icon\">\r\n <mask id=\"path-3-inside-1_4346_82646\" fill=\"white\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M33.0965 23.3897L25.9365 30.2997L24.0365 28.2697C23.6865 27.9397 23.1365 27.9197 22.7365 28.1997C22.3465 28.4897 22.2365 28.9997 22.4765 29.4097L24.7265 33.0697C24.9465 33.4097 25.3265 33.6197 25.7565 33.6197C26.1665 33.6197 26.5565 33.4097 26.7765 33.0697C27.1365 32.5997 34.0065 24.4097 34.0065 24.4097C34.9065 23.4897 33.8165 22.6797 33.0965 23.3797V23.3897Z\"/>\r\n </mask>\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M33.0965 23.3897L25.9365 30.2997L24.0365 28.2697C23.6865 27.9397 23.1365 27.9197 22.7365 28.1997C22.3465 28.4897 22.2365 28.9997 22.4765 29.4097L24.7265 33.0697C24.9465 33.4097 25.3265 33.6197 25.7565 33.6197C26.1665 33.6197 26.5565 33.4097 26.7765 33.0697C27.1365 32.5997 34.0065 24.4097 34.0065 24.4097C34.9065 23.4897 33.8165 22.6797 33.0965 23.3797V23.3897Z\" fill=\"#33B5FF\" stroke=\"#00A3FF\" stroke-width=\"4\" mask=\"url(#path-3-inside-1_4346_82646)\"/>\r\n </g>\r\n </g>\r\n </g>\r\n </svg>\r\n \r\n <h3 class=\"fw-bold get-touch my-5\">Thanks for your request!</h3>\r\n <div class=\"fw-normal get-sub mb-5\">Our team will get back to you shortly. Meanwhile explore more about us.\r\n </div>\r\n <div class=\"row mt-10 mb-7\">\r\n <div class=\"col-md-12\">\r\n <button class=\"btn btn-primary fw-bold w-100\" (click)=\"continuesignup()\">Continue Signing Up</button>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".bubble{position:fixed;top:0;right:3%}.activeClass{padding:8px 12px!important;gap:8px!important;border-radius:6px!important;background:var(--Primary-25, #F6FCFF)!important;padding:8px 12px;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a!important}.activeClass .store-primary{color:var(--Gray-700, #344054)!important;font-size:16px!important;font-weight:600;line-height:24px}.bg-gray{padding:4px!important;gap:36px!important;border-radius:8px!important;border:1px solid var(--Gray-100, #F2F4F7)!important;background:var(--Gray-50, #F9FAFB)!important}.text-color{color:var(--Gray-500, #667085)!important;font-size:16px!important;font-weight:600!important;line-height:24px}.heading{color:#000!important;font-size:20px!important;font-weight:600!important;line-height:30px}.textval{color:var(--Gray-500, #2654b9)!important}.border-store{width:32px;height:32px;padding:8px;border-radius:28px!important;background:var(--Primary-100, #DAF1FF)!important}.gap-16px{display:flex;height:40px;padding:16px;align-items:center;gap:4px;border-radius:8px;border:1px solid var(--Primary-300, #6BCAFF);background:var(--Primary-50, #EAF8FF)}.featareaval{color:var(--Primary-800, #008EDF)!important;font-size:14px;font-weight:500;line-height:20px}.bg-light{padding:24px!important;border-radius:8px;border:1px solid var(--Gray-100, #F2F4F7)!important;background:var(--Gray-25, #FCFCFD)!important;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.price-head{color:var(--Gray-900, #101828)!important;font-size:24px!important;font-weight:600!important;line-height:32px}.price-sub-head{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:400;line-height:20px}.period{color:var(--Gray-500, #667085)!important;font-size:16px!important;font-weight:400!important;line-height:24px}.plan-sub{color:var(--Gray-500, #667085)!important;font-size:12px!important;font-weight:400!important;line-height:18px}.plan-head{color:var(--Gray-700, #344054)!important;font-size:12px!important;font-weight:500;line-height:18px}.fs-14px{font-size:14px!important;line-height:20px!important}.text-container{position:relative}.top-right{position:absolute;top:68px;left:173px;font-size:18px}.btn-margin{color:var(--White, #FFF)!important;font-size:12px!important;font-weight:600!important;line-height:18px;padding:6px 11px!important;border-radius:4px!important;background:var(--Primary-700, #009BF3)!important}.h-239px{height:239px}.button-size{color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;padding:10px 16px!important}.form-check-input:checked{border-color:#009bf3;border-radius:12px;background-color:var(--Primary-600, #00A3FF)!important}@media (min-width: 1396px) and (max-width: 1440px){.plan-sub{color:var(--Gray-500, #667085)!important;font-size:10px!important;font-weight:400!important;line-height:18px}}@media (min-width: 1920px) and (max-width: 2100px){.top-right{left:272px}}@media (min-width: 1745px) and (max-width: 1910px){.top-right{left:225px}}@media (min-width: 1706px) and (max-width: 1744px){.top-right{left:216px}}@media (min-width: 1430px) and (max-width: 1439px){.top-right{left:158px}}@media (min-width: 1396px) and (max-width: 1410px){.top-right{left:148px}}@media (min-width: 1410px) and (max-width: 1430px){.top-right{left:153px}}@media (min-width: 1439px) and (max-width: 1475px){.top-right{left:162px}}@media (min-width: 1475px) and (max-width: 1500px){.top-right{left:165px}}@media (min-width: 1547px) and (max-width: 1600px){.top-right{left:189px}}@media (min-width: 1600px) and (max-width: 1635px){.top-right{left:199px}}@media (min-width: 1635px) and (max-width: 1675px){.top-right{left:209px}}@media (min-width: 2160px) and (max-width: 2560px){.top-right{left:438px}}.activePlanBtn{border-radius:6px;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a!important;color:var(--Gray-700, #344054);font-size:14px!important;font-weight:500!important;line-height:20px}.inactivePlanBtn{color:var(--Gray-500, #667085)!important;font-size:14px;font-weight:500!important;line-height:20px}.nav-group{background:var(--Gray-50, #F9FAFB)!important;border-radius:8px!important;border:1px solid var(--Gray-100, #F2F4F7)!important}.freeplan{padding:24px!important;border-radius:8px!important;border:1px solid var(--Primary-100, #DAF1FF)!important;background:var(--Primary-25, #F6FCFF)!important;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a!important;width:100%}.text-val{color:var(--Primary-700, #009BF3)!important;font-size:24px!important;font-weight:600!important;line-height:32px}.text-set{color:var(--Primary-700, #009BF3)!important;font-size:18px!important;font-weight:600!important;line-height:32px;text-decoration-line:line-through!important}.btn-set{color:var(--Primary-700, #009BF3)!important;font-size:16px!important;font-weight:600!important;line-height:24px;border-radius:8px;border:1px solid var(--Primary-50, #EAF8FF)!important;background:var(--Primary-50, #EAF8FF)!important;box-shadow:0 1px 2px #1018280d!important}.life-title{color:var(--Primary-700, #009BF3)!important;text-align:center;font-size:12px!important;line-height:18px;padding:2px 8px!important;border-radius:16px!important;background:var(--Primary-50, #EAF8FF)!important}.get-touch{color:var(--Gray-900, #101828);font-size:18px;line-height:28px}.get-sub{color:var(--Gray-500, #667085);font-size:14px;line-height:20px}.touch-primary{padding:16px;border-radius:8px!important;border:1px solid var(--Primary-300, #6BCAFF)!important;background:var(--Primary-50, #EAF8FF)!important}.video-title{color:var(--Primary-800, #008EDF);font-size:14px;line-height:20px}.video-sub{color:var(--Primary-600, #00A3FF);font-size:14px;line-height:20px}.untouch-primary{padding:16px!important;border-radius:8px!important;border:1px solid var(--Gray-200, #EAECF0)!important;background:var(--White, #FFF)!important}.untouch-title{color:var(--Gray-700, #344054)!important;font-size:14px!important;line-height:20px}.untouch-sub{color:var(--Gray-500, #667085)!important;font-size:14px!important;line-height:20px}.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:16px!important;line-height:24px;text-transform:capitalize}.btn-primary.submit{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:16px!important;line-height:24px;text-transform:capitalize}.btn-group{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;box-shadow:0 1px 2px #1018280d!important}.btn-secondary{border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important}.btn-check:checked+.btn.btn-secondary,.btn-check:active+.btn.btn-secondary,.btn.btn-secondary:focus:not(.btn-active),.btn.btn-secondary:hover:not(.btn-active),.btn.btn-secondary:active:not(.btn-active),.btn.btn-secondary.active,.btn.btn-secondary.show,.show>.btn.btn-secondary{background-color:var(--Gray-50, #F9FAFB)!important}.title-val{color:var(--Gray-700, #344054);font-size:14px;line-height:20px}.title-sub{color:var(--Primary-500, #33B5FF);font-size:12px;line-height:19.5px}.text-area{color:var(--Gray-500, #667085)!important;font-size:16px!important;line-height:24px!important}.overlay{position:fixed;inset:0;background:#6e6e6eb3;transition:opacity .5s;visibility:visible;opacity:1}.popup{position:absolute;left:62%;top:50%;transform:translate(-50%,-50%);padding:24px;background:var(--White, #FFF);box-shadow:0 8px 8px -4px #10182808,0 20px 24px -4px #10182814;border-radius:12px;width:480px;position:relative;transition:all 5s ease-in-out}.popup h2{margin-top:0;color:#333;font-family:Tahoma,Arial,sans-serif}.popup .close{position:absolute;transition:all .2s;font-size:30px;font-weight:700;text-decoration:none;color:#333}.popup .close:hover{color:#06d85f;cursor:pointer}.popup .content{max-height:30%;overflow:auto}.popup-tab-selected{background-color:#f9fafb!important}.footer{color:#7e8299!important;font-size:16px!important;font-weight:500!important}.line-height{line-height:32px!important}.disabled{opacity:.5;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
352
352
  }
353
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: Step2Component, decorators: [{
353
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: Step2Component, decorators: [{
354
354
  type: Component,
355
355
  args: [{ selector: "lib-step2", template: "<div class=\"card mt-10 mx-15\">\r\n <div class=\"h-100 px-5 mx-5 mt-7\">\r\n <!-- <img class=\"bubble\" src=\"./assets/tango/Icons/Signup-bubble-icon.svg\"\r\n alt=\"\" srcset=\"\"> -->\r\n\r\n <div class=\"d-flex flex-column beforeChoosing my-12\">\r\n <h1 class=\"heading mb-5\">How many stores do you have?</h1>\r\n <div class=\"row\">\r\n <div class=\"col-md-12 col-lg-9 col-xl-8 col-xxl-8 w-auto\">\r\n <div class=\"d-flex align-items-center bg-gray\">\r\n <div class=\"d-flex align-items-center justify-content-center activeClass cursor-pointer \"\r\n *ngFor=\"let count of storeCounts\" (click)=\"activeStoreCount(count)\" \r\n [class.activeClass]=\"count.active\">\r\n <div class=\"d-flex align-items-center mx-2\">\r\n <div class=\"fs-4 fw-bold\" [ngClass]=\"count.active === true? 'store-primary':'text-color'\">{{ count.text }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"storedetials\">\r\n <h2 class=\"heading mt-10 mb-5 \">What's the average size of your store?</h2>\r\n <div class=\"row\">\r\n <div class=\"col-md-12 col-lg-12 col-xl-12 col-xxl-12 w-auto\">\r\n <div class=\"d-flex align-items-center bg-gray\">\r\n <div class=\"d-flex align-items-center justify-content-center activeClass cursor-pointer\"\r\n [class.activeClass]=\"i.active\" [class.disabled]=\"i.disabled\" *ngFor=\"let i of featAreaOptions\"\r\n (click)=\"activefeatArea(i)\">\r\n <div class=\"d-flex align-items-center mx-2\">\r\n <div class=\"fs-4 fw-bold\" [ngClass]=\"i.active === true? 'store-primary':'text-color'\">{{ i.text }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"featAreaCamera\" class=\"notice d-flex mt-5\">\r\n <div class=\"d-flex justify-content-center align-items-center gap-16px\">\r\n <span class=\"border-store\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M1.3335 9.66667L8.00016 13L14.6668 9.66667M8.00016 3L1.3335 6.33333L8.00016 9.66667L14.6668 6.33333L8.00016 3Z\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <div class=\"featareaval ms-4\">Maximum {{featAreaCamera}} Cameras are permitted in stores with\r\n square feet between\r\n {{featArea}}.</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"pricevalue\">\r\n <div class=\"card-body px-0 mt-10\">\r\n <!--begin::Plans-->\r\n <div class=\"d-flex flex-column\">\r\n <!--begin::Heading-->\r\n <div class=\"mb-10 text-start\">\r\n <h1 class=\"heading mb-5\">Plan Details</h1>\r\n </div>\r\n <!--end::Heading-->\r\n\r\n <!--begin::Nav group-->\r\n <div class=\"nav-group nav-group-outline mx-auto mb-15\">\r\n <button class=\"btn btn-color-gray-600 btn-active btn-active-secondary px-6 py-3 me-2\"\r\n [ngClass]=\"plan === 'monthly'? 'activePlanBtn':'inactivePlanBtn'\" data-kt-plan=\"month\"\r\n (click)=\"selectPlan('monthly')\">\r\n Monthly\r\n </button>\r\n\r\n <button class=\"btn btn-color-gray-600 btn-active btn-active-secondary px-6 py-3\"\r\n [ngClass]=\"plan === 'quarterly'? 'activePlanBtn':'inactivePlanBtn'\"\r\n data-kt-plan=\"Quarterly\" (click)=\"selectPlan('quarterly')\">\r\n Quarterly - 10%\r\n </button>\r\n <button class=\"btn btn-color-gray-600 btn-active btn-active-secondary px-6 py-3\"\r\n [ngClass]=\"plan === 'annual'? 'activePlanBtn':'inactivePlanBtn'\" data-kt-plan=\"annual\"\r\n (click)=\"selectPlan('annual')\">\r\n Annual - 15%\r\n </button>\r\n </div>\r\n <!--end::Nav group-->\r\n\r\n <!--begin::Row-->\r\n <div class=\"row g-10\">\r\n <!--begin::Col-->\r\n <div class=\"col-md-6 col-lg-4 col-xl-4 col-xxl-4 h-100\">\r\n <div class=\"d-flex align-items-center\">\r\n <!--begin::Option-->\r\n <div class=\"w-100 d-flex flex-column flex-start rounded-3 py-15 px-10\"\r\n [ngClass]=\"countOfStore === '1'? 'freeplan':'bg-light'\">\r\n <!--begin::Heading-->\r\n <div class=\"mb-7 text-start\">\r\n <!--begin::Title-->\r\n <h1 class=\"price-head mb-5\">Free <span\r\n class=\"life-title fw-semibold mx-2\">Lifetime</span></h1>\r\n <!--end::Title-->\r\n\r\n <!--begin::Description-->\r\n <div class=\"price-sub-head mb-5\">\r\n Integrated Solution for single store owners\r\n </div>\r\n <!--end::Description-->\r\n\r\n <!--begin::Price-->\r\n <div class=\"text-start \">\r\n <span class=\"mb-2 text-primary text-val ms-1\" *ngIf=\"this.aboutFormData.countryCode==='91'\">\u20B9</span>\r\n <span class=\"mb-2 text-primary text-val ms-1\" *ngIf=\"this.aboutFormData.countryCode !=='91'\">$</span>\r\n <span class=\"fs-3x fw-bold text-primary text-val\">0 </span>\r\n </div>\r\n <!--end::Price-->\r\n <div class=\"fw-semibold\">\r\n <span class=\"period\">per store per month</span>\r\n </div>\r\n </div>\r\n <!--end::Heading-->\r\n\r\n <!--begin::Features-->\r\n <div class=\"w-100\">\r\n <div class=\"d-flex flex-stack mb-10\"><span\r\n class=\"plan-head me-2 fs-14px\">Tango Traffic</span>\r\n <div class=\"form-check form-switch\">\r\n <input class=\"form-check-input\" type=\"checkbox\" role=\"switch\"\r\n id=\"tangotraffic\" checked=\"\" disabled=\"\">\r\n\r\n </div>\r\n </div>\r\n <!--begin::Item-->\r\n <div class=\"d-flex align-items-center mb-10\">\r\n <span class=\"plan-head\">\r\n To accurately measure traffic and map shopper\u2019s in-store journey\r\n </span>\r\n </div>\r\n <!--end::Item-->\r\n <!--begin::Item-->\r\n <div class=\"d-flex align-items-start mb-5\">\r\n <span class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\"\r\n height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1199_8736)\">\r\n <path\r\n d=\"M14.6668 7.38625V7.99958C14.666 9.4372 14.2005 10.836 13.3397 11.9875C12.4789 13.1389 11.269 13.9812 9.8904 14.3889C8.51178 14.7965 7.03834 14.7475 5.68981 14.2493C4.34128 13.7511 3.18993 12.8303 2.40747 11.6243C1.62501 10.4183 1.25336 8.99163 1.34795 7.55713C1.44254 6.12263 1.9983 4.75713 2.93235 3.6643C3.8664 2.57146 5.12869 1.80984 6.53096 1.49301C7.93323 1.17619 9.40034 1.32114 10.7135 1.90625M14.6668 2.66625L8.00017 9.33958L6.00017 7.33958\"\r\n stroke=\"#667085\" stroke-width=\"1.3\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1199_8736\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n <span class=\"plan-sub \">\r\n Footfall Analysis </span>\r\n </div>\r\n <!--end::Item-->\r\n <!--begin::Item-->\r\n <div class=\"d-flex align-items-start mb-5\">\r\n <span class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\"\r\n height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1199_8736)\">\r\n <path\r\n d=\"M14.6668 7.38625V7.99958C14.666 9.4372 14.2005 10.836 13.3397 11.9875C12.4789 13.1389 11.269 13.9812 9.8904 14.3889C8.51178 14.7965 7.03834 14.7475 5.68981 14.2493C4.34128 13.7511 3.18993 12.8303 2.40747 11.6243C1.62501 10.4183 1.25336 8.99163 1.34795 7.55713C1.44254 6.12263 1.9983 4.75713 2.93235 3.6643C3.8664 2.57146 5.12869 1.80984 6.53096 1.49301C7.93323 1.17619 9.40034 1.32114 10.7135 1.90625M14.6668 2.66625L8.00017 9.33958L6.00017 7.33958\"\r\n stroke=\"#667085\" stroke-width=\"1.3\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1199_8736\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n <span class=\"plan-sub \">\r\n Bounced vs Engager Analysis </span>\r\n\r\n </div>\r\n <!--end::Item-->\r\n <!--begin::Item-->\r\n <div class=\"d-flex align-items-start mb-5\">\r\n <span class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\"\r\n height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1199_8736)\">\r\n <path\r\n d=\"M14.6668 7.38625V7.99958C14.666 9.4372 14.2005 10.836 13.3397 11.9875C12.4789 13.1389 11.269 13.9812 9.8904 14.3889C8.51178 14.7965 7.03834 14.7475 5.68981 14.2493C4.34128 13.7511 3.18993 12.8303 2.40747 11.6243C1.62501 10.4183 1.25336 8.99163 1.34795 7.55713C1.44254 6.12263 1.9983 4.75713 2.93235 3.6643C3.8664 2.57146 5.12869 1.80984 6.53096 1.49301C7.93323 1.17619 9.40034 1.32114 10.7135 1.90625M14.6668 2.66625L8.00017 9.33958L6.00017 7.33958\"\r\n stroke=\"#667085\" stroke-width=\"1.3\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1199_8736\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n <span class=\"plan-sub \">\r\n Missed Opportunity Vs Conversion Rate </span>\r\n\r\n </div>\r\n <!--end::Item-->\r\n <!--begin::Item-->\r\n <div class=\"d-flex align-items-start mb-5\">\r\n <span class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\"\r\n height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1199_8736)\">\r\n <path\r\n d=\"M14.6668 7.38625V7.99958C14.666 9.4372 14.2005 10.836 13.3397 11.9875C12.4789 13.1389 11.269 13.9812 9.8904 14.3889C8.51178 14.7965 7.03834 14.7475 5.68981 14.2493C4.34128 13.7511 3.18993 12.8303 2.40747 11.6243C1.62501 10.4183 1.25336 8.99163 1.34795 7.55713C1.44254 6.12263 1.9983 4.75713 2.93235 3.6643C3.8664 2.57146 5.12869 1.80984 6.53096 1.49301C7.93323 1.17619 9.40034 1.32114 10.7135 1.90625M14.6668 2.66625L8.00017 9.33958L6.00017 7.33958\"\r\n stroke=\"#667085\" stroke-width=\"1.3\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1199_8736\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n <span class=\"plan-sub \">\r\n Footfall Image Directory by the hour. </span>\r\n\r\n </div>\r\n <!--end::Item-->\r\n\r\n\r\n\r\n </div>\r\n <!--end::Features-->\r\n <!--begin::Select-->\r\n <button [disabled]=\"selectedCounts.value !== '1'\" class=\"btn btn-sm btn-primary w-100 button-size\"\r\n (click)=\"plandet('free')\">Get Started</button>\r\n <!--end::Select-->\r\n </div>\r\n <!--end::Option-->\r\n </div>\r\n </div>\r\n <!--end::Col-->\r\n <!--begin::Col-->\r\n <div class=\"col-md-6 col-lg-4 col-xl-4 col-xxl-4 h-100\">\r\n <div class=\"d-flex align-items-center\">\r\n <!--begin::Option-->\r\n <div class=\"w-100 d-flex flex-column flex-start rounded-3 text-container py-15 px-10\"\r\n [ngClass]=\"countOfStore === '2-25' || countOfStore === '26-50' || countOfStore === '26-50' || countOfStore === '51-75' || countOfStore === '76-100'? 'freeplan':'bg-light'\">\r\n <!--begin::Heading-->\r\n <div class=\"mb-7 text-start text-container\">\r\n <!--begin::Title-->\r\n <h1 class=\"price-head mb-5\">Premium</h1>\r\n <!--end::Title-->\r\n\r\n <!--begin::Description-->\r\n <div class=\"price-sub-head mb-5\">\r\n Integrated Solution for Growing Business\r\n </div>\r\n <!--end::Description-->\r\n <button\r\n class=\"top-right btn-margin btn btn-lg btn-primary btn-height py-1 cursor-auto mt-3\">Recommended</button>\r\n <!--begin::Price-->\r\n <div class=\"text-start mt-15\">\r\n <span class=\"price-sub-head\">Starts from</span>\r\n <span class=\"mb-2 text-primary text-val ms-1\" *ngIf=\"this.aboutFormData.countryCode==='91'\">\u20B9</span>\r\n <span class=\"mb-2 text-primary text-val ms-1\" *ngIf=\"this.aboutFormData.countryCode !=='91'\">$</span>\r\n <span class=\"pricecodesize\" ><b\r\n class=\"pricecodecolor text-set mx-2\"> {{pricingData?.OriginalPrice}}\r\n </b>\r\n </span>\r\n <span class=\"fs-3x fw-bold text-primary text-val\">{{pricingData?.price}}</span>\r\n </div>\r\n <!--end::Price-->\r\n <div class=\"fw-semibold\">\r\n <span class=\"period\">per store per month</span>\r\n </div>\r\n </div>\r\n <!--end::Heading-->\r\n <form [formGroup]=\"productForm\" action=\"\" class=\"w-100 mb-3\">\r\n <!--begin::Features-->\r\n <div class=\"w-100\">\r\n <!--begin::Item-->\r\n <div class=\"d-flex flex-stack mt-10 mb-5\"><span\r\n class=\"plan-head me-2 fs-14px line-height\"\r\n (click)=\"showViewMore('traffic')\">Tango Traffic\r\n <span class=\"ms-1 cursor-pointer\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\"\r\n height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1199_8686)\">\r\n <path\r\n d=\"M6 8.16699V6.16699M6 4.16699H6.005M11 6.16699C11 8.92842 8.76142 11.167 6 11.167C3.23858 11.167 1 8.92842 1 6.16699C1 3.40557 3.23858 1.16699 6 1.16699C8.76142 1.16699 11 3.40557 11 6.16699Z\"\r\n stroke=\"#98A2B3\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1199_8686\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"\r\n transform=\"translate(0 0.166992)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n </span>\r\n <div class=\"form-check form-switch\">\r\n <input (change)=\"onPriceChange()\" style=\"pointer-events: none; background-color: #6BCAFF !important; border-color: #6BCAFF !important;\" formControlName=\"tangoTraffic\" class=\"form-check-input\"\r\n type=\"checkbox\" role=\"switch\" id=\"tangotraffic\" checked=\"\">\r\n </div>\r\n </div>\r\n <!--end::Item-->\r\n <!--begin::Item-->\r\n <div class=\"d-flex flex-stack mb-5\"><span class=\"plan-head me-2 fs-14px line-height\"\r\n (click)=\"showViewMore('zone')\">Tango Zone\r\n <span class=\"ms-1 cursor-pointer\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\"\r\n height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1199_8686)\">\r\n <path\r\n d=\"M6 8.16699V6.16699M6 4.16699H6.005M11 6.16699C11 8.92842 8.76142 11.167 6 11.167C3.23858 11.167 1 8.92842 1 6.16699C1 3.40557 3.23858 1.16699 6 1.16699C8.76142 1.16699 11 3.40557 11 6.16699Z\"\r\n stroke=\"#98A2B3\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1199_8686\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"\r\n transform=\"translate(0 0.166992)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n </span>\r\n <div class=\"form-check form-switch\">\r\n <input (change)=\"onPriceChange()\" formControlName=\"tangoZone\" class=\"form-check-input\"\r\n type=\"checkbox\" role=\"switch\" id=\"tangozone\" checked=\"\">\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-stack mb-5\"><span class=\"plan-head me-2 fs-14px line-height\"\r\n (click)=\"showViewMore('sop')\">Tango SOP\r\n <span class=\"ms-1 cursor-pointer\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\"\r\n height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1199_8686)\">\r\n <path\r\n d=\"M6 8.16699V6.16699M6 4.16699H6.005M11 6.16699C11 8.92842 8.76142 11.167 6 11.167C3.23858 11.167 1 8.92842 1 6.16699C1 3.40557 3.23858 1.16699 6 1.16699C8.76142 1.16699 11 3.40557 11 6.16699Z\"\r\n stroke=\"#98A2B3\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1199_8686\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"\r\n transform=\"translate(0 0.166992)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n </span>\r\n <div class=\"form-check form-switch\">\r\n <input (change)=\"onPriceChange()\" formControlName=\"tangoSop\" class=\"form-check-input\"\r\n type=\"checkbox\" role=\"switch\" id=\"tangosop\" checked=\"\">\r\n\r\n </div>\r\n </div>\r\n <!--end::Item-->\r\n <!--begin::Item-->\r\n <div class=\"d-flex flex-stack mb-5\"><span class=\"plan-head me-2 fs-14px line-height\"\r\n (click)=\"showViewMore('support')\">Priority Support\r\n <span class=\"ms-1 cursor-pointer\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\"\r\n height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1199_8686)\">\r\n <path\r\n d=\"M6 8.16699V6.16699M6 4.16699H6.005M11 6.16699C11 8.92842 8.76142 11.167 6 11.167C3.23858 11.167 1 8.92842 1 6.16699C1 3.40557 3.23858 1.16699 6 1.16699C8.76142 1.16699 11 3.40557 11 6.16699Z\"\r\n stroke=\"#98A2B3\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1199_8686\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"\r\n transform=\"translate(0 0.166992)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n </span>\r\n <div class=\"form-check form-switch\">\r\n <input (change)=\"onPriceChange()\" formControlName=\"prioritySupport\"\r\n class=\"form-check-input\" type=\"checkbox\" role=\"switch\"\r\n id=\"support\" checked=\"\">\r\n\r\n </div>\r\n </div>\r\n <!--end::Item-->\r\n\r\n\r\n </div>\r\n <!--end::Features-->\r\n </form>\r\n\r\n\r\n <!--begin::Select-->\r\n <button class=\"btn btn-sm btn-primary button-size w-100\"\r\n (click)=\"plandet('premium')\">Start 14 day trial</button>\r\n <!--end::Select-->\r\n </div>\r\n <!--end::Option-->\r\n </div>\r\n </div>\r\n <!--end::Col-->\r\n <!--begin::Col-->\r\n <div class=\"col-md-6 col-lg-4 col-xl-4 col-xxl-4 h-100\">\r\n <div class=\"d-flex align-items-center\">\r\n <!--begin::Option-->\r\n <div class=\"w-100 d-flex flex-column flex-start rounded-3 py-15 px-10\"\r\n [ngClass]=\"countOfStore === '101-150'? 'freeplan':'bg-light'\">\r\n <!--begin::Heading-->\r\n <div class=\"mb-7 text-start\">\r\n <!--begin::Title-->\r\n <h1 class=\"price-head mb-5\">Enterprise</h1>\r\n <!--end::Title-->\r\n\r\n <!--begin::Description-->\r\n <div class=\"price-sub-head mb-5\">\r\n Integrated Solutions for Larger Business\r\n </div>\r\n <!--end::Description-->\r\n\r\n <!--begin::Price-->\r\n <div class=\"text-start mt-12\">\r\n\r\n <span class=\"fs-3x fw-bold text-primary text-val\">\r\n Let\u2019s Talk!</span>\r\n\r\n </div>\r\n <!--end::Price-->\r\n </div>\r\n <!--end::Heading-->\r\n\r\n <!--begin::Features-->\r\n <div class=\"w-100 h-239px mb-10\">\r\n <!--begin::Item-->\r\n <div class=\"d-flex align-items-start mb-5\">\r\n <span class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\"\r\n height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1199_8736)\">\r\n <path\r\n d=\"M14.6668 7.38625V7.99958C14.666 9.4372 14.2005 10.836 13.3397 11.9875C12.4789 13.1389 11.269 13.9812 9.8904 14.3889C8.51178 14.7965 7.03834 14.7475 5.68981 14.2493C4.34128 13.7511 3.18993 12.8303 2.40747 11.6243C1.62501 10.4183 1.25336 8.99163 1.34795 7.55713C1.44254 6.12263 1.9983 4.75713 2.93235 3.6643C3.8664 2.57146 5.12869 1.80984 6.53096 1.49301C7.93323 1.17619 9.40034 1.32114 10.7135 1.90625M14.6668 2.66625L8.00017 9.33958L6.00017 7.33958\"\r\n stroke=\"#667085\" stroke-width=\"1.3\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1199_8736\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n <span class=\"price-sub-head fw-semibold \">\r\n Do you have more than 100 stores?</span>\r\n\r\n </div>\r\n <!--end::Item-->\r\n <!--begin::Item-->\r\n <div class=\"d-flex align-items-start mb-5\">\r\n <span class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\"\r\n height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1199_8736)\">\r\n <path\r\n d=\"M14.6668 7.38625V7.99958C14.666 9.4372 14.2005 10.836 13.3397 11.9875C12.4789 13.1389 11.269 13.9812 9.8904 14.3889C8.51178 14.7965 7.03834 14.7475 5.68981 14.2493C4.34128 13.7511 3.18993 12.8303 2.40747 11.6243C1.62501 10.4183 1.25336 8.99163 1.34795 7.55713C1.44254 6.12263 1.9983 4.75713 2.93235 3.6643C3.8664 2.57146 5.12869 1.80984 6.53096 1.49301C7.93323 1.17619 9.40034 1.32114 10.7135 1.90625M14.6668 2.66625L8.00017 9.33958L6.00017 7.33958\"\r\n stroke=\"#667085\" stroke-width=\"1.3\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1199_8736\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n <span class=\"price-sub-head fw-semibold \">\r\n Rest assured, our dedicated account managers are here to support you\r\n every\r\n step of the way.</span>\r\n\r\n </div>\r\n <!--end::Item-->\r\n\r\n\r\n </div>\r\n <!--end::Features-->\r\n\r\n <!--begin::Select-->\r\n <button class=\"btn btn-sm btn-primary button-size w-100\"\r\n (click)=\"plandet('enterprise')\">Request Call Back</button>\r\n <!--end::Select-->\r\n </div>\r\n <!--end::Option-->\r\n </div>\r\n </div>\r\n <!--end::Col-->\r\n </div>\r\n <!--end::Row-->\r\n </div>\r\n <!--end::Plans-->\r\n </div>\r\n </div>\r\n <div class=\"row mt-12\">\r\n <div class=\"col-md-2\">\r\n <button type=\"button\" class=\"btn btn-lg text-nowrap btn-set me-5\" (click)=\"prevStep()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\" viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path d=\"M13 15L8 10L13 5\" stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg> Previous\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"mb-3 d-flex flex-column flex-md-row flex-md-stack pt-3 container-fluid\">\r\n <div class=\"text-gray-900 order-2 order-md-1 ms-10\">\r\n <span class=\"me-1 footer\">\u00A9 2024 </span>\r\n <a target=\"_blank\" href=\"https://tangoeye.ai\" class=\"footer\">Tango IT Solutions India Pvt Ltd</a>\r\n </div>\r\n <ul class=\"menu menu-gray-600 menu-hover-primary fw-semibold order-1 me-7\">\r\n <li class=\"menu-item footer\"><a target=\"_blank\" href=\"https://tangoeye.ai/#aboutus\" class=\"menu-link px-5\">About us</a></li>\r\n <li class=\"menu-item footer\"><a target=\"_blank\" href=\"https://tangoeye.ai/#contact\" class=\"menu-link px-5\">Contact Us</a></li>\r\n <li class=\"menu-item footer\"><a target=\"_blank\" href=\"https://tangoeye.ai/privacy-policy-2/\" class=\"menu-link px-5\">Privacy & policy</a></li>\r\n </ul>\r\n </div>\r\n</div>\r\n\r\n<div class=\"overlay\" *ngIf=\"popup\">\r\n <div class=\"popup\">\r\n <svg width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#DAF1FF\" />\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#EAF8FF\" stroke-width=\"8\" />\r\n <path d=\"M38 18L27 29M38 18L31 38L27 29M38 18L18 25L27 29\" stroke=\"#00A3FF\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <h3 class=\"fw-bold get-touch my-5\">Get In Touch</h3>\r\n <div class=\"fw-normal get-sub mb-5\">Have questions? We\u2019re here to help. Send us a message, and we\u2019ll respond\r\n within\r\n 24 hours.</div>\r\n <div class=\"notice d-flex bg-light-primary rounded border-primary cursor-pointer my-4\"\r\n (click)=\"checkvalue('time')\" [ngClass]=\"timevalue === 'time'? 'touch-primary':'untouch-primary'\">\r\n <svg width=\"56\" height=\"56\" viewBox=\"0 0 36 36\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"2\" y=\"2\" width=\"32\" height=\"32\" rx=\"16\" fill=\"#DAF1FF\" />\r\n <rect x=\"2\" y=\"2\" width=\"32\" height=\"32\" rx=\"16\" stroke=\"#EAF8FF\" stroke-width=\"4\" />\r\n <path d=\"M25.3332 14.6663L20.6665 17.9997L25.3332 21.333V14.6663Z\" stroke=\"#00A3FF\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M19.3332 13.333H11.9998C11.2635 13.333 10.6665 13.93 10.6665 14.6663V21.333C10.6665 22.0694 11.2635 22.6663 11.9998 22.6663H19.3332C20.0695 22.6663 20.6665 22.0694 20.6665 21.333V14.6663C20.6665 13.93 20.0695 13.333 19.3332 13.333Z\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <div class=\"d-flex flex-stack flex-grow-1 flex-wrap flex-md-nowrap\">\r\n <div class=\"mb-3 mb-md-0 \">\r\n <h4 class=\"fw-semibold\" [ngClass]=\"timevalue === 'time'? 'video-title':'untouch-title'\">Schedule\r\n with\r\n Calendly</h4>\r\n <div class=\"fw-normal pe-7\" [ngClass]=\"timevalue === 'time'? 'video-sub':'untouch-sub'\">Choose your\r\n time\r\n slot in the next step.</div>\r\n </div><span *ngIf=\"timevalue ==='time'\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"0.5\" y=\"0.5\" width=\"15\" height=\"15\" rx=\"7.5\" fill=\"#00A3FF\" />\r\n <rect x=\"0.5\" y=\"0.5\" width=\"15\" height=\"15\" rx=\"7.5\" stroke=\"#00A3FF\" />\r\n <path d=\"M11.3332 5.5L6.74984 10.0833L4.6665 8\" stroke=\"white\" stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n <span *ngIf=\"timevalue !=='time'\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"0.5\" y=\"0.5\" width=\"15\" height=\"15\" rx=\"7.5\" fill=\"white\" />\r\n <rect x=\"0.5\" y=\"0.5\" width=\"15\" height=\"15\" rx=\"7.5\" stroke=\"#D0D5DD\" />\r\n </svg></span>\r\n\r\n </div>\r\n </div>\r\n <div class=\"notice d-flex bg-light-primary rounded border-primary cursor-pointer my-4\"\r\n (click)=\"checkvalue('call back')\" [ngClass]=\"timevalue === 'call back'? 'touch-primary':'untouch-primary'\">\r\n <svg width=\"56\" height=\"56\" viewBox=\"0 0 36 36\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"2\" y=\"2\" width=\"32\" height=\"32\" rx=\"16\" fill=\"#DAF1FF\" />\r\n <rect x=\"2\" y=\"2\" width=\"32\" height=\"32\" rx=\"16\" stroke=\"#EAF8FF\" stroke-width=\"4\" />\r\n <g clip-path=\"url(#clip0_1731_70116)\">\r\n <path\r\n d=\"M24.6665 21.2797V23.2797C24.6672 23.4654 24.6292 23.6492 24.5548 23.8193C24.4804 23.9894 24.3713 24.1421 24.2345 24.2676C24.0977 24.3932 23.9362 24.4887 23.7603 24.5482C23.5844 24.6077 23.398 24.6298 23.2131 24.6131C21.1617 24.3902 19.1911 23.6892 17.4598 22.5664C15.849 21.5428 14.4834 20.1772 13.4598 18.5664C12.3331 16.8272 11.632 14.8471 11.4131 12.7864C11.3965 12.6021 11.4184 12.4162 11.4775 12.2408C11.5365 12.0654 11.6315 11.9042 11.7563 11.7675C11.8811 11.6308 12.033 11.5215 12.2023 11.4468C12.3716 11.372 12.5547 11.3332 12.7398 11.3331H14.7398C15.0633 11.3299 15.377 11.4445 15.6223 11.6554C15.8676 11.8664 16.0278 12.1594 16.0731 12.4797C16.1575 13.1198 16.3141 13.7482 16.5398 14.3531C16.6295 14.5917 16.6489 14.851 16.5957 15.1003C16.5426 15.3496 16.419 15.5785 16.2398 15.7597L15.3931 16.6064C16.3422 18.2754 17.7241 19.6574 19.3931 20.6064L20.2398 19.7597C20.4211 19.5805 20.6499 19.457 20.8992 19.4038C21.1485 19.3506 21.4078 19.37 21.6465 19.4597C22.2513 19.6854 22.8797 19.842 23.5198 19.9264C23.8436 19.9721 24.1394 20.1352 24.3508 20.3847C24.5622 20.6343 24.6746 20.9528 24.6665 21.2797Z\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1731_70116\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" transform=\"translate(10 10)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <div class=\"d-flex flex-stack flex-grow-1 flex-wrap flex-md-nowrap\">\r\n <div class=\"mb-3 mb-md-0 \">\r\n <h4 class=\"fw-semibold\" [ngClass]=\"timevalue === 'call back'? 'video-title':'untouch-title'\">Request\r\n a\r\n call back</h4>\r\n <div class=\"fw-normal pe-7\" [ngClass]=\"timevalue === 'call back'? 'video-title':'untouch-sub'\">We\u2019ll\r\n call\r\n you on +91 987-654-3219</div>\r\n </div><span *ngIf=\"timevalue ==='time'\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"0.5\" y=\"0.5\" width=\"15\" height=\"15\" rx=\"7.5\" fill=\"white\" />\r\n <rect x=\"0.5\" y=\"0.5\" width=\"15\" height=\"15\" rx=\"7.5\" stroke=\"#D0D5DD\" />\r\n </svg></span>\r\n <span *ngIf=\"timevalue !=='time'\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"0.5\" y=\"0.5\" width=\"15\" height=\"15\" rx=\"7.5\" fill=\"#00A3FF\" />\r\n <rect x=\"0.5\" y=\"0.5\" width=\"15\" height=\"15\" rx=\"7.5\" stroke=\"#00A3FF\" />\r\n <path d=\"M11.3332 5.5L6.74984 10.0833L4.6665 8\" stroke=\"white\" stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </div>\r\n </div>\r\n <div *ngIf=\"timevalue === 'call back'\">\r\n\r\n <h3 class=\"title-val fw-semibold my-3\">Select Preferred Timing</h3>\r\n <div class=\"btn-group\" role=\"group\" aria-label=\"Basic example\">\r\n <button [ngClass]=\"callbackPreferredTiming === '9am -12pm' ? 'popup-tab-selected': ''\" (click)=\"callbackPreferredTiming = '9am -12pm'\" type=\"button\" class=\"btn btn-secondary\">9am -12pm</button>\r\n <button [ngClass]=\"callbackPreferredTiming === '12pm - 5pm' ? 'popup-tab-selected': ''\" (click)=\"callbackPreferredTiming = '12pm - 5pm'\" type=\"button\" class=\"btn btn-secondary\">12pm - 5pm</button>\r\n <button [ngClass]=\"callbackPreferredTiming === '5pm - 8pm' ? 'popup-tab-selected': ''\" (click)=\"callbackPreferredTiming = '5pm - 8pm'\" type=\"button\" class=\"btn btn-secondary\">5pm - 8pm</button>\r\n </div>\r\n <h5 class=\"title-sub fw-normal my-3\">We'll call you back in next 24 business hours</h5>\r\n <textarea [formControl]=\"callbackDescription\" class=\"form-control text-area fw-normal\" placeholder=\"Be more specific...\" row=\"2\"></textarea>\r\n\r\n </div>\r\n <div class=\"row mt-10 mb-7\">\r\n <div class=\"col-md-6\">\r\n <button class=\"btn btn-default fw-bold w-100\" (click)=\"close()\">Cancel</button>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <button class=\"btn btn-primary submit fw-bold w-100\" (click)=\"submitvalue()\">Confirm</button>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div class=\"overlay\" *ngIf=\"requestpopup\">\r\n <div class=\"popup\">\r\n <svg width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g id=\"Featured icon\">\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#DAF1FF\"/>\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#EAF8FF\" stroke-width=\"8\"/>\r\n <g id=\"Check icon\">\r\n <rect x=\"16\" y=\"16\" width=\"24\" height=\"24\" rx=\"10\" fill=\"#DAF1FF\"/>\r\n <g id=\"Icon\">\r\n <mask id=\"path-3-inside-1_4346_82646\" fill=\"white\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M33.0965 23.3897L25.9365 30.2997L24.0365 28.2697C23.6865 27.9397 23.1365 27.9197 22.7365 28.1997C22.3465 28.4897 22.2365 28.9997 22.4765 29.4097L24.7265 33.0697C24.9465 33.4097 25.3265 33.6197 25.7565 33.6197C26.1665 33.6197 26.5565 33.4097 26.7765 33.0697C27.1365 32.5997 34.0065 24.4097 34.0065 24.4097C34.9065 23.4897 33.8165 22.6797 33.0965 23.3797V23.3897Z\"/>\r\n </mask>\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M33.0965 23.3897L25.9365 30.2997L24.0365 28.2697C23.6865 27.9397 23.1365 27.9197 22.7365 28.1997C22.3465 28.4897 22.2365 28.9997 22.4765 29.4097L24.7265 33.0697C24.9465 33.4097 25.3265 33.6197 25.7565 33.6197C26.1665 33.6197 26.5565 33.4097 26.7765 33.0697C27.1365 32.5997 34.0065 24.4097 34.0065 24.4097C34.9065 23.4897 33.8165 22.6797 33.0965 23.3797V23.3897Z\" fill=\"#33B5FF\" stroke=\"#00A3FF\" stroke-width=\"4\" mask=\"url(#path-3-inside-1_4346_82646)\"/>\r\n </g>\r\n </g>\r\n </g>\r\n </svg>\r\n \r\n <h3 class=\"fw-bold get-touch my-5\">Thanks for your request!</h3>\r\n <div class=\"fw-normal get-sub mb-5\">Our team will get back to you shortly. Meanwhile explore more about us.\r\n </div>\r\n <div class=\"row mt-10 mb-7\">\r\n <div class=\"col-md-12\">\r\n <button class=\"btn btn-primary fw-bold w-100\" (click)=\"continuesignup()\">Continue Signing Up</button>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".bubble{position:fixed;top:0;right:3%}.activeClass{padding:8px 12px!important;gap:8px!important;border-radius:6px!important;background:var(--Primary-25, #F6FCFF)!important;padding:8px 12px;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a!important}.activeClass .store-primary{color:var(--Gray-700, #344054)!important;font-size:16px!important;font-weight:600;line-height:24px}.bg-gray{padding:4px!important;gap:36px!important;border-radius:8px!important;border:1px solid var(--Gray-100, #F2F4F7)!important;background:var(--Gray-50, #F9FAFB)!important}.text-color{color:var(--Gray-500, #667085)!important;font-size:16px!important;font-weight:600!important;line-height:24px}.heading{color:#000!important;font-size:20px!important;font-weight:600!important;line-height:30px}.textval{color:var(--Gray-500, #2654b9)!important}.border-store{width:32px;height:32px;padding:8px;border-radius:28px!important;background:var(--Primary-100, #DAF1FF)!important}.gap-16px{display:flex;height:40px;padding:16px;align-items:center;gap:4px;border-radius:8px;border:1px solid var(--Primary-300, #6BCAFF);background:var(--Primary-50, #EAF8FF)}.featareaval{color:var(--Primary-800, #008EDF)!important;font-size:14px;font-weight:500;line-height:20px}.bg-light{padding:24px!important;border-radius:8px;border:1px solid var(--Gray-100, #F2F4F7)!important;background:var(--Gray-25, #FCFCFD)!important;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.price-head{color:var(--Gray-900, #101828)!important;font-size:24px!important;font-weight:600!important;line-height:32px}.price-sub-head{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:400;line-height:20px}.period{color:var(--Gray-500, #667085)!important;font-size:16px!important;font-weight:400!important;line-height:24px}.plan-sub{color:var(--Gray-500, #667085)!important;font-size:12px!important;font-weight:400!important;line-height:18px}.plan-head{color:var(--Gray-700, #344054)!important;font-size:12px!important;font-weight:500;line-height:18px}.fs-14px{font-size:14px!important;line-height:20px!important}.text-container{position:relative}.top-right{position:absolute;top:68px;left:173px;font-size:18px}.btn-margin{color:var(--White, #FFF)!important;font-size:12px!important;font-weight:600!important;line-height:18px;padding:6px 11px!important;border-radius:4px!important;background:var(--Primary-700, #009BF3)!important}.h-239px{height:239px}.button-size{color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;padding:10px 16px!important}.form-check-input:checked{border-color:#009bf3;border-radius:12px;background-color:var(--Primary-600, #00A3FF)!important}@media (min-width: 1396px) and (max-width: 1440px){.plan-sub{color:var(--Gray-500, #667085)!important;font-size:10px!important;font-weight:400!important;line-height:18px}}@media (min-width: 1920px) and (max-width: 2100px){.top-right{left:272px}}@media (min-width: 1745px) and (max-width: 1910px){.top-right{left:225px}}@media (min-width: 1706px) and (max-width: 1744px){.top-right{left:216px}}@media (min-width: 1430px) and (max-width: 1439px){.top-right{left:158px}}@media (min-width: 1396px) and (max-width: 1410px){.top-right{left:148px}}@media (min-width: 1410px) and (max-width: 1430px){.top-right{left:153px}}@media (min-width: 1439px) and (max-width: 1475px){.top-right{left:162px}}@media (min-width: 1475px) and (max-width: 1500px){.top-right{left:165px}}@media (min-width: 1547px) and (max-width: 1600px){.top-right{left:189px}}@media (min-width: 1600px) and (max-width: 1635px){.top-right{left:199px}}@media (min-width: 1635px) and (max-width: 1675px){.top-right{left:209px}}@media (min-width: 2160px) and (max-width: 2560px){.top-right{left:438px}}.activePlanBtn{border-radius:6px;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a!important;color:var(--Gray-700, #344054);font-size:14px!important;font-weight:500!important;line-height:20px}.inactivePlanBtn{color:var(--Gray-500, #667085)!important;font-size:14px;font-weight:500!important;line-height:20px}.nav-group{background:var(--Gray-50, #F9FAFB)!important;border-radius:8px!important;border:1px solid var(--Gray-100, #F2F4F7)!important}.freeplan{padding:24px!important;border-radius:8px!important;border:1px solid var(--Primary-100, #DAF1FF)!important;background:var(--Primary-25, #F6FCFF)!important;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a!important;width:100%}.text-val{color:var(--Primary-700, #009BF3)!important;font-size:24px!important;font-weight:600!important;line-height:32px}.text-set{color:var(--Primary-700, #009BF3)!important;font-size:18px!important;font-weight:600!important;line-height:32px;text-decoration-line:line-through!important}.btn-set{color:var(--Primary-700, #009BF3)!important;font-size:16px!important;font-weight:600!important;line-height:24px;border-radius:8px;border:1px solid var(--Primary-50, #EAF8FF)!important;background:var(--Primary-50, #EAF8FF)!important;box-shadow:0 1px 2px #1018280d!important}.life-title{color:var(--Primary-700, #009BF3)!important;text-align:center;font-size:12px!important;line-height:18px;padding:2px 8px!important;border-radius:16px!important;background:var(--Primary-50, #EAF8FF)!important}.get-touch{color:var(--Gray-900, #101828);font-size:18px;line-height:28px}.get-sub{color:var(--Gray-500, #667085);font-size:14px;line-height:20px}.touch-primary{padding:16px;border-radius:8px!important;border:1px solid var(--Primary-300, #6BCAFF)!important;background:var(--Primary-50, #EAF8FF)!important}.video-title{color:var(--Primary-800, #008EDF);font-size:14px;line-height:20px}.video-sub{color:var(--Primary-600, #00A3FF);font-size:14px;line-height:20px}.untouch-primary{padding:16px!important;border-radius:8px!important;border:1px solid var(--Gray-200, #EAECF0)!important;background:var(--White, #FFF)!important}.untouch-title{color:var(--Gray-700, #344054)!important;font-size:14px!important;line-height:20px}.untouch-sub{color:var(--Gray-500, #667085)!important;font-size:14px!important;line-height:20px}.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:16px!important;line-height:24px;text-transform:capitalize}.btn-primary.submit{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:16px!important;line-height:24px;text-transform:capitalize}.btn-group{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;box-shadow:0 1px 2px #1018280d!important}.btn-secondary{border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important}.btn-check:checked+.btn.btn-secondary,.btn-check:active+.btn.btn-secondary,.btn.btn-secondary:focus:not(.btn-active),.btn.btn-secondary:hover:not(.btn-active),.btn.btn-secondary:active:not(.btn-active),.btn.btn-secondary.active,.btn.btn-secondary.show,.show>.btn.btn-secondary{background-color:var(--Gray-50, #F9FAFB)!important}.title-val{color:var(--Gray-700, #344054);font-size:14px;line-height:20px}.title-sub{color:var(--Primary-500, #33B5FF);font-size:12px;line-height:19.5px}.text-area{color:var(--Gray-500, #667085)!important;font-size:16px!important;line-height:24px!important}.overlay{position:fixed;inset:0;background:#6e6e6eb3;transition:opacity .5s;visibility:visible;opacity:1}.popup{position:absolute;left:62%;top:50%;transform:translate(-50%,-50%);padding:24px;background:var(--White, #FFF);box-shadow:0 8px 8px -4px #10182808,0 20px 24px -4px #10182814;border-radius:12px;width:480px;position:relative;transition:all 5s ease-in-out}.popup h2{margin-top:0;color:#333;font-family:Tahoma,Arial,sans-serif}.popup .close{position:absolute;transition:all .2s;font-size:30px;font-weight:700;text-decoration:none;color:#333}.popup .close:hover{color:#06d85f;cursor:pointer}.popup .content{max-height:30%;overflow:auto}.popup-tab-selected{background-color:#f9fafb!important}.footer{color:#7e8299!important;font-size:16px!important;font-weight:500!important}.line-height{line-height:32px!important}.disabled{opacity:.5;pointer-events:none}\n"] }]
356
356
  }], ctorParameters: () => [{ type: i1.NgbModal }, { type: i2.ConversionService }, { type: i3.AuthService }, { type: i4.FormBuilder }, { type: i0.ChangeDetectorRef }, { type: i5.ToastService }] });