Demo Changes

HousewareHQ · Jul 12, 2024 · e54a902 · e54a902
1 parent 495befd
commit e54a902
Show file tree

Hide file tree

Showing 7 changed files with 13,731 additions and 13,452 deletions.
diff --git a/package-dist/chatScreen/ChatScreenKeywords.d.ts b/package-dist/chatScreen/ChatScreenKeywords.d.ts
@@ -10,12 +10,14 @@ interface DataType {
     competition: string;
     lowBid: string;
     highBid: string;
+    key: string;
 }
 export interface ChatScreenKeywordsProps {
     handleStartFresh: () => void;
     keywordsData: Array<DataType>;
     pageHeading: string;
-    handleProceed: () => void;
+    handleProceed: (selectedRows: DataType[]) => void;
+    productCampaign: string;
 }
-export declare function ChatScreenKeywords({ pageHeading, keywordsData, handleStartFresh, handleProceed, }: ChatScreenKeywordsProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChatScreenKeywords({ pageHeading, keywordsData, handleStartFresh, handleProceed, productCampaign, }: ChatScreenKeywordsProps): import("react/jsx-runtime").JSX.Element;
 export {};
diff --git a/package-dist/ui-gallery.es.js b/package-dist/ui-gallery.es.js
diff --git a/package-dist/ui-gallery.umd.js b/package-dist/ui-gallery.umd.js
diff --git a/src/components/chatScreen/ChatScreenAdsPreview.tsx b/src/components/chatScreen/ChatScreenAdsPreview.tsx
@@ -1,4 +1,4 @@
-import { CaretDown } from "@phosphor-icons/react";
+import { CaretDown, Globe } from "@phosphor-icons/react";
 import {
   Button,
   Card,
@@ -78,21 +78,26 @@ export function ChatScreenAdsPreview({
   const [descriptionsSelected, setDescriptionsSelected] =
     useState<string[]>(descriptions);
 
+  const previewHeadline = headingsSelected[0] || "Headline";
+  const previewDescription = descriptionsSelected[0] || "Description";
+
   return (
     <Flex
       style={{
         width: "100vw",
         height: "100vh",
+        overflow: "auto",
+        padding: 16,
+        // paddingBottom: "5vh",
       }}
-      align="center"
       justify="center"
     >
       <Flex
         style={{
-          height: "100%",
-          width: "50vw",
-          padding: 16,
-          overflow: "hidden",
+          height: "100vh",
+          width: "65vw",
+
+          // overflow: "auto",
         }}
         vertical
         align="center"
@@ -187,8 +192,8 @@ export function ChatScreenAdsPreview({
           align="flex-start"
           style={{
             width: "100%",
-            height: "100%",
-            overflow: "hidden",
+            // height: "100%",
+            // overflow: "hidden",
           }}
           gap={4}
         >
@@ -221,57 +226,86 @@ export function ChatScreenAdsPreview({
                   margin: 0,
                 }}
               />
-              <Flex vertical gap={8}>
-                <Typography.Text>Final URL</Typography.Text>
-                <Input
-                  defaultValue={finalURL}
-                  style={{
-                    width: "100%",
-                  }}
-                />
-              </Flex>
-              <Flex vertical gap={8}>
-                <Typography.Text>Display Link</Typography.Text>
-                <Input
-                  defaultValue={displayLink}
-                  style={{
-                    width: "100%",
-                  }}
-                />
-              </Flex>
-              <Flex vertical gap={8}>
-                <Typography.Text>Headlines</Typography.Text>
-                <Select
-                  mode="tags"
-                  maxCount={15}
-                  style={{ width: "100%" }}
-                  value={headingsSelected}
-                  onChange={setHeadingsSelected}
-                  suffixIcon={<CaretDown />}
-                  placeholder="Choose your headlines"
-                  options={headings.map((heading) => ({
-                    label: heading,
-                    value: heading,
-                  }))}
-                />
-                <SuffixForSelect maxCount={15} data={headingsSelected} />
-              </Flex>
-              <Flex vertical gap={8}>
-                <Typography.Text>Descriptions</Typography.Text>
-                <Select
-                  mode="tags"
-                  maxCount={4}
-                  value={descriptionsSelected}
-                  onChange={setDescriptionsSelected}
-                  suffixIcon={<CaretDown />}
-                  style={{ width: "100%" }}
-                  placeholder="Choose your descriptions"
-                  options={descriptions.map((description) => ({
-                    label: description,
-                    value: description,
-                  }))}
-                />
-                <SuffixForSelect maxCount={4} data={descriptionsSelected} />
+              <Flex gap={24}>
+                <Flex vertical flex={0.5}>
+                  <Flex vertical gap={8}>
+                    <Typography.Text>Final URL</Typography.Text>
+                    <Input
+                      defaultValue={finalURL}
+                      style={{
+                        width: "100%",
+                      }}
+                    />
+                  </Flex>
+                  <Flex vertical gap={8}>
+                    <Typography.Text>Display Link</Typography.Text>
+                    <Input
+                      defaultValue={displayLink}
+                      style={{
+                        width: "100%",
+                      }}
+                    />
+                  </Flex>
+                  <Flex vertical gap={8}>
+                    <Typography.Text>Headlines</Typography.Text>
+                    <Select
+                      mode="tags"
+                      maxCount={15}
+                      style={{ width: "100%" }}
+                      value={headingsSelected}
+                      onChange={setHeadingsSelected}
+                      suffixIcon={<CaretDown />}
+                      placeholder="Choose your headlines"
+                      options={headings.map((heading) => ({
+                        label: heading,
+                        value: heading,
+                      }))}
+                    />
+                    <SuffixForSelect maxCount={15} data={headingsSelected} />
+                  </Flex>
+                  <Flex vertical gap={8}>
+                    <Typography.Text>Descriptions</Typography.Text>
+                    <Select
+                      mode="tags"
+                      maxCount={4}
+                      value={descriptionsSelected}
+                      onChange={setDescriptionsSelected}
+                      suffixIcon={<CaretDown />}
+                      style={{ width: "100%" }}
+                      placeholder="Choose your descriptions"
+                      options={descriptions.map((description) => ({
+                        label: description,
+                        value: description,
+                      }))}
+                    />
+                    <SuffixForSelect maxCount={4} data={descriptionsSelected} />
+                  </Flex>
+                </Flex>
+                <Flex flex={0.5} vertical>
+                  <Typography.Title level={5}>Preview</Typography.Title>
+                  <Card
+                    style={{
+                      width: "100%",
+                      height: "max-content",
+                      background: "var(--background)",
+                    }}
+                  >
+                    <Flex vertical>
+                      <Typography.Title level={5}>Sponsored</Typography.Title>
+                      <Typography.Text>
+                        <Globe /> {finalURL}
+                      </Typography.Text>
+
+                      <Typography.Title
+                        level={4}
+                        style={{ color: "var(--primary-color)", margin: 0 }}
+                      >
+                        {previewHeadline}
+                      </Typography.Title>
+                      <Typography.Text>{previewDescription}</Typography.Text>
+                    </Flex>
+                  </Card>
+                </Flex>
               </Flex>
             </Flex>
           </Card>

diff --git a/src/components/chatScreen/ChatScreenKeywords.tsx b/src/components/chatScreen/ChatScreenKeywords.tsx
@@ -1,3 +1,4 @@
+import { GlobeHemisphereWest, Translate } from "@phosphor-icons/react";
 import { Button, Flex, Popconfirm, TableColumnsType, Typography } from "antd";
 import { useState } from "react";
 import { ChatInput } from "../common/ChatInput";
@@ -17,36 +18,41 @@ interface DataType {
   competition: string;
   lowBid: string;
   highBid: string;
+  key: string;
 }
 
 export interface ChatScreenKeywordsProps {
   handleStartFresh: () => void;
   keywordsData: Array<DataType>;
   pageHeading: string;
-  handleProceed: () => void;
+  // eslint-disable-next-line no-unused-vars
+  handleProceed: (selectedRows: DataType[]) => void;
+  productCampaign: string;
 }
 
-const rowSelection = {
-  onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
-    console.log(
-      `selectedRowKeys: ${selectedRowKeys}`,
-      "selectedRows: ",
-      selectedRows
-    );
-  },
-  //   getCheckboxProps: (record: DataType) => ({
-  //     disabled: record.name === "Disabled User", // Column configuration not to be checked
-  //     name: record.name,
-  //   }),
-};
+// const rowSelection = {
+//   onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
+//     console.log(
+//       `selectedRowKeys: ${selectedRowKeys}`,
+//       "selectedRows: ",
+//       selectedRows
+//     );
+//   },
+//   //   getCheckboxProps: (record: DataType) => ({
+//   //     disabled: record.name === "Disabled User", // Column configuration not to be checked
+//   //     name: record.name,
+//   //   }),
+// };
 
 export function ChatScreenKeywords({
   pageHeading,
   keywordsData,
   handleStartFresh,
   handleProceed,
+  productCampaign,
 }: ChatScreenKeywordsProps) {
   const [userQuery, setUserQuery] = useState("");
+  const [selectedRows, setSelectedRows] = useState<DataType[]>([]);
 
   const columns: TableColumnsType<DataType> = [
     {
@@ -56,26 +62,31 @@ export function ChatScreenKeywords({
     {
       title: "Monthly Search Volume",
       dataIndex: "monthlySearchVolume",
+      align: "center",
     },
-    {
-      title: "Avg Monthly Searches",
-      dataIndex: "avgMonthlySearches",
-    },
+    // {
+    //   title: "Avg Monthly Searches",
+    //   dataIndex: "avgMonthlySearches",
+    // },
     {
       title: "CPC",
       dataIndex: "cpc",
+      align: "center",
     },
     {
       title: "Competition",
       dataIndex: "competition",
+      align: "center",
     },
     {
       title: "Low Bid",
       dataIndex: "lowBid",
+      align: "center",
     },
     {
       title: "High Bid",
       dataIndex: "highBid",
+      align: "center",
     },
   ];
   return (
@@ -92,7 +103,7 @@ export function ChatScreenKeywords({
           height: "100%",
           width: "60vw",
           padding: 16,
-          overflow: "hidden",
+          overflow: "auto",
         }}
         vertical
         align="center"
@@ -109,6 +120,41 @@ export function ChatScreenKeywords({
         >
           {pageHeading}
         </Typography.Title>
+
+        <Flex
+          justify="space-between"
+          style={{
+            width: "100%",
+          }}
+        >
+          <Typography.Title level={5} style={{ marginBottom: 0 }}>
+            {productCampaign}
+          </Typography.Title>
+
+          <Flex gap={4} align="center">
+            <Button
+              type="text"
+              style={{
+                fontSize: "0.8rem",
+              }}
+              size="small"
+              icon={<GlobeHemisphereWest />}
+            >
+              India
+            </Button>
+
+            <Button
+              type="text"
+              style={{
+                fontSize: "0.8rem",
+              }}
+              size="small"
+              icon={<Translate />}
+            >
+              English
+            </Button>
+          </Flex>
+        </Flex>
         <CustomTable
           style={{
             width: "100%",
@@ -117,16 +163,35 @@ export function ChatScreenKeywords({
           columns={columns}
           rowSelection={{
             type: "checkbox",
-            ...rowSelection,
+            onChange: (
+              _selectedRowKeys: React.Key[],
+              selectedRows: DataType[]
+            ) => {
+              setSelectedRows(selectedRows);
+            },
           }}
         />
         <Flex
-          justify="flex-end"
+          justify="space-between"
           style={{
             width: "100%",
           }}
         >
-          <Button type="primary" onClick={handleProceed}>
+          <Typography.Text
+            type="secondary"
+            style={{
+              marginTop: "-4px",
+              fontSize: "0.7rem",
+            }}
+          >
+            Powered by Google Ads, Semrush
+          </Typography.Text>
+          <Button
+            type="primary"
+            onClick={() => {
+              handleProceed(selectedRows);
+            }}
+          >
             Proceed
           </Button>
         </Flex>

diff --git a/src/components/common/AdsTextInput.tsx b/src/components/common/AdsTextInput.tsx
@@ -18,7 +18,7 @@ export interface AdsTextInputProps {
 
 export const AdsTextInput: React.FC<AdsTextInputProps> = ({
   inputRef,
-  placeholder = "Keywords related to your products separated by commas...",
+  placeholder = "Describe your product campaign here...",
   userQuery,
   setUserQuery,
   handleSendMessage,