Merge pull request #274 from AmbireTech/create-campaign-refactor-cont…

…inue

Create campaign refactor continue

src/components/404/404.tsx

@@ -1,19 +1,11 @@
-import { Box, getPrimaryShade, useMantineTheme } from '@mantine/core'
+import { Box } from '@mantine/core'
 import AdExLogo from 'resources/logos/AdExLogo'
 import NavLink from 'components/SideNav/NavLink'
-import { useColorScheme } from '@mantine/hooks'
 
 function NotFound404() {
-  const theme = useMantineTheme()
-  const colorScheme = useColorScheme()
-  const primaryShade = getPrimaryShade(theme, colorScheme)
-
   return (
-    <Box>
-      <AdExLogo
-        // text={colorScheme === 'dark' ? theme.white : theme.colors.brandDarker[primaryShade]}
-        text={theme.colors.brandDarker[primaryShade]}
-      />
+    <Box c="brandDarker">
+      <AdExLogo />
       404
       <NavLink to="/" label="Go HOME" />
     </Box>

src/components/Billing/BillingPDF.tsx

@@ -1,4 +1,4 @@
-import { Flex, Grid, MantineTheme, Space, Table, Text, getPrimaryShade } from '@mantine/core'
+import { Flex, Grid, MantineTheme, Space, Table, Text, Box, getPrimaryShade } from '@mantine/core'
 import { createStyles } from '@mantine/emotion'
 import { Placement } from 'adex-common'
 import {
@@ -82,9 +82,6 @@ const useStyles = createStyles((theme: MantineTheme) => {
       color: 'white',
       textAlign: 'end'
     },
-    logo: {
-      width: 200
-    },
     footer: {
       borderTop: '1px solid',
       borderColor: theme.colors.decorativeBorders[primaryShade]
@@ -109,9 +106,9 @@ const BillingBlank = ({ children, header, seller, buyer, title }: DetailsProps)
     <Grid grow align="center" className={classes.smallFontSize} p={0} m={0}>
       <Grid.Col span={12} className={classes.head}>
         <Flex justify="space-between" align="center">
-          <div className={classes.logo}>
-            <AdExLogo text="white" />
-          </div>
+          <Box c="white" w={200}>
+            <AdExLogo />
+          </Box>
           {/* TODO: fix the size to be without px */}
           <Text size="64px" fw="bold">
             {title}

src/components/CampaignDetails/CampaignDetails.tsx

@@ -267,14 +267,13 @@ const CampaignDetails = ({ isAdminPanel }: { isAdminPanel?: boolean }) => {
         <Paper p="lg" shadow="xs">
           <Grid gutter="lg">
             <Grid.Col span={{ md: 12, xl: 6 }}>
-              <Stack>
+              <Stack gap="xl">
                 <Text fw="bold" size="sm" c="dimmed">
                   Overview
                 </Text>
                 <Paper bg="lightBackground" p="md" withBorder>
                   {isAdminPanel && (
                     <CampaignDetailsRow
-                      lineHeight="sm"
                       textSize="sm"
                       title="Owner"
                       value={
@@ -289,20 +288,9 @@ const CampaignDetails = ({ isAdminPanel }: { isAdminPanel?: boolean }) => {
                       }
                     />
                   )}
+                  <CampaignDetailsRow textSize="sm" title="Title" value={campaign?.title} />
+                  <CampaignDetailsRow textSize="sm" title="Id" value={campaign?.id} />
                   <CampaignDetailsRow
-                    lineHeight="sm"
-                    textSize="sm"
-                    title="Title"
-                    value={campaign?.title}
-                  />
-                  <CampaignDetailsRow
-                    lineHeight="sm"
-                    textSize="sm"
-                    title="Id"
-                    value={campaign?.id}
-                  />
-                  <CampaignDetailsRow
-                    lineHeight="sm"
                     textSize="sm"
                     title="Status"
                     value={
@@ -315,15 +303,13 @@ const CampaignDetails = ({ isAdminPanel }: { isAdminPanel?: boolean }) => {
                   />
                   {/* TODO: Add data for it */}
                   <CampaignDetailsRow
-                    lineHeight="sm"
                     textSize="sm"
                     title="Served"
                     // value={campaignData?.share}
                     value=""
                   />
                   {/* TODO: Add data for it */}
                   <CampaignDetailsRow
-                    lineHeight="sm"
                     textSize="sm"
                     title="Budget"
                     value={
@@ -336,12 +322,10 @@ const CampaignDetails = ({ isAdminPanel }: { isAdminPanel?: boolean }) => {
                     }
                   />
                   <CampaignDetailsRow
-                    lineHeight="sm"
                     title="Created"
                     value={formatDateTime(new Date(Number(campaign.created)))}
                   />
                   <CampaignDetailsRow
-                    lineHeight="sm"
                     textSize="sm"
                     title="Starts"
                     value={
@@ -351,7 +335,6 @@ const CampaignDetails = ({ isAdminPanel }: { isAdminPanel?: boolean }) => {
                     }
                   />
                   <CampaignDetailsRow
-                    lineHeight="sm"
                     textSize="sm"
                     title="Ends"
                     value={
@@ -361,7 +344,6 @@ const CampaignDetails = ({ isAdminPanel }: { isAdminPanel?: boolean }) => {
                     }
                   />
                   <CampaignDetailsRow
-                    lineHeight="sm"
                     title="CPM min"
                     value={
                       campaign.pricingBounds.IMPRESSION?.min && (
@@ -376,7 +358,6 @@ const CampaignDetails = ({ isAdminPanel }: { isAdminPanel?: boolean }) => {
                     }
                   />
                   <CampaignDetailsRow
-                    lineHeight="sm"
                     title="CPM max"
                     value={
                       campaign.pricingBounds.IMPRESSION?.max && (
@@ -391,7 +372,6 @@ const CampaignDetails = ({ isAdminPanel }: { isAdminPanel?: boolean }) => {
                     }
                   />
                   <CampaignDetailsRow
-                    lineHeight="sm"
                     textSize="sm"
                     title="Limit average daily spending"
                     value={
@@ -401,7 +381,6 @@ const CampaignDetails = ({ isAdminPanel }: { isAdminPanel?: boolean }) => {
                     }
                   />
                   <CampaignDetailsRow
-                    lineHeight="sm"
                     textSize="sm"
                     title="Last modified by"
                     noBorder
@@ -451,7 +430,6 @@ const CampaignDetails = ({ isAdminPanel }: { isAdminPanel?: boolean }) => {
                           return (
                             <CampaignDetailsRow
                               key={item.id}
-                              lineHeight="sm"
                               textSize="sm"
                               title={`${item.banner?.format.w}x${item.banner?.format.h}`}
                               value={
@@ -461,6 +439,7 @@ const CampaignDetails = ({ isAdminPanel }: { isAdminPanel?: boolean }) => {
                                   title={`Target URL: ${item.banner?.targetUrl}`}
                                 />
                               }
+                              align="center"
                               noBorder={isLast}
                             />
                           )

src/components/CreateCampaign/CampaignSummary.tsx

@@ -35,7 +35,7 @@ const CampaignSummary = () => {
 
   return (
     <>
-      <Stack>
+      <Stack gap="xs">
         <CampaignDetailsRow
           lighterColor
           title="Budget"
@@ -62,17 +62,14 @@ const CampaignSummary = () => {
         <CampaignDetailsRow lighterColor title="Countries" value={formattedLocs} textSize="sm" />
         <CampaignDetailsRow
           lighterColor
-          lineHeight="xs"
           title="Limit average daily spending"
           value={advancedTargeInput.limitDailyAverageSpending ? 'Yes' : 'No'}
           textSize="sm"
-          noBorder
           mb="xs"
         />
 
         <CampaignDetailsRow
           lighterColor
-          lineHeight="xs"
           title="Auto UTM tracking"
           value={
             <Group gap="sm">

src/components/CreateCampaign/CreateCampaign.tsx

@@ -38,36 +38,21 @@ const CreateCampaign = () => {
   const [isSuccessModalOpened, SetIsSuccessModalOpened] = useState(false)
   const { updateBalance } = useAccount()
   const navigate = useNavigate()
-  const { saveToDraftCampaign, publishCampaign, resetCampaign, form, step } =
-    useCreateCampaignContext()
+  const { publishCampaign, resetCampaign, form, step } = useCreateCampaignContext()
   const { showNotification } = useCustomNotifications()
 
   const shouldBlock = useCallback<BlockerFunction>(
-    ({ currentLocation, nextLocation }) =>
-      currentLocation.pathname !== nextLocation.pathname && form.isDirty(),
-    [form]
+    ({ currentLocation, nextLocation }) => currentLocation.pathname !== nextLocation.pathname,
+    []
   )
 
   const blocker: Blocker = useBlocker(shouldBlock)
 
   useEffect(() => {
     if (blocker.state === 'blocked') {
-      modals.openConfirmModal(
-        defaultConfirmModalProps({
-          text: 'You have unsaved changes. Do you want to save them as a draft?',
-          color: 'attention',
-          labels: { confirm: 'Leave the page', cancel: 'Save draft' },
-          onConfirm: () => {
-            blocker.proceed()
-          },
-          onCancel: () => {
-            saveToDraftCampaign()
-            blocker.proceed()
-          }
-        })
-      )
+      resetCampaign('Leave without saving', () => blocker.proceed())
     }
-  }, [blocker, saveToDraftCampaign])
+  }, [blocker, resetCampaign])
 
   const launchCampaign = useCallback(async () => {
     try {
@@ -112,16 +97,16 @@ const CreateCampaign = () => {
   return (
     <form onSubmit={form.onSubmit(confirmLaunch)}>
       <Flex direction="row" gap="xl" wrap="wrap" align="flex-start">
-        <Paper p="md" shadow="xs" style={{ flexGrow: 10 }}>
+        <Paper p="md" shadow="xs" style={{ flexGrow: 10 }} w={720} maw="100%">
           <Stack gap="xl">
             <CustomStepper stepsCount={4} />
-            <Box maw={720}>
+            <Box>
               <Wizard step={step} />
             </Box>
           </Stack>
         </Paper>
 
-        <Paper p="md" shadow="sm" w={360} style={{ flexGrow: 1 }}>
+        <Paper p="md" shadow="sm" w={345} style={{ flexGrow: 1 }}>
           <CampaignSummary />
         </Paper>
       </Flex>

src/components/CreateCampaign/StepFour/StepFour.tsx

@@ -31,14 +31,6 @@ const StepFour = () => {
       { title: 'Creatives', value: adUnitsFormatted, isColumn: true },
       { title: 'Selected Categories', value: formattedCats },
       { title: 'Selected Countries', value: formattedLocs },
-      // {
-      //   title: 'Include incentivized traffic',
-      //   value: advancedTargeInput.includeIncentivized ? 'Yes' : 'No'
-      // },
-      // {
-      //   title: 'Disable frequency capping',
-      //   value: advancedTargeInput.disableFrequencyCapping ? 'Yes' : 'No'
-      // },
       {
         title: 'Limit average daily spending',
         value: advancedTargeInput.limitDailyAverageSpending ? 'Yes' : 'No'

src/components/CreateCampaign/StepThree/StepThree.tsx

@@ -39,7 +39,7 @@ const StepThree = () => {
   )
 
   return (
-    <Stack gap="xl">
+    <Stack gap="xl" maw={720}>
       <Stack gap="xs">
         <Text c="secondaryText" size="sm" fw="bold">
           1. Campaign Period

src/components/Dashboard/Dashboard.tsx

@@ -11,7 +11,6 @@ import { useNavigate } from 'react-router-dom'
 import { useCampaignsData } from 'hooks/useCampaignsData'
 import { parseBigNumTokenAmountToDecimal, maskAddress, periodNumberToDate, MINUTE } from 'helpers'
 import useCreateCampaignContext from 'hooks/useCreateCampaignContext'
-import useCustomNotifications from 'hooks/useCustomNotifications'
 import { modals } from '@mantine/modals'
 import VisibilityIcon from 'resources/icons/Visibility'
 import AnalyticsIcon from 'resources/icons/Analytics'
@@ -79,8 +78,6 @@ const Dashboard = ({ isAdminPanel, accountId }: { isAdminPanel?: boolean; accoun
     toggleArchived
   } = useCampaignsData()
   const { updateCampaignFromDraft } = useCreateCampaignContext()
-  const { showNotification } = useCustomNotifications()
-
   const [showArchived, setShowArchived] = useState(false)
   const filteredCampaignData = useMemo(() => {
     let archivedCount = 0
@@ -237,7 +234,7 @@ const Dashboard = ({ isAdminPanel, accountId }: { isAdminPanel?: boolean; accoun
         return
       }
 
-      if (data.campaign) {
+      data.campaign &&
         updateCampaignFromDraft(
           {
             ...data.campaign,
@@ -250,14 +247,11 @@ const Dashboard = ({ isAdminPanel, accountId }: { isAdminPanel?: boolean; accoun
               status: CampaignStatus.created
             })
           },
-          true
+          isDuplicate
         )
-        navigate('/dashboard/create-campaign', {})
-      } else {
-        showNotification('error', 'Editing draft campaign failed', 'Editing draft campaign failed')
-      }
+      navigate('/dashboard/create-campaign', {})
     },
-    [isAdminPanel, updateCampaignFromDraft, navigate, showNotification]
+    [isAdminPanel, updateCampaignFromDraft, navigate]
   )
 
   const handleEdit = useCallback(

src/components/LogIn/LogIn.tsx

@@ -7,9 +7,8 @@ import {
   ThemeIcon,
   Flex,
   rem,
-  useMantineTheme,
   LoadingOverlay,
-  getPrimaryShade
+  Box
 } from '@mantine/core'
 import { createStyles } from '@mantine/emotion'
 import LogInBackground from 'resources/backgrounds/pattern.svg'
@@ -22,7 +21,6 @@ import CustomAnchor from 'components/common/customAnchor/CustomAnchor'
 import { useNavigate } from 'react-router-dom'
 import useAccount from 'hooks/useAccount'
 import { appVersion } from 'helpers'
-import { useColorScheme } from '@mantine/hooks'
 
 const useStyles = createStyles(() => {
   return {
@@ -31,9 +29,6 @@ const useStyles = createStyles(() => {
       backgroundRepeat: 'no-repeat',
       backgroundSize: 'contain, contain, 120%'
     },
-    logoContainer: {
-      width: rem(191)
-    },
     icon: {
       border: 'none',
       background: 'none'
@@ -48,10 +43,7 @@ function LogIn() {
   const { classes } = useStyles()
   const { connectWallet, authenticated, isLoading } = useAccount()
   const year = useMemo(() => new Date().getFullYear(), [])
-  const theme = useMantineTheme()
   const navigate = useNavigate()
-  const colorScheme = useColorScheme()
-  const primaryShade = getPrimaryShade(theme, colorScheme)
 
   useEffect(() => {
     if (authenticated) navigate('/dashboard', { replace: true })
@@ -66,12 +58,9 @@ function LogIn() {
         overlayProps={{ blur: 2 }}
       />
       <Flex h="100%" pt="xl" pb="xl" direction="column" justify="space-around" align="center">
-        <div className={classes.logoContainer}>
-          <AdExLogo
-            // text={colorScheme === 'dark' ? theme.white : theme.colors.brandDarker[primaryShade]}
-            text={theme.colors.brandDarker[primaryShade]}
-          />
-        </div>
+        <Box c="white" w={191}>
+          <AdExLogo />
+        </Box>
         <div>
           <Title ta="center" order={1}>
             Welcome to AdEx