Merge branch 'features/X-twilio-voice'

Author: Nicola Lanzilotto

src/app/integrations/integrations.component.html

@@ -175,29 +175,74 @@
                                 </ext-integration>
 
                             </div>
-
-                            <div *ngIf="integrationLocked === true" style="width: 100%;">
+                          
+                            <div *ngIf="integrationLocked === true && ((profileType === 'payment' && subscriptionIsActive === true) || (profileType === 'free' && trialExpired === false))"  style="width: 100%;">
                                 <div class="int-lock-container">
                                     <img src="assets/img/int/upgrade-icon.svg" alt="Upgrade Plan">
 
+                                    <p *ngIf="integrationSelectedName === INT_KEYS.TWILIO_VOICE" class="upgrade-title">
+                                        {{ 'ContactUs' | translate }}!</p>
+
+                                    <p *ngIf="integrationSelectedName === INT_KEYS.TWILIO_VOICE" class="upgrade-subtitle">
+                                       <span style="display: block;"> Voice brings real-time, human interaction into your workflows. </span>  
+                                       <span style="display: block;">With Twilio Voice, you can handle calls, automate voice interactions, and seamlessly switch between chat and voice.</span>
+                                    </p>
+                                    
                                     <p *ngIf="integrationSelectedName === INT_KEYS.OPENAI" class="upgrade-title">
                                         {{ 'Integration.UpgradePlan' | translate }}</p>
+
                                     <p *ngIf="integrationSelectedName === INT_KEYS.OPENAI" class="upgrade-subtitle">
                                         {{'Integration.OpenaiSubtitle1' | translate: translateparams }}</p>
+
                                     <p *ngIf="integrationSelectedName === INT_KEYS.OPENAI" class="upgrade-subtitle">
                                         {{'Integration.OpenaiSubtitle2' | translate }}</p>
+
                                     <p *ngIf="integrationSelectedName === INT_KEYS.OPENAI" class="upgrade-subtitle"
                                         [innerHTML]="'Integration.AvailableFromPlanShort' | translate: { plan_require: plan_require }">
                                     </p>
 
-                                    <p *ngIf="integrationSelectedName !== INT_KEYS.OPENAI" class="upgrade-title">
+                                    <p *ngIf="integrationSelectedName !== INT_KEYS.OPENAI && integrationSelectedName !== INT_KEYS.TWILIO_VOICE" class="upgrade-title">
                                         {{'Integration.UpgradePlan' | translate }}</p>
-                                    <p *ngIf="integrationSelectedName !== INT_KEYS.OPENAI" class="upgrade-subtitle"
+                                    <p *ngIf="integrationSelectedName !== INT_KEYS.OPENAI && integrationSelectedName !== INT_KEYS.TWILIO_VOICE" class="upgrade-subtitle"
                                         [innerHTML]="'Integration.AvailableFromPlan' | translate: { plan_require: plan_require }">
                                     </p>
 
-                                    <button class="custom-upgrade-primary-button" (click)="goToPricing()">
-                                        {{'Integration.UpgradeNow' |  translate }}</button>
+                                 
+
+                                    <button *ngIf="integrationSelectedName !== INT_KEYS.TWILIO_VOICE" 
+                                        class="custom-upgrade-primary-button" 
+                                        (click)="goToPricing()">
+                                        {{'Integration.UpgradeNow' |  translate }}
+                                    </button>
+                                    <button *ngIf="integrationSelectedName === INT_KEYS.TWILIO_VOICE" 
+                                        class="custom-upgrade-primary-button" 
+                                        (click)="contactUs()">
+                                        {{'ContactUs' |  translate }}
+                                    </button>
+                                </div>
+                            </div>
+                            
+                             <div *ngIf="integrationLocked === true && ((profileType === 'free' && trialExpired === true) || (profileType === 'payment' && subscriptionIsActive === false))"  style="width: 100%;">
+                                <div class="int-lock-container">
+                                    <img src="assets/img/int/upgrade-icon.svg" alt="Upgrade Plan">
+
+                                    <p class="upgrade-title">
+                                        {{ 'Pricing.SubscriptionPaymentProblem' | translate }}</p>
+
+                                    <p class="upgrade-subtitle">
+                                        <span style="display: block;"> 
+                                        {{ 'Pricing.WeWereUnableToAutomaticallyRenewYourSubscription' | translate }}.
+                                        </span>
+                                        <span style="display: block;"> 
+                                        {{ 'Pricing.PleaseContactUs' | translate }} {{ 'Pricing.ToUpdateYourPaymentInformation' | translate }}.
+                                        </span>
+                                    </p>
+                                 
+                                    <button
+                                        class="custom-upgrade-primary-button" 
+                                        (click)="contactUsToUpgradePlan()">
+                                        {{'ContactUs' |  translate }}
+                                    </button>
                                 </div>
                             </div>
 

src/app/integrations/integrations.component.scss

@@ -228,10 +228,10 @@ mat-expansion-panel ::ng-deep {
     //background: #3ea9f5;
     background: linear-gradient(45deg, #3167e2, #3167e2, #a736ff);
     border: none;
-    border-radius: 6px;
-    height: 30px;
+    border-radius: 9999px;
+    height: 40px;
     font-weight: 500;
-    padding: 0px 8px;
+    padding: 0px 26px;
     opacity: 0.8;
 
     &:hover {

src/app/integrations/integrations.component.ts

@@ -14,6 +14,7 @@ import { ProjectPlanService } from 'app/services/project-plan.service';
 import { PLAN_NAME } from 'app/utils/util';
 import { AppStoreService } from 'app/services/app-store.service';
 import { environment } from 'environments/environment';
+import { AppConfigService } from 'app/services/app-config.service';
 
 
 const swal = require('sweetalert');
@@ -70,6 +71,9 @@ export class IntegrationsComponent implements OnInit, OnDestroy {
   subscriptionIsActive: boolean;
   profileType: string;
   user: any;
+  salesEmail: string;
+  public_Key: string;
+  isVisiblePAY: boolean;
 
   constructor(
     private auth: AuthService,
@@ -83,18 +87,21 @@ export class IntegrationsComponent implements OnInit, OnDestroy {
     private brand: BrandService,
     public prjctPlanService: ProjectPlanService,
     private projectPlanService: ProjectPlanService,
-    private appService: AppStoreService
+    private appService: AppStoreService,
+    public appConfigService: AppConfigService,
   ) {
     const _brand = this.brand.getBrand();
     this.logger.log("[INTEGRATION-COMP] brand: ", _brand);
     this.translateparams = _brand;
+    this.salesEmail = _brand['CONTACT_SALES_EMAIL'];
     // this.INTEGRATIONS_CLONE = JSON.parse(JSON.stringify(INTEGRATION_LIST_ARRAY))
 
   }
 
   ngOnInit(): void {
     this.getCurrentProject();
     this.getLoggedUser()
+    this.getOSCODE();
     this.getProjectPlan();
     this.getBrowserVersion();
     this.listenSidebarIsOpened();
@@ -111,6 +118,53 @@ export class IntegrationsComponent implements OnInit, OnDestroy {
   // UTILS FUNCTIONS - START
   // ------------------------------
 
+  getOSCODE() {
+    this.public_Key = this.appConfigService.getConfig().t2y12PruGU9wUtEGzBJfolMIgK;
+    this.logger.log('[INTEGRATION-COMP] AppConfigService getAppConfig public_Key', this.public_Key);
+
+    let keys = this.public_Key.split("-");
+    this.logger.log('[INTEGRATION-COMP] PUBLIC-KEY - public_Key keys', keys)
+
+    keys.forEach(key => {
+
+      if (key.includes("PAY")) {
+
+        let pay = key.split(":");
+
+        if (pay[1] === "F") {
+          this.isVisiblePAY = false;
+          this.logger.log('[INTEGRATION-COMP] isVisiblePAY', this.isVisiblePAY)
+        } else {
+          this.isVisiblePAY = true;
+          this.logger.log('[INTEGRATION-COMP] isVisiblePAY', this.isVisiblePAY)
+        }
+      }
+    });
+
+    if (!this.public_Key.includes("PAY")) {
+      this.isVisiblePAY = false;
+    }
+  }
+
+  getPayValue(): boolean {
+    this.public_Key = this.appConfigService.getConfig().t2y12PruGU9wUtEGzBJfolMIgK;
+    let keys = this.public_Key.split("-");
+
+    let payKey = keys.find((key) => key.startsWith('PAY'));
+    if (payKey) {
+      let payParts = payKey.split(':');
+      let payValue = payParts[1];
+      if (payValue === 'F') {
+        return false;
+      } else {
+        return true;
+      }
+    }
+
+    // If PAY key doesn't exist, return false
+    return false;
+  }
+
   getLoggedUser() {
     this.auth.user_bs
       .pipe(
@@ -156,10 +210,13 @@ export class IntegrationsComponent implements OnInit, OnDestroy {
           this.profile_name = projectProfileData.profile_name;
           this.logger.log('[INTEGRATION-COMP] INTEGRATIONS profile_name ', this.profile_name)
 
-          this.trialExpired = projectProfileData.trial_expired
+         
           this.trialExpired = projectProfileData.trial_expired
           this.profileType = projectProfileData.profile_type
           this.subscriptionIsActive = projectProfileData.subscription_is_active
+          // console.log('subscriptionIsActive', this.subscriptionIsActive)
+          // console.log('profileType', this.profileType)
+          // console.log('trialExpired', this.trialExpired)
 
           this.customization = projectProfileData.customization;
 
@@ -239,7 +296,7 @@ export class IntegrationsComponent implements OnInit, OnDestroy {
 
     return new Promise((resolve) => {
       this.appService.getApps().subscribe((response: any) => {
-
+      // this.logger.log("[INTEGRATION-COMP] getApps response ", response)
         let whatsappApp = response.apps.find(a => (a.title === APPS_TITLE.WHATSAPP && a.version === "v2"));
         if (environment['whatsappConfigUrl']) {
           if (whatsappApp) {
@@ -372,7 +429,7 @@ export class IntegrationsComponent implements OnInit, OnDestroy {
     this.logger.log("[INTEGRATIONS]- onIntegrationSelect integration", integration)
     this.integrationSelectedType = 'none'
     this.integrationLocked = false;
-    this.checkPlan(integration.plan).then(() => {
+    this.checkPlan(integration, integration.plan).then(() => {
       this.integrationSelectedName = integration.key;
       this.logger.log("[INTEGRATIONS]- onIntegrationSelect integrationSelectedName", integration.key)
       this.logger.log("[INTEGRATIONS]- onIntegrationSelect this.integrations", this.integrations)
@@ -783,10 +840,44 @@ export class IntegrationsComponent implements OnInit, OnDestroy {
     this.logger.log('[INTEGRATION-COMP] INTEGRATIONS ', this.INTEGRATIONS)
   }
 
-  checkPlan(integration_plan) {
-    this.logger.log("INTEGRATIONS_KEYS checkPlan profile_name: " + this.profile_name + " integration_plan: " + integration_plan);
+  checkPlan(integration, integration_plan) {
+    // this.logger.log("INTEGRATIONS_KEYS checkPlan integration: " , integration);
+    // this.logger.log("INTEGRATIONS_KEYS checkPlan profile_name: " + this.profile_name + " integration_plan: " + integration_plan);
+    this.logger.log("INTEGRATIONS_KEYS checkPlan isVisiblePAY: " + this.getPayValue() + " integration_plan: " + integration_plan);
 
     return new Promise((resolve, reject) => {
+      // A = 'Growth',
+      // B = 'Scale',
+      // C = 'Plus',
+      // D = 'Starter',
+      // E = 'Pro', 
+      // EE = 'Business',
+      // F = 'Custom'
+
+      // TWILIO_VOICE: Check trial/subscription status first, then customization
+      // Reject if: trial is expired (profileType === 'free' && trialExpired === true), 
+      //            or subscription is expired (profileType === 'payment' && subscriptionIsActive === false),
+      //            or getPayValue() is false, or customization doesn't exist, or voice_twilio key doesn't exist, or voice_twilio is false
+      // Resolve only if trial/subscription is active, getPayValue() is true, and voice_twilio exists and is true
+      if (integration && integration.key === this.INT_KEYS.TWILIO_VOICE) {
+        // First check: if trial is expired (free profile with expired trial)
+        if (this.profileType === 'free' && this.trialExpired === true) {
+          reject(false);
+        }
+        // Second check: if subscription is expired (payment profile with inactive subscription)
+        else if (this.profileType === 'payment' && this.subscriptionIsActive === false) {
+          reject(false);
+        } else if (!this.getPayValue()) {
+          reject(false);
+        } else if (!this.customization) {
+          reject(false);
+        } else if (!this.customization.hasOwnProperty(this.INT_KEYS.TWILIO_VOICE) || this.customization[this.INT_KEYS.TWILIO_VOICE] === false) {
+          reject(false);
+        } else {
+          resolve(true);
+        }
+        return;
+      }
 
       // FREE or SANDBOX PLAN
       // if (this.profile_name === 'free' || this.profile_name === 'Sandbox') {
@@ -870,7 +961,9 @@ export class IntegrationsComponent implements OnInit, OnDestroy {
   }
 
   manageAppVisibility(projectProfileData) {
-
+    const isVisiblePAY = this.getPayValue();
+    this.logger.log('[INTEGRATIONS] manageAppVisibility isVisiblePAY ', isVisiblePAY)
+    
     if (projectProfileData && projectProfileData.customization) {
 
       if (projectProfileData.customization[this.INT_KEYS.WHATSAPP] === false) {
@@ -889,6 +982,11 @@ export class IntegrationsComponent implements OnInit, OnDestroy {
         let index = this.INTEGRATIONS.findIndex(i => i.key === this.INT_KEYS.TWILIO_SMS);
         if (index != -1) { this.INTEGRATIONS.splice(index, 1) };
       }
+      // Remove TWILIO_VOICE if getPayValue() is false or if customization.voice_twilio is false
+      if (!isVisiblePAY || (projectProfileData.customization[this.INT_KEYS.TWILIO_VOICE] === false)) {
+        let index = this.INTEGRATIONS.findIndex(i => i.key === this.INT_KEYS.TWILIO_VOICE);
+        if (index != -1) { this.INTEGRATIONS.splice(index, 1) };
+      }
 
       // -----------------------------
       // VXML_VOICE
@@ -918,24 +1016,24 @@ export class IntegrationsComponent implements OnInit, OnDestroy {
       // TWILIO_VOICE
       // -----------------------------
       // Removes "Twilio voice" integration if in not activated in customization
-      if (!projectProfileData.customization[this.INT_KEYS.TWILIO_VOICE] || projectProfileData.customization[this.INT_KEYS.TWILIO_VOICE] === false) {
-        let index = this.INTEGRATIONS.findIndex(i => i.key === this.INT_KEYS.TWILIO_VOICE);
-        if (index != -1) { this.INTEGRATIONS.splice(index, 1) };
-      }
+      // if (!projectProfileData.customization[this.INT_KEYS.TWILIO_VOICE] || projectProfileData.customization[this.INT_KEYS.TWILIO_VOICE] === false) {
+      //   let index = this.INTEGRATIONS.findIndex(i => i.key === this.INT_KEYS.TWILIO_VOICE);
+      //   if (index != -1) { this.INTEGRATIONS.splice(index, 1) };
+      // }
 
       // Restores the "Twilio voice" integration (use case: it was removed from the Integration array in a project where it was not active)
-      if (projectProfileData.customization[this.INT_KEYS.TWILIO_VOICE] && projectProfileData.customization[this.INT_KEYS.TWILIO_VOICE] === true) {
-        this.logger.log('[INTEGRATIONS] manageAppVisibility TWILIO_VOICE ')
-        let index = this.INTEGRATIONS.findIndex(i => i.key === this.INT_KEYS.TWILIO_VOICE);
-        if (index != -1) {
-          this.logger.log('TWILIO_VOICE index A', index)
-        } else if (index == -1) {
-          this.logger.log('TWILIO_VOICE index B', index)
-          const twilioVoiceObjct = INTEGRATION_LIST_ARRAY_CLONE.find(i => i.key === this.INT_KEYS.TWILIO_VOICE);
-          this.logger.log('twilioVoiceObjct', twilioVoiceObjct)
-          this.INTEGRATIONS.push(twilioVoiceObjct)
-        }
-      }
+      // if (projectProfileData.customization[this.INT_KEYS.TWILIO_VOICE] && projectProfileData.customization[this.INT_KEYS.TWILIO_VOICE] === true) {
+      //   this.logger.log('[INTEGRATIONS] manageAppVisibility TWILIO_VOICE ')
+      //   let index = this.INTEGRATIONS.findIndex(i => i.key === this.INT_KEYS.TWILIO_VOICE);
+      //   if (index != -1) {
+      //     this.logger.log('TWILIO_VOICE index A', index)
+      //   } else if (index == -1) {
+      //     this.logger.log('TWILIO_VOICE index B', index)
+      //     const twilioVoiceObjct = INTEGRATION_LIST_ARRAY_CLONE.find(i => i.key === this.INT_KEYS.TWILIO_VOICE);
+      //     this.logger.log('twilioVoiceObjct', twilioVoiceObjct)
+      //     this.INTEGRATIONS.push(twilioVoiceObjct)
+      //   }
+      // }
 
 
       let index = this.INTEGRATIONS.findIndex(i => i.category === INTEGRATIONS_CATEGORIES.CHANNEL);
@@ -950,14 +1048,25 @@ export class IntegrationsComponent implements OnInit, OnDestroy {
       let vxml_voice_index = this.INTEGRATIONS.findIndex(i => i.key === this.INT_KEYS.VXML_VOICE);
       if (vxml_voice_index != -1) { this.INTEGRATIONS.splice(vxml_voice_index, 1) };
 
-      let twilio_voice_index = this.INTEGRATIONS.findIndex(i => i.key === this.INT_KEYS.TWILIO_VOICE);
-      if (twilio_voice_index != -1) { this.INTEGRATIONS.splice(twilio_voice_index, 1) };
+      // Remove TWILIO_VOICE if getPayValue() is false (even when customization is not present)
+      if (!isVisiblePAY) {
+        let twilio_voice_index = this.INTEGRATIONS.findIndex(i => i.key === this.INT_KEYS.TWILIO_VOICE);
+        if (twilio_voice_index != -1) { this.INTEGRATIONS.splice(twilio_voice_index, 1) };
+      }
 
     }
 
     this.integrationListReady = true;
   }
 
+  contactUs() {
+    window.open(`mailto:${this.salesEmail}?subject=Enable Twilio Voice for project id ${this.projectID}`);
+  }
+
+  contactUsToUpgradePlan(){
+    window.open(`mailto:${this.salesEmail}?subject=Upgrade plan (subscription expired) for project id ${this.projectID}`);
+  }
+
   trackSavedIntegration(integrationName, integrationisVerified) {
     this.logger.log('[INTEGRATIONS] trackSavedIntegration integrationName ', integrationName)
     this.logger.log('[INTEGRATIONS] trackSavedIntegration integrationisVerified ', integrationisVerified)