feat(webpage): implement select target on pressure phone

nossas · Nov 7, 2023 · 6172b7d · 6172b7d
1 parent 65822b8
commit 6172b7d
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 6 deletions.
diff --git a/clients/packages/webpage-client/src/bonde-webpage/plugins/Phone/index.tsx b/clients/packages/webpage-client/src/bonde-webpage/plugins/Phone/index.tsx
@@ -23,6 +23,7 @@ const Briefing = styled.p`
 const PhoneWidget = (props: any) => {
   const [campaign, setCampaign] = useState<Campaign | undefined>(undefined);
   const [call, setCall] = useState<Call | undefined>();
+  const [target, setTarget] = useState<number | undefined>(undefined);
 
   const {
     call_to_action: callToAction,
@@ -49,7 +50,8 @@ const PhoneWidget = (props: any) => {
   const submit = async (values) => {
     const payload = {
       ...values,
-      targets: campaign?.details.targets.map((target) => target.id)
+      targets: [target]
+      // targets: campaign?.details.targets.map((target) => target.id)
     }
 
     const response = await fetch(`/api/phone/${props.widget.id}/create`, {
@@ -75,7 +77,7 @@ const PhoneWidget = (props: any) => {
     headerComponent = (
       <ul>
         {campaign.details.targets.map((item) => (
-          <li key={`target-${item.id}`}>{item.name}</li>
+          <li key={`target-${item.id}`} className={item.id === target ? "active" : ""} onClick={() => setTarget(item.id)}>{item.name}</li>
         ))}
       </ul>
     )
@@ -85,13 +87,13 @@ const PhoneWidget = (props: any) => {
     )
   }
 
-  if (call?.status !== 'completed') {
+  if (call?.status !== 'completed' && call?.status !== 'no-answer') {
     return (
       <PhoneAreaStyled>
         <HeadingStyled bgColor={mainColor}>{callToAction || titleText}</HeadingStyled>
         <TargetAreaStyled>
           <span className="title">
-            {`Quem vai pressionar? (${campaign?.details.targets.length} ${(campaign?.details.targets.length || 0) > 1 ? 'alvos' : 'alvo'})`}
+            {`Quem vai pressionar? (${campaign?.details.targets.length || 0} ${(campaign?.details.targets.length || 0) > 1 ? 'alvos' : 'alvo'})`}
           </span>
           {headerComponent}
         </TargetAreaStyled>

diff --git a/clients/packages/webpage-client/src/bonde-webpage/plugins/Phone/styles.tsx b/clients/packages/webpage-client/src/bonde-webpage/plugins/Phone/styles.tsx
@@ -26,20 +26,28 @@ export const TargetAreaStyled = styled.div`
   }
 
   ul {
+    overflow: auto;
     list-style-type: none;
-    margin: 5px 0 5px -40px;
+    margin: 5px 0 5px 0;
+    padding: 0 0 5px;
     display: flex;
     flex-direction: row;
   }
 
   li {
+    cursor:pointer;
     font-size: 0.8rem;
     color: #222;
     font-weight: 700;
     background-color: #fff;
     padding: 0.5rem 1rem;
     margin-right: 0.5rem;
     border-radius: 3px;
+    min-width: 150px;
+  }
+
+  li.active {
+    background-color: lightgray;
   }
 `
 

diff --git a/clients/packages/webpage-client/src/bonde-webpage/plugins/Phone/types.ts b/clients/packages/webpage-client/src/bonde-webpage/plugins/Phone/types.ts
@@ -13,7 +13,7 @@ export interface Campaign {
   }
 }
 
-export type StatusCall = 'created' | 'queued' | 'initiated' | 'ringing' | 'in-progress' | 'completed'
+export type StatusCall = 'created' | 'queued' | 'initiated' | 'ringing' | 'in-progress' | 'completed' | 'no-answer'
 
 export interface Call {
   action_id?: number