Merge pull request #227 from takenet/feature/609831-receptive-call

feat(BlipCallsVoiceRequest): change voice request class name
takenet · Mar 26, 2024 · bcd20d1 · bcd20d1
2 parents 1937e43 + 3395695
commit bcd20d1
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 31 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -131,6 +131,9 @@
         <button class="button" @click="sendNoAnswerCallsVideoEnd">
           ENVIAR Fim de chamada vídeo não respondida
         </button>
+        <button class="button" @click="sendCallsVoiceRequest">
+          ENVIAR Solicitação de chamada
+        </button>
         <button class="button" @click="sendRaw">
           ENVIAR Unsupported Content
         </button>
@@ -733,6 +736,31 @@ export default {
       })
       this.send()
     },
+    sendCallsVoiceRequest() {
+      this.json = JSON.stringify({
+        id: '1',
+        to: '[email protected]',
+        type: 'application/json',
+        content: {
+          recipient_type: 'individual',
+          type: 'interactive',
+          interactive: {
+            type: 'voice_call',
+            body: {
+              text:
+                'Olá! Para um atendimento mais rápido, você pode entrar em contato através de uma chamada WhatsApp.'
+            },
+            action: {
+              name: 'voice_call',
+              parameters: {
+                display_text: 'Ligar agora'
+              }
+            }
+          }
+        }
+      })
+      this.send()
+    },
     sendRaw: function() {
       this.json = JSON.stringify({
         id: '1',

diff --git a/src/components/BlipCallsVoiceRequest.vue b/src/components/BlipCallsVoiceRequest.vue
@@ -1,28 +1,28 @@
 <template>
-  <div :class="'blip-container ' + position">
-    <div :class="'bubble body ' + position">
+  <div :class="'blip-container calls-voice-request ' + position">
+    <div :class="'bubble ' + position">
       <bds-typo
         class="typo"
         variant="fs-16"
         bold="regular"
         >{{ bodyText }}
       </bds-typo>
-    <div class="action">
-      <bds-grid margin="y-1" direction="row" justify-content="center" padding="x-2">
-        <bds-icon v-if="position === 'right'" color="white" name="voip-call"/>
-        <bds-icon v-else name="voip-call"/>
-        <bds-typo 
-          class="typo title-action"
-          variant="fs-16" 
-          bold="regular">{{ actionText }}
-        </bds-typo>
-      </bds-grid>
+      <div class="action">
+        <bds-grid margin="y-1" direction="row" justify-content="center" padding="x-2">
+          <bds-icon v-if="position === 'right'" color="white" name="voip-call"/>
+          <bds-icon v-else name="voip-call"/>
+          <bds-typo
+            class="typo title-action"
+            variant="fs-16"
+            bold="regular">{{ actionText }}
+          </bds-typo>
+        </bds-grid>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
-
 export default {
   name: 'blip-calls-voice-request',
   props: {
@@ -40,27 +40,26 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 @import '../styles/variables.scss';
 
-.title-action {
-  margin-left: 8px;
-}
-
-.bubble {
-  max-width: 368px !important;
-}
+.blip-container.calls-voice-request {
+  .bubble {
+    text-align: left;
+    overflow: hidden;
+    padding: 10px 20px;
+    max-width: 368px !important;
+  }
 
-.action {
-  text-align: center;
-  border-top: 1px solid $color-content-ghost;
-  margin-top: 10px;
-  padding-top: 12px;
-}
+  .action {
+    text-align: center;
+    border-top: 1px solid $color-content-ghost;
+    margin-top: 10px;
+    padding-top: 12px;
 
-.body {
-  text-align: left;
-  overflow: hidden;
-  padding: 10px 20px;
+    .title-action {
+      margin-left: 8px;
+    }
+  }
 }
 </style>