Adding new screen for campaign creation

package-dist/chatScreen/CampaignSuggestChanges.d.ts

@@ -0,0 +1,10 @@
+export interface CampaignSuggestChangesProps {
+    campaignName: string;
+    suggestions: string;
+    countrySelected: string;
+    languageSelected: string;
+    keywordsSelected: string[];
+    handleSuggestChanges: (userQuery: string) => void;
+    inputPlaceholder?: string;
+}
+export declare function CampaignSuggestChangesScreen({ campaignName, suggestions, countrySelected, languageSelected, keywordsSelected, handleSuggestChanges, inputPlaceholder, }: CampaignSuggestChangesProps): import("react/jsx-runtime").JSX.Element;

package-dist/chatScreen/ChatScreenAdsPreview.d.ts

@@ -16,8 +16,6 @@ export interface ChatScreenAdsPreviewProps {
         language: string;
     };
     adGroups: AdGroup[];
-    handleChangeHeadings: (headings: string[]) => void;
-    handleChangeDescriptions: (descriptions: string[]) => void;
     handleUpdateAdGroups: (adGroups: AdGroup[]) => void;
     isForecastLoading: boolean;
     areHeadingsDescriptionsLoading: Array<boolean>;

package-dist/index.d.ts

@@ -10,9 +10,10 @@ export { ChatScreenAdsPreview } from './chatScreen/ChatScreenAdsPreview';
 export type { ChatScreenAdsPreviewProps } from './chatScreen/ChatScreenAdsPreview';
 export { ChatScreenKeywords } from './chatScreen/ChatScreenKeywords';
 export type { ChatScreenKeywordsProps } from './chatScreen/ChatScreenKeywords';
-export { default as AiMessageTable } from './AiMessageTable';
+export { CampaignSuggestChangesScreen } from './chatScreen/CampaignSuggestChanges';
+export type { CampaignSuggestChangesProps } from './chatScreen/CampaignSuggestChanges';
+export { default as AiMessageTable, SegmentMetricsCard, } from './AiMessageTable';
 export type { AiMessageTableProps } from './AiMessageTable';
-export { SegmentMetricsCard } from './AiMessageTable';
 export { HousewareBranding } from './common/HousewareBranding';
 export { ThemeToggle } from './common/ThemeToggle';
 export { default as AppThemeProvider } from './AppThemeProvider';

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ui-gallery",
-  "version": "0.1.14",
+  "version": "0.1.15",
   "type": "module",
   "files": [
     "package-dist"

src/components/chatScreen/CampaignSuggestChanges.tsx

@@ -0,0 +1,115 @@
+import { CheckFat } from "@phosphor-icons/react";
+import { Button, Card, Descriptions, Flex, Tag, Typography } from "antd";
+import { useState } from "react";
+import Markdown from "react-markdown";
+import { ChatInput } from "../common/ChatInput";
+
+export interface CampaignSuggestChangesProps {
+  campaignName: string;
+  suggestions: string;
+  countrySelected: string;
+  languageSelected: string;
+  keywordsSelected: string[];
+  handleSuggestChanges: (userQuery: string) => void;
+  inputPlaceholder?: string;
+}
+
+export function CampaignSuggestChangesScreen({
+  campaignName,
+  suggestions,
+  countrySelected,
+  languageSelected,
+  keywordsSelected,
+  handleSuggestChanges,
+  inputPlaceholder = "Type your message here",
+}: CampaignSuggestChangesProps) {
+  const [userQuery, setUserQuery] = useState("");
+  return (
+    <Flex
+      style={{
+        width: "100vw",
+        height: "100vh",
+        overflow: "hidden",
+        padding: 16,
+      }}
+      justify="flex-start"
+      vertical
+      align="center"
+      gap={24}
+    >
+      <Typography.Title level={3} style={{ fontFamily: "Sedan" }}>
+        Your campaign is created! <CheckFat color={"var(--primary-color)"} />
+      </Typography.Title>
+
+      <Flex
+        vertical
+        style={{
+          width: "70vw",
+          padding: "1vh 16px 20vh",
+          overflowY: "auto",
+        }}
+        gap={24}
+      >
+        <Card>
+          <Flex vertical gap={24}>
+            <Flex justify="space-between" align="center">
+              <Flex align="center" gap={12}>
+                <Typography.Title
+                  level={4}
+                  style={{
+                    margin: 0,
+                  }}
+                >
+                  {campaignName}
+                </Typography.Title>
+                <Tag color="blue">Draft</Tag>
+              </Flex>
+              <Typography.Text
+                type="secondary"
+                style={{
+                  fontSize: "0.7rem",
+                }}
+              >
+                {new Date().toString()}
+              </Typography.Text>
+            </Flex>
+            <Flex gap={4} wrap>
+              {keywordsSelected.map((keyword) => (
+                <Tag key={keyword}>{keyword}</Tag>
+              ))}
+            </Flex>
+            <Descriptions
+              items={[
+                { label: "Country", children: countrySelected },
+                { label: "Language", children: languageSelected },
+              ]}
+            />
+          </Flex>
+        </Card>
+
+        <Typography.Title level={5}>
+          {" "}
+          Suggestions on your campaign -
+        </Typography.Title>
+        <Markdown>{suggestions}</Markdown>
+
+        <Flex>
+          <Button type="primary">Launch Campaign</Button>
+        </Flex>
+      </Flex>
+
+      <ChatInput
+        inputRef={null}
+        userQuery={userQuery}
+        setUserQuery={setUserQuery}
+        handleSendMessage={() => {
+          handleSuggestChanges(userQuery);
+          setUserQuery("");
+        }}
+        placeholder={inputPlaceholder}
+        isFollowupDisabled={false}
+        width={"70vw"}
+      />
+    </Flex>
+  );
+}

src/components/chatScreen/ChatScreenAdsPreview.tsx

@@ -4,6 +4,7 @@ import {
   Descriptions,
   Flex,
   Popconfirm,
+  Skeleton,
   Spin,
   Typography,
 } from "antd";
@@ -28,8 +29,6 @@ export interface ChatScreenAdsPreviewProps {
     language: string;
   };
   adGroups: AdGroup[];
-  handleChangeHeadings: (headings: string[]) => void;
-  handleChangeDescriptions: (descriptions: string[]) => void;
   handleUpdateAdGroups: (adGroups: AdGroup[]) => void;
   isForecastLoading: boolean;
   areHeadingsDescriptionsLoading: Array<boolean>;
@@ -173,7 +172,7 @@ export function ChatScreenAdsPreview({
           gap={4}
         >
           <Typography.Text type="secondary">Your Ad Groups</Typography.Text>
-
+          {adGroups?.length === 0 && <Skeleton active />}
           {adGroups?.map((adGroup, index) => {
             return (
               <AdGroupWrapper

src/components/index.ts

@@ -1,36 +1,41 @@
-export { ChatInput } from './common/ChatInput';
-export type { ChatInputProps } from './common/ChatInput';
+export { ChatInput } from "./common/ChatInput";
+export type { ChatInputProps } from "./common/ChatInput";
 
-export { WelcomeScreenConversations } from './welcomeScreen/WelcomeScreenConversations';
-export type { WelcomeScreenConversationsProps } from './welcomeScreen/WelcomeScreenConversations';
+export { WelcomeScreenConversations } from "./welcomeScreen/WelcomeScreenConversations";
+export type { WelcomeScreenConversationsProps } from "./welcomeScreen/WelcomeScreenConversations";
 
-export { WelcomeScreenAds } from './welcomeScreen/WelcomeScreenAds';
-export type { WelcomeScreenAdsProps } from './welcomeScreen/WelcomeScreenAds';
+export { WelcomeScreenAds } from "./welcomeScreen/WelcomeScreenAds";
+export type { WelcomeScreenAdsProps } from "./welcomeScreen/WelcomeScreenAds";
 
-export { ChatScreenPA } from './chatScreen/ChatScreenPA';
-export type { ChatScreenPAProps } from './chatScreen/ChatScreenPA';
+export { ChatScreenPA } from "./chatScreen/ChatScreenPA";
+export type { ChatScreenPAProps } from "./chatScreen/ChatScreenPA";
 
-export { ChatScreenAdsPreview } from './chatScreen/ChatScreenAdsPreview';
-export type { ChatScreenAdsPreviewProps } from './chatScreen/ChatScreenAdsPreview';
+export { ChatScreenAdsPreview } from "./chatScreen/ChatScreenAdsPreview";
+export type { ChatScreenAdsPreviewProps } from "./chatScreen/ChatScreenAdsPreview";
 
-export { ChatScreenKeywords } from './chatScreen/ChatScreenKeywords';
-export type { ChatScreenKeywordsProps } from './chatScreen/ChatScreenKeywords';
+export { ChatScreenKeywords } from "./chatScreen/ChatScreenKeywords";
+export type { ChatScreenKeywordsProps } from "./chatScreen/ChatScreenKeywords";
 
-export { default as AiMessageTable } from './AiMessageTable';
-export type { AiMessageTableProps } from './AiMessageTable';
-export { SegmentMetricsCard } from './AiMessageTable';
+export { CampaignSuggestChangesScreen } from "./chatScreen/CampaignSuggestChanges";
+export type { CampaignSuggestChangesProps } from "./chatScreen/CampaignSuggestChanges";
 
-export { HousewareBranding } from './common/HousewareBranding';
-export { ThemeToggle } from './common/ThemeToggle';
+export {
+  default as AiMessageTable,
+  SegmentMetricsCard,
+} from "./AiMessageTable";
+export type { AiMessageTableProps } from "./AiMessageTable";
 
-export { default as AppThemeProvider } from './AppThemeProvider';
+export { HousewareBranding } from "./common/HousewareBranding";
+export { ThemeToggle } from "./common/ThemeToggle";
 
-export { useThemeManager } from './useThemeManager';
+export { default as AppThemeProvider } from "./AppThemeProvider";
+
+export { useThemeManager } from "./useThemeManager";
 
 // Import CSS files
-import '../customStyles.css';
-import '../fonts/fonts.css';
-import './common/ThemeToggle.css';
-import './storybookDefault/button.css';
+import "../customStyles.css";
+import "../fonts/fonts.css";
+import "./common/ThemeToggle.css";
+import "./storybookDefault/button.css";
 
 // Note: We're not exporting CSS files, just importing them

src/stories/CampaignSuggestChanges.stories.ts

@@ -0,0 +1,77 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { CampaignSuggestChangesScreen } from "../components/chatScreen/CampaignSuggestChanges";
+
+const ActionsData = {};
+
+const meta: Meta<typeof CampaignSuggestChangesScreen> = {
+  title: "Native App/ChatScreen/CampaignSuggestChanges",
+  component: CampaignSuggestChangesScreen,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: "centered",
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ["autodocs"],
+
+  args: {
+    ...ActionsData,
+  },
+  // More on argTypes: https://storybook.js.org/docs/api/argtypes
+};
+
+export default meta;
+
+type Story = StoryObj<typeof CampaignSuggestChangesScreen>;
+
+export const Default: Story = {
+  args: {
+    campaignName: "Something",
+    keywordsSelected: ["keyword1", "keyword2"],
+    languageSelected: "English",
+    countrySelected: "USA",
+    suggestions: `# Qui nox similis Phoebi
+
+## Labens utque pone undis
+
+Lorem markdownum minus Hactenus; avia misit, tyranni metu inquit pocula, videre
+est optime sidereos. Annis [dat nec virgo](http://chlamydemque-temptatos.com/)
+habenas, Tatiumque est nec, in et, exiguamque haut committitur tenebat.
+
+- Diana arduus tamen erat albentes reduxi tristis
+- Vulnere gerat ossa alas stabat domos imperet
+- Tu marcida dissidet
+- Versis tenentibus tura hoc quod priore cupioque
+- Spumantia domumque hoc fuit ferrum adunca calcitrat
+
+## Visa iussit faciemque si utimur fortia clamore
+
+Et redit *si invadere agros* in esse erat In, nec per fugit et cum? Est in
+[an](http://www.axe.net/), nisi ara adgrediar rapax sucis hanc armis Cycnus
+foret sacri premens serpentis.
+
+- Arreptum Ceyx vertice alta cadat vacuas aula
+- Hora parvum mihi Herculeis illos
+- Tradit otia ante
+- Multo recta
+- Morte putares parvo Tiberinaque purpureum licet
+
+## Virgo accedere lilia ministris praeterita ligno
+
+O sic legeret infelix; siquid officiis superbum virum cruorem. Opem thalami
+pudor honore luminis, simulacra, margine auras arcitenens iacet cervice
+penetralia ferox cognoscere frena. Laeter dixit. Mors post et Cycneia victor
+nebulasque ausa ereptus in beati, sed gratamque quibus nymphis mea sequitur.
+Pars fuit, primordia praerupit **cantu**.
+
+## Potens pede arboribus omnia
+
+Limine aspexit tu substiterat in voce silentia capiebant, arce. In recentes
+**nemus** et passa Pactolides percussis dumque. Est enim venerande dira
+pavetque. Aras ramis videt somno, sinus aurem, diu lentae nam nivibus, iamque
+magnanimo.
+
+Animumque eripere oculos! Pignora fas, nec subita, in cutis, **quotiens**, nova
+seque digitos dolorem de factis trepidare copia.
+`,
+  },
+};

src/stories/ChatScreenAds.stories.ts

@@ -111,3 +111,10 @@ export const HeadingsDescriptionsLoading: Story = {
     areHeadingsDescriptionsLoading: [true],
   },
 };
+
+export const AdGroupsLoading: Story = {
+  args: {
+    ...Default.args,
+    adGroups: [],
+  },
+};