Merge pull request #261 from AmbireTech/development

v0.69.33
AmbireTech · Aug 12, 2024 · 35c3245 · 35c3245
2 parents 5f3fe28 + edf1517
commit 35c3245
Show file tree

Hide file tree

Showing 10 changed files with 141 additions and 57 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "adex-interface",
-  "version": "0.69.32",
+  "version": "0.69.33",
   "private": true,
   "dependencies": {
     "@ambire/login-sdk-core": "^0.0.21",

diff --git a/src/components/CampaignDetails/CampaignDetails.tsx b/src/components/CampaignDetails/CampaignDetails.tsx
@@ -23,6 +23,7 @@ import EditCampaign from 'components/EditCampaign'
 import { defaultConfirmModalProps } from 'components/common/Modals/CustomConfirmModal'
 import DeleteIcon from 'resources/icons/Delete'
 import { StickyPanel } from 'components/TopBar/TopBarStickyPanel'
+import useCreateCampaignContext from 'hooks/useCreateCampaignContext'
 import CatsLocsFormatted from './CatsLocsFormatted'
 import { AdminActions } from './AdminActions'
 
@@ -34,6 +35,7 @@ const CampaignDetails = ({ isAdminPanel }: { isAdminPanel?: boolean }) => {
     toggleArchived,
     deleteDraftCampaign
   } = useCampaignsData()
+  const { updateCampaignFromDraft } = useCreateCampaignContext()
   const { showNotification } = useCustomNotifications()
   const navigate = useNavigate()
   const [params, setParams] = useSearchParams()
@@ -47,6 +49,7 @@ const CampaignDetails = ({ isAdminPanel }: { isAdminPanel?: boolean }) => {
   const campaign = useMemo(() => campaignData?.campaign, [campaignData])
 
   const isEditMode = useMemo(() => params.get('edit'), [params])
+  const isDraft = useMemo(() => campaign?.status === CampaignStatus.draft, [campaign?.status])
 
   const handleArchive = useCallback(() => {
     if (!campaign?.id) {
@@ -73,8 +76,6 @@ const CampaignDetails = ({ isAdminPanel }: { isAdminPanel?: boolean }) => {
       return
     }
 
-    const isDraft = campaign?.status === CampaignStatus.draft
-
     const confirmLabel = isDraft ? 'Delete Draft' : 'Stop'
     const onConfirm = isDraft
       ? () => {
@@ -101,10 +102,19 @@ const CampaignDetails = ({ isAdminPanel }: { isAdminPanel?: boolean }) => {
     campaign?.title,
     changeCampaignStatus,
     deleteDraftCampaign,
+    isDraft,
     navigate,
     showNotification
   ])
 
+  const handleEditDraft = useCallback(() => {
+    campaign &&
+      updateCampaignFromDraft({
+        ...campaign
+      })
+    navigate('/dashboard/create-campaign', {})
+  }, [campaign, updateCampaignFromDraft, navigate])
+
   useEffect(() => {
     if (id) {
       updateCampaignDataById(id)
@@ -147,6 +157,10 @@ const CampaignDetails = ({ isAdminPanel }: { isAdminPanel?: boolean }) => {
     )
   }, [campaign?.status])
 
+  const canEditDraft = useMemo(() => {
+    return !isAdminPanel && isDraft
+  }, [isAdminPanel, isDraft])
+
   if (!campaign) return <div>Invalid Campaign Id</div>
   return (
     <Stack gap="xl">
@@ -213,21 +227,18 @@ const CampaignDetails = ({ isAdminPanel }: { isAdminPanel?: boolean }) => {
                 )}
 
                 <Button
-                  disabled={!canEdit}
+                  disabled={isDraft ? !canEditDraft : !canEdit}
                   rightSection={<EditIcon size="15px" />}
                   variant="subtle"
                   color="mainText"
                   onClick={() =>
-                    canEdit &&
-                    setParams(
-                      params.get('edit') && campaign.status !== CampaignStatus.draft
-                        ? ''
-                        : 'edit=true',
-                      { replace: true }
-                    )
+                    isDraft
+                      ? canEditDraft && handleEditDraft()
+                      : canEdit &&
+                        setParams(params.get('edit') ? '' : 'edit=true', { replace: true })
                   }
                 >
-                  Edit
+                  {isDraft ? 'Edit draft' : 'Edit'}
                 </Button>
               </Group>
             </Box>

diff --git a/src/components/CreateCampaign/CampaignSummary.tsx b/src/components/CreateCampaign/CampaignSummary.tsx
@@ -23,6 +23,7 @@ import throttle from 'lodash.throttle'
 import { createStyles } from '@mantine/emotion'
 import { modals } from '@mantine/modals'
 import { defaultConfirmModalProps } from 'components/common/Modals/CustomConfirmModal'
+import { UtmInfo } from './CreateCampaignCommon'
 
 const useStyles = createStyles((theme: MantineTheme) => {
   const colorScheme = useColorScheme()
@@ -51,7 +52,21 @@ const CampaignSummary = () => {
   const [opened, { open, close }] = useDisclosure(false)
   const { updateBalance } = useAccount()
   const {
-    campaign: { step, adUnits, autoUTMChecked, errorsTargetURLValidations, targetingInput },
+    campaign: {
+      step,
+      adUnits,
+      autoUTMChecked,
+      errorsTargetURLValidations,
+      targetingInput: {
+        inputs: {
+          placements: {
+            in: [placement]
+          },
+          categories,
+          location
+        }
+      }
+    },
     updateCampaign,
     updatePartOfCampaign,
     publishCampaign,
@@ -76,30 +91,26 @@ const CampaignSummary = () => {
     }
     if (step === 1) {
       return !(
-        (targetingInput.inputs.categories.apply === 'all' ||
-          (targetingInput.inputs.categories.apply === 'in' &&
-            targetingInput.inputs.categories.in.length) ||
-          (targetingInput.inputs.categories.apply === 'nin' &&
-            targetingInput.inputs.categories.nin.length)) &&
-        (targetingInput.inputs.location.apply === 'all' ||
-          (targetingInput.inputs.location.apply === 'in' &&
-            targetingInput.inputs.location.in.length) ||
-          (targetingInput.inputs.location.apply === 'nin' &&
-            targetingInput.inputs.location.nin.length))
+        (categories.apply === 'all' ||
+          (categories.apply === 'in' && categories.in.length) ||
+          (categories.apply === 'nin' && categories.nin.length)) &&
+        (location.apply === 'all' ||
+          (location.apply === 'in' && location.in.length) ||
+          (location.apply === 'nin' && location.nin.length))
       )
     }
 
     return false
   }, [
     adUnits.length,
+    categories.apply,
+    categories.in.length,
+    categories.nin.length,
     errorsTargetURLValidations,
-    step,
-    targetingInput.inputs.categories.apply,
-    targetingInput.inputs.categories.in.length,
-    targetingInput.inputs.categories.nin.length,
-    targetingInput.inputs.location.apply,
-    targetingInput.inputs.location.in.length,
-    targetingInput.inputs.location.nin.length
+    location.apply,
+    location.in.length,
+    location.nin.length,
+    step
   ])
 
   const isTheLastStep = useMemo(() => step === CREATE_CAMPAIGN_STEPS - 1, [step])
@@ -150,21 +161,17 @@ const CampaignSummary = () => {
         )
         return
       }
+    }
 
-      if (autoUTMChecked) {
-        addUTMToTargetURLS()
-      }
+    if (step === 2 && autoUTMChecked) {
+      addUTMToTargetURLS()
     }
 
     if (step < CREATE_CAMPAIGN_STEPS - 1) {
       if (step === 2) {
         // NOTE: wtf?
         const element = document.getElementById('createCampaignSubmitBtn1')
         element?.click()
-
-        if (autoUTMChecked) {
-          addUTMToTargetURLS()
-        }
         return
       }
 
@@ -184,7 +191,7 @@ const CampaignSummary = () => {
       const res = await saveToDraftCampaign()
 
       if (res && res.success) {
-        updatePartOfCampaign({ draftModified: false })
+        updatePartOfCampaign({ dirty: false })
         showNotification('info', 'Draft saved')
       } else {
         showNotification('warning', 'invalid campaign data response', 'Data error')
@@ -212,10 +219,18 @@ const CampaignSummary = () => {
         <CampaignDetailsRow lighterColor title="CPM" value={priceBoundsFormatted} textSize="sm" />
         <CampaignDetailsRow
           lighterColor
-          title="Device"
+          title="Placement"
+          value={placement === 'site' ? 'Website' : 'App'}
           textSize="sm"
-          value={formattedSelectedDevice}
         />
+        {placement === 'site' && (
+          <CampaignDetailsRow
+            lighterColor
+            title="Device"
+            textSize="sm"
+            value={formattedSelectedDevice}
+          />
+        )}
         <CampaignDetailsRow lighterColor title="Ad Format" value={adFormats} textSize="sm" />
         <CampaignDetailsRow lighterColor title="Categories" value={formattedCats} textSize="sm" />
         <CampaignDetailsRow lighterColor title="Countries" value={formattedLocs} textSize="sm" />
@@ -245,6 +260,23 @@ const CampaignSummary = () => {
           noBorder
           mb="xs"
         />
+
+        <CampaignDetailsRow
+          lighterColor
+          lineHeight="xs"
+          title="Auto UTM tracking"
+          value={
+            <Group gap="sm">
+              <Text size="inherit" c={autoUTMChecked ? 'success' : 'warning'}>
+                {autoUTMChecked ? 'Enabled' : 'Disabled'}
+              </Text>
+              <UtmInfo title="" placement={placement} />
+            </Group>
+          }
+          textSize="sm"
+          noBorder
+          mb="xs"
+        />
       </Stack>
       {/* Temporary disabled */}
       {/* <Flex justify="space-between" className={classes.bg} p="lg">

diff --git a/src/components/CreateCampaign/CreateCampaign.tsx b/src/components/CreateCampaign/CreateCampaign.tsx
@@ -41,8 +41,8 @@ const CreateCampaign = () => {
 
   const shouldBlock = useCallback<BlockerFunction>(
     ({ currentLocation, nextLocation }) =>
-      currentLocation.pathname !== nextLocation.pathname && campaign.draftModified,
-    [campaign.draftModified]
+      currentLocation.pathname !== nextLocation.pathname && campaign.dirty,
+    [campaign.dirty]
   )
 
   const blocker: Blocker = useBlocker(shouldBlock)

diff --git a/src/components/CreateCampaign/CreateCampaignCommon.tsx b/src/components/CreateCampaign/CreateCampaignCommon.tsx
@@ -0,0 +1,29 @@
+import { Text, Code, HoverCard, ActionIcon, Group } from '@mantine/core'
+import { Placement } from 'adex-common'
+import InfoIcon from 'resources/icons/Info'
+
+export const UtmInfo = ({ title = '', placement }: { title: string; placement?: Placement }) => (
+  <HoverCard width={420}>
+    <HoverCard.Target>
+      <Group>
+        <Text size="inherit">{title}</Text>
+        <ActionIcon size="sm" variant="transparent">
+          <InfoIcon size="inherit" />
+        </ActionIcon>
+      </Group>
+    </HoverCard.Target>
+    <HoverCard.Dropdown>
+      <Text size="md">
+        * if checked all manually added UTM tags will be overridden by auto tags in format:{' '}
+        <Code>
+          {`utm_source=AdEx&utm_term=${
+            placement === 'site' ? 'Website' : 'App'
+          }&utm_campaign={CAMPAIGN_TITLE}&utm_content={BANNER_SIZE}`}
+        </Code>
+        {'. '}
+        On impression will be added{' '}
+        <Code>{`&utm_medium={${placement === 'site' ? 'WEBSITE_DOMAIN' : 'APP_NAME'}}`}</Code>
+      </Text>
+    </HoverCard.Dropdown>
+  </HoverCard>
+)
diff --git a/src/components/CreateCampaign/StepOne/SelectPlacements.tsx b/src/components/CreateCampaign/StepOne/SelectPlacements.tsx
@@ -2,7 +2,7 @@ import { Radio, Text } from '@mantine/core'
 import { Placement } from 'adex-common'
 import { CAMPAIGN_PLACEMENTS_INPUT } from 'constants/createCampaign'
 import useCreateCampaignContext from 'hooks/useCreateCampaignContext'
-import { useCallback, useEffect } from 'react'
+import { useCallback } from 'react'
 
 const SelectPlacements = () => {
   const {
@@ -15,19 +15,16 @@ const SelectPlacements = () => {
         }
       }
     },
-    updateCampaign,
     updateCampaignWithPrevStateNested
   } = useCreateCampaignContext()
 
   const updatePlacements = useCallback(
-    (value: Placement) => updateCampaignWithPrevStateNested(CAMPAIGN_PLACEMENTS_INPUT, [value]),
+    (value: Placement) => {
+      updateCampaignWithPrevStateNested(CAMPAIGN_PLACEMENTS_INPUT, [value])
+    },
     [updateCampaignWithPrevStateNested]
   )
 
-  useEffect(() => {
-    if (placement === 'app') updateCampaign('devices', [])
-  }, [placement, updateCampaign])
-
   return (
     <>
       <Text c="secondaryText" size="sm" fw="bold" mb="xs">

diff --git a/src/components/CreateCampaign/StepOne/UploadedBanners.tsx b/src/components/CreateCampaign/StepOne/UploadedBanners.tsx
@@ -4,6 +4,7 @@ import useCreateCampaignContext from 'hooks/useCreateCampaignContext'
 import { AdUnit } from 'adex-common/dist/types'
 import { UploadedBannersProps } from 'types'
 import ImageUrlInput from './ImageUrlInput'
+import { UtmInfo } from '../CreateCampaignCommon'
 
 const UploadedBanners = ({
   updateAutoUTMChecked,
@@ -12,8 +13,19 @@ const UploadedBanners = ({
   handleOnInputChange
 }: UploadedBannersProps) => {
   const {
-    campaign: { adUnits, errorsTargetURLValidations },
+    campaign: {
+      adUnits,
+      errorsTargetURLValidations,
+      targetingInput: {
+        inputs: {
+          placements: {
+            in: [placement]
+          }
+        }
+      }
+    },
     selectedBannerSizes,
+
     validateAdUnitTargetURL
   } = useCreateCampaignContext()
 
@@ -39,7 +51,8 @@ const UploadedBanners = ({
       <Grid.Col>
         <Checkbox
           checked={autoUTMChecked}
-          label="Auto UTM tracking"
+          // label="Auto UTM tracking"
+          label={<UtmInfo title="     Auto UTM tracking *" placement={placement} />}
           onChange={(event) => updateAutoUTMChecked(event.currentTarget.checked)}
         />
       </Grid.Col>

diff --git a/src/constants/createCampaign.ts b/src/constants/createCampaign.ts
@@ -113,7 +113,7 @@ export const CREATE_CAMPAIGN_DEFAULT_VALUE: CampaignUI = {
   archived: false,
   createdBy: '',
   lastModifiedBy: '',
-  draftModified: false,
+  dirty: false,
   errorsTargetURLValidations: {}
 }