Develop

apps/metamigo-frontend/app/_components/whatsapp/attachments/WhatsappAttachmentList.tsx

@@ -0,0 +1,13 @@
+"use client";
+
+import { List, Datagrid, TextField } from "react-admin";
+
+const WhatsappAttachmentList = (props: any) => (
+  <List {...props} exporter={false}>
+    <Datagrid rowClick="show">
+      <TextField source="id" />
+    </Datagrid>
+  </List>
+);
+
+export default WhatsappAttachmentList;

apps/metamigo-frontend/app/_components/whatsapp/attachments/WhatsappAttachmentShow.tsx

@@ -0,0 +1,13 @@
+"use client";
+
+import { Show, ShowProps, SimpleShowLayout, TextField } from "react-admin";
+
+const WhatsappAttachmentShow = (props: ShowProps) => (
+  <Show {...props} title="Whatsapp Attachment">
+    <SimpleShowLayout>
+      <TextField source="id" />
+    </SimpleShowLayout>
+  </Show>
+);
+
+export default WhatsappAttachmentShow;

apps/metamigo-frontend/app/_components/whatsapp/attachments/index.ts

@@ -0,0 +1,12 @@
+"use client";
+
+import WhatsappAttachmentIcon from "@mui/icons-material/AttachFile";
+import WhatsappAttachmentList from "./WhatsappAttachmentList";
+import WhatsappAttachmentShow from "./WhatsappAttachmentShow";
+
+// eslint-disable-next-line import/no-anonymous-default-export
+export default {
+  list: WhatsappAttachmentList,
+  show: WhatsappAttachmentShow,
+  icon: WhatsappAttachmentIcon,
+};

apps/metamigo-frontend/app/_components/whatsapp/bots/WhatsappBotCreate.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+// import dynamic from "next/dynamic";
+import { FC } from "react";
+import {
+  SimpleForm,
+  Create,
+  TextInput,
+  required,
+  CreateProps,
+} from "react-admin";
+import { useSession } from "next-auth/react";
+import { validateE164Number } from "../../../_lib/phone-numbers";
+
+const WhatsappBotCreate: FC<CreateProps> = (props) => {
+  // const MuiPhoneNumber = dynamic(() => import("material-ui-phone-number"), {
+  //   ssr: false,
+  // });
+
+  const { data: session } = useSession();
+
+  return (
+    <Create {...props} title="Create Whatsapp Bot" redirect="show">
+      <SimpleForm>
+        <TextInput
+          source="userId"
+          defaultValue={
+            // @ts-expect-error: non-existent property
+            session.user.id
+          }
+        />
+        <TextInput
+          source="phoneNumber"
+          validate={[validateE164Number, required()]}
+        />
+        {/* <MuiPhoneNumber
+          defaultCountry={"us"}
+          fullWidth
+          onChange={(e: any) => setFieldValue("phoneNumber", e)}
+        /> */}
+        <TextInput source="description" />
+      </SimpleForm>
+    </Create>
+  );
+};
+
+export default WhatsappBotCreate;

apps/metamigo-frontend/app/_components/whatsapp/bots/WhatsappBotEdit.tsx

@@ -0,0 +1,14 @@
+"use client";
+
+import { SimpleForm, Edit, TextInput, required, EditProps } from "react-admin";
+
+const WhatsappBotEdit = (props: EditProps) => (
+  <Edit {...props} title="Edit Bot">
+    <SimpleForm>
+      <TextInput source="phoneNumber" validate={[required()]} />
+      <TextInput source="description" />
+    </SimpleForm>
+  </Edit>
+);
+
+export default WhatsappBotEdit;

apps/metamigo-frontend/app/_components/whatsapp/bots/WhatsappBotList.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import {
+  List,
+  Datagrid,
+  DateField,
+  TextField,
+  BooleanField,
+} from "react-admin";
+
+const WhatsappBotList = (props: any) => (
+  <List {...props} exporter={false}>
+    <Datagrid rowClick="show">
+      <TextField source="phoneNumber" />
+      <TextField source="description" />
+      <BooleanField source="isVerified" />
+      <DateField source="createdAt" />
+      <DateField source="updatedAt" />
+      <TextField source="createdBy" />
+    </Datagrid>
+  </List>
+);
+
+export default WhatsappBotList;

apps/metamigo-frontend/app/_components/whatsapp/bots/WhatsappBotShow.tsx

@@ -0,0 +1,177 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import {
+  Card,
+  Typography,
+  Grid,
+  Button,
+  TextField as MaterialTextField,
+  IconButton,
+} from "@mui/material";
+import {
+  Show,
+  SimpleShowLayout,
+  TextField,
+  ShowProps,
+  useGetOne,
+  useRefresh,
+  BooleanField,
+} from "react-admin";
+import QRCode from "react-qr-code";
+import useSWR from "swr";
+import RefreshIcon from "@mui/icons-material/Refresh";
+
+const Sidebar = ({ record }: any) => {
+  const [receivedMessages, setReceivedMessages] = useState([]);
+  const [phoneNumber, setPhoneNumber] = useState("");
+  const handlePhoneNumberChange = (event: any) => {
+    setPhoneNumber(event.target.value);
+  };
+
+  const [message, setMessage] = useState("");
+  const handleMessageChange = (event: any) => {
+    setMessage(event.target.value);
+  };
+
+  const sendMessage = async (phoneNumber: string, message: string) => {
+    await fetch(`/api/v1/whatsapp/bots/${record.token}/send`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ phoneNumber, message }),
+    });
+  };
+
+  const receiveMessages = async () => {
+    const result = await fetch(`/api/v1/whatsapp/bots/${record.token}/receive`);
+    const msgs = await result.json();
+    console.log(msgs);
+    setReceivedMessages(msgs);
+  };
+
+  return (
+    <Card style={{ width: "33%", marginLeft: 20, padding: 14 }}>
+      <Grid container direction="column" spacing={2}>
+        <Grid item>
+          <Typography variant="h6">Send message</Typography>
+        </Grid>
+        <Grid item>
+          <MaterialTextField
+            variant="outlined"
+            label="Phone number"
+            fullWidth
+            size="small"
+            value={phoneNumber}
+            onChange={handlePhoneNumberChange}
+          />
+        </Grid>
+        <Grid item>
+          <MaterialTextField
+            variant="outlined"
+            label="Message"
+            multiline
+            rows={3}
+            fullWidth
+            size="small"
+            value={message}
+            onChange={handleMessageChange}
+          />
+        </Grid>
+        <Grid item container direction="row-reverse">
+          <Button
+            variant="contained"
+            color="primary"
+            onClick={() => sendMessage(phoneNumber, message)}
+          >
+            Send
+          </Button>
+        </Grid>
+        <Grid item container direction="row">
+          <Grid item>
+            <Typography variant="h6">Receive messages</Typography>
+          </Grid>
+          <Grid item>
+            <IconButton
+              onClick={receiveMessages}
+              color="primary"
+              style={{ marginTop: -12 }}
+            >
+              <RefreshIcon />
+            </IconButton>
+          </Grid>
+        </Grid>
+        {receivedMessages.map((receivedMessage: any, index: number) => (
+          <Grid key={index} item container direction="column" spacing={1}>
+            <Grid item style={{ fontWeight: "bold", color: "#999" }}>
+              {receivedMessage.key.remoteJid.replace("@s.whatsapp.net", "")}
+            </Grid>
+            <Grid item style={{ borderBottom: "1px solid #999" }}>
+              {receivedMessage.message.conversation}
+            </Grid>
+          </Grid>
+        ))}
+      </Grid>
+    </Card>
+  );
+};
+
+const WhatsappBotShow = (props: ShowProps) => {
+  const refresh = useRefresh();
+  const { data } = useGetOne("whatsappBots", {id: props.id});
+
+  const { data: registerData, error: registerError } = useSWR(
+    data && !data?.isVerified
+      ? `/api/v1/whatsapp/bots/${props.id}/register`
+      : undefined,
+    { refreshInterval: 59000 }
+  );
+
+  const unverifyBot = async () => {
+    await fetch(`/api/v1/whatsapp/bots/${props.id}/unverify`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ verified: false }),
+    });
+  };
+
+  console.log({ registerData, registerError });
+
+  useEffect(() => {
+    if (data && !data?.isVerified) {
+      const interval = setInterval(() => {
+        refresh();
+      }, 10000);
+      return () => clearInterval(interval);
+    }
+
+    return undefined;
+  }, [refresh, data]);
+
+  return (
+    <Show {...props} title="Bot" aside={<Sidebar />}>
+      <SimpleShowLayout>
+        <TextField source="phoneNumber" />
+        <BooleanField source="isVerified" />
+        <Button
+          color="primary"
+          size="small"
+          style={{ color: "black", backgroundColor: "#ddd" }}
+          onClick={async () => unverifyBot()}
+        >
+          Unverify
+        </Button>
+        <TextField source="description" />
+        <TextField source="token" />
+        {!data?.isVerified && data?.qrCode && data?.qrCode !== "" && (
+          <QRCode value={data.qrCode} />
+        )}
+      </SimpleShowLayout>
+    </Show>
+  );
+};
+
+export default WhatsappBotShow;

apps/metamigo-frontend/app/_components/whatsapp/bots/index.ts

@@ -0,0 +1,16 @@
+"use client";
+
+import WhatsappBotIcon from "@mui/icons-material/WhatsApp";
+import WhatsappBotList from "./WhatsappBotList";
+import WhatsappBotEdit from "./WhatsappBotEdit";
+import WhatsappBotCreate from "./WhatsappBotCreate";
+import WhatsappBotShow from "./WhatsappBotShow";
+
+// eslint-disable-next-line import/no-anonymous-default-export
+export default {
+  list: WhatsappBotList,
+  create: WhatsappBotCreate,
+  edit: WhatsappBotEdit,
+  show: WhatsappBotShow,
+  icon: WhatsappBotIcon,
+};

apps/metamigo-frontend/app/_components/whatsapp/bots/shared.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+/* eslint-disable react/display-name */
+import {
+  SelectInput,
+  required,
+  ReferenceInput,
+  ReferenceField,
+  TextField,
+} from "react-admin";
+
+export const WhatsAppBotSelectInput = (source: string) => () =>
+  (
+    <ReferenceInput
+      label="WhatsApp Bot"
+      reference="whatsappBots"
+      source={source}
+      validate={[required()]}
+    >
+      <SelectInput optionText="phoneNumber" />
+    </ReferenceInput>
+  );
+
+export const WhatsAppBotField = (source: string) => () =>
+  (
+    <ReferenceField
+      label="WhatsApp Bot"
+      reference="whatsappBots"
+      source={source}
+    >
+      <TextField source="phoneNumber" />
+    </ReferenceField>
+  );

apps/metamigo-frontend/app/_components/whatsapp/messages/WhatsappMessageList.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import {
+  List,
+  ListProps,
+  Datagrid,
+  DateField,
+  TextField,
+  BooleanField,
+} from "react-admin";
+
+const WhatsappMessageList = (props: ListProps) => (
+  <List {...props} exporter={false}>
+    <Datagrid rowClick="show">
+      <TextField source="phoneNumber" />
+      <TextField source="description" />
+      <BooleanField source="isVerified" />
+      <DateField source="createdAt" />
+      <DateField source="updatedAt" />
+      <TextField source="createdBy" />
+    </Datagrid>
+  </List>
+);
+
+export default WhatsappMessageList;

apps/metamigo-frontend/app/_components/whatsapp/messages/WhatsappMessageShow.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import {
+  Show,
+  ShowProps,
+  SimpleShowLayout,
+  TextField,
+  ReferenceManyField,
+  Datagrid,
+} from "react-admin";
+
+const WhatsappMessageShow = (props: ShowProps) => (
+  <Show {...props} title="Whatsapp Message">
+    <SimpleShowLayout>
+      <TextField source="waMessage" />
+      <TextField source="createdAt" />
+      <ReferenceManyField
+        label="Attachments"
+        reference="whatsappAttachments"
+        target="whatsappMessageId"
+      >
+        <Datagrid rowClick="show">
+          <TextField source="id" />
+          <TextField source="createdAt" />
+        </Datagrid>
+      </ReferenceManyField>
+    </SimpleShowLayout>
+  </Show>
+);
+
+export default WhatsappMessageShow;

apps/metamigo-frontend/app/_components/whatsapp/messages/index.ts

@@ -0,0 +1,12 @@
+"use client";
+
+import WhatsappMessageIcon from "@mui/icons-material/Message";
+import WhatsappMessageList from "./WhatsappMessageList";
+import WhatsappMessageShow from "./WhatsappMessageShow";
+
+// eslint-disable-next-line import/no-anonymous-default-export
+export default {
+  list: WhatsappMessageList,
+  show: WhatsappMessageShow,
+  icon: WhatsappMessageIcon,
+};