Merge pull request #587 from FromDoppler/DAT-2132

Dat 2132
FromDoppler · Sep 9, 2024 · fd71129 · fd71129
2 parents e41d1ed + 46288de
commit fd71129
Show file tree

Hide file tree

Showing 7 changed files with 64 additions and 10 deletions.
diff --git a/src/components/ChatPlan.test.tsx b/src/components/ChatPlan.test.tsx
@@ -14,6 +14,8 @@ const defaultUser: User = {
     wppDescription: "Available for WhatsApp",
     conversationsQtyBalance: 100,
     whatsAppCreditBalance: 25.2,
+    buttonText: "BUY NOW",
+    buttonUrl: "https://webappint.fromdoppler.net",
   },
 };
 
@@ -29,6 +31,8 @@ describe(ChatPlan.name, () => {
             chatQty={defaultUser.chat.conversationsQtyBalance}
             wppDescription={defaultUser.chat.wppDescription}
             wppBalance={defaultUser.chat.whatsAppCreditBalance}
+            buttonText={defaultUser.chat.buttonText}
+            buttonUrl={defaultUser.chat.buttonUrl}
           />
         </MenuIntlProvider>,
       );
@@ -38,6 +42,9 @@ describe(ChatPlan.name, () => {
     screen.getByText("Premium Plan Conversations");
     screen.getByText("Available conversations");
     screen.getByText("Available for WhatsApp");
+    expect(
+      screen.getByText(defaultUser.chat.buttonText ?? "").closest("a"),
+    ).toHaveAttribute("href", defaultUser.chat.buttonUrl ?? "");
   });
 
   it("should not render chat plan details when conversationsQtyBalance isn't defined", () => {
@@ -51,6 +58,8 @@ describe(ChatPlan.name, () => {
         wppDescription: "Available for WhatsApp",
         conversationsQtyBalance: undefined,
         whatsAppCreditBalance: 25.2,
+        buttonText: "BUY NOW",
+        buttonUrl: "https://webappint.fromdoppler.net",
       },
     };
 
@@ -64,6 +73,8 @@ describe(ChatPlan.name, () => {
             chatQty={chatUser.chat.conversationsQtyBalance}
             wppDescription={chatUser.chat.wppDescription}
             wppBalance={chatUser.chat.whatsAppCreditBalance}
+            buttonText={chatUser.chat.buttonText}
+            buttonUrl={chatUser.chat.buttonUrl}
           />
         </MenuIntlProvider>,
       );
@@ -85,6 +96,8 @@ describe(ChatPlan.name, () => {
         wppDescription: "Available for WhatsApp",
         conversationsQtyBalance: 100,
         whatsAppCreditBalance: undefined,
+        buttonText: "BUY NOW",
+        buttonUrl: "https://webappint.fromdoppler.net",
       },
     };
 
@@ -98,6 +111,8 @@ describe(ChatPlan.name, () => {
             chatQty={chatUser.chat.conversationsQtyBalance}
             wppDescription={chatUser.chat.wppDescription}
             wppBalance={chatUser.chat.whatsAppCreditBalance}
+            buttonText={chatUser.chat.buttonText}
+            buttonUrl={chatUser.chat.buttonUrl}
           />
         </MenuIntlProvider>,
       );

diff --git a/src/components/ChatPlan.tsx b/src/components/ChatPlan.tsx
@@ -6,18 +6,25 @@ export const ChatPlan = ({
   chatQty,
   wppBalance,
   wppDescription,
+  buttonUrl,
+  buttonText,
 }: {
   planName: string;
   chatDescription: string;
   chatQty: number | undefined;
   wppBalance: number | undefined;
   wppDescription: string;
+  buttonUrl?: string;
+  buttonText?: string;
 }) => (
   <>
     <div className="user-plan--type" data-testid="chat-plan-test-id">
       <p className="user-plan--chat-text">
         <strong>{planName}</strong>
       </p>
+      <a type="button" href={buttonUrl} className="user-plan">
+        {buttonText}
+      </a>
     </div>
     {chatQty && wppBalance ? (
       <div

diff --git a/src/components/UserPlan.test.tsx b/src/components/UserPlan.test.tsx
@@ -265,6 +265,8 @@ describe(UserPlan.name, () => {
         wppDescription: "whats app",
         conversationsQtyBalance: 10,
         whatsAppCreditBalance: 10,
+        buttonText: "BUY NOW",
+        buttonUrl: "https://webappint.fromdoppler.net",
       },
     };
 
@@ -278,14 +280,27 @@ describe(UserPlan.name, () => {
     screen.getByText("Premium Plan Conversations");
   });
 
-  it("should not display chat plan information when is disabled", () => {
+  it("should display chat buy link when conversation is not active", () => {
+    // Arrange
+    const chatPlanUser: User = {
+      ...defaultUser,
+      chat: {
+        active: false,
+        planName: "Premium Plan Conversations",
+        chatDescription: "chat",
+        wppDescription: "whats app",
+        buttonText: "BUY NOW",
+        buttonUrl: "https://webappint.fromdoppler.net",
+      },
+    };
+
     // Act
     render(
       <MenuIntlProvider>
-        <UserPlan user={defaultUser} />
+        <UserPlan user={chatPlanUser} />
       </MenuIntlProvider>,
     );
-    const description = screen.queryByTestId("chat-plan-test-id");
-    expect(description).not.toBeInTheDocument();
+    screen.getByTestId("chat-plan-test-id");
+    screen.getByText("Premium Plan Conversations");
   });
 });
diff --git a/src/components/UserPlan.tsx b/src/components/UserPlan.tsx
@@ -93,13 +93,15 @@ export const UserPlan = ({ user }: UserPlanProps) => {
           buttonUrl={landings.buttonUrl}
         />
       )}
-      {!user.hasClientManager && user.chat.active ? (
+      {!user.hasClientManager ? (
         <ChatPlan
-          planName={user.chat.planName}
-          chatDescription={user.chat.chatDescription}
+          planName={user.chat.planName ?? ""}
+          chatDescription={user.chat.chatDescription ?? ""}
           chatQty={user.chat.conversationsQtyBalance}
           wppBalance={user.chat.whatsAppCreditBalance}
-          wppDescription={user.chat.wppDescription}
+          wppDescription={user.chat.wppDescription ?? ""}
+          buttonUrl={user.chat.buttonUrl}
+          buttonText={user.chat.buttonText}
         />
       ) : (
         <> </>

diff --git a/src/model.ts b/src/model.ts
@@ -103,6 +103,8 @@ export type User = Readonly<
           wppDescription: string;
           conversationsQtyBalance: number | undefined;
           whatsAppCreditBalance: number | undefined;
+          buttonUrl: string;
+          buttonText: string;
         }
       | {
           active: false;
@@ -111,6 +113,8 @@ export type User = Readonly<
           wppDescription?: undefined;
           conversationsQtyBalance?: undefined;
           whatsAppCreditBalance?: undefined;
+          buttonUrl: undefined;
+          buttonText: undefined;
         }
     >;
     landings: Readonly<

diff --git a/src/testUserData.json b/src/testUserData.json
@@ -192,7 +192,9 @@
       "chatDescription": "Available Conversations",
       "wppDescription": "Available for WhatsApp",
       "conversationsQtyBalance": 10,
-      "whatsAppCreditBalance": 25.2
+      "whatsAppCreditBalance": 25.2,
+      "buttonText": "BUY NOW",
+      "buttonUrl": "https://webappint.fromdoppler.net"
     },
     "landings": {
       "planName": "Add Ons",

diff --git a/src/utils.ts b/src/utils.ts
@@ -121,8 +121,17 @@ const safeChat = (data: any) =>
         conversationsQtyBalance: data?.conversationsQtyBalance,
         whatsAppCreditBalance: data?.whatsAppCreditBalance,
         wppDescription: safeString(data?.wppDescription),
+        buttonText: safeString(data?.buttonText),
+        buttonUrl: safeString(data?.buttonUrl),
       }
-    : { active: false as const };
+    : {
+        active: false as const,
+        planName: safeString(data?.planName),
+        chatDescription: safeString(data?.chatDescription),
+        wppDescription: safeString(data?.wppDescription),
+        buttonText: safeString(data?.buttonText),
+        buttonUrl: safeString(data?.buttonUrl),
+      };
 
 const safeLandings = (data: any) => ({
   planName: safeString(data?.landings?.planName),