Merge pull request #280 from AmbireTech/development

v0.69.49

package.json

@@ -1,6 +1,6 @@
 {
   "name": "adex-interface",
-  "version": "0.69.48",
+  "version": "0.69.49",
   "private": true,
   "dependencies": {
     "@ambire/login-sdk-core": "^0.0.21",

src/components/CreateCampaign/CampaignSummary.tsx

@@ -1,12 +1,11 @@
 import { Button, Group, Stack, Text } from '@mantine/core'
-import { CREATE_CAMPAIGN_STEPS } from 'constants/createCampaign'
 import useCreateCampaignContext from 'hooks/useCreateCampaignContext'
 import LeftArrowIcon from 'resources/icons/LeftArrow'
 import useCreateCampaignData from 'hooks/useCreateCampaignData/useCreateCampaignData'
 import CampaignDetailsRow from 'components/common/CampainDetailsRow'
 import { UtmInfo } from './CreateCampaignCommon'
 
-const CampaignSummary = () => {
+const CampaignSummary = ({ onLaunchClick }: { onLaunchClick: () => void }) => {
   const {
     campaign: {
       autoUTMChecked,
@@ -92,8 +91,8 @@ const CampaignSummary = () => {
         <Text c="secondaryText">0</Text>
       </Flex> */}
       <Stack align="stretch" justify="space-between" gap="sm" mt="xl" px="md">
-        {step === CREATE_CAMPAIGN_STEPS ? (
-          <Button type="submit" size="lg" variant="filled">
+        {step === 3 ? (
+          <Button onClick={onLaunchClick} size="lg" variant="filled">
             Launch Campaign
           </Button>
         ) : (

src/components/CreateCampaign/CreateCampaign.tsx

@@ -2,14 +2,12 @@ import { Flex, Stack, Paper, Text, Box } from '@mantine/core'
 import useCreateCampaignContext from 'hooks/useCreateCampaignContext'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { modals } from '@mantine/modals'
-import useCustomNotifications from 'hooks/useCustomNotifications'
 import type {
   unstable_Blocker as Blocker,
   unstable_BlockerFunction as BlockerFunction
 } from 'react-router-dom'
 import { unstable_useBlocker as useBlocker, useNavigate } from 'react-router-dom'
 import { defaultConfirmModalProps } from 'components/common/Modals/CustomConfirmModal'
-import useAccount from 'hooks/useAccount'
 import throttle from 'lodash.throttle'
 import { SuccessModal } from 'components/common/Modals'
 import CustomStepper from './CampaignStepper'
@@ -35,11 +33,10 @@ const Wizard = ({ step }: { step: number }) => {
 }
 
 const CreateCampaign = () => {
+  // TODO: use modals Providers for this
   const [isSuccessModalOpened, SetIsSuccessModalOpened] = useState(false)
-  const { updateBalance } = useAccount()
   const navigate = useNavigate()
-  const { publishCampaign, resetCampaign, form, step } = useCreateCampaignContext()
-  const { showNotification } = useCustomNotifications()
+  const { publishCampaign, resetCampaign, step } = useCreateCampaignContext()
 
   const shouldBlock = useCallback<BlockerFunction>(
     ({ currentLocation, nextLocation }) => currentLocation.pathname !== nextLocation.pathname,
@@ -55,21 +52,10 @@ const CreateCampaign = () => {
   }, [blocker, resetCampaign])
 
   const launchCampaign = useCallback(async () => {
-    try {
-      const res = await publishCampaign()
-
-      if (res && res.success) {
-        await updateBalance()
-        SetIsSuccessModalOpened(true)
-        resetCampaign()
-      } else {
-        showNotification('warning', 'invalid campaign data response', 'Data error')
-      }
-    } catch (err) {
-      console.error(err)
-      showNotification('error', 'Creating campaign failed', 'Data error')
-    }
-  }, [publishCampaign, resetCampaign, SetIsSuccessModalOpened, showNotification, updateBalance])
+    await publishCampaign(() => {
+      SetIsSuccessModalOpened(true)
+    })
+  }, [publishCampaign])
 
   const throttledLaunchCampaign = useMemo(
     () => throttle(launchCampaign, 1069, { leading: true }),
@@ -95,7 +81,7 @@ const CreateCampaign = () => {
   }, [navigate, SetIsSuccessModalOpened])
 
   return (
-    <form onSubmit={form.onSubmit(confirmLaunch)}>
+    <>
       <Flex direction="row" gap="xl" wrap="wrap" align="flex-start">
         <Paper p="md" shadow="xs" style={{ flexGrow: 10 }} w={720} maw="100%">
           <Stack gap="xl">
@@ -107,7 +93,7 @@ const CreateCampaign = () => {
         </Paper>
 
         <Paper p="md" shadow="sm" w={345} style={{ flexGrow: 1 }}>
-          <CampaignSummary />
+          <CampaignSummary onLaunchClick={confirmLaunch} />
         </Paper>
       </Flex>
       <SuccessModal
@@ -121,7 +107,7 @@ const CreateCampaign = () => {
         opened={isSuccessModalOpened}
         close={handleOnModalClose}
       />
-    </form>
+    </>
   )
 }
 

src/constants/createCampaign.ts

@@ -6,7 +6,6 @@ import {
   AllCountries
 } from 'adex-common'
 
-export const CREATE_CAMPAIGN_STEPS = 4
 export const CAMPAIGN_PLACEMENTS_INPUT = 'targetingInput.inputs.placements.in'
 export const CAMPAIGN_INCLUDE_INCENTIVIZED_INPUT =
   'targetingInput.inputs.advanced.includeIncentivized'

src/contexts/CreateCampaignContext/CreateCampaignContext.tsx

@@ -87,7 +87,8 @@ const CreateCampaignContextProvider: FC<PropsWithChildren> = ({ children }) => {
       balanceToken,
       balanceToken: { decimals }
     },
-    isAdmin
+    isAdmin,
+    updateBalance
   } = useAccount()
 
   const defaultValue = useMemo(
@@ -371,19 +372,6 @@ const CreateCampaignContextProvider: FC<PropsWithChildren> = ({ children }) => {
     }
   }, [campaign, form])
 
-  const publishCampaign = useCallback(() => {
-    const preparedCampaign = form.getTransformedValues()
-
-    return adexServicesRequest('backend', {
-      route: '/dsp/campaigns',
-      method: 'POST',
-      body: preparedCampaign,
-      headers: {
-        'Content-Type': 'application/json'
-      }
-    })
-  }, [form, adexServicesRequest])
-
   const saveToDraftCampaign = useCallback(async () => {
     const preparedCampaign = form.getTransformedValues()
 
@@ -463,7 +451,7 @@ const CreateCampaignContextProvider: FC<PropsWithChildren> = ({ children }) => {
         if (current === 2 && form.getValues().autoUTMChecked) {
           addUTMToTargetURLS()
         }
-        return current < 4 ? current + 1 : current
+        return current < 3 ? current + 1 : current
       }),
     [addUTMToTargetURLS, form]
   )
@@ -486,6 +474,7 @@ const CreateCampaignContextProvider: FC<PropsWithChildren> = ({ children }) => {
         localStorage.removeItem(LS_KEY_CREATE_CAMPAIGN_STEP)
         onReset && onReset()
       }
+
       if (form.isDirty()) {
         modals.openConfirmModal(
           defaultConfirmModalProps({
@@ -512,6 +501,35 @@ const CreateCampaignContextProvider: FC<PropsWithChildren> = ({ children }) => {
     [form, saveToDraftCampaign]
   )
 
+  const publishCampaign = useCallback(
+    async (onSuccess?: () => void) => {
+      const preparedCampaign = form.getTransformedValues()
+
+      try {
+        const res = await adexServicesRequest<{ success: boolean }>('backend', {
+          route: '/dsp/campaigns',
+          method: 'POST',
+          body: preparedCampaign,
+          headers: {
+            'Content-Type': 'application/json'
+          }
+        })
+
+        if (res && res.success) {
+          form.resetDirty()
+          updateBalance()
+          onSuccess && typeof onSuccess === 'function' && onSuccess()
+        } else {
+          showNotification('warning', 'invalid campaign data response', 'Data error')
+        }
+      } catch (err) {
+        console.error(err)
+        showNotification('error', 'Creating campaign failed', 'Data error')
+      }
+    },
+    [form, adexServicesRequest, updateBalance, showNotification]
+  )
+
   const contextValue = useMemo(
     () => ({
       campaign,

src/types/createCampaignCommon.ts

@@ -53,7 +53,7 @@ export type CreateCampaignType = {
   prevStep: () => void
   // stepsCount: number
   campaign: CampaignUI
-  publishCampaign: () => Promise<any>
+  publishCampaign: (onSuccess?: () => void) => Promise<any>
   resetCampaign: (reasonMsg?: string, onReset?: () => void) => void
   allowedBannerSizes: string[]
   saveToDraftCampaign: () => Promise<void>