@chat21/chat21-ionic 3.0.97-rc.3 → 3.0.97-rc.5

package/src/app/modals/send-whatsapp-template/send-whatsapp-template.page.scss

@@ -0,0 +1,340 @@
+.error-container {
+    margin-top: 50px;
+    display: flex;
+    justify-content: center;
+}
+
+.error-message {
+    color: #bababa;
+    font-style: italic;
+}
+
+.label-container {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-end;
+
+    .template-name {
+        margin-right: 8px;
+        font-weight: 500;
+    }
+
+    .template-status-icon {
+        margin-right: 8px;
+    }
+
+    .template-language {
+        margin-right: 8px;
+        color: #a3a3a3;
+    }
+}
+
+.body-preview-subtitle {
+    width: 300px;
+    color: #a3a3a3;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.content-container-edit {
+    background-color: red;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+
+.content-container {
+    background-color: blueviolet;
+    // height: 100px;
+}
+
+ion-footer {
+
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    padding: 5px 10px;
+
+    ion-button {
+        background-color: rgb(0, 86, 192);
+        color: #f1f4f7;
+        border-radius: 6px;
+        font-size: 14px;
+        height: 40px;
+        line-height: 23px;
+        min-width: 120px;
+    }
+
+    ion-icon {
+        margin-right: 6px;
+    }
+}
+
+.preview-container {
+    padding: 0px 22px;
+}
+
+.message-preview {
+    width: 100%;
+    min-height: 200px;
+    //background-image: url(https://user-images.githubusercontent.com/15075759/28719144-86dc0f70-73b1-11e7-911d-60d70fcded21.png);
+    background-image: url(../../../assets/images/whatsapp_background.png);
+    border-radius: 8px;
+    background-size: cover;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+    padding: 20px;
+
+    .message-cloud {
+        background-color: #fff;
+        width: auto;
+        max-width: 50%;
+        padding: 8px 10px;
+        //border-radius: 8px 0 8px 8px;
+        border-radius: 8px;
+        box-shadow: 0 1px 0.5px rgba(0, 0, 0, .15);
+        font-size: 12px;
+
+        .header-preview {
+            color: rgba(0, 0, 0, .76);
+            font-size: 15px;
+            font-weight: bold;
+            line-height: 19px;
+            padding-bottom: 8px;
+        }
+
+        .body-preview {
+            font-size: 13.6px;
+            color: #282828;
+            line-height: 19px;
+        }
+
+        .footer-preview {
+            padding-top: 6px;
+            color: rgba(0, 0, 0, .45);
+            font-size: 13px;
+            line-height: 17px;
+        }
+    }
+
+    // .message-cloud::after {
+    //     content: '';
+    //     position: relative;
+    //     top: 46%;
+    //     left: 14%;
+    //     border-left: 0px solid transparent;
+    //     border-right: 12px solid transparent;
+    //     border-top: 17px solid #b2feab;
+    //     /* border-bottom: 20px solid #b2feab; */
+    //     border-radius: 0px 3px 3px 3px;
+    //     clear: both;
+    // }
+
+    .message-cloud-buttons {
+        width: calc(50% + 2px);
+        //max-width: 50%;
+        display: flex;
+        flex-direction: row;
+        margin-left: -2px;
+
+        .whatsapp-button {
+            background-color:#fff;
+            color: #00a5f4;;
+            width: 100%;
+            height: 34px;
+            border-radius: 7.5px;
+            font-size: 14px;
+            text-transform: none;
+            box-shadow: 0 1px 0.5px rgba(0, 0, 0, .15);
+            margin: 2px 0 0 2px;
+            min-width: calc(50% - 2px);
+            
+        }
+
+        // ion-button {
+        //     width: 100%;
+        //     color: #00a5f4;
+        // }
+
+    }
+}
+
+.title-back {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    ion-button {
+        margin-right: 10px;
+    }
+}
+
+.parameters-container {
+    padding: 0px 22px;
+
+    .parameters-title {
+        font-weight: 500;
+    }
+
+    .parameter {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        margin-bottom: 10px;
+    }
+
+    .param-number {
+        height: 40px;
+        width: 50px;
+        background-color: rgba(24, 119, 242, 0.1);
+        display: flex;
+        align-items: center;
+        /* text-align: center; */
+        margin-right: 10px;
+        justify-content: center;
+        font-weight: 600;
+        border-radius: 4px;
+        font-style: italic;
+    }
+}
+
+.field-wrapper {
+    position: relative;
+
+    .customizeBtn-container {
+        display: flex;
+        justify-content: flex-end;
+
+        ion-button {
+            color: rgb(98, 112, 139);
+        }
+    }
+}
+
+.field-wrapper input,
+.field-wrapper textarea {
+    border-style: solid;
+    border-width: 2px;
+    border-color: rgb(211, 219, 229);
+    border-radius: 4px;
+    padding: 15px;
+    border-radius: 4px;
+    width: 100%;
+    height: 40px;
+}
+
+.field-wrapper .field-placeholder {
+    font-size: 16px;
+    position: absolute;
+    /* background: #fff; */
+    bottom: 17px;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    color: #80868b;
+    left: 8px;
+    padding: 0 8px;
+    -webkit-transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1), opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
+    transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1), opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
+    z-index: 1;
+
+    text-align: left;
+    // width: 100%;
+}
+
+.field-wrapper .field-placeholder span {
+    background: #ffffff;
+    padding: 0px 8px;
+}
+
+.field-wrapper input:not([disabled]):focus ~ .field-placeholder,
+.field-placeholder:target,
+.field-wrapper.hasValue input:not([disabled]) ~ .field-placeholder {
+    -webkit-transform: scale(0.75) translateY(-35px) translateX(-18px);
+    transform: scale(0.75) translateY(-35px) translateX(-18px);
+    color: rgb(0, 86, 192);
+    font-weight: bold;
+}
+
+.loader {
+    height: 310px;
+
+    .box{
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        position: absolute;
+    }
+
+    .container{
+        height: 15px;
+        width: 105px;
+        display: flex;
+        position: relative;
+
+        .circle{
+            width: 15px;
+            height: 15px;
+            border-radius: 50%;
+            background-color: var(--basic-blue);
+            animation: move 500ms linear 0ms infinite;
+            margin-right: 30px;
+            
+            &:first-child{
+            position: absolute;
+            top:0;
+            left:0;
+            animation: grow 500ms linear 0ms infinite;
+            }
+            
+            &:last-child{
+            position: absolute;
+            top: 0;
+            right: 0;
+            margin-right: 0;
+            animation: grow 500ms linear 0s infinite reverse;
+            }
+        }
+
+    }
+
+    .spinner {
+        margin: auto;
+        border: 8px solid #EAF0F6;
+        border-radius: 50%;
+        border-top: 8px solid var(--basic-blue);
+        width: 50px;
+        height: 50px;
+        animation: spinner 1s linear infinite;
+    }
+    
+    @keyframes spinner {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
+    }
+
+    .label{
+        text-align: center;
+        margin-top: 10px;
+        animation: blinker 1s linear infinite;
+    }
+      
+    @keyframes grow {
+        from {transform: scale(0,0); opacity: 0;}
+        to {transform: scale(1,1); opacity: 1;}
+    }
+    
+    @keyframes move {
+        from {transform: translateX(0px)}
+        to {transform: translateX(45px)}
+    }
+
+    @keyframes blinker {
+        50% {
+          opacity: 0;
+        }
+      }
+}
+

package/src/app/modals/send-whatsapp-template/send-whatsapp-template.page.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { SendWhatsappTemplatePage } from './send-whatsapp-template.page';
+
+describe('SendWhatsappTemplatePage', () => {
+  let component: SendWhatsappTemplatePage;
+  let fixture: ComponentFixture<SendWhatsappTemplatePage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SendWhatsappTemplatePage ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(SendWhatsappTemplatePage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/app/modals/send-whatsapp-template/send-whatsapp-template.page.ts

@@ -0,0 +1,183 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { ModalController } from '@ionic/angular';
+import { TemplatesService } from 'src/app/services/templates/templates.service';
+import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
+import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
+
+@Component({
+  selector: 'send-whatsapp-template-modal',
+  templateUrl: './send-whatsapp-template.page.html',
+  styleUrls: ['./send-whatsapp-template.page.scss'],
+})
+export class SendWhatsappTemplateModal implements OnInit {
+
+  @Input() enableBackdropDismiss: any
+  @Input() conversationWith: string;
+  @Input() projectId: string;
+  @Input() stylesMap: Map<string, string>;
+  @Input() translationMap: Map<string, string>;
+  @Output() onSubmitForm = new EventEmitter<{}>();
+
+  selectionView: Boolean = true;
+  editTemplateView: Boolean = false;
+  displayError: Boolean = false;
+  labelError: string;
+
+  selected_template: any;
+  header_component: any;
+  body_component: any;
+  footer_component: any;
+  buttons_component: any;
+  header_component_temp: any;
+  body_component_temp: any;
+  body_params = [];
+  header_params = [];
+  templates = [];
+
+  sendButtonDisabled: Boolean = true;
+  display_loader: Boolean = true;
+
+  private logger: LoggerService = LoggerInstance.getInstance()
+
+  constructor(
+    private templatesService: TemplatesService,
+    public viewCtrl: ModalController
+  ) { }
+
+  ngOnInit() {
+    this.logger.log('[SEND-TEMPLATE-MODAL] Hello!')
+    this.getTemplates();
+  }
+
+  getTemplates() {
+    this.templatesService.getTemplatesList(this.projectId).subscribe((res: Array<[]>) => {
+      this.logger.debug('[SEND-TEMPLATE-MODAL] subscribe to getTemplates API response -->', res)
+      //this.selectionView = true;
+      this.templates = res;
+      console.log("templates: ", this.templates);
+    }, (error) => {
+      this.logger.error('[SEND-TEMPLATE-MODAL] subscribe to getTemplates API  - ERROR  ', error)
+      this.displayError = true;
+      this.display_loader = false;
+      if(error.error && error.error.code === '01'){
+        this.labelError = this.translationMap.get('WHATSAPP.ERROR_WHATSAPP_NOT_INSTALLED')
+      } else {
+        this.labelError = this.translationMap.get('WHATSAPP.ERROR_WHATSAPP_GENERIC_ERROR')
+      }
+    }, () => {
+      this.display_loader = false;
+      this.logger.log('[SEND-TEMPLATE-MODAL] subscribe to getTemplates API CALL /* COMPLETE */')
+    })
+  }
+
+  selectTemplate(template_id) {
+    this.selected_template = this.templates.find(t => t.id == template_id);
+    this.logger.debug('[SEND-TEMPLATE-MODAL] Selected template -->', this.selected_template);
+    this.selectionView = false;
+    this.editTemplateView = true;
+
+    this.header_component = this.selected_template.components.find(c => c.type === 'HEADER');
+    this.body_component = this.selected_template.components.find(c => c.type === 'BODY');
+    this.footer_component = this.selected_template.components.find(c => c.type === 'FOOTER');
+    this.buttons_component = this.selected_template.components.find(c => c.type === 'BUTTONS');
+    
+    if (this.body_component) {
+      this.body_component_temp = JSON.parse(JSON.stringify(this.body_component));
+      if (this.body_component.example) {
+        this.body_component.example.body_text[0].forEach((p, i) => {
+          this.body_params.push({ index: i + 1, type: "text", text: null })
+        })
+      } else {
+        this.sendButtonDisabled = false;
+      }
+
+    }
+
+    if (this.header_component) {
+      this.header_component_temp = JSON.parse(JSON.stringify(this.header_component));
+      if (this.header_component.example) {
+        this.header_component.example.header_text.forEach((p, i) => {
+          this.header_params.push({ index: i + 1, type: "text", text: null })
+        })
+      } else {
+        this.sendButtonDisabled = false;
+      }
+    }
+  }
+
+  onParamBodyChange(event, param_num) {
+    this.body_component = JSON.parse(JSON.stringify(this.body_component_temp));
+    this.body_params[param_num - 1].text = event;
+    this.body_params.forEach((param, i) => {
+      let index = i + 1;
+      let regex = '{{' + index + '}}';
+      if (param.text) {
+        this.body_component.text = this.body_component.text.replace(regex, param.text);
+      }
+    })
+    this.checkParameters();
+  }
+
+  onParamHeaderChange(event, param_num) {
+    this.header_component = JSON.parse(JSON.stringify(this.header_component_temp));
+    this.header_params[param_num - 1].text = event;
+    this.header_params.forEach((param, i) => {
+      let index = i + 1;
+      let regex = '{{' + index + '}}';
+      if (param.text) {
+        this.header_component.text = this.header_component.text.replace(regex, param.text);
+      }
+    })
+    this.checkParameters();
+  }
+
+  backToSelection() {
+    this.selectionView = true;
+    this.editTemplateView = false;
+    this.body_params = [];
+    this.header_params = [];
+    this.header_component = null;
+    this.body_component = null;
+    this.footer_component = null;
+    this.buttons_component = null;
+    this.header_component_temp = null;
+    this.body_component_temp = null;
+  }
+
+  sendTemplate() {
+    const new_header_params = this.header_params.map(({ index, ...keepAttrs }) => keepAttrs)
+    const new_body_params = this.body_params.map(({ index, ...keepAttrs }) => keepAttrs)
+    let attachment = {
+      type: "wa_template",
+      template: {
+        name: this.selected_template.name,
+        language: this.selected_template.language,
+        params: {
+          header: new_header_params,
+          body: new_body_params
+        }
+      }
+    }
+
+    let data = {
+      attachment: attachment,
+      text: this.body_component.text
+    }
+    this.logger.log('[SEND-TEMPLATE-MODAL] Send message with following attachment -->', data)
+    this.viewCtrl.dismiss(data);
+  }
+
+  checkParameters() {
+    this.sendButtonDisabled = true;
+    let header_result = this.header_params.find(p => !p.text || p.text == '')
+    let body_result = this.body_params.find(p => !p.text || p.text == '')
+    if (!header_result && !body_result) {
+      this.sendButtonDisabled = false;
+    }
+  }
+
+  async onClose() {
+    this.viewCtrl.dismiss()
+  }
+
+}

package/src/app/pages/contacts-directory/contacts-directory.page.html

@@ -16,4 +16,12 @@
     [contacts] = contacts
     (onOpenNewChat) = openNewChat($event)>
   </component-contacts-directory>
+
+  <div class="loader" *ngIf="contacts.length === 0">
+    <div class="box">
+      <div class="spinner" [ngStyle]="{'border-top-color': stylesMap?.get('themeColor')}"></div>
+      <div class="label">{{'LABEL_LOADING' | translate}}</div>
+    </div>
+  </div>
+
 </ion-content>

package/src/app/pages/contacts-directory/contacts-directory.page.scss

@@ -44,4 +44,84 @@ ion-content {
     &::-webkit-scrollbar-thumb:hover {
         background-color: #727272;
     }
+}
+
+.loader {
+  height: 310px;
+
+  .box{
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      position: absolute;
+  }
+
+  .container{
+      height: 15px;
+      width: 105px;
+      display: flex;
+      position: relative;
+
+      .circle{
+          width: 15px;
+          height: 15px;
+          border-radius: 50%;
+          background-color: var(--basic-blue);
+          animation: move 500ms linear 0ms infinite;
+          margin-right: 30px;
+          
+          &:first-child{
+          position: absolute;
+          top:0;
+          left:0;
+          animation: grow 500ms linear 0ms infinite;
+          }
+          
+          &:last-child{
+          position: absolute;
+          top: 0;
+          right: 0;
+          margin-right: 0;
+          animation: grow 500ms linear 0s infinite reverse;
+          }
+      }
+
+  }
+
+  .spinner {
+      margin: auto;
+      border: 8px solid #EAF0F6;
+      border-radius: 50%;
+      border-top: 8px solid var(--basic-blue);
+      width: 50px;
+      height: 50px;
+      animation: spinner 1s linear infinite;
+  }
+  
+  @keyframes spinner {
+      0% { transform: rotate(0deg); }
+      100% { transform: rotate(360deg); }
+  }
+
+  .label{
+      text-align: center;
+      margin-top: 10px;
+      animation: blinker 1s linear infinite;
+  }
+    
+  @keyframes grow {
+      from {transform: scale(0,0); opacity: 0;}
+      to {transform: scale(1,1); opacity: 1;}
+  }
+  
+  @keyframes move {
+      from {transform: translateX(0px)}
+      to {transform: translateX(45px)}
+  }
+
+  @keyframes blinker {
+      50% {
+        opacity: 0;
+      }
+    }
 }

package/src/app/pages/contacts-directory/contacts-directory.page.ts

@@ -20,6 +20,7 @@ export class ContactsDirectoryPage implements OnInit {
   
   @Input() token: string;
   @Input() isMobile: boolean;
+  @Input() stylesMap: Map<string, string>;
   // @Input() user: string;
 
   public contacts: Array<UserModel>;

package/src/app/pages/conversation-detail/conversation-detail.page.html

@@ -227,6 +227,7 @@
               [loggedUser]="loggedUser" 
               [conversationWith]="conversationWith" 
               [channelType]="channelType"
+              [channel]="conversation?.attributes?.channel"
               [tagsCannedFilter]="tagsCannedFilter"
               [tagsCannedCount]="tagsCannedCount" 
               [areVisibleCAR]="areVisibleCAR" 
@@ -234,7 +235,9 @@
               [leadInfo]="leadInfo"
               [fileUploadAccept]="appConfigProvider.getConfig().fileUploadAccept"
               [emailSection]="isEmailEnabled"
+              [whatsappTemplatesSection]="isWhatsappTemplatesEnabled"
               [isOpenInfoConversation]="openInfoConversation" 
+              [stylesMap]="styleMap"
               [translationMap]="translationsMap"
               [dropEvent]="dropEvent"
               [disableTextarea]="disableTextarea"
@@ -256,7 +259,7 @@
             [tenant]="tenant" 
             [groupDetail]="groupDetail"
             [isMobile]="isMobile"
-            [translationMap]="translationsMap">
+            [translationMap]="translationsInfoConversationMap">
           </app-info-content>
         </ion-col>