TT#82510 CF: As a Customer, I want have a separate toggle button which allows the user to enable/disable cft

Change-Id: Id48ed8c1e344fec1e1853637a39b3efce1d03888

src/components/pages/NewCallForward/CscCallForwardGroup.vue

@@ -3,6 +3,7 @@
         class="csc-cf-group"
         v-if="group.destinations.length > 0"
     >
+
         <div
             class="row csc-cf-destination-cont"
         >
@@ -12,7 +13,6 @@
 
                     {{groupTitle}}
 
-
                     <span
                         class="csc-cf-destination-add-condition"
                         v-if="isTempGroup"
@@ -122,6 +122,29 @@
                     />
                 </div>
         </div>
+
+        <div
+            class="csc-cf-row row"
+            v-if="isTimeoutOrUnconditional"
+        >
+            <div
+                class="col col-xs-12 col-md-4 text-right"
+            >
+                {{ toggleLabel }}
+            </div>
+            <div
+                class="col col-xs-12 col-md-2 text-left csc-cf-self-number-cont"
+            >
+                {{ subscriberDisplayName }}
+            </div>
+
+            <div
+                class="col col-xs-12 col-md-6"
+
+            >
+            </div>
+        </div>
+
         <div
             v-for="(destination, index) in group.destinations"
             :key="genKey()"
@@ -214,7 +237,8 @@
     export default {
         name: 'csc-cf-group',
         props: [
-            'group'
+            'group',
+            'toggleDefaultNumber'
         ],
         components: {
             QSpinnerDots,
@@ -261,6 +285,7 @@
         },
         computed: {
             ...mapGetters('newCallForward', [
+                'subscriberDisplayName',
                 'getGroupsLoaders',
                 'getOwnPhoneTimeout',
                 'groupsCount',
@@ -307,6 +332,12 @@
             },
             isFirstDestInCreation(){
                 return this.group.id.toString() === this.getFirstDestinationInCreation;
+            },
+            toggleLabel(){
+                return this.toggleDefaultNumber ? `${this.$t('pages.newCallForward.primarNumberEnabled')}` : `${this.$t('pages.newCallForward.primarNumberDisabled')}`;
+            },
+            isTimeoutOrUnconditional(){
+                return this.group.name.includes( 'unconditional')  || this.group.name.includes('timeout');
             }
         },
         watch: {

src/components/pages/NewCallForward/CscNewCallForward.vue

@@ -8,7 +8,7 @@
             <div
                 class="col col-xs-12 col-md-4 csc-cf-group-title"
             >
-                {{ $t('pages.newCallForward.titles.timeoutGroup') }}
+                {{ $t('pages.newCallForward.titles.mainTitle') }}
             </div>
             <div
                 class="col col-xs-12 col-md-2 text-left csc-cf-self-number-cont"
@@ -23,26 +23,6 @@
             >
             </div>
         </div>
-        <div
-            class="csc-cf-row row"
-        >
-            <div
-                class="col col-xs-12 col-md-4 text-right"
-            >
-                {{ toggleLabel }}
-            </div>
-            <div
-                class="col col-xs-12 col-md-2 text-left csc-cf-self-number-cont"
-            >
-                {{ primaryNumber | number }}
-            </div>
-
-            <div
-                class="col col-xs-12 col-md-6"
-
-            >
-            </div>
-        </div>
         <div
             class="csc-cf-row row"
             v-for="(forwardGroup, item) in forwardGroups"
@@ -51,6 +31,7 @@
             <csc-cf-group
                 v-if="!groupInCreation"
                 :group="forwardGroup"
+                :toggleDefaultNumber="toggleDefaultNumber"
             />
         </div>
         <div class="csc-cf-row row">
@@ -168,17 +149,10 @@
         },
         computed: {
             ...mapGetters('newCallForward', [
-                'primaryNumber',
                 'subscriberDisplayName',
                 'forwardGroups',
                 'selectedDestType'
-            ]),
+            ])
-            primaryNumberEnabled(){
-                return true;
-            },
-            toggleLabel(){
-                return this.toggleDefaultNumber ? `${this.$t('pages.newCallForward.primarNumberEnabled')}` : `${this.$t('pages.newCallForward.primarNumberDisabled')}`;
-            }
         },
         methods: {
             async addForwardGroup(){

src/locales/en.json

@@ -216,7 +216,8 @@
                 "timeoutGroupFromPre" : "If available and ",
                 "timeoutGroupFromPost" : "call from ...",
                 "offlineGroup" : "If not available",
-                "busyGroup" : "If busy"
+                "busyGroup" : "If busy",
+                "mainTitle": "Primary number rings before forwarded if the user is online"
             },
             "primarNumberEnabled": "All calls go to the primary number",
             "primarNumberDisabled": "No call goes to primary number",