tango-app-ui-manage-settings 3.0.2 → 3.0.3

package/.eslintrc.json

@@ -0,0 +1,37 @@
+{
+  "extends": "../../.eslintrc.json",
+  "ignorePatterns": [
+    "!**/*"
+  ],
+  "overrides": [
+    {
+      "files": [
+        "*.ts"
+      ],
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "lib",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "lib",
+            "style": "kebab-case"
+          }
+        ]
+      }
+    },
+    {
+      "files": [
+        "*.html"
+      ],
+      "rules": {}
+    }
+  ]
+}

package/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/tango-manage-settings",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

package/package.json

@@ -1,25 +1,12 @@
-{
-  "name": "tango-app-ui-manage-settings",
-  "version": "3.0.2",
-  "peerDependencies": {
-    "@angular/common": "^17.0.0",
-    "@angular/core": "^17.0.0"
-  },
-  "dependencies": {
-    "tslib": "^2.3.0"
-  },
-  "sideEffects": false,
-  "module": "fesm2022/tango-app-ui-manage-settings.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "esm2022": "./esm2022/tango-app-ui-manage-settings.mjs",
-      "esm": "./esm2022/tango-app-ui-manage-settings.mjs",
-      "default": "./fesm2022/tango-app-ui-manage-settings.mjs"
-    }
-  }
-}
+{
+  "name": "tango-app-ui-manage-settings",
+  "version": "3.0.3",
+  "peerDependencies": {
+    "@angular/common": "^17.0.0",
+    "@angular/core": "^17.0.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false
+}

package/src/lib/components/brand-details/billing-details/billing-details.component.html

@@ -0,0 +1,70 @@
+<form [formGroup]="billingDetailsForm">
+    <div class="row">
+        <div *ngIf="billingDetailsForm.disabled" class="col-12 mb-5">
+            <div class=" d-flex justify-content-end">
+                <button (click)="billingDetailsForm.disabled ? billingDetailsForm.enable() : billingDetailsForm.disable()" type="button" class="btn btn-outline align-items-end"><span class="me-2"><svg
+                            xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+                            <g clip-path="url(#clip0_2579_25125)">
+                                <path
+                                    d="M14.167 2.49993C14.3859 2.28106 14.6457 2.10744 14.9317 1.98899C15.2176 1.87054 15.5241 1.80957 15.8337 1.80957C16.1432 1.80957 16.4497 1.87054 16.7357 1.98899C17.0216 2.10744 17.2815 2.28106 17.5003 2.49993C17.7192 2.7188 17.8928 2.97863 18.0113 3.2646C18.1297 3.55057 18.1907 3.85706 18.1907 4.16659C18.1907 4.47612 18.1297 4.78262 18.0113 5.06859C17.8928 5.35455 17.7192 5.61439 17.5003 5.83326L6.25033 17.0833L1.66699 18.3333L2.91699 13.7499L14.167 2.49993Z"
+                                    stroke="#344054" stroke-width="1.67" stroke-linecap="round"
+                                    stroke-linejoin="round" />
+                            </g>
+                            <defs>
+                                <clipPath id="clip0_2579_25125">
+                                    <rect width="20" height="20" fill="white" />
+                                </clipPath>
+                            </defs>
+                        </svg></span>Edit Details</button>
+            </div>
+        </div>
+        <div class="col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-5">
+            <label for="tradeName" class="form-label">Trade Name <span class="alert-required"></span></label>
+            <input formControlName="tradeName" type="type" class="form-control" id="tradeName" autocomplete="off">
+        </div>
+        <div class="col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-5">
+            <label for="gstNumber" class="form-label">GST Number <span class="alert-required"></span></label>
+            <div class="input-group ">
+                <input formControlName="gstNumber" type="text" class="form-control" placeholder="" aria-label="Example text with button addon"
+                    aria-describedby="button-addon1" id="gstNumber">
+                <button [disabled]="billingDetailsForm.disabled" (click)="triggerFileInput()" class="btn btn-outline upload-btn" type="button" id="button-addon1">
+                    <span class="me-2"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
+                            viewBox="0 0 20 20" fill="none">
+                            <path
+                                d="M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5"
+                                stroke="#667085" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round" />
+                        </svg></span>
+                    Upload</button>
+            </div>
+            <input (change)="onFileSelect($event)" accept=".pdf" class="d-none" #gstFormInput type="file">
+            <a *ngIf="gstForm" [href]="gstForm" target="_blank" class="mt-3">
+                <span class="uploaded-doc-text me-2">GST Certificate</span>
+            </a>
+        </div>
+        <div class="col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-5">
+            <label for="invoiceAuthorityName" class="form-label">Invoice Authority Name <span
+                    class="alert-required"></span></label>
+            <input formControlName="authorityName" type="type" class="form-control" id="invoiceAuthorityName"
+                autocomplete="off">
+
+        </div>
+        <div class="col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-5">
+            <label for="invoiceAuthorityEmail" class="form-label">Invoice Authority Email <span
+                    class="alert-required"></span></label>
+            <input formControlName="authorityEmail" type="type" class="form-control" id="invoiceAuthorityEmail"
+                autocomplete="off">
+        </div>
+        <div class="col-12  mb-5">
+            <label for="billingAddress" class="form-label">Billing Address <span class="alert-required"></span></label>
+            <input formControlName="billingAddress" type="type" class="form-control" id="billingAddress" autocomplete="off">
+        </div>
+    </div>
+
+    <div *ngIf="billingDetailsForm.enabled">
+        <div class="mb-5 w-100 footer-seperator"></div>
+        <div class="d-flex justify-content-end">
+            <a (click)="onCancel()" type="button" class="btn btn-outline me-4">Cancel</a>
+            <a (click)="onSubmit()" type="submit" class="btn btn-primary px-4 "><span>Save Changes</span></a>
+        </div>
+    </div>
+</form>

package/src/lib/components/brand-details/billing-details/billing-details.component.scss

@@ -0,0 +1,95 @@
+.form-control {
+    display: block;
+    height: 45px;
+    padding: 0.5rem 1rem;
+    font-size: 1.1rem;
+    font-weight: 400;
+    color: var(--Gray-500, #667085);
+    -webkit-appearance: none;
+    appearance: none;
+    border: 1px solid var(--Gray-300, #D0D5DD) !important;
+    background: var(--White, #FFF) !important;
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05) !important;
+    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+}
+
+.form-label {
+    color: var(--Gray-700, #344054);
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 20px;
+}
+
+.is-invalid {
+    border-radius: 8px !important;
+    border: 1px solid var(--Error-300, #FDA29B) !important;
+    background: var(--White, #FFF) !important;
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05) !important;
+    padding-right: calc(1.5em + 0.75rem) !important;
+    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzIyMDFfMjA5NTApIj4KPHBhdGggZD0iTTcuOTk5NjcgNS4zMzM5OFY4LjAwMDY1TTcuOTk5NjcgMTAuNjY3M0g4LjAwNjM0TTE0LjY2NjMgOC4wMDA2NUMxNC42NjYzIDExLjY4MjYgMTEuNjgxNiAxNC42NjczIDcuOTk5NjcgMTQuNjY3M0M0LjMxNzc4IDE0LjY2NzMgMS4zMzMwMSAxMS42ODI2IDEuMzMzMDEgOC4wMDA2NUMxLjMzMzAxIDQuMzE4NzUgNC4zMTc3OCAxLjMzMzk4IDcuOTk5NjcgMS4zMzM5OEMxMS42ODE2IDEuMzMzOTggMTQuNjY2MyA0LjMxODc1IDE0LjY2NjMgOC4wMDA2NVoiIHN0cm9rZT0iI0YwNDQzOCIgc3Ryb2tlLXdpZHRoPSIxLjMzMzMzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF8yMjAxXzIwOTUwIj4KPHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=) !important;
+    background-repeat: no-repeat !important;
+    background-position: right calc(0.375em + 0.1875rem) center !important;
+    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem) !important;
+}
+
+small {
+    color: var(--Error-500, #F04438) !important;
+    font-size: 14px !important;
+    font-weight: 400 !important;
+    line-height: 20px;
+    display: block;
+    margin-top: 6px;
+}
+
+.cancel {
+    border-radius: 8px;
+    border: 1px solid #D0D5DD;
+    background: #FFF;
+    color: #344054;
+    font-family: 'Inter';
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 20px;
+    text-transform: capitalize;
+}
+
+.apply {
+    color: #FFF;
+    font-family: Inter;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 20px;
+    text-transform: capitalize;
+}
+
+
+input[disabled],
+select[disabled],
+textarea[disabled],
+input[readonly],
+select[readonly],
+textarea[readonly] {
+    background-color: #F9FAFB !important;
+}
+
+.footer-seperator {
+    border-top: 1px solid #EAECF0;
+}
+
+.upload-btn {
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05) !important;
+    color: var(--Gray-500, #667085);
+    font-size: 16px;
+    font-weight: 600;
+}
+
+.uploaded-doc-text {
+    color: var(--Primary-700, #009BF3);
+    font-family: Inter;
+    font-size: 14px;
+    font-weight: 600;
+    text-transform: capitalize;
+    cursor: pointer;
+}

package/src/lib/components/brand-details/billing-details/billing-details.component.spec.ts

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

package/src/lib/components/brand-details/billing-details/billing-details.component.ts

@@ -0,0 +1,68 @@
+import { ChangeDetectorRef, Component, ElementRef, ViewChild } from '@angular/core';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { ClientApiService } from '../../../services/client-api.service';
+
+@Component({
+  selector: 'lib-billing-details',
+  templateUrl: './billing-details.component.html',
+  styleUrl: './billing-details.component.scss'
+})
+export class BillingDetailsComponent {
+  billingDetailsForm: FormGroup
+  @ViewChild('gstFormInput') uploadInput: ElementRef<HTMLElement>;
+  gstForm: string;
+
+  constructor(private fb: FormBuilder, private apiService: ClientApiService, private cd: ChangeDetectorRef) {
+    this.initForm()
+    this.apiService.clientFormData.subscribe((res) => {
+      if (res) {        
+        if(res.type === 'input' && res.form === 'billing-details'){
+        this.patchForm(res.value)
+        }
+      }
+    })
+  }
+
+
+  initForm() {
+    this.billingDetailsForm = this.fb.group({
+      tradeName: [''],
+      gstNumber: [''],
+      gstCertificate: [''],
+      authorityName: [''],
+      authorityEmail: [''],
+      billingAddress: [''],
+    });
+    this.billingDetailsForm.disable()
+  }
+
+  patchForm(data: any) {    
+    this.billingDetailsForm.patchValue(
+      {
+       ...data
+      }
+    )
+    this.gstForm = data?.gstCertificate
+    
+  }
+
+  triggerFileInput() {
+    this.uploadInput.nativeElement.click()
+  }
+
+  onFileSelect(event: any) {
+    if (event.target.files && event.target.files[0]) {
+      let file: File = event.target.files[0];
+      this.billingDetailsForm.value.gstCertificate = file      
+    }  
+  }
+
+  onCancel(){
+    this.billingDetailsForm.disable()
+    this.apiService.clientFormData.next({value:null, type:'cancel', form:'billing-details'})
+  }
+
+  onSubmit(){       
+    this.apiService.clientFormData.next({value:this.billingDetailsForm.value, type:'submit', form:'billing-details'})
+  }
+}

package/src/lib/components/brand-details/brand-details.component.html

@@ -0,0 +1,56 @@
+<div class="row">
+    <div class="col-12">
+        <div ngbAccordion [closeOthers]="true" [destroyOnHide]="true" (show)="openItem($event)">
+            <div class="settings-accordian-card "  ngbAccordionItem>
+                <div class="d-flex" ngbAccordionHeader>
+                    <button class="mainheading" ngbAccordionButton>
+                        <div class="header-row">
+                            <span >Brand Info</span>
+                            <span class="divider"></span>
+                        </div>
+                    </button>
+                </div>
+                <div ngbAccordionCollapse>
+                    <div ngbAccordionBody>
+                        <ng-template>
+                            <lib-brand-info></lib-brand-info>
+                        </ng-template>
+                    </div>
+                </div>
+            </div>
+            <div class="settings-accordian-card mt-6" ngbAccordionItem>
+                <div class="d-flex" ngbAccordionHeader>
+                    <button class="mainheading" ngbAccordionButton>
+                        <div class="header-row">
+                            <span >Billing Details</span>
+                            <span class="divider"></span>
+                        </div>
+                    </button>
+                </div>
+                <div ngbAccordionCollapse>
+                    <div ngbAccordionBody>
+                        <ng-template>
+                            <lib-billing-details></lib-billing-details>
+                        </ng-template>
+                    </div>
+                </div>
+            </div>
+            <div class="settings-accordian-card mt-6" ngbAccordionItem>
+                <div class="d-flex" ngbAccordionHeader>
+                    <button class="mainheading" ngbAccordionButton>
+                        <div class="header-row">
+                            <span >Signatory Details</span>
+                            <span class="divider"></span>
+                        </div>
+                    </button>
+                </div>
+                <div ngbAccordionCollapse>
+                    <div ngbAccordionBody>
+                        <ng-template>
+                            <lib-signatory-details></lib-signatory-details>
+                        </ng-template>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>

package/src/lib/components/brand-details/brand-details.component.scss

@@ -0,0 +1,5 @@
+.settings-accordian-card {
+    border-radius: 10px;
+    background: var(#FFF);
+    overflow: hidden;
+}

package/src/lib/components/brand-details/brand-details.component.spec.ts

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

package/src/lib/components/brand-details/brand-details.component.ts

@@ -0,0 +1,153 @@
+import { Component } from '@angular/core';
+import { ClientApiService } from '../../services/client-api.service';
+import { ToastService } from 'tango-app-ui-shared';
+
+@Component({
+  selector: 'lib-brand-details',
+  templateUrl: './brand-details.component.html',
+  styleUrl: './brand-details.component.scss',
+})
+export class BrandDetailsComponent {
+  clientData:any;
+
+
+  constructor(private clientApi: ClientApiService, private toast:ToastService) {
+    this.clientApi.clientFormData.subscribe((e) => {
+      if (e.type === 'submit') {
+        this.submitForm(e)
+      }else if(e.type === 'cancel'){
+        this.resetForm(e)
+      }
+    })
+    
+    this.clientApi.clientData.subscribe((e)=>{      
+      if(e){
+        this.clientData = e
+        this.populateBrandInfo(e)
+        this.populateBillingDetails(e)
+        this.populateSignatoryDetails(e)
+      }
+    })
+  }
+
+  openItem(event:string){
+    this.populateBrandInfo(this.clientData)
+    this.populateBillingDetails(this.clientData)
+    this.populateSignatoryDetails(this.clientData)
+  }
+
+  populateBrandInfo(data: any) {
+    let obj = {
+      brandName: data?.brandName,
+      registeredCompanyName: data?.profileDetails?.registeredCompanyName,
+      industry: data?.profileDetails?.industry,
+      clientType: data?.profileDetails?.clientType,
+      corporateEmail: data?.userData?.corporateEmail,
+      countryCode: data?.userData?.countryCode,
+      mobileNumber: data?.userData?.mobileNumber,
+      registeredAddress: data?.profileDetails?.registeredAddress,
+      headQuarters: data?.profileDetails?.headQuarters,
+      website: data?.profileDetails?.website,
+      status: data?.status,
+      logo: data?.profileDetails?.logo,
+    }
+
+    this.clientApi.clientFormData.next({ value: { ...obj }, type: 'input', form: 'brand-info' })
+  }
+
+  populateBillingDetails(data: any) {
+    let obj = {
+      tradeName: data?.billingDetails?.tradeName,
+      gstNumber: data?.billingDetails?.gstNumber,
+      authorityName: data?.billingDetails?.authorityName,
+      authorityEmail: data?.billingDetails?.authorityEmail,
+      billingAddress: data?.billingDetails?.billingAddress,
+      gstCertificate: data?.document?.gst?.path,
+    }
+
+    this.clientApi.clientFormData.next({ value: { ...obj }, type: 'input', form: 'billing-details' })
+  }
+
+  populateSignatoryDetails(data: any) {
+    let obj = {
+      name: data?.signatoryDetail?.name,
+      email: data?.signatoryDetail?.email,
+      number: data?.signatoryDetail?.number,
+      designation: data?.signatoryDetail?.designation,
+    }
+
+    this.clientApi.clientFormData.next({ value: { ...obj }, type: 'input', form: 'signatory-details' })
+  }
+
+
+
+  submitForm(e: any) {    
+    if (e.form === 'brand-info') {
+      const formData = new FormData();
+      formData.append('logo', e.value.logo);
+      formData.append('clientType', e.value.clientType);
+      formData.append('headQuarters', e.value.headQuarters);
+      formData.append('industry', e.value.industry);
+      formData.append('registeredAddress', e.value.registeredAddress);
+      formData.append('registeredCompanyName', e.value.registeredCompanyName);
+      formData.append('status', e.value.status);
+      formData.append('website', e.value.website);
+      this.clientApi.updateBrandInfo(this.clientData.clientId, formData).subscribe({
+        next: (e) => {
+          this.toast.getSuccessToast(e.data?.result)
+          this.clientApi.clientFormData.next({value:null, type:'submitted', form:'null'})
+        },
+        error: (e) => {          
+          this.toast.getErrorToast(e.error?.error)
+          this.populateBrandInfo(this.clientData)
+        }
+      })
+
+    } else if (e.form === 'billing-details') {
+      const formData = new FormData();
+      formData.append('tradeName', e.value.tradeName);
+      formData.append('gstNumber', e.value.gstNumber);
+      formData.append('gstCertificate', e.value.gstCertificate);
+      formData.append('authorityName', e.value.authorityName);
+      formData.append('authorityEmail', e.value.authorityEmail);
+      formData.append('billingAddress', e.value.billingAddress);
+      this.clientApi.updateBillingDetails(this.clientData.clientId, formData).subscribe({
+        next: (e) => {
+          this.toast.getSuccessToast(e.data?.result)
+          this.clientApi.clientFormData.next({value:null, type:'submitted', form:'null'})
+        },
+        error: (e) => {
+          this.toast.getErrorToast(e.error?.error)
+          this.populateBillingDetails(this.clientData)
+        }
+      })
+    }else if (e.form === 'signatory-details') {
+      this.clientApi.updateSignatoryDetails(this.clientData.clientId, e.value).subscribe({
+        next: (e) => {
+          this.toast.getSuccessToast(e.data?.result)
+          this.clientApi.clientFormData.next({value:null, type:'submitted', form:'null'})
+        },
+        error: (e) => {
+          this.toast.getErrorToast(e.error?.error)
+          this.populateSignatoryDetails(this.clientData)
+        }
+      })
+    }
+  }
+
+  resetForm(e:any){
+    if (e.form === 'brand-info') {
+      this.populateBrandInfo(this.clientData)
+    }else
+    if (e.form === 'billing-details') {
+      this.populateBillingDetails(this.clientData)
+    }else
+    if (e.form === 'signatory-details') {
+      this.populateSignatoryDetails(this.clientData)
+    }
+  }
+
+
+
+
+}