Merge pull request #72 from AmbireTech/feature/admin-panel-user-campa…

…igns Add: AdUnit & banner info on Admin modal
AmbireTech · Apr 4, 2024 · caeffbb · caeffbb
2 parents 6889506 + 0d6abc4
commit caeffbb
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 10 deletions.
diff --git a/src/admin/Admin.tsx b/src/admin/Admin.tsx
@@ -45,10 +45,10 @@ const AdminPanel = () => {
 
   const handlePreview = useCallback(
     (item: Campaign) => {
-      setSelectedItem(item)
+      setSelectedItem(campaignData?.filter((campaign) => campaign.id === item.id)[0] || null)
       open()
     },
-    [open]
+    [open, campaignData]
   )
 
   const handleDelete = useCallback((item: Campaign) => {

diff --git a/src/components/common/Modals/AdminCampaignModal/AdminCampaignModal.tsx b/src/components/common/Modals/AdminCampaignModal/AdminCampaignModal.tsx
@@ -1,8 +1,13 @@
-import { Button, Flex, Modal, Text, Textarea, createStyles } from '@mantine/core'
-import { Campaign } from 'adex-common'
+import { Button, Flex, Image, Modal, Text, Textarea, createStyles } from '@mantine/core'
+import { Campaign, EventType } from 'adex-common'
 import CampaignDetailsRow from 'components/common/CampainDetailsRow'
 import { useAdExApi } from 'hooks/useAdexServices'
 import { FormEvent, useState } from 'react'
+import LeftArrowIcon from 'resources/icons/LeftArrow'
+import RightArrowIcon from 'resources/icons/RightArrow'
+
+const timeIntToDateString = (n: bigint | number | undefined) =>
+  n ? new Date(Number(n)).toLocaleDateString().slice(0, 9) : ''
 
 const useStyles = createStyles((theme) => ({
   header: {
@@ -31,13 +36,23 @@ const AdminCampaignModal = ({
   const [reason, setReason] = useState('')
   const [action, setAction] = useState<null | number>(null)
   const [formed, setFormed] = useState(false)
+  const [currBanner, setCurrBanner] = useState(0)
 
   const handleAction = (status: string) => {
     if (!item?.id) return
     setAction(status === 'approve' ? 3 : 4)
     setFormed(true)
   }
 
+  const handleBannerChange = (n: number) => {
+    const nextBannerPos = currBanner + n
+    const bannerLength = item?.adUnits.length || 0
+
+    if (nextBannerPos < 0) return setCurrBanner(0)
+    if (nextBannerPos > bannerLength - 1) return setCurrBanner(bannerLength - 1)
+    setCurrBanner(nextBannerPos)
+  }
+
   const handleSubmit = (e: FormEvent) => {
     e.preventDefault()
     if (!item?.id) return
@@ -56,6 +71,7 @@ const AdminCampaignModal = ({
       .catch(console.log)
     setFormed(false)
   }
+
   return (
     <Modal
       size="lg"
@@ -75,20 +91,52 @@ const AdminCampaignModal = ({
           <CampaignDetailsRow title="Id" value={item?.id} />
           <CampaignDetailsRow title="Status" value={item?.status} />
           <CampaignDetailsRow title="Served" value={item?.nonce} />
-          <CampaignDetailsRow title="Budget" value={item?.pricingBounds} />
+          <CampaignDetailsRow
+            title="Budget Min"
+            value={item?.pricingBounds[EventType.CLICK]?.min}
+          />
+          <CampaignDetailsRow
+            title="Budget Max"
+            value={item?.pricingBounds[EventType.CLICK]?.max}
+          />
           {/* TODO: Add data for it */}
-          <CampaignDetailsRow title="Created" value={item?.activeFrom} />
+          <CampaignDetailsRow title="Created" value={timeIntToDateString(item?.activeFrom)} />
           {/* TODO: Add data for it */}
-          <CampaignDetailsRow title="Starts" value={item?.activeFrom} />
+          <CampaignDetailsRow title="Starts" value={timeIntToDateString(item?.activeFrom)} />
           {/* TODO: Add data for it */}
-          <CampaignDetailsRow title="Ends" value={item?.activeTo} />
+          <CampaignDetailsRow title="Ends" value={timeIntToDateString(item?.activeTo)} />
           {/* TODO: Add data for it */}
-          <CampaignDetailsRow title="CPM/CPC min" value={item?.activeTo} />
+          <CampaignDetailsRow title="CPM/CPC min" value="CPM/CPC" />
           {/* TODO: Add data for it */}
           <CampaignDetailsRow title="Limit average daily spending" value="No" />
           {/* TODO: Add data for it */}
           <CampaignDetailsRow title="Disable frequency capping" value="No" />
-          {}
+          <CampaignDetailsRow title="Banners:" value={item?.adUnits.length} noBorder />
+          {item?.adUnits && item?.adUnits.length > 1 && (
+            <Flex justify="space-evenly">
+              <LeftArrowIcon onClick={() => handleBannerChange(-1)} />
+              {currBanner + 1}
+              <RightArrowIcon onClick={() => handleBannerChange(1)} />
+            </Flex>
+          )}
+          <CampaignDetailsRow title="Title:" value={item?.adUnits[currBanner].title} />
+          <CampaignDetailsRow
+            title="Target URL:"
+            value={item?.adUnits[currBanner]?.banner?.targetUrl}
+          />
+          <CampaignDetailsRow
+            title="Created on:"
+            value={timeIntToDateString(item?.adUnits[currBanner].banner?.created)}
+          />
+          <CampaignDetailsRow
+            title="Format:"
+            value={`h: ${item?.adUnits[currBanner].banner?.format.h}px, w: \n${item?.adUnits[currBanner].banner?.format.w}px`}
+          />
+          <CampaignDetailsRow
+            title="Image:"
+            value={<Image src={item?.adUnits[currBanner].banner?.mediaUrl} />}
+            column
+          />
           <Textarea
             defaultValue={reason}
             onChange={(e) => setReason(e.target.value)}