@posiwise/smart-crm 0.0.20 → 0.0.21

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

@@ -0,0 +1,322 @@
+<div class="row">
+  <div class="col-12 d-flex">
+    <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>{{ data?.id ? 'Edit' : 'Create new' }} marketing email</span>
+    </h3>
+  </div>
+</div>
+<ng-container>
+  <div class="container-fluid pw-tab">
+    <div class="p-2 mt-3">
+      <p class="my-3">
+        You can insert the user name by adding the following syntax in the body or title:
+        {{ userNameSyntax }}
+      </p>
+      <div class="w-100 text-center mt-3"
+        *ngIf="isLoading">
+        <p-progressSpinner strokeWidth="2"> </p-progressSpinner>
+      </div>
+      <form [formGroup]="form"
+        *ngIf="!isLoading"
+        (ngSubmit)="onSave()">
+        <div class="row mb-3">
+          <div class="col-12 col-md-12">
+            <pw-input-container [label]="'Crm.CommunicationsMessage.Title' | transloco"
+              name="title"
+              [showTooltip]="true"
+              [tooltipText]="'Crm.CommunicationsMessage.Tooltip.Title' | transloco"
+              errorMsg="Please enter subject">
+              <input type="text"
+                class="form-control"
+                formControlName="title"
+                [ngClass]="{ 'is-invalid': submitted && f['title'].errors }" />
+            </pw-input-container>
+          </div>
+
+          <div class="col-12 col-md-12">
+            <pw-input-container [label]="'Crm.CommunicationsMessage.Body' | transloco"
+              [showTooltip]="true"
+              [tooltipText]="'Crm.CommunicationsMessage.Tooltip.Body' | transloco"
+              name="body"
+              errorMsg="Please enter body">
+              <quill-editor [styles]="{ height: '220px' }"
+                class="w-100"
+                formControlName="body"
+                [ngClass]="{ 'is-invalid': submitted && f['body'].errors }">
+              </quill-editor>
+            </pw-input-container>
+          </div>
+
+          <div class="col-12 col-md-2">
+            <div class="mb-3">
+              <label class="info-circle">{{ 'Crm.CommunicationsMessage.SendAt' | transloco
+                                }}<span class="text-danger required-icon">*</span><span class="tooltiptext gradient-custom-branding">{{
+                                    'Crm.CommunicationsMessage.Tooltip.SendAt' | transloco
+                                }}</span></label>
+              <div class="input-group">
+                <input class="form-control"
+                  placeholder="dd-mm-yyyy"
+                  formControlName="send_at"
+                  ngbDatepicker
+                  #c="ngbDatepicker"
+                  [ngClass]="{ 'is-invalid': submitted && f['send_at'].errors }" />
+                <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>
+            </div>
+          </div>
+
+          <div class="col-12 col-md-2">
+            <div class="mb-3">
+              <label class="info-circle">{{ 'Crm.CommunicationsMessage.SendUntil' | transloco
+                                }}<span class="text-danger required-icon">*</span><span class="tooltiptext gradient-custom-branding">{{
+                                    'Crm.CommunicationsMessage.Tooltip.SendUntil' | transloco
+                                }}</span></label>
+              <div class="input-group">
+                <input class="form-control"
+                  placeholder="dd-mm-yyyy"
+                  formControlName="send_until"
+                  ngbDatepicker
+                  #d="ngbDatepicker"
+                  [ngClass]="{ 'is-invalid': submitted && f['send_until'].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-md-3">
+            <label class="info-circle">{{ 'Crm.CommunicationsMessage.PreviousNewsletter' | transloco }}
+              <span class="tooltiptext gradient-custom-branding">{{
+                                'Crm.CommunicationsMessage.Tooltip.PreviousNewsletter' | transloco
+                            }}</span></label>
+              <select class="form-select"
+                formControlName="previous_newsletter_id"
+                (change)="onNewsletterSelect($event)"
+                [ngClass]="{
+                                    'is-invalid': submitted && f['previous_newsletter_id'].errors
+                                }">
+                <option value="">select previous newsletter</option>
+                <option *ngFor="let option of allCommunications"
+                  [value]="option.id">
+                  {{ option.title }}
+                </option>
+              </select>
+          </div>
+
+          <div class="col-12 col-sm-2"
+            *ngIf="daysToNewsletterField">
+            <pw-input-container [label]="
+                                'Crm.CommunicationsMessage.DaysToWaitFromPreviousNewsletter'
+                                    | transloco
+                            "
+              [showTooltip]="true"
+              [tooltipText]="
+                                'Crm.CommunicationsMessage.Tooltip.DaysToWaitFromPreviousNewsletter'
+                                    | transloco
+                            "
+              name="days_to_wait_from_previous_newsletter"
+              errorMsg="Please enter days to wait from previous newsletter">
+              <input type="number"
+                class="form-control"
+                formControlName="days_to_wait_from_previous_newsletter"
+                [ngClass]="{
+                                    'is-invalid':
+                                        submitted && f['days_to_wait_from_previous_newsletter'].errors
+                                }" />
+            </pw-input-container>
+          </div>
+
+          <div class="col-12 col-md-1">
+            <div class="mb-3">
+              <label class="info-circle">{{ 'Crm.CommunicationsMessage.ShouldDeliver' | transloco
+                                }}<span class="text-danger required-icon">*</span><span class="tooltiptext gradient-custom-branding">{{
+                                    'Crm.CommunicationsMessage.Tooltip.IsPushed' | transloco
+                                }}</span>
+              </label>
+              <ui-switch class="d-block"
+                formControlName="is_pushed"
+                (change)="onChange($event, 'is_pushed')"
+                name="is_pushed">
+              </ui-switch>
+            </div>
+          </div>
+
+          <div class="col-12 col-md-2">
+            <div class="mb-3">
+              <label class="info-circle">{{ 'Crm.CommunicationsMessage.CanReply' | transloco
+                                }}<span class="text-danger required-icon">*</span><span class="tooltiptext gradient-custom-branding">{{
+                                    'Crm.CommunicationsMessage.Tooltip.CanReply' | transloco
+                                }}</span>
+              </label>
+              <ui-switch class="d-block"
+                formControlName="can_reply"
+                name="can_reply">
+              </ui-switch>
+            </div>
+          </div>
+        </div>
+
+        <h3>Decide who will receive the email</h3>
+
+        <div class="row mb-3">
+          <div class="col-12 col-md-4">
+            <div class="mb-3">
+              <label class="info-circle">{{ 'Crm.CommunicationsMessage.Location' | transloco
+                                }}<span class="tooltiptext gradient-custom-branding">{{
+                                    'Crm.CommunicationsMessage.Tooltip.Location' | transloco
+                                }}</span></label>
+              <input ngx-gp-autocomplete
+                class="form-control"
+                #places="ngx-places"
+                formControlName="location"
+                (onAddressChange)="handleAddressChange($event)"
+                [ngClass]="{ 'is-invalid': submitted && f['location'].errors }" />
+            </div>
+          </div>
+
+          <div class="mb-3 col-12 col-md-4">
+            <label class="info-circle">{{ 'Crm.CommunicationsMessage.Products' | transloco }}
+              <span class="tooltiptext gradient-custom-branding">{{
+                                'Crm.CommunicationsMessage.Tooltip.Products' | transloco
+                            }}</span></label>
+            <p-multiSelect [options]="crmProduct"
+              [showHeader]="true"
+              [showToggleAll]="true"
+              formControlName="product_ids"
+              appendTo="body"></p-multiSelect>
+          </div>
+
+          <div class="mb-3 col-12 col-md-4">
+            <label class="info-circle">{{ 'Crm.CommunicationsMessage.Features' | transloco }}
+              <span class="tooltiptext gradient-custom-branding">{{
+                                'Crm.CommunicationsMessage.Tooltip.Features' | transloco
+                            }}</span></label>
+            <p-multiSelect [options]="featureKeys"
+              [showHeader]="true"
+              [showToggleAll]="true"
+              formControlName="feature_keys"
+              appendTo="body"></p-multiSelect>
+          </div>
+
+          <div class="mb-3 col-12 col-md-4">
+            <label class="info-circle">{{ 'Crm.CommunicationsMessage.ContactPotential' | transloco }}
+              <span class="tooltiptext gradient-custom-branding">{{
+                                'Crm.CommunicationsMessage.Tooltip.ContactPotential' | transloco
+                            }}</span></label>
+            <p-multiSelect [options]="potentials"
+              formControlName="contact_potential"
+              appendTo="body"></p-multiSelect>
+          </div>
+
+          <div class="mb-3 col-12 col-md-4">
+            <label class="info-circle">{{ 'Crm.CommunicationsMessage.ContactLabel' | transloco }}
+              <span class="tooltiptext gradient-custom-branding">{{
+                                'Crm.CommunicationsMessage.Tooltip.ContactLabel' | transloco
+                            }}</span></label>
+            <p-multiSelect [options]="labels"
+              formControlName="contact_label"
+              appendTo="body"></p-multiSelect>
+          </div>
+
+          <div class="mb-3 col-12 col-md-4">
+            <label class="info-circle">{{ 'Crm.CommunicationsMessage.ContactSource' | transloco }}
+              <span class="tooltiptext gradient-custom-branding">{{
+                                'Crm.CommunicationsMessage.Tooltip.ContactSource' | transloco
+                            }}</span></label>
+            <p-multiSelect [options]="contactSource"
+              formControlName="contact_source"
+              appendTo="body"></p-multiSelect>
+          </div>
+
+          <div class="mb-3 col-12 col-md-4">
+            <label class="info-circle">{{ 'Crm.CommunicationsMessage.AccountPriority' | transloco }}
+              <span class="tooltiptext gradient-custom-branding">{{
+                                'Crm.CommunicationsMessage.Tooltip.AccountPriority' | transloco
+                            }}</span></label>
+            <p-multiSelect [options]="priority"
+              formControlName="account_priority"
+              appendTo="body"></p-multiSelect>
+          </div>
+
+          <div class="mb-3 col-12 col-md-4">
+            <label class="info-circle">{{ 'Crm.CommunicationsMessage.AccountStatus' | transloco }}
+              <span class="tooltiptext gradient-custom-branding">{{
+                                'Crm.CommunicationsMessage.Tooltip.AccountStatus' | transloco
+                            }}</span></label>
+            <p-multiSelect [options]="status"
+              formControlName="account_status"
+              appendTo="body"></p-multiSelect>
+          </div>
+
+          <div class="mb-3 col-12 col-md-4">
+            <label class="info-circle">{{ 'Crm.CommunicationsMessage.AccountSource' | transloco }}
+              <span class="tooltiptext gradient-custom-branding">{{
+                                'Crm.CommunicationsMessage.Tooltip.AccountSource' | transloco
+                            }}</span></label>
+            <p-multiSelect [options]="source"
+              formControlName="account_source"
+              appendTo="body"></p-multiSelect>
+          </div>
+
+          <div class="mb-3 col-12 col-md-4">
+            <label class="info-circle">{{ 'Crm.CommunicationsMessage.AccountSize' | transloco }}
+              <span class="tooltiptext gradient-custom-branding">{{
+                                'Crm.CommunicationsMessage.Tooltip.AccountSize' | transloco
+                            }}</span></label>
+            <p-multiSelect [options]="organizationSizes"
+              formControlName="account_size"
+              appendTo="body"></p-multiSelect>
+          </div>
+
+          <!-- Only new contacts -->
+          <div class="col-md-3">
+            <div class="mb-3">
+              <label class="info-circle mb-2">{{ 'Crm.CommunicationsMessage.OnlyNewContacts' | transloco
+                                }}<span class="tooltiptext gradient-custom-branding">{{
+                                    'Crm.CommunicationsMessage.Tooltip.OnlyNewContacts' | transloco
+                                }}</span>
+              </label>
+              <ui-switch class="d-block"
+                formControlName="only_new_contacts"
+                name="only_new_contacts"
+                [ngClass]="{
+                        'is-invalid': submitted && f['only_new_contacts'].errors
+                    }">
+              </ui-switch>
+            </div>
+          </div>
+        </div>
+        <div class="row">
+          <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.valid"
+            >
+              {{ 'Button.Submit' | transloco }}
+            </button>
+          </div>
+        </div>
+      </form>
+    </div>
+  </div>
+</ng-container>

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

@@ -0,0 +1,156 @@
+import { TestBed } from '@angular/core/testing';
+import { byText } from '@ngneat/spectator';
+import {
+    CommonService,
+    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 { SmartCrmCommunicationsDetailsComponent } from './smart-crm-marketing-details.component';
+
+class UserServiceMock {
+    getUserState() {
+        return of({ currentUser: DEFAULT_USER });
+    }
+}
+describe('SmartCrmCommunicationsDetailsComponent', () => {
+    const data = {
+        crm_newsletters: [
+            {
+                id: 1,
+                title: 'test',
+                body: '\u003cp\u003etest\u003c/p\u003e',
+                contact_potential: [],
+                account_status: [],
+                account_priority: [],
+                location: '',
+                latitude: null,
+                longitude: null,
+                is_sent: false,
+                is_pushed: true,
+                send_until: '2021-11-19',
+                subscription_id: 20,
+                owner_id: 1,
+                days_to_wait_from_previous_newsletter: null,
+                send_at: '2021-11-14',
+                account_size: [],
+                account_source: [],
+                product_ids: null,
+                feature_keys: [],
+                contact_label: [],
+                contact_source: []
+            }
+        ],
+        object_count: 1,
+        unfiltered_count: 1
+    };
+    const createComponent = TestHelper.createComponentFactory({
+        component: SmartCrmCommunicationsDetailsComponent,
+        imports: [CommonServicesModule, SharedModule, SmartCrmPrivateModule],
+        providers: [
+            ...TestHelper.TEST_PROVIDERS,
+            MockProvider(PermissionService, {
+                evaluatePermissions: () => {
+                    return true;
+                }
+            }),
+            MockProvider(CrmService, {
+                getAllCrmNewsletters: () => of(data),
+                updateCrmNewsLetter: () => of({}),
+                saveCrmNewsletter: () => of({}),
+                getCrmNewsletter: () => of(data.crm_newsletters[0]),
+                getCrmProducts: () => of({}),
+                getCrmContactDefaultValues: () => of({ labels: [], source: [] }),
+                getCrmAccountDefaultValues: () =>
+                    of({
+                        status: [
+                            'Prospect',
+                            'Active Trial',
+                            'Active Customer',
+                            'Old Customer',
+                            'Dead',
+                            'Competitor'
+                        ],
+                        priority: [
+                            'A - Ideal Fit',
+                            'B - High Potential',
+                            'C - Low Potential',
+                            'D - Out of market'
+                        ],
+                        source: [
+                            {
+                                id: 6,
+                                name: 'test',
+                                is_default: true,
+                                subscription_id: 31
+                            }
+                        ]
+                    })
+            }),
+            MockProvider(CommonService, {
+                getOrganizationSizes: () =>
+                    of({
+                        organization_sizes: []
+                    })
+            }),
+            {
+                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, 'saveCrmNewsletter').and.callThrough();
+        spectator.typeInElement('test', 'input[formControlName="title"]');
+        spectator.component.form.patchValue({
+            send_at: { year: 2018, month: 12, day: 31 },
+            send_until: { year: 2018, month: 12, day: 31 },
+            body: 'test'
+        });
+        spectator.selectOption(
+            'select[formControlName="previous_newsletter_id"]',
+            // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
+            spectator.query(byText('test')) as HTMLOptionElement
+        );
+        spectator.click('ui-switch[formControlName="is_pushed"]');
+        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, 'updateCrmNewsLetter').and.callThrough();
+        spectator.typeInElement('test2', 'input[formControlName="title"]');
+        spectator.click('button[type="submit"]');
+        expect(spy).toHaveBeenCalledTimes(1);
+    });
+});