@posiwise/smart-crm 0.0.20 → 0.0.21

package/src/lib/private/components/smart-crm-opportunities/smart-crm-opportunities-list/smart-crm-opportunities-details/smart-crm-opportunities-details.component.html

@@ -0,0 +1,273 @@
+<div class="me-auto col-xs-6">
+  <a href="javascript:void(0)"
+    (click)="back()"
+    class="previous"><i class="fa fa-arrow-alt-circle-left" aria-hidden="true"></i></a>
+  <h3 class="m-subheader__title m-subheader__title--separator">
+    <span>{{ 'Crm.OpportunitiesMessage.CrmOpportunity' | transloco }}:
+      {{ isLoading ? '': (data?.name ? data?.name : ('Label.AddNew' | transloco)) }}</span>
+  </h3>
+</div>
+<div class="w-100 text-center mt-3"
+  *ngIf="isLoading">
+  <p-progressSpinner strokeWidth="2"> </p-progressSpinner>
+  </div>
+<div class="p-2 mt-3" *ngIf="!isLoading">
+  <form [formGroup]="form"
+    (ngSubmit)="onSave()">
+    <div class="row">
+      <div class="col-12 col-sm-8">
+        <pw-input-container [label]="'Crm.OpportunitiesMessage.Title' | transloco"
+          name="title"
+          [errorMsg]="'Crm.OpportunitiesMessage.TitleErrorMessage' | transloco">
+          <input type="text"
+            class="form-control"
+            formControlName="title"
+            [ngClass]="{ 'is-invalid': submitted && f['title'].errors }" />
+        </pw-input-container>
+      </div>
+
+      <div class="ui-fluid skills-modal col-sm-4">
+        <label class="mb-2">{{ 'Crm.OpportunitiesMessage.Account' | transloco
+                    }}<span class="text-danger required-icon">*</span></label>
+        <p-autoComplete [suggestions]="filteredAccounts"
+          formControlName="crm_account_id"
+          dataKey="id"
+          field="name"
+          [dropdown]="true"
+          (completeMethod)="searchAccount($event)"
+          styleClass="w-100"
+          placeholder="Search accounts"
+          [inputStyle]="
+                        submitted && f['crm_account_id'].errors
+                            ? { border: '1px solid #ff586b' }
+                            : { border: '1px solid gray' }
+                    "
+          [multiple]="false">
+        </p-autoComplete>
+      </div>
+
+      <div class="ui-fluid skills-modal col-sm-4">
+        <label>{{ 'Crm.OpportunitiesMessage.Contact' | transloco }}</label>
+        <p-autoComplete [suggestions]="filteredUsers"
+          formControlName="crm_contact_id"
+          dataKey="id"
+          field="displayName"
+          [dropdown]="true"
+          (completeMethod)="search($event)"
+          styleClass="w-100"
+          placeholder="Search contact"
+          [multiple]="false">
+        </p-autoComplete>
+      </div>
+
+      <div class="col-12 col-md-4">
+        <div class="mb-3">
+          <label class="info-circle">{{ 'Crm.OpportunitiesMessage.OneTimeAmount' | transloco
+                        }}<span class="text-danger required-icon">*</span><span class="tooltiptext gradient-custom-branding">{{
+                            'Crm.OpportunitiesMessage.Tooltip.OneTimeAmount' | transloco
+                        }}</span></label>
+          <input type="number"
+            numbersOnly
+            class="form-control"
+            formControlName="one_time_amount"
+            id="one_time_amount"
+            [ngClass]="{ 'is-invalid': submitted && f['one_time_amount'].errors }" />
+        </div>
+      </div>
+
+      <div class="col-12 col-md-4">
+        <div class="mb-3">
+          <label class="info-circle">{{ 'Crm.OpportunitiesMessage.MonthlyAmount' | transloco
+                        }}<span class="text-danger required-icon">*</span><span class="tooltiptext gradient-custom-branding">{{
+                            'Crm.OpportunitiesMessage.Tooltip.MonthlyAmount' | transloco
+                        }}</span></label>
+          <input type="number"
+            numbersOnly
+            class="form-control"
+            formControlName="monthly_amount"
+            id="monthly_amount"
+            [ngClass]="{ 'is-invalid': submitted && f['monthly_amount'].errors }" />
+        </div>
+      </div>
+
+      <!-- Features -->
+      <div class="mb-3 col-12 col-md-4">
+        <label class="info-circle">{{ 'Crm.OpportunitiesMessage.Features' | transloco }}
+          <span class="tooltiptext gradient-custom-branding feature-tooltip">{{ 'Crm.OpportunitiesMessage.Tooltip.Feature' | transloco }}</span>
+        </label>
+        <p-multiSelect [options]="featureKeys"
+          placeholder="Select feature keys"
+          [showHeader]="true"
+          [showToggleAll]="true"
+          formControlName="feature_keys"
+          appendTo="body"></p-multiSelect>
+      </div>
+
+      <div class="col-12 col-md-4">
+        <div class="mb-3">
+          <label class="info-circle">{{ 'Crm.OpportunitiesMessage.WinChance' | transloco }}
+            <span class="text-danger required-icon">*</span>
+            <span class="tooltiptext gradient-custom-branding">{{ 'Crm.OpportunitiesMessage.Tooltip.WinChance' | transloco }}
+            </span>
+          </label>
+          <select formControlName="win_chances"
+            class="form-control form-select"
+            [ngClass]="{ 'is-invalid': submitted && f['win_chances'].errors }">
+            <option *ngFor="let option of winChance"
+              [value]="option">
+              {{ option }}
+            </option>
+          </select>
+        </div>
+      </div>
+
+      <div class="col-12 col-md-4">
+        <div class="mb-3">
+          <label class="info-circle">{{ 'Crm.OpportunitiesMessage.Won' | transloco }}
+            <span class="tooltiptext gradient-custom-branding">{{ 'Crm.OpportunitiesMessage.Tooltip.Won' | transloco }}
+            </span>
+          </label>
+          <input type="number"
+            NumberDirective
+            class="form-control"
+            formControlName="won"
+            id="won"
+            [ngClass]="{ 'is-invalid': submitted && f['won'].errors }" />
+        </div>
+      </div>
+
+      <div class="col-12 col-md-4">
+        <div class="mb-3">
+          <label class="info-circle mb-2">{{ 'Crm.OpportunitiesMessage.StartingAt' | transloco
+                        }}<span class="text-danger required-icon">*</span><span class="tooltiptext gradient-custom-branding">{{
+                            'Crm.OpportunitiesMessage.Tooltip.StartingAt' | transloco
+                        }}</span></label>
+          <div class="input-group">
+            <input class="form-control"
+              placeholder="dd-mm-yyyy"
+              formControlName="starting_at"
+              ngbDatepicker
+              #d="ngbDatepicker"
+              [minDate]="{ day: 1, month: 1, year: 1950 }"
+              [maxDate]="{ day: 31, month: 12, year: 2050 }"
+              [ngClass]="{ 'is-invalid': submitted && f['starting_at'].errors }" />
+            <div class="input-group-append">
+              <button class="btn btn-primary"
+                (click)="d.toggle()"
+                type="button">
+                <i class="fa fa-calendar" aria-hidden="true"></i>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="col-12 col-sm-4">
+        <pw-input-container [showTooltip]="true"
+          [tooltipText]="'Crm.OpportunitiesMessage.Tooltip.Category' | transloco"
+          [label]="'Crm.OpportunitiesMessage.Categories' | transloco"
+          name="crm_opportunity_category_ids"
+          [errorMsg]="'Crm.OpportunitiesMessage.CategoryErrorMessage' | transloco">
+          <p-multiSelect [options]="categories"
+            (onChange)="onCategoryChange($event)"
+            formControlName="crm_opportunity_category_ids"
+            appendTo="body"></p-multiSelect>
+        </pw-input-container>
+      </div>
+
+      <div class="col-12 col-sm-4"
+        *ngIf="TrialStartField">
+        <pw-input-container [label]="'Crm.OpportunitiesMessage.TrialStartAt' | transloco"
+          name="trial_start_at"
+          [errorMsg]="'Crm.OpportunitiesMessage.TrialStartAt' | transloco">
+          <div class="input-group">
+            <input class="form-control"
+              placeholder="dd-mm-yyyy"
+              formControlName="trial_start_at"
+              ngbDatepicker
+              #c="ngbDatepicker"
+              [minDate]="{ day: 1, month: 1, year: 1950 }"
+              [maxDate]="{ day: 31, month: 12, year: 2050 }" />
+            <div class="input-group-append">
+              <button class="btn btn-primary"
+                (click)="c.toggle()"
+                type="button">
+                <i class="fa fa-calendar" aria-hidden="true"></i>
+              </button>
+            </div>
+          </div>
+        </pw-input-container>
+      </div>
+
+      <div class="col-12 col-sm-4"
+        *ngIf="LostField">
+        <pw-input-container [label]="'Crm.OpportunitiesMessage.LostReason' | transloco"
+          name="lost_reason"
+          [errorMsg]="'Crm.OpportunitiesMessage.LostReason' | transloco">
+          <input type="text"
+            class="form-control"
+            formControlName="lost_reason"
+            id="lost_reason"
+            [ngClass]="{ 'is-invalid': submitted && f['lost_reason'].errors }" />
+        </pw-input-container>
+      </div>
+
+      <div class="col-12 col-sm-4"
+        *ngIf="WonField">
+        <pw-input-container [label]="'Crm.OpportunitiesMessage.WonReason' | transloco"
+          name="won_reason"
+          [errorMsg]="'Crm.OpportunitiesMessage.WonReason' | transloco">
+          <input type="text"
+            class="form-control"
+            formControlName="won_reason"
+            id="won_reason"
+            [ngClass]="{ 'is-invalid': submitted && f['won_reason'].errors }" />
+        </pw-input-container>
+      </div>
+
+      <div class="col-12 col-md-4">
+        <pw-input-container [showTooltip]="true"
+          [tooltipText]="'Crm.OpportunitiesMessage.Tooltip.StageOpportunity' | transloco"
+          [label]="'Crm.OpportunitiesMessage.Stage' | transloco"
+          name="crm_opportunity_stage_id"
+          errorMsg="Please select stage">
+          <select class="form-select"
+            formControlName="crm_opportunity_stage_id"
+            [ngClass]="{ 'is-invalid': submitted && f['crm_opportunity_stage_id'].errors }">
+            <option value="">Select Stage</option>
+            <option *ngFor="let option of stages"
+              [value]="option.id">
+              {{ option.name }}
+            </option>
+          </select>
+        </pw-input-container>
+      </div>
+
+      <div class="col-12 col-sm-12">
+        <pw-input-container [label]="'Crm.OpportunitiesMessage.Description' | transloco"
+        name="description"
+        [errorMsg]="'Crm.OpportunitiesMessage.DescriptionErrorMessage' | transloco">
+          <textarea rows="10"
+            type="text"
+            class="form-control description-field"
+            formControlName="description"
+            id="description"
+            [ngClass]="{ 'is-invalid': submitted && f['description'].errors }"></textarea>
+        </pw-input-container>
+      </div>
+      <div class="col-12 text-end mt-3">
+        <button type="button"
+          class="btn btn-outline-default me-2"
+          (click)="back()">
+          {{ 'Button.Cancel' | transloco }}
+        </button>
+        <button type="submit"
+          [buttonBusy]="buttonBusy"
+          class="btn btn-primary"
+          [disabled]="form.invalid">
+          {{ 'Button.Submit' | transloco }}
+        </button>
+      </div>
+    </div>
+  </form>
+</div>

package/src/lib/private/components/smart-crm-opportunities/smart-crm-opportunities-list/smart-crm-opportunities-details/smart-crm-opportunities-details.component.scss

@@ -0,0 +1,11 @@
+.vertical-bottom {
+    vertical-align: text-bottom;
+}
+
+.cancel-button {
+    float: right;
+}
+
+.feature-tooltip {
+    margin-right: -15px;
+}

package/src/lib/private/components/smart-crm-opportunities/smart-crm-opportunities-list/smart-crm-opportunities-details/smart-crm-opportunities-details.component.spec.ts

@@ -0,0 +1,196 @@
+import { TestBed } from '@angular/core/testing';
+import { byText } from '@ngneat/spectator';
+import { CommonServicesModule, PermissionService, UserService } from '@posiwise/common-services';
+import { SharedModule } from '@posiwise/shared-module';
+import { CrmService } from '@posiwise/smart-crm-shared';
+import { DEFAULT_USER, TestHelper } from '@posiwise/test-helpers';
+import { MockProvider } from 'ng-mocks';
+import { of } from 'rxjs';
+import { SmartCrmPrivateModule } from '../../../../smart-crm-private.module';
+import { SmartCrmOpportunitiesDetailsComponent } from './smart-crm-opportunities-details.component';
+
+class UserServiceMock {
+    getUserState() {
+        return of({ currentUser: DEFAULT_USER });
+    }
+}
+describe('SmartCrmOpportunitiesDetailsComponent', () => {
+    const createComponent = TestHelper.createComponentFactory({
+        component: SmartCrmOpportunitiesDetailsComponent,
+        imports: [CommonServicesModule, SharedModule, SmartCrmPrivateModule],
+        providers: [
+            ...TestHelper.TEST_PROVIDERS,
+            MockProvider(PermissionService, {
+                evaluatePermissions: () => {
+                    return true;
+                }
+            }),
+            MockProvider(CrmService, {
+                getOpportunityDetails: () =>
+                    of({
+                        id: 7,
+                        title: 'test',
+                        crm_contact_id: 37,
+                        description: 'test',
+                        one_time_amount: 100,
+                        win_chances: 10,
+                        starting_at: '2021-10-06T00:00:00.000+00:00',
+                        monthly_amount: 100,
+                        crm_account_id: 7,
+                        owner_id: 1,
+                        crm_opportunity_stage_id: 14,
+                        crm_opportunity_category_ids: [7],
+                        crm_contact: {
+                            id: 37,
+                            first_name: 'test1',
+                            last_name: 'test'
+                        },
+                        crm_account: {
+                            id: 7,
+                            name: 'test'
+                        },
+                        crm_opportunity_stage: {
+                            id: 14,
+                            name: 'test'
+                        },
+                        crm_opportunity_categories: []
+                    }),
+                updateOpportunities: () => of({}),
+                postOpportunities: () => of({}),
+                getAccountContacts: () =>
+                    of({
+                        contacts: [
+                            {
+                                id: 35,
+                                first_name: 'test',
+                                last_name: 'test',
+                                crm_account_id: 7,
+                                created_at: '2021-10-04T10:23:01.501+00:00',
+                                headline: 'test',
+                                owner: {
+                                    first_name: 'not',
+                                    last_name: 'available'
+                                },
+                                crm_account: {
+                                    id: 7,
+                                    name: 'test',
+                                    owner_id: 25
+                                }
+                            }
+                        ],
+                        object_count: 1,
+                        unfiltered_count: 1
+                    }),
+                getCrmProducts: () =>
+                    of({
+                        available_crm_subscription_products: [
+                            {
+                                id: 22,
+                                name: 'test'
+                            }
+                        ]
+                    }),
+                getAvailableOpportunityStages: () =>
+                    of({
+                        available_crm_opportunity_stages: [
+                            {
+                                id: 1,
+                                name: 'test'
+                            }
+                        ]
+                    }),
+                getAllOpportunityCategories: () =>
+                    of({
+                        crm_opportunity_categories: [
+                            {
+                                id: 7,
+                                name: 'test'
+                            }
+                        ],
+                        object_count: 1,
+                        unfiltered_count: 1
+                    }),
+                getAllAccounts: () =>
+                    of({
+                        accounts: [
+                            {
+                                id: 7,
+                                name: 'test'
+                            }
+                        ],
+                        object_count: 1,
+                        unfiltered_count: 1
+                    })
+            }),
+            {
+                provide: UserService,
+                useClass: UserServiceMock
+            }
+        ]
+    });
+
+    beforeEach(() => {
+        TestHelper.setUpPermissionsAndUser();
+    });
+
+    it('should create', async () => {
+        TestHelper.setActivatedRoute({
+            parent: { params: of({ slug: 'posiwise-263' }) }
+        });
+        const spectator = await createComponent();
+        expect(spectator.component).toBeTruthy();
+    });
+
+    it('should add submit form ', async () => {
+        TestHelper.setActivatedRoute({
+            parent: { params: of({ slug: 'posiwise-263' }) }
+        });
+        const spectator = await createComponent();
+        const service = TestBed.inject(CrmService);
+        const spy = spyOn(service, 'postOpportunities').and.callThrough();
+        spectator.typeInElement('test', 'input[formControlName="title"]');
+        spectator.typeInElement(
+            'This is a test description',
+            'textarea[formControlName="description"]'
+        );
+        spectator.typeInElement('1', 'input[formControlName="one_time_amount"]');
+        spectator.typeInElement('1', 'input[formControlName="monthly_amount"]');
+        spectator.component.form.patchValue({
+            crm_opportunity_stage_id: 1,
+            starting_at: { year: 2021, month: 7, day: 29 }
+        });
+        spectator.click(
+            'p-autocomplete[formcontrolname="crm_account_id"] button.p-autocomplete-dropdown'
+        );
+        const account = spectator.query('.p-autocomplete-panel > :first-child >:first-child');
+        spectator.click(account);
+        spectator.selectOption(
+            'select[formControlName="win_chances"]',
+            // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
+            spectator.query(byText('10')) as HTMLOptionElement
+        );
+        spectator.click(
+            'p-multiSelect[formcontrolname="crm_opportunity_category_ids"] .p-multiselect-trigger'
+        );
+        spectator.click(
+            spectator.query('.p-multiselect-items-wrapper >:first-child >:nth-child(1) > li', {
+                root: true
+            })
+        );
+        spectator.click('button[type="submit"]');
+        expect(spy).toHaveBeenCalledTimes(1);
+    });
+
+    it('should edit', async () => {
+        TestHelper.setActivatedRoute({
+            params: { id: 1 },
+            parent: { params: of({ slug: 'posiwise-263' }) }
+        });
+        const spectator = await createComponent();
+        const service = TestBed.inject(CrmService);
+        const spy = spyOn(service, 'updateOpportunities').and.callThrough();
+        spectator.typeInElement('test2', 'input[formControlName="title"]');
+        spectator.click('button[type="submit"]');
+        expect(spy).toHaveBeenCalledTimes(1);
+    });
+});