Create campaign application

public/locales/bg/campaign-application.json

@@ -9,7 +9,9 @@
  },
  "application": {
  "title": "Информация за кампанията",
+ "campaignTitle": "Име на кампанията",
  "beneficiary": "Имена на бенефициента",
+ "beneficiaryRelationship": "Взаимоотношения с бенефициента",
  "funds": "Необходима сума в лева",
  "campaign-end": {
  "title": "Желана крайна дата на кампанията:",
@@ -48,7 +50,8 @@
  },
  "cta": {
  "next": "Запазете и продължете",
- "back": "Назад"
+ "back": "Назад",
+ "submit": "Заявете кампания"
  },
  "remark": {
  "part-one": "*Допълнителна информация за процеса на кандидатстване и неговите етапи можете да намерите в нашите ",

public/locales/en/campaign-application.json

@@ -9,7 +9,9 @@
  },
  "application": {
  "title": "Campaign Application",
+ "campaignTitle": "Campaign title",
  "beneficiary": "Beneficiary names",
+ "beneficiaryRelationship": "Beneficiary relationship",
  "funds": "The required amount in leva",
  "campaign-end": {
  "title": "Desired campaign end date:",
@@ -48,7 +50,8 @@
  },
  "cta": {
  "next": "Save and continue",
- "back": "Back"
+ "back": "Back",
+ "submit": "Submit campaign"
  },
  "remark": {
  "part-one": "*Additional information about the application process and its stages can be found in our ",

src/components/client/campaign-application/CampaignApplicationForm.tsx

@@ -24,6 +24,20 @@ import {
  StyledCampaignApplicationStepper,
  StyledStepConnector,
 } from './helpers/campaignApplication.styled'
+import { useMutation } from '@tanstack/react-query'
+import {
+ CreateCampaignApplicationInput,
+ CreateCampaignApplicationResponse,
+} from 'gql/campaign-applications'
+import { AxiosError, AxiosResponse, isAxiosError } from 'axios'
+import { ApiErrors, matchValidator } from 'service/apiErrors'
+import { useCreateCampaignApplication } from 'service/campaign-application'
+import { AlertStore } from 'stores/AlertStore'
+import { t } from 'i18next'
+import { CampaignTypeCategory } from 'components/common/campaign-types/categories'
+import { FormikHelpers } from 'formik'
+import { useCampaignTypesList } from 'service/campaignTypes'
+import { CampaignTypesResponse } from 'gql/campaign-types'
 
 const steps: StepType[] = [
  {
@@ -46,6 +60,7 @@ type Props = {
 
 export default function CampaignApplicationForm({ person }: Props) {
  const [activeStep, setActiveStep] = useState<Steps>(Steps.ORGANIZER)
+ const isLast = activeStep === Steps.CAMPAIGN_DETAILS
 
  const initialValues: CampaignApplicationFormData = {
  organizer: {
@@ -57,15 +72,47 @@ export default function CampaignApplicationForm({ person }: Props) {
  personalInformationProcessingAccepted: false,
  },
  application: {
+ title: '',
  beneficiaryNames: '',
  campaignType: '',
  funds: 0,
  campaignEnd: '',
  },
+ details: {
+ campaignGuarantee: '',
+ cause: '',
+ currentStatus: '',
+ description: '',
+ documents: [],
+ links: [],
+ organizerBeneficiaryRelationship: '-',
+ otherFinancialSources: '',
+ },
  }
 
- const handleSubmit = () => {
- stepsHandler({ activeStep, setActiveStep })
+ const { data } = useCampaignTypesList()
+ const { mutation } = useCreateApplication()
+ const handleSubmit = async (
+ formData: CampaignApplicationFormData,
+ { setFieldError, resetForm }: FormikHelpers<CampaignApplicationFormData>,
+ ) => {
+ if (isLast) {
+ try {
+ await mutation.mutateAsync(mapCreateInput(formData, data ?? []))
+
+ resetForm()
+ } catch (error) {
+ console.error(error)
+ if (isAxiosError(error)) {
+ const { response } = error as AxiosError<ApiErrors>
+ response?.data.message.map(({ property, constraints }) => {
+ setFieldError(property, t(matchValidator(constraints)))
+ })
+ }
+ }
+ } else {
+ stepsHandler({ activeStep, setActiveStep })
+ }
  }
 
  const handleBack = useCallback(() => {
@@ -92,7 +139,11 @@ export default function CampaignApplicationForm({ person }: Props) {
  {activeStep < steps.length && steps[activeStep].component}
  </Grid>
  <Grid container item alignContent="center">
- <CampaignApplicationFormActions activeStep={activeStep} onBack={handleBack} />
+ <CampaignApplicationFormActions
+ activeStep={activeStep}
+ onBack={handleBack}
+ isLast={isLast}
+ />
  </Grid>
  </Grid>
  </GenericForm>
@@ -102,3 +153,52 @@ export default function CampaignApplicationForm({ person }: Props) {
  </>
  )
 }
+
+const useCreateApplication = () => {
+ const mutation = useMutation<
+ AxiosResponse<CreateCampaignApplicationResponse>,
+ AxiosError<ApiErrors>,
+ CreateCampaignApplicationInput
+ >({
+ mutationFn: useCreateCampaignApplication(),
+ onError: () => AlertStore.show(t('common:alerts.error'), 'error'),
+ onSuccess: () => AlertStore.show(t('common:alerts.message-sent'), 'success'),
+ })
+
+ // const fileUploadMutation = useMutation<
+ // AxiosResponse<CampaignUploadImage[]>,
+ // AxiosError<ApiErrors>,
+ // UploadCampaignFiles
+ // >({
+ // mutationFn: useUploadCampaignFiles(),
+ // })
+
+ return { mutation }
+}
+
+function mapCreateInput(
+ i: CampaignApplicationFormData,
+ types: CampaignTypesResponse[],
+): CreateCampaignApplicationInput {
+ return {
+ acceptTermsAndConditions: i.organizer.acceptTermsAndConditions,
+ personalInformationProcessingAccepted: i.organizer.personalInformationProcessingAccepted,
+ transparencyTermsAccepted: i.organizer.transparencyTermsAccepted,
+
+ organizerName: i.organizer.name,
+ organizerEmail: i.organizer.email,
+ organizerPhone: i.organizer.phone,
+
+ beneficiary: i.application.beneficiaryNames,
+
+ campaignName: i.application.title,
+ amount: i.application.funds?.toString() ?? '',
+ goal: i.details.cause,
+ category: types.find((c) => c.id === i.application.campaignType)?.category,
+ description: i.details.description,
+ organizerBeneficiaryRel: i.details.organizerBeneficiaryRelationship ?? '-',
+ campaignGuarantee: i.details.campaignGuarantee,
+ history: i.details.currentStatus,
+ otherFinanceSources: i.details.otherFinancialSources,
+ }
+}

src/components/client/campaign-application/CampaignApplicationFormActions.tsx

@@ -16,11 +16,13 @@ import {
 type CampaignApplicationFormActionsProps = {
  activeStep: number
  onBack?: (event: MouseEvent) => void
+ isLast: boolean
 }
 
 export default function CampaignApplicationFormActions({
  onBack,
  activeStep,
+ isLast,
 }: CampaignApplicationFormActionsProps) {
  const { t } = useTranslation('campaign-application')
 
@@ -47,7 +49,7 @@ export default function CampaignApplicationFormActions({
  <Grid item xs={12} md={6} flexWrap="nowrap">
  <ActionSubmitButton
  fullWidth
- label={t('cta.next')}
+ label={t(isLast ? 'cta.submit' : 'cta.next')}
  endIcon={<ArrowForwardIosIcon fontSize="small" />}
  />
  </Grid>

src/components/client/campaign-application/helpers/campaignApplication.types.ts

@@ -21,6 +21,7 @@ export type CampaignApplicationOrganizer = {
 
 export type CampaignApplication = {
  beneficiaryNames: string
+ title: string
  campaignType: string
  funds: number
  campaignEnd: string
@@ -29,6 +30,16 @@ export type CampaignApplication = {
 export type CampaignApplicationFormData = {
  organizer: CampaignApplicationOrganizer
  application: CampaignApplication
+ details: {
+ organizerBeneficiaryRelationship: string
+ campaignGuarantee: string | undefined
+ otherFinancialSources: string | undefined
+ description: string
+ currentStatus: string
+ cause: string
+ links: string[]
+ documents: string[]
+ }
 }
 
 export type CampaignApplicationFormDataSteps = {

src/components/client/campaign-application/steps/CampaignApplication.tsx

@@ -23,12 +23,26 @@ export default function CampaignApplication() {
  <StyledFormTextField
  label={t('steps.application.beneficiary')}
  type="text"
- name="application.beneficiary"
+ name="application.beneficiaryNames"
  autoComplete="name"
  />
  </Grid>
  <Grid item xs={12}>
- <CampaignTypeSelect />
+ <StyledFormTextField
+ label={t('steps.application.beneficiaryRelationship')}
+ type="text"
+ name="details.beneficiaryNames"
+ />
+ </Grid>
+ <Grid item xs={12}>
+ <StyledFormTextField
+ label={t('steps.application.campaignTitle')}
+ type="text"
+ name="application.title"
+ />
+ </Grid>
+ <Grid item xs={12}>
+ <CampaignTypeSelect name="application.campaignType" />
  </Grid>
  <Grid item xs={12}>
  <StyledFormTextField

src/gql/campaign-applications.ts

@@ -0,0 +1,59 @@
+import { CampaignTypeCategory } from 'components/common/campaign-types/categories'
+
+export class CreateCampaignApplicationInput {
+ /**
+ * What would the campaign be called. ('Help Vesko' or 'Castrate Plovdiv Cats')
+ */
+ campaignName: string
+
+ /** user needs to agree to this as a prerequisite to creating a campaign application */
+ acceptTermsAndConditions: boolean
+
+ /** user needs to agree to this as a prerequisite to creating a campaign application */
+ transparencyTermsAccepted: boolean
+
+ /** user needs to agree to this as a prerequisite to creating a campaign application */
+ personalInformationProcessingAccepted: boolean
+
+ /** Who is organizing this campaign */
+ organizerName: string
+
+ /** Contact Email to use for the Campaign Application process i.e. if more documents or other info are requested */
+ organizerEmail: string
+
+ /** Contact Email to use for the Campaign Application process i.e. if more documents or other info are requested */
+ organizerPhone: string
+
+ /** Who will benefit and use the collected donations */
+ beneficiary: string
+
+ /** What is the relationship between the Organizer and the Beneficiary ('They're my elderly relative and I'm helping with the internet-computer stuff') */
+ organizerBeneficiaryRel: string
+
+ /** What is the result that the collected donations will help achieve */
+ goal: string
+
+ /** What if anything has been done so far */
+ history?: string
+
+ /** How much would the campaign be looking for i.e '10000lv or 5000 Eur or $5000' */
+ amount: string
+
+ /** Describe the goal of the campaign in more details */
+ description?: string
+
+ /** Describe public figures that will back the campaign and help popularize it. */
+ campaignGuarantee?: string
+
+ /** If any - describe what other sources were used to gather funds for the goal */
+ otherFinanceSources?: string
+
+ /** Anything that the operator needs to know about the campaign */
+ otherNotes?: string
+
+ category?: CampaignTypeCategory
+}
+
+export type CreateCampaignApplicationResponse = CreateCampaignApplicationInput & {
+ id: string
+}

src/service/apiEndpoints.ts

@@ -424,4 +424,7 @@ export const endpoints = {
  }
  },
  },
+ campaignApplication: {
+ create: <Endpoint>{ url: '/campaign-application/create', method: 'POST' },
+ },
 }

src/service/campaign-application.ts

@@ -0,0 +1,19 @@
+import { AxiosResponse } from 'axios'
+import { useSession } from 'next-auth/react'
+
+import { apiClient } from 'service/apiClient'
+import { endpoints } from 'service/apiEndpoints'
+import { authConfig } from 'service/restRequests'
+import {
+ CreateCampaignApplicationInput,
+ CreateCampaignApplicationResponse,
+} from 'gql/campaign-applications'
+
+export const useCreateCampaignApplication = () => {
+ const { data: session } = useSession()
+ return async (data: CreateCampaignApplicationInput) =>
+ await apiClient.post<
+ CreateCampaignApplicationInput,
+ AxiosResponse<CreateCampaignApplicationResponse>
+ >(endpoints.campaignApplication.create.url, data, authConfig(session?.accessToken))
+}