Withdrawals Create page improvements (#1026)

* renamed: тегления то преводи * replaced: статут with статус * withdrawal createForm: currency is set based on the campaign currency instead of choosing it manually * more translation renaming * fixed: campaignTitle to show in Withdrawals grid * added availableamount when selecting vault in withdrawal create form * fixed: vaultsSelect data and labels for transfers and expenses * fixed: available amount validation and moneyconversion * campaign display improvements (#1022) * updated: Stanka's photo * added: organizer mail in CampaignDetailsPage * added: email to campaign.organizer object * removed the Education/Education duplication from the campaign category/type information. Now only the type is displayed which is enough information anyway * updated: link to our team on home page * removed: jumbotron from image alt text * added: priority on campaign banner image * updated static fonts to theme based variables Co-authored-by: quantum-grit <[email protected]> * Refactor Pricniples section, minor fixes on About us page (#1023) * Refactor Pricniples section, minor fixes on About us page * Replace sections in About us page * Add Zhana Borisova to the active members * added token expiration check in admin and profile page (#1025) Co-authored-by: quantum-grit <[email protected]> Co-authored-by: quantum-grit <[email protected]> Co-authored-by: Ani <[email protected]>
podkrepi-bg · Sep 20, 2022 · c90fa7a · c90fa7a
1 parent bc1d6bf
commit c90fa7a
Show file tree

Hide file tree

Showing 21 changed files with 171 additions and 82 deletions.
diff --git a/public/locales/bg/campaigns.json b/public/locales/bg/campaigns.json
@@ -3,13 +3,13 @@
   "subtitle": "Помогнете на нуждаещ се",
   "form-heading": "Предложете нова кампания",
   "edit-form-heading": "Редактирайте кампания",
-  "all": "Всички тегления",
-  "withdrawals": "Тегления",
+  "all": "Всички преводи",
+  "withdrawals": "Преводи",
   "name": "Име",
   "currency": "Валута",
   "amount": "Налични средства",
   "reason": "Причина",
-  "status": "Статут",
+  "status": "Статус",
   "title": "Заглавие",
   "essence": "Същност",
   "coordinator": "Кoординатор",
@@ -41,7 +41,7 @@
     "create": "Кампанията беше създадено успешно!",
     "edit": "Кампанията беше редактирано успешно!",
     "delete": "Кампанията беше преместено в кошчето!",
-    "deleteAll": "Тегленията бяха преместени в кошчето!",
+    "deleteAll": "Кампаниите бяха преместени в кошчето!",
     "error": "Възникна грешка! Моля опитайте отново по-късно.",
     "deletedFile": "Файлът беше изтрит успешно!"
   },

diff --git a/public/locales/bg/common.json b/public/locales/bg/common.json
@@ -82,10 +82,7 @@
     "personId": "Личност",
     "campaignId": "Кампания",
     "sourceCampaignId": "От кампания",
-    "targetCampaignId": "Към кампания",
-    "vaultId": "Трезор",
-    "sourceVaultId": "От трезор",
-    "targetVaultId": "Към трезор"
+    "targetCampaignId": "Към кампания"
   },
   "cta": {
     "read-more": "Прочетете още",

diff --git a/public/locales/bg/expenses.json b/public/locales/bg/expenses.json
@@ -6,7 +6,9 @@
     "type": "Тип",
     "status": "Статус",
     "amount": "Стойност",
-    "vaultId": "Трезор Id",
+    "vault": "Трезор",
+    "sourceVault": "От трезор",
+    "targetVault": "Към трезор",
     "deleted": "Изтрит",
     "description": "Описание",
     "documentId": "Документ Id",

diff --git a/public/locales/bg/withdrawals.json b/public/locales/bg/withdrawals.json
@@ -1,16 +1,17 @@
 {
   "amount-unavailable": "Недостатъчна наличност в трезора!",
   "documentId": "ID на документа",
+  "amount-available": "Налична сума",
   "amount-input": "Въведете сума",
-  "form-heading": "Добави ново теглене",
-  "edit-form-heading": "Редактирай теглене",
-  "all": "Всички тегления",
-  "withdrawals": "Тегления",
+  "form-heading": "Създай нов превод",
+  "edit-form-heading": "Редактирай превод",
+  "all": "Тук отчитаме преводите, които се правят, когато събраните пари по дадена кампания се превеждат към бенефициента.",
+  "withdrawals": "Преводи",
   "name": "Име",
   "currency": "Валута",
   "amount": "Сума",
   "reason": "Причина",
-  "status": "Статут",
+  "status": "Статус",
   "targetDate": "Целева дата",
   "createdAt": "Създаден на",
   "updatedAt": "Обновен на",
@@ -25,10 +26,10 @@
   "actions": "Действия",
   "alerts": {
     "selectRow": "Моля изберете ред",
-    "create": "Тегленето беше създадено успешно!",
-    "edit": "Тегленето беше редактирано успешно!",
-    "delete": "Тегленето беше преместено в кошчето!",
-    "deleteAll": "Тегленията бяха преместени в кошчето!",
+    "create": "Преводът беше създаден успешно!",
+    "edit": "Преводът беше редактиран успешно!",
+    "delete": "Преводът беше преместен в кошчето!",
+    "deleteAll": "Преводите бяха преместени в кошчето!",
     "error": "Възникна грешка! Моля опитайте отново по-късно."
   },
   "cta": {
@@ -38,7 +39,7 @@
     "delete": "Изтрий",
     "deleteSelected": "Изтрий избраните редове",
     "edit": "Редактирай",
-    "details": "Детайли за тегленето",
+    "details": "Детайли за превода",
     "submit": "Изпрати"
   },
   "fields": {

diff --git a/public/locales/en/common.json b/public/locales/en/common.json
@@ -80,11 +80,8 @@
   "fields": {
     "currency": "Currency",
     "personId": "Person",
-    "vaultId": "Vault",
     "sourceCampaignId": "Source campaign",
-    "targetCampaignId": "Target campaign",
-    "sourceVaultId": "Source vault",
-    "targetVaultId": "Target vault"
+    "targetCampaignId": "Target campaign"
   },
   "cta": {
     "read-more": "Read more",

diff --git a/public/locales/en/expenses.json b/public/locales/en/expenses.json
@@ -6,7 +6,7 @@
     "type": "Type",
     "status": "Status",
     "amount": "Amount",
-    "vaultId": "Vault Id",
+    "vault": "Vault",
     "deleted": "Deleted",
     "description": "Description",
     "documentId": "Document Id",

diff --git a/public/locales/en/withdrawals.json b/public/locales/en/withdrawals.json
@@ -1,7 +1,8 @@
 {
   "amount-unavailable": "Insufficient stock in the vault!",
   "documentId": "Document ID",
-  "amount-input": "Amount",
+  "amount-available": "Available amount",
+  "amount-input": "Withdrawal amount",
   "form-heading": "Add new withdrawal",
   "edit-form-heading": "Edit withdrawal",
   "all": "All withdrawals",

diff --git a/src/components/admin/navigation/adminMenu.tsx b/src/components/admin/navigation/adminMenu.tsx
@@ -41,7 +41,7 @@ export const menuPayments = [
   { label: 'Дарения', icon: VolunteerActivismOutlinedIcon, href: routes.admin.donations.index },
   { label: 'Трезори', icon: Shield, href: routes.admin.vaults.index },
   { label: 'Банкови сметки', icon: Payment, href: routes.admin.bankaccounts.index },
-  { label: 'Тегления', icon: LocalAtmIcon, href: routes.admin.withdrawals.index },
+  { label: 'Преводи', icon: LocalAtmIcon, href: routes.admin.withdrawals.index },
   { label: 'Прехвърляния', icon: MoveUp, href: routes.admin.transfer.index },
   { label: 'Разходи', icon: Paid, href: routes.admin.expenses.index },
   {
@@ -72,7 +72,7 @@ export const adminCards = [
   { label: 'Организатори', icon: Group, href: routes.admin.organizers.index },
   { label: 'ЮЛНЦ', icon: Group, href: routes.admin.company.create },
   { label: 'Банкови сметки', icon: Payment, href: routes.admin.bankaccounts.index },
-  { label: 'Тегления', icon: LocalAtmIcon, href: routes.admin.withdrawals.index },
+  { label: 'Преводи', icon: LocalAtmIcon, href: routes.admin.withdrawals.index },
   { label: 'Разходи', icon: Paid, href: routes.admin.expenses.index },
   { label: 'Трезори', icon: Shield, href: routes.admin.vaults.index },
   { label: 'Прехвърляния', icon: MoveUp, href: routes.admin.transfer.index },

diff --git a/src/components/campaigns/CampaignSelect.tsx b/src/components/campaigns/CampaignSelect.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { useField } from 'formik'
+import { useField, useFormikContext } from 'formik'
 import { useTranslation } from 'next-i18next'
 
 import { FormControl, MenuItem, TextFieldProps } from '@mui/material'
@@ -8,16 +8,32 @@ import { CampaignResponse } from 'gql/campaigns'
 
 import FormTextField from 'components/common/form/FormTextField'
 
+export type SetFieldValueType = (field: string, value: unknown, shouldValidate?: boolean) => void
+
 type Props = {
   label: string
   name: string
   campaigns?: CampaignResponse[]
+  handleCampaignSelected?: (campaignId: string, setFieldValue: SetFieldValueType) => void
 } & TextFieldProps
 
-export default function CampaignSelect({ label, name, campaigns, ...textFieldProps }: Props) {
+export default function CampaignSelect({
+  label,
+  name,
+  campaigns,
+  handleCampaignSelected,
+  ...textFieldProps
+}: Props) {
   const { t } = useTranslation()
 
   const [field, meta] = useField(name)
+  const { setFieldValue } = useFormikContext()
+
+  const handleChange = (event: React.ChangeEvent<{ value: unknown }>) => {
+    setFieldValue(name, event.target.value)
+
+    if (handleCampaignSelected) handleCampaignSelected(event.target.value as string, setFieldValue)
+  }
 
   return (
     <FormControl
@@ -31,8 +47,9 @@ export default function CampaignSelect({ label, name, campaigns, ...textFieldPro
         fullWidth
         defaultValue=""
         label={t(label)}
+        {...textFieldProps}
         {...field}
-        {...textFieldProps}>
+        onChange={handleChange}>
         <MenuItem value="" disabled>
           {t(label)}
         </MenuItem>

diff --git a/src/components/common/form/FormTextField.tsx b/src/components/common/form/FormTextField.tsx
@@ -24,8 +24,8 @@ export default function FormTextField({ label, name, ...textFieldProps }: Regist
       variant="outlined"
       error={Boolean(meta.error) && Boolean(meta.touched)}
       helperText={helperText}
+      {...field} //this and the following needs to be in exact this order for the onChange event to not be overriden and silenced
       {...textFieldProps}
-      {...field}
     />
   )
 }
diff --git a/src/components/common/form/GenericForm.tsx b/src/components/common/form/GenericForm.tsx
@@ -1,9 +1,12 @@
-import { Form, Formik, FormikConfig } from 'formik'
+import { Form, Formik, FormikConfig, FormikValues } from 'formik'
 import React, { PropsWithChildren } from 'react'
 
 export type GenericFormProps<T> = PropsWithChildren<FormikConfig<T>>
 
-export default function GenericForm<T>({ children, ...formProps }: GenericFormProps<T>) {
+export default function GenericForm<T extends FormikValues>({
+  children,
+  ...formProps
+}: GenericFormProps<T>) {
   return (
     <Formik<T> {...formProps}>
       <Form>{children}</Form>

diff --git a/src/components/expenses/Form.tsx b/src/components/expenses/Form.tsx
@@ -151,7 +151,12 @@ export default function Form() {
             <CurrencySelect />
           </Grid>
           <Grid item xs={6}>
-            <VaultSelect disabled={id ? true : false} />
+            <VaultSelect
+              name="vaultId"
+              label="expenses:fields.vault"
+              disabled={id ? true : false}
+              vaults={vaults}
+            />
           </Grid>
           <Grid item xs={6}>
             <DocumentSelect />

diff --git a/src/components/faq/contents/campaigns.tsx b/src/components/faq/contents/campaigns.tsx
@@ -229,7 +229,7 @@ export const CAMPAIGN_QUESTIONS: ContentType[] = [
     ),
   },
   {
-    header: 'В какъв етап на одобрение се намира кампанията ми? С какъв статут е към момента?',
+    header: 'В какъв етап на одобрение се намира кампанията ми? С какъв статус е към момента?',
     content: (
       <ContentTypography>
         Пишете ни на: [email protected] и ще Ви информираме при първа възможност.
@@ -284,7 +284,7 @@ export const CAMPAIGN_QUESTIONS: ContentType[] = [
     ),
   },
   {
-    header: 'Защо кампанията ми е със статут “Успешно завършена”?',
+    header: 'Защо кампанията ми е със статус “Успешно завършена”?',
     content: (
       <ContentTypography>
         Това означава, че финансовата цел на кампанията е постигната и средствата са събрани.
@@ -295,7 +295,7 @@ export const CAMPAIGN_QUESTIONS: ContentType[] = [
     ),
   },
   {
-    header: 'Защо кампанията ми е със статут “Прекратена”?',
+    header: 'Защо кампанията ми е със статус “Прекратена”?',
     content: (
       <ContentTypography>
         Причините може да са 2:

diff --git a/src/components/transfers/CreateForm.tsx b/src/components/transfers/CreateForm.tsx
@@ -25,7 +25,7 @@ import { TransferStatus } from './TransferTypes'
 import CampaignSelect from '../campaigns/CampaignSelect'
 import { useVaultsList } from 'common/hooks/vaults'
 import PersonSelect from 'components/person/PersonSelect'
-import { toMoney } from 'common/util/money'
+import { fromMoney, toMoney } from 'common/util/money'
 
 type Props = {
   campaigns: CampaignResponse[]
@@ -67,7 +67,7 @@ export default function CreateForm({ campaigns }: Props) {
           test: function (value) {
             const currentValt = vaults?.find((curr) => curr.id == this.parent.sourceVaultId)
             const currentAmount = Number(currentValt?.amount) - Number(currentValt?.blockedAmount)
-            return value! < Number(currentAmount)
+            return value ? value < Number(fromMoney(currentAmount)) : false
           },
         }),
       otherwise: yup.number().positive().integer().required(),
@@ -149,7 +149,7 @@ export default function CreateForm({ campaigns }: Props) {
             />
           </Grid>
           <Grid item xs={12}>
-            <VaultSelect name="sourceVaultId" />
+            <VaultSelect label="transfer:sourceVault" name="sourceVaultId" vaults={vaults} />
           </Grid>
           <Grid item xs={12}>
             <CampaignSelect
@@ -159,7 +159,7 @@ export default function CreateForm({ campaigns }: Props) {
             />
           </Grid>
           <Grid item xs={12}>
-            <VaultSelect name="targetVaultId" />
+            <VaultSelect label="transfer:targetVault" name="targetVaultId" vaults={vaults} />
           </Grid>
           <Grid item xs={12}>
             <PersonSelect name="approvedById" label={t('approvedBy')} />

diff --git a/src/components/transfers/EditForm.tsx b/src/components/transfers/EditForm.tsx
@@ -160,7 +160,7 @@ export default function EditForm({ transfer, campaigns, id }: Props) {
             />
           </Grid>
           <Grid item xs={12}>
-            <VaultSelect disabled={true} name="sourceVaultId" />
+            <VaultSelect label="transfer:sourceVault" disabled={true} name="sourceVaultId" />
           </Grid>
           <Grid item xs={12}>
             <CampaignSelect
@@ -170,7 +170,7 @@ export default function EditForm({ transfer, campaigns, id }: Props) {
             />
           </Grid>
           <Grid item xs={12}>
-            <VaultSelect name="targetVaultId" />
+            <VaultSelect name="targetVaultId" label="transfer:targetVault" />
           </Grid>
           <Grid item xs={6}>
             <SubmitButton fullWidth label={t('transfer:cta:submit')} />

diff --git a/src/components/vaults/VaultSelect.tsx b/src/components/vaults/VaultSelect.tsx
@@ -1,15 +1,36 @@
 import { useTranslation } from 'react-i18next'
-import { FormControl, MenuItem } from '@mui/material'
-import { useField } from 'formik'
+import { FormControl, MenuItem, TextFieldProps } from '@mui/material'
+import { useField, useFormikContext } from 'formik'
 
-import { useVaultsList } from 'common/hooks/vaults'
 import FormTextField from 'components/common/form/FormTextField'
+import { VaultResponse } from 'gql/vault'
 
-export default function VaultSelect({ name = 'vaultId', ...textFieldProps }) {
+export type SetFieldValueType = (field: string, value: unknown, shouldValidate?: boolean) => void
+
+type Props = {
+  label: string
+  name: string
+  vaults?: VaultResponse[]
+  handleVaultSelected?: (vaultId: string, setFieldValue: SetFieldValueType) => void
+} & TextFieldProps
+
+export default function VaultSelect({
+  label,
+  name,
+  vaults,
+  handleVaultSelected,
+  ...textFieldProps
+}: Props) {
   const { t } = useTranslation()
 
-  const { data: values } = useVaultsList()
   const [field, meta] = useField(name)
+  const { setFieldValue } = useFormikContext()
+
+  const handleChange = (event: React.ChangeEvent<{ value: unknown }>) => {
+    setFieldValue(name, event.target.value)
+
+    if (handleVaultSelected) handleVaultSelected(event.target.value as string, setFieldValue)
+  }
 
   return (
     <FormControl
@@ -22,15 +43,16 @@ export default function VaultSelect({ name = 'vaultId', ...textFieldProps }) {
         type="text"
         fullWidth
         defaultValue=""
-        label={t('fields.' + name)}
+        label={t(label)}
         {...field}
-        {...textFieldProps}>
+        {...textFieldProps}
+        onChange={handleChange}>
         <MenuItem value="" disabled>
           {t('fields.' + name)}
         </MenuItem>
-        {values?.map((value, index) => (
+        {vaults?.map((value, index) => (
           <MenuItem key={index} value={value.id}>
-            {value.id}
+            {value.name}
           </MenuItem>
         ))}
       </FormTextField>