Skip to content

Commit

Permalink
Merge pull request #197 from AmbireTech/development
Browse files Browse the repository at this point in the history
v0.69.7
  • Loading branch information
ivopaunov authored Jul 1, 2024
2 parents 14dde38 + 632ae1a commit de5e9a8
Show file tree
Hide file tree
Showing 12 changed files with 171 additions and 285 deletions.
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "adex-interface",
"version": "0.69.6",
"version": "0.69.7",
"private": true,
"dependencies": {
"@ambire/login-sdk-core": "^0.0.21",
Expand Down
1 change: 1 addition & 0 deletions src/Router.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -86,6 +86,7 @@ export const router = createBrowserRouter(
},
{ path: 'campaign-analytics/:id', element: <CampaignAnalytics /> },
{ path: 'campaign-details/:id', element: <CampaignDetails /> },
{ path: 'campaign-details/admin/:id', element: <CampaignDetails isAdminPanel /> },
{
path: 'billing',
element: <Billing />
Expand Down
100 changes: 100 additions & 0 deletions src/components/CampaignDetails/AdminActions.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
import { FormEvent, useCallback, useState, useMemo } from 'react'
import { Button, Flex, Text, Textarea, Badge } from '@mantine/core'
import { Campaign, CampaignStatus, ReviewStatus } from 'adex-common'
import throttle from 'lodash.throttle'
import { useAdExApi } from 'hooks/useAdexServices'

export const AdminActions = ({ item }: { item: Campaign | null }) => {
const { adexServicesRequest } = useAdExApi()
const [reason, setReason] = useState(item?.reviewMessage || '')
const [action, setAction] = useState<null | number>(null)
const [formed, setFormed] = useState(false)

const reviewed = item?.status !== CampaignStatus.inReview

const handleAction = (status: string) => {
if (!item?.id) return
setAction(status === 'approve' ? 3 : 4)
setFormed(true)
}

const handleSubmit = useCallback(
(e: FormEvent) => {
e.preventDefault()
if (!item?.id) return
adexServicesRequest('backend', {
route: `/dsp/admin/campaigns/${item.id}`,
method: 'PUT',
body: {
reviewStatus: action,
reviewMessage: reason
},
headers: {
'content-type': 'application/json'
}
}).catch(console.log)
setFormed(false)
},
[action, adexServicesRequest, item?.id, reason]
)

const throttledSbm = useMemo(
() => throttle(handleSubmit, 1000, { leading: true }),
[handleSubmit]
)

if (reviewed) {
return (
<Flex direction="column" justify="flex-start" align="stretch">
{item?.reviewStatus !== undefined && (
<Badge size="xl" mb="md" fullWidth>
{ReviewStatus[item.reviewStatus]}
</Badge>
)}
<Text color="secondaryText">Review msg:</Text>
<Text>{reason}</Text>
</Flex>
)
}

return (
<Flex direction="column" justify="flex-start" align="stretch">
{item?.reviewStatus !== undefined && (
<Badge size="xl" mb="md" fullWidth>
{ReviewStatus[item.reviewStatus]}
</Badge>
)}
{!formed ? (
<>
<Textarea
label="Required"
required
defaultValue={reason}
onChange={(e) => setReason(e.target.value)}
placeholder="Reason..."
/>
<Flex gap="25px" justify="flex-start" mt="15px">
<Button onClick={() => handleAction('approve')} color="green">
Approve
</Button>

<Button onClick={() => handleAction('reject')} color="red">
Reject
</Button>
</Flex>
</>
) : (
<form onSubmit={throttledSbm}>
<Flex gap="25px" direction="column" justify="center" mt="15px">
<Text>{action === 3 ? 'Approve' : 'Reject'} reason:</Text>
<Text>{reason}</Text>
<Button type="submit">Confirm</Button>
<Button onClick={() => setFormed(false)} variant="subtle">
Cancel
</Button>
</Flex>
</form>
)}
</Flex>
)
}
38 changes: 31 additions & 7 deletions src/components/CampaignDetails/CampaignDetails.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,16 @@ import CampaignDetailsRow from 'components/common/CampainDetailsRow/CampaignDeta
import { useCampaignsData } from 'hooks/useCampaignsData'
import ActiveIcon from 'resources/icons/Active'
import CampaignActionBtn from 'components/CampaignAnalytics/CampaignActionBtn'
import StopIcon from 'resources/icons/Stop'
// import StopIcon from 'resources/icons/Stop'
import ArchivedIcon from 'resources/icons/Archived'
import FormattedAmount from 'components/common/FormattedAmount/FormattedAmount'
import EditIcon from 'resources/icons/Edit'
import useCreateCampaignContext from 'hooks/useCreateCampaignContext'
import useCustomNotifications from 'hooks/useCustomNotifications'
import { CustomConfirmModal } from 'components/common/Modals'
import { AdminBadge } from 'components/common/AdminBadge'
import CatsLocsFormatted from './CatsLocsFormatted'
import { AdminActions } from './AdminActions'

const useStyles = createStyles((theme) => ({
wrapper: {
Expand Down Expand Up @@ -53,7 +55,7 @@ const useStyles = createStyles((theme) => ({
}
}))

const CampaignDetails = () => {
const CampaignDetails = ({ isAdminPanel }: { isAdminPanel?: boolean }) => {
const { classes, cx } = useStyles()
const { campaignsData, updateCampaignDataById, changeCampaignStatus } = useCampaignsData()
const { updateCampaignFromDraft } = useCreateCampaignContext()
Expand Down Expand Up @@ -112,8 +114,9 @@ const CampaignDetails = () => {
{campaign && (
<>
<Container fluid className={classes.wrapper}>
{isAdminPanel && <AdminBadge title="Admin Details" />}
<Grid>
<Grid.Col span={6}>
<Grid.Col md={12} xl={6}>
<Text weight="bold" size="sm" pb="sm" className={classes.lighterColor}>
Overview
</Text>
Expand Down Expand Up @@ -241,7 +244,7 @@ const CampaignDetails = () => {
/>
</div>
</Grid.Col>
<Grid.Col span={6}>
<Grid.Col md={12} xl={6}>
<Grid>
<Grid.Col span={12}>
<Text weight="bold" size="sm" pb="sm" className={classes.lighterColor}>
Expand Down Expand Up @@ -283,7 +286,13 @@ const CampaignDetails = () => {
lineHeight="sm"
textSize="sm"
title={`${item.banner?.format.w}x${item.banner?.format.h}`}
value={<MediaThumb adUnit={item} previewOnClick />}
value={
<MediaThumb
adUnit={item}
previewOnClick
title={`Target URL: ${item.banner?.targetUrl}`}
/>
}
noBorder={isLast}
/>
)
Expand All @@ -305,7 +314,7 @@ const CampaignDetails = () => {
}
/>
)}
{campaign.status === CampaignStatus.active && (
{/* {campaign.status === CampaignStatus.active && (
<CampaignActionBtn
text="Pause"
icon={<StopIcon size="13px" />}
Expand All @@ -314,7 +323,7 @@ const CampaignDetails = () => {
changeCampaignStatus(CampaignStatus.paused, campaign.id)
}
/>
)}
)} */}
{(campaign.status === CampaignStatus.paused ||
campaign.status === CampaignStatus.active) && (
<CampaignActionBtn
Expand Down Expand Up @@ -347,6 +356,21 @@ const CampaignDetails = () => {
</Grid.Col>
</Grid>
</Grid.Col>

{isAdminPanel && (
<Grid.Col md={12} xl={6} pt="xl">
<Grid>
<Grid.Col span={12}>
<Text weight="bold" size="xl" pb="sm" color="attention">
Admin actions
</Text>
</Grid.Col>
<Grid.Col>
<AdminActions item={campaign} />
</Grid.Col>
</Grid>
</Grid.Col>
)}
</Grid>
</Container>
<CustomConfirmModal
Expand Down
33 changes: 6 additions & 27 deletions src/components/Dashboard/Dashboard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,19 +4,16 @@ import {
// CampaignType,
EventType
} from 'adex-common'
import { Container, Flex, Text, Badge, Loader } from '@mantine/core'
import { useCallback, useEffect, useMemo, useState } from 'react'
import { useDisclosure } from '@mantine/hooks'
import { Container, Flex, Text, Loader } from '@mantine/core'
import { useCallback, useEffect, useMemo } from 'react'
import CustomTable from 'components/common/CustomTable'
import { periodNumberToDate } from 'helpers'
import { useNavigate } from 'react-router-dom'
import { useCampaignsData } from 'hooks/useCampaignsData'
import { parseBigNumTokenAmountToDecimal } from 'helpers/balances'
import useCreateCampaignContext from 'hooks/useCreateCampaignContext'
import useCustomNotifications from 'hooks/useCustomNotifications'
import { AdminCampaignModal } from 'components/common/Modals'
import { CampaignData } from 'types'
import UnderReviewIcon from 'resources/icons/UnderReview'
import { AdminBadge } from 'components/common/AdminBadge'
import BadgeStatusCampaign from './BadgeStatusCampaign'

const campaignHeaders = [
Expand Down Expand Up @@ -64,8 +61,6 @@ const getStatusOrder = (status: CampaignStatus) => {
const Dashboard = ({ isAdminPanel }: { isAdminPanel?: boolean }) => {
const navigate = useNavigate()
const { campaignsData, initialDataLoading, updateAllCampaignsData } = useCampaignsData()
const [opened, { open, close }] = useDisclosure(false)
const [selectedItem, setSelectedItem] = useState<CampaignData | null>(null)
const { updateCampaignFromDraft } = useCreateCampaignContext()
const { showNotification } = useCustomNotifications()
// Temporary disabled show/hide archived until no functionality implemented
Expand Down Expand Up @@ -163,14 +158,9 @@ const Dashboard = ({ isAdminPanel }: { isAdminPanel?: boolean }) => {

const handlePreview = useCallback(
(item: Campaign) => {
if (isAdminPanel) {
setSelectedItem(campaignsData?.get(item.id) || null)
open()
} else {
navigate(`/dashboard/campaign-details/${item.id}`)
}
navigate(`/dashboard/campaign-details/${isAdminPanel ? 'admin/' : ''}${item.id}`, {})
},
[campaignsData, isAdminPanel, navigate, open]
[isAdminPanel, navigate]
)

const handleAnalytics = useCallback(
Expand Down Expand Up @@ -235,17 +225,7 @@ const Dashboard = ({ isAdminPanel }: { isAdminPanel?: boolean }) => {
<Flex direction="column" justify="start">
<Flex justify="space-between" align="center">
{isAdminPanel ? (
<Badge
variant="gradient"
gradient={{ from: 'violet', to: 'purple' }}
size="xl"
mb="md"
fullWidth
leftSection={<UnderReviewIcon size="13px" />}
rightSection={<UnderReviewIcon size="13px" />}
>
Admin Panel
</Badge>
<AdminBadge title="Admin Panel" />
) : (
<Text size="sm" color="secondaryText" weight="bold" mb="md">
All Campaigns
Expand Down Expand Up @@ -276,7 +256,6 @@ const Dashboard = ({ isAdminPanel }: { isAdminPanel?: boolean }) => {
</Flex>
)}
</Flex>
<AdminCampaignModal item={selectedItem?.campaign || null} opened={opened} close={close} />
</Container>
)
}
Expand Down
18 changes: 18 additions & 0 deletions src/components/common/AdminBadge/AdminBadge.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import { Badge } from '@mantine/core'
import UnderReviewIcon from 'resources/icons/UnderReview'

export const AdminBadge = ({ title = 'Admin' }: { title: string }) => {
return (
<Badge
variant="gradient"
gradient={{ from: 'violet', to: 'purple' }}
size="xl"
mb="md"
fullWidth
leftSection={<UnderReviewIcon size="13px" />}
rightSection={<UnderReviewIcon size="13px" />}
>
{title}
</Badge>
)
}
1 change: 1 addition & 0 deletions src/components/common/AdminBadge/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from './AdminBadge'
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ const CampaignDetailsRow = ({
className={cx({ [classes.border]: !noBorder })}
pt={lineHeight}
pb={lineHeight}
gap="sm"
>
<Text
className={cx(classes.textColor, {
Expand Down
5 changes: 4 additions & 1 deletion src/components/common/MediaThumb/MediaThumb.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -23,12 +23,14 @@ const MediaThumb = ({
adUnit,
previewOnClick,
width = 40,
height = 40
height = 40,
title
}: {
adUnit: AdUnit
previewOnClick?: boolean
width?: number | string
height?: number | string
title?: string
}) => {
const [modalOpened, setModalOpened] = useState(false)
const { classes } = useStyles({ width, height })
Expand All @@ -55,6 +57,7 @@ const MediaThumb = ({
media={adUnit}
opened={modalOpened}
close={() => setModalOpened(false)}
title={title}
/>
</>
)
Expand Down
Loading

0 comments on commit de5e9a8

Please sign in to comment.