tango-app-ui-shared 3.7.3-dev6-demo6 → 3.7.3-dev6-demo7

package/src/lib/modules/intro/contact-support/contact-support.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ContactSupportComponent } from './contact-support.component';
+
+describe('ContactSupportComponent', () => {
+  let component: ContactSupportComponent;
+  let fixture: ComponentFixture<ContactSupportComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ContactSupportComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(ContactSupportComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/modules/intro/contact-support/contact-support.component.ts

@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+
+@Component({
+  selector: 'lib-contact-support',
+  templateUrl: './contact-support.component.html',
+  styleUrl: './contact-support.component.scss'
+})
+export class ContactSupportComponent {
+  constructor(
+    private activeModal: NgbActiveModal,
+  ) {}
+
+  accept(){
+    this.activeModal.close('submit');
+  }
+}

package/src/lib/modules/intro/intro-routing.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { LeadIntroComponent } from './lead-intro/lead-intro.component';
+
+const routes: Routes = [
+  {
+    path:'',
+    component:LeadIntroComponent
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class IntroRoutingModule { }

package/src/lib/modules/intro/intro.module.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { IntroRoutingModule } from './intro-routing.module';
+import { LeadIntroComponent } from './lead-intro/lead-intro.component';
+import {NgbCarouselModule } from '@ng-bootstrap/ng-bootstrap';
+import { ContactSupportComponent } from './contact-support/contact-support.component';
+
+
+@NgModule({
+  declarations: [
+    LeadIntroComponent,
+    ContactSupportComponent
+  ],
+  imports: [
+    CommonModule,
+    IntroRoutingModule,
+    NgbCarouselModule
+  ]
+})
+export class IntroModule { }

package/src/lib/modules/intro/lead-intro/lead-intro.component.html

@@ -0,0 +1,325 @@
+<div *ngIf="(gs.userAccess | async)?.userType === 'lead'" class="approvalcard mt-4 mb-5">
+    <div class="d-flex align-items-center justify-content-between">
+        <div class="d-flex align-items-center">
+            <div class="symbol symbol-30px me-5"><span>
+                    <img src="./assets/tango/custompopup-Icons/danger-icon.svg" alt="">
+                </span>
+            </div>
+            <div class="approvaltext align-items-start justify-content-between">
+                Your Approval is in pending !
+                <div class="approvesub d-block">Can’t find the answer you’re looking for? Please chat to our friendly
+                    team.</div>
+            </div>
+        </div>
+        <div class="d-flex align-items-center">
+            <a (click)="contactSupport()" type="button" tabindex="0"
+                class="btn btn-primary px-4 ng-star-inserted"><span>Contact Us
+                </span></a>
+        </div>
+    </div>
+</div>
+
+<div *ngIf="(gs.userAccess | async)?.userType === 'client'" class="toastcard mb-5">
+    <div class="d-flex align-items-center justify-content-between">
+        <div class="d-flex align-items-center">
+            <div class="symbol symbol-30px me-5"><span>
+                    <img src="./assets/tango/custompopup-Icons/danger-alert-primary.svg" alt="">
+                </span>
+            </div>
+            <span class="toasttext d-block">Your trial has started. You have {{trialDetails?.daysRemaining}} days left
+                on your free trial</span>
+        </div>
+        <div class="row mt-1">
+            <div class="d-flex align-items-center">
+                <div><svg id="circle-chart" width="94" height="70" viewBox="0 0 100 100"
+                        xmlns="http://www.w3.org/2000/svg">
+
+                        <circle cx="50" cy="50" r="40" fill="none" stroke="#f0f0f0" stroke-width="8">
+                        </circle>
+
+                        <circle id="progress-circle" cx="50" cy="50" r="40" fill="none" stroke="#007bff"
+                            stroke-width="8" stroke-dasharray="251.2"
+                            [attr.stroke-dashoffset]="updateCircleChart(trialDetails?.percentageRemaining)">
+                        </circle>
+
+                        <text id="percentage-text" x="50" y="54" class="producttext" text-anchor="middle"
+                            fill="#333333">{{trialDetails?.percentageRemaining}}%</text>
+                    </svg></div>
+                <div class="align-items-start justify-content-between daysleft my-2">
+                    {{trialDetails?.daysRemaining}} Days Left
+                    <div class="align-items-start trail">
+                        Free trial</div>
+                </div>
+            </div>
+            <div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<ngb-carousel #carousel [interval]="4000" [pauseOnHover]="true">
+    <ng-container *ngFor="let item of productList">
+        <ng-container *ngIf="item === 'tangoTrax'">
+            <ng-template ngbSlide>
+                <div class="card w-100">
+                    <div class="row p-20">
+                        <div class="col-lg-4 col-sm-12">
+                            <img class="cardimg" src="./assets/tango/Images/tangoTrax.png" alt="Tango logo" />
+                        </div>
+                        <div class="col-lg-1">
+                        </div>
+                        <div class="col-lg-7">
+                            <div class="heading mb-2">Welcome to Trax! 👋
+                            </div>
+                            <span class="sub">
+                                Revolutionising Operations with AI powered SOPs
+                            </span>
+                            <div class="mt-6">
+                                <h3 class="card-title align-items-start flex-column mb-4">
+                                    <span><svg width="36" height="36" viewBox="0 0 36 36" fill="none"
+                                            xmlns="http://www.w3.org/2000/svg">
+                                            <rect x="2" y="2" width="32" height="32" rx="16" fill="#DAF1FF" />
+                                            <rect x="2" y="2" width="32" height="32" rx="16" stroke="#EAF8FF"
+                                                stroke-width="4" />
+                                            <path
+                                                d="M18.6667 11.334L12 19.334H18L17.3333 24.6673L24 16.6673H18L18.6667 11.334Z"
+                                                stroke="#00A3FF" stroke-width="1.33333" stroke-linecap="round"
+                                                stroke-linejoin="round" />
+                                        </svg>
+                                    </span>
+                                    <span class="card-label mx-3">Onboard Stores
+                                    </span>
+                                    <div class="align-items-start card-sub mx-14">Effortlessly add and manage your
+                                        stores,ensuring a smooth onboarding process.
+                                    </div>
+                                </h3>
+                            </div>
+                            <div class="mt-6">
+                                <h3 class="card-title align-items-start flex-column mb-4">
+                                    <span><svg width="36" height="36" viewBox="0 0 36 36" fill="none"
+                                            xmlns="http://www.w3.org/2000/svg">
+                                            <rect x="2" y="2" width="32" height="32" rx="16" fill="#DAF1FF" />
+                                            <rect x="2" y="2" width="32" height="32" rx="16" stroke="#EAF8FF"
+                                                stroke-width="4" />
+                                            <path
+                                                d="M18.6667 11.334L12 19.334H18L17.3333 24.6673L24 16.6673H18L18.6667 11.334Z"
+                                                stroke="#00A3FF" stroke-width="1.33333" stroke-linecap="round"
+                                                stroke-linejoin="round" />
+                                        </svg>
+                                    </span>
+                                    <span class="card-label mx-3">Customize SOP Checklists</span>
+                                    <div class="align-items-start card-sub mx-14">Easily create and configure SOP
+                                        checklists
+                                        tailored to your specific needs.</div>
+                                </h3>
+                            </div>
+                            <div class="mt-6">
+                                <h3 class="card-title align-items-start flex-column mb-4">
+                                    <span><svg width="36" height="36" viewBox="0 0 36 36" fill="none"
+                                            xmlns="http://www.w3.org/2000/svg">
+                                            <rect x="2" y="2" width="32" height="32" rx="16" fill="#DAF1FF" />
+                                            <rect x="2" y="2" width="32" height="32" rx="16" stroke="#EAF8FF"
+                                                stroke-width="4" />
+                                            <path
+                                                d="M18.6667 11.334L12 19.334H18L17.3333 24.6673L24 16.6673H18L18.6667 11.334Z"
+                                                stroke="#00A3FF" stroke-width="1.33333" stroke-linecap="round"
+                                                stroke-linejoin="round" />
+                                        </svg>
+                                    </span>
+                                    <span class="card-label mx-3">Gain Insights Dashboard </span>
+                                    <div class="align-items-start card-sub mx-14">Generate detailed reports and
+                                        visualize
+                                        checklist compliance data through an intuitive dashboard, enabling you to make
+                                        informed decisions cand enhance operational efficiency.
+                                    </div>
+                                </h3>
+                            </div>
+                            <a *ngIf="(gs.userAccess | async)?.userType === 'client'" type="button" routerLink="/manage/summary"
+                                tabindex="0" class="btn btn-primary px-4 mt-2 cursor-pointer ng-star-inserted"><span>Get
+                                    Started
+                                </span></a>
+
+                        </div>
+                    </div>
+                </div>
+            </ng-template>
+        </ng-container>
+        <ng-container *ngIf="item === 'tangoZone'">
+            <ng-template ngbSlide>
+                <div class="card w-100">
+                    <div class="row p-20">
+                        <div class="col-lg-4 col-sm-12">
+                            <img class="cardimg" src="./assets/tango/Images/tangoZone.png" alt="Tango logo" />
+                        </div>
+                        <div class="col-lg-1">
+                        </div>
+                        <div class="col-lg-7">
+                            <div class="heading mb-2">Welcome to Zone! 👋
+                            </div>
+                            <span class="sub">
+                                Identify Hot Spots & Dead Zones of the store
+                            </span>
+                            <div class="mt-6">
+                                <h3 class="card-title align-items-start flex-column mb-4">
+                                    <span><svg width="36" height="36" viewBox="0 0 36 36" fill="none"
+                                            xmlns="http://www.w3.org/2000/svg">
+                                            <rect x="2" y="2" width="32" height="32" rx="16" fill="#DAF1FF" />
+                                            <rect x="2" y="2" width="32" height="32" rx="16" stroke="#EAF8FF"
+                                                stroke-width="4" />
+                                            <path
+                                                d="M18.6667 11.334L12 19.334H18L17.3333 24.6673L24 16.6673H18L18.6667 11.334Z"
+                                                stroke="#00A3FF" stroke-width="1.33333" stroke-linecap="round"
+                                                stroke-linejoin="round" />
+                                        </svg>
+                                    </span>
+                                    <span class="card-label mx-3">Choose Stores
+                                    </span>
+                                    <div class="align-items-start card-sub mx-14">Select Stores where you want to
+                                        identify
+                                        the
+                                        hot spots and dead zones
+                                    </div>
+                                </h3>
+                            </div>
+                            <div class="mt-6">
+                                <h3 class="card-title align-items-start flex-column mb-4">
+                                    <span><svg width="36" height="36" viewBox="0 0 36 36" fill="none"
+                                            xmlns="http://www.w3.org/2000/svg">
+                                            <rect x="2" y="2" width="32" height="32" rx="16" fill="#DAF1FF" />
+                                            <rect x="2" y="2" width="32" height="32" rx="16" stroke="#EAF8FF"
+                                                stroke-width="4" />
+                                            <path
+                                                d="M18.6667 11.334L12 19.334H18L17.3333 24.6673L24 16.6673H18L18.6667 11.334Z"
+                                                stroke="#00A3FF" stroke-width="1.33333" stroke-linecap="round"
+                                                stroke-linejoin="round" />
+                                        </svg>
+                                    </span>
+                                    <span class="card-label mx-3">Tag Zones </span>
+                                    <div class="align-items-start card-sub mx-14">Tag different sections or zones within
+                                        each
+                                        store and label them according to your operational needs.</div>
+                                </h3>
+                            </div>
+                            <div class="mt-6">
+                                <h3 class="card-title align-items-start flex-column mb-4">
+                                    <span><svg width="36" height="36" viewBox="0 0 36 36" fill="none"
+                                            xmlns="http://www.w3.org/2000/svg">
+                                            <rect x="2" y="2" width="32" height="32" rx="16" fill="#DAF1FF" />
+                                            <rect x="2" y="2" width="32" height="32" rx="16" stroke="#EAF8FF"
+                                                stroke-width="4" />
+                                            <path
+                                                d="M18.6667 11.334L12 19.334H18L17.3333 24.6673L24 16.6673H18L18.6667 11.334Z"
+                                                stroke="#00A3FF" stroke-width="1.33333" stroke-linecap="round"
+                                                stroke-linejoin="round" />
+                                        </svg>
+                                    </span>
+                                    <span class="card-label mx-3">Gain Insights </span>
+                                    <div class="align-items-start card-sub mx-14">Generate detailed reports and
+                                        visualize
+                                        zone-specific data such as traffic, dwell time, demographics, and heatmaps.
+                                    </div>
+                                </h3>
+                            </div>
+                            <a *ngIf="(gs.userAccess | async)?.userType === 'client'" type="button" routerLink="/manage/summary"
+                                tabindex="0" class="btn btn-primary px-4 mt-2 cursor-pointer ng-star-inserted"><span>Get
+                                    Started
+                                </span></a>
+
+                        </div>
+                    </div>
+                </div>
+            </ng-template>
+        </ng-container>
+
+        <ng-container *ngIf="item === 'tangoTraffic'">
+            <ng-template ngbSlide>
+                <div class="card w-100">
+                    <div class="row p-20">
+                        <div class="col-lg-4 col-sm-12">
+                            <img class="cardimg" src="./assets/tango/Images/tangoTraffic.png" alt="Tango logo" />
+                        </div>
+                        <div class="col-lg-1">
+                        </div>
+                        <div class="col-lg-7">
+                            <div class="heading mb-2">Welcome to Traffic! 👋
+                            </div>
+                            <span class="sub">
+                                Measure In-Store Traffic & Shopper Insights
+                            </span>
+                            <div class="mt-6">
+                                <h3 class="card-title align-items-start flex-column mb-4">
+                                    <span><svg width="36" height="36" viewBox="0 0 36 36" fill="none"
+                                            xmlns="http://www.w3.org/2000/svg">
+                                            <rect x="2" y="2" width="32" height="32" rx="16" fill="#DAF1FF" />
+                                            <rect x="2" y="2" width="32" height="32" rx="16" stroke="#EAF8FF"
+                                                stroke-width="4" />
+                                            <path
+                                                d="M18.6667 11.334L12 19.334H18L17.3333 24.6673L24 16.6673H18L18.6667 11.334Z"
+                                                stroke="#00A3FF" stroke-width="1.33333" stroke-linecap="round"
+                                                stroke-linejoin="round" />
+                                        </svg>
+                                    </span>
+                                    <span class="card-label mx-3">Onboard Stores
+                                    </span>
+                                    <div class="align-items-start card-sub mx-14">Easily add and manage stores with just
+                                        a
+                                        few
+                                        clicks on the dashboard
+                                    </div>
+                                </h3>
+                            </div>
+                            <div class="mt-6">
+                                <h3 class="card-title align-items-start flex-column mb-4">
+                                    <span><svg width="36" height="36" viewBox="0 0 36 36" fill="none"
+                                            xmlns="http://www.w3.org/2000/svg">
+                                            <rect x="2" y="2" width="32" height="32" rx="16" fill="#DAF1FF" />
+                                            <rect x="2" y="2" width="32" height="32" rx="16" stroke="#EAF8FF"
+                                                stroke-width="4" />
+                                            <path
+                                                d="M18.6667 11.334L12 19.334H18L17.3333 24.6673L24 16.6673H18L18.6667 11.334Z"
+                                                stroke="#00A3FF" stroke-width="1.33333" stroke-linecap="round"
+                                                stroke-linejoin="round" />
+                                        </svg>
+                                    </span>
+                                    <span class="card-label mx-3">Visualise Data </span>
+                                    <div class="align-items-start card-sub mx-14">View intelligent insights including
+                                        traffic
+                                        patterns, dwell times, demographics enabling you to make informed decisions.
+                                    </div>
+                                </h3>
+                            </div>
+                            <div class="mt-6">
+                                <h3 class="card-title align-items-start flex-column mb-4">
+                                    <span><svg width="36" height="36" viewBox="0 0 36 36" fill="none"
+                                            xmlns="http://www.w3.org/2000/svg">
+                                            <rect x="2" y="2" width="32" height="32" rx="16" fill="#DAF1FF" />
+                                            <rect x="2" y="2" width="32" height="32" rx="16" stroke="#EAF8FF"
+                                                stroke-width="4" />
+                                            <path
+                                                d="M18.6667 11.334L12 19.334H18L17.3333 24.6673L24 16.6673H18L18.6667 11.334Z"
+                                                stroke="#00A3FF" stroke-width="1.33333" stroke-linecap="round"
+                                                stroke-linejoin="round" />
+                                        </svg>
+                                    </span>
+                                    <span class="card-label mx-3">Manage Tickets </span>
+                                    <div class="align-items-start card-sub mx-14">Easily track and resolve your support
+                                        tickets
+                                        for prompt and efficient service.
+                                    </div>
+                                </h3>
+                            </div>
+                            <a *ngIf="(gs.userAccess | async)?.userType === 'client'" type="button" routerLink="/manage/summary"
+                                tabindex="0" class="btn btn-primary px-4 mt-2 cursor-pointer ng-star-inserted"><span>Get
+                                    Started
+                                </span></a>
+
+                        </div>
+                    </div>
+                </div>
+            </ng-template>
+        </ng-container>
+
+    </ng-container>
+
+
+</ngb-carousel>

package/src/lib/modules/intro/lead-intro/lead-intro.component.scss

@@ -0,0 +1,185 @@
+// .text-title{
+//     color: #000 !important;
+// text-align: center !important;
+// font-size: 30px !important;
+// font-style: normal;
+// font-weight: 600 !important;
+// line-height: 38px; 
+// }
+// .traffic-text{
+//     color: #33B1F7;
+
+// text-align: center;
+// font-size: 36px;
+// font-style: normal;
+// font-weight: 600;
+// line-height: 44px;
+// letter-spacing: -0.72px;
+// }
+// .text-muted{
+//     color: #B5B5C3 !important;
+// text-align: center;
+// font-size: 24px;
+// font-style: normal;
+// font-weight: 400;
+// line-height: 32px; 
+// text-transform: capitalize;
+// }
+// .border-color{
+//     border-radius: 8px !important;
+// border: 1px solid var(--Primary-300, #6BCAFF) !important;
+// background: var(--Primary-50, #EAF8FF) !important;
+// }
+// .text-approval{
+//     color: var(--Primary-800, #008EDF) !important;
+// font-size: 14px !important;
+// font-style: normal;
+// font-weight: 500;
+// line-height: 20px; 
+// }
+
+.heading {
+    color: var(--Black, #101828);
+    font-size: 24px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 32px;
+    /* 133.333% */
+}
+
+.sub {
+    color: var(--Black, #101828);
+    font-family: 'Inter';
+    font-size: 12px;
+    font-weight: 500 !important;
+    line-height: 18px;
+}
+
+.card-label {
+    color: var(--gray-900, #101828);
+    font-family: 'Inter';
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 24px;
+}
+
+.card-sub {
+    color: var(--gray-500, #667085);
+    font-family: 'Inter';
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 20px;
+    /* 142.857% */
+}
+
+.cardimg {
+    width: 500px;
+    height: 300px;
+}
+
+::ng-deep {
+    .carousel-indicators [data-bs-target] {
+        flex: 0 1 auto;
+        width: 8px;
+        height: 8px;
+        padding: 0;
+        cursor: pointer;
+        background-color: #009BF3 !important;
+        border-radius: 4px;
+        transition: opacity 0.6s ease;
+        margin-bottom: 10px;
+        border: 0px;
+    }
+}
+
+.toastcard {
+    border-radius: 4px;
+    border-left: 2px solid #00A3FF;
+    background: #fff;
+    box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.10);
+    padding: 6px 12px 6px 16px;
+    align-items: center;
+    gap: 16px;
+    align-self: stretch;
+    border-radius: 4px;
+}
+
+.overflow {
+    overflow-x: scroll;
+}
+
+.toasttext {
+    color: var(--Gray-500, #667085);
+    font-family: Inter;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 140%;
+    /* 19.6px */
+}
+
+.needhelp {
+    border-radius: 8px;
+    border: 1px solid var(--Gray-300, #D0D5DD);
+    background: var(--White, #FFF);
+    color: var(--Gray-700, #344054) !important;
+    font-size: 16px;
+    font-weight: 600 !important;
+    // line-height: 20px;
+    /* 142.857% */
+    text-transform: capitalize;
+}
+
+.daysleft {
+    color: var(--Gray-800, #1D2939);
+    font-family: 'Inter';
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 32px;
+    /* 133.333% */
+}
+
+.trail {
+    color: var(--Gray-500, #667085);
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 28px;
+    /* 155.556% */
+}
+
+.producttext {
+    color: var(--Gray-700, #344054);
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 20px;
+}
+
+.productitem {
+    right: 545px !important;
+}
+
+.approvalcard {
+    border-radius: 12px;
+    border: 1px dashed var(--Warning-500, #F79009);
+    background: var(--Warning-25, #FFFCF5);
+    padding: 16px 24px;
+}
+
+.approvaltext {
+    color: var(--Gray-900, #101828);
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 30px;
+}
+
+.approvesub {
+    color: var(--Gray-500, #667085);
+    font-size: 18px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 28px;
+}

package/src/lib/modules/intro/lead-intro/lead-intro.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LeadIntroComponent } from './lead-intro.component';
+
+describe('LeadIntroComponent', () => {
+  let component: LeadIntroComponent;
+  let fixture: ComponentFixture<LeadIntroComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [LeadIntroComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(LeadIntroComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});