From f822f19b04e991649311ea04ea859d12f97f28cc Mon Sep 17 00:00:00 2001
From: adrian <adrian.martinez@willdom.com>
Date: Tue, 18 Jul 2023 11:31:15 -0400
Subject: [PATCH 01/22] agroup

---
 src/pages/ocp/HomeOCP.tsx | 2 +-
 src/schemas/statitics.ts  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/ocp/HomeOCP.tsx b/src/pages/ocp/HomeOCP.tsx
index 7321bfe..ef083a6 100644
--- a/src/pages/ocp/HomeOCP.tsx
+++ b/src/pages/ocp/HomeOCP.tsx
@@ -255,7 +255,7 @@ export function HomeOCP() {
         <div className="grid lg:gap-10 grid-cols-1 lg:grid-cols-2 md:grid-cols-1 sm:grid-cols-1">
           <div className="col-span-1">
             <DashboardChartContainer label={t('Breakdown of FIs chosen by MSME')}>
-              <ChartBar data={data.fis_choosen_by_msme} />
+              <ChartBar data={data.opt_in_stat.fis_choosen_by_msme} />
             </DashboardChartContainer>
           </div>
         </div>
diff --git a/src/schemas/statitics.ts b/src/schemas/statitics.ts
index ecfb919..5bb29ba 100644
--- a/src/schemas/statitics.ts
+++ b/src/schemas/statitics.ts
@@ -23,6 +23,7 @@ export interface OptInStat {
   opt_in_percentage: number;
   sector_statistics: ChartData[];
   rejected_reasons_count_by_reason: ChartData[];
+  fis_choosen_by_msme: ChartData[];
 }
 
 export interface StatisticsFI {
@@ -31,7 +32,6 @@ export interface StatisticsFI {
 
 export interface StatisticsOCPoptIn {
   opt_in_stat: OptInStat;
-  fis_choosen_by_msme: ChartData[];
 }
 
 export interface StatisticsParmsInput {

From 746e40410d6a5fc4dd8c5f72b1d3fc4f2365d192 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nahuel=20Hern=C3=A1ndez?= <jnahuelhernandez@gmail.com>
Date: Mon, 24 Jul 2023 09:00:42 -0400
Subject: [PATCH 02/22] feat: date range option selector

---
 src/components/LendersButtonGroup.tsx |  2 +-
 src/constants/index.ts                | 22 ++++++++++++++++++
 src/hooks/useGetStatisticsOCP.ts      |  7 ++++--
 src/pages/ocp/HomeOCP.tsx             | 33 ++++++++++++++++++++++++---
 src/schemas/statitics.ts              |  1 +
 src/stories/form-input/FormInput.tsx  |  2 +-
 6 files changed, 60 insertions(+), 7 deletions(-)

diff --git a/src/components/LendersButtonGroup.tsx b/src/components/LendersButtonGroup.tsx
index edf0f06..0aba652 100644
--- a/src/components/LendersButtonGroup.tsx
+++ b/src/components/LendersButtonGroup.tsx
@@ -38,7 +38,7 @@ export function LendersButtonGroup({ onLenderSelected }: LendersButtonGroupProps
 
   return (
     <Box className="py-2 flex flex-col">
-      <ButtonGroup variant="outlined" aria-label="lender selector">
+      <ButtonGroup className="rounded-none" variant="outlined" aria-label="lender selector">
         <Button
           className="bg-white text-moodyBlue font-medium"
           label={t('All FIs')}
diff --git a/src/constants/index.ts b/src/constants/index.ts
index 79e5a4f..d7521ce 100644
--- a/src/constants/index.ts
+++ b/src/constants/index.ts
@@ -117,6 +117,28 @@ export const CREDIT_PRODUCT_OPTIONS: FormSelectOption[] = [
   },
 ];
 
+// eslint-disable-next-line no-shadow
+export enum STATISTICS_DATE_FILTER {
+  CUSTOM_RANGE = 'CUSTOM_RANGE',
+  LAST_WEEK = 'LAST_WEEK',
+  LAST_MONTH = 'LAST_MONTH',
+}
+
+export const STATISTICS_DATE_FILTER_OPTIONS: FormSelectOption[] = [
+  {
+    value: STATISTICS_DATE_FILTER.CUSTOM_RANGE,
+    label: t('Custom range'),
+  },
+  {
+    value: STATISTICS_DATE_FILTER.LAST_WEEK,
+    label: t('Last week'),
+  },
+  {
+    value: STATISTICS_DATE_FILTER.LAST_MONTH,
+    label: t('Last month'),
+  },
+];
+
 // eslint-disable-next-line no-shadow
 export enum DOCUMENTS_TYPE {
   INCORPORATION_DOCUMENT = 'INCORPORATION_DOCUMENT',
diff --git a/src/hooks/useGetStatisticsOCP.ts b/src/hooks/useGetStatisticsOCP.ts
index 13b0569..de5ec66 100644
--- a/src/hooks/useGetStatisticsOCP.ts
+++ b/src/hooks/useGetStatisticsOCP.ts
@@ -13,6 +13,7 @@ type IUseGetStatisticsOCP = {
 };
 
 export default function useGetStatisticsOCP(
+  customRange: string,
   initialDate: string | null,
   finalDate: string | null,
   lenderId: number | null,
@@ -21,9 +22,11 @@ export default function useGetStatisticsOCP(
   const { enqueueSnackbar } = useSnackbar();
 
   const { data, isLoading } = useQuery<StatisticsFI>({
-    queryKey: [QUERY_KEYS.statistics_ocp, `${initialDate}-${finalDate}-${lenderId}`],
+    queryKey: [QUERY_KEYS.statistics_ocp, `${customRange}-${initialDate}-${finalDate}-${lenderId}`],
     queryFn: () => {
-      const params: StatisticsParmsInput = {};
+      const params: StatisticsParmsInput = {
+        custom_range: customRange,
+      };
       if (initialDate !== null) {
         params.initial_date = initialDate;
       }
diff --git a/src/pages/ocp/HomeOCP.tsx b/src/pages/ocp/HomeOCP.tsx
index ef083a6..d652cb9 100644
--- a/src/pages/ocp/HomeOCP.tsx
+++ b/src/pages/ocp/HomeOCP.tsx
@@ -1,4 +1,4 @@
-import { Container } from '@mui/material';
+import { Container, MenuItem, Select, SelectChangeEvent } from '@mui/material';
 import { useT } from '@transifex/react';
 import dayjs, { Dayjs } from 'dayjs';
 import { useEffect, useState } from 'react';
@@ -8,6 +8,7 @@ import Title from 'src/stories/title/Title';
 
 import { ChartBar, ChartPie } from '../../components/Charts';
 import LendersButtonGroup from '../../components/LendersButtonGroup';
+import { STATISTICS_DATE_FILTER, STATISTICS_DATE_FILTER_OPTIONS } from '../../constants';
 import CURRENCY_FORMAT_OPTIONS from '../../constants/intl';
 import useGetStatisticsOCP from '../../hooks/useGetStatisticsOCP';
 import useGetStatisticsOCPoptIn from '../../hooks/useGetStatisticsOCPoptIn';
@@ -15,7 +16,7 @@ import { DECLINE_FEEDBACK_NAMES } from '../../schemas/application';
 import { ChartData } from '../../schemas/statitics';
 import DashboardChartContainer from '../../stories/dashboard/DashboardChartContainer';
 import DashboardItemContainer from '../../stories/dashboard/DashboardItemContainer';
-import { DatePicker } from '../../stories/form-input/FormInput';
+import { DatePicker, Input } from '../../stories/form-input/FormInput';
 import Loader from '../../stories/loader/Loader';
 import { formatCurrency, renderSector } from '../../util';
 
@@ -46,6 +47,7 @@ export function HomeOCP() {
   const [initialDate, setInitialDate] = useState<string | null>(null);
   const [finalDate, setFinalDate] = useState<string | null>(null);
   const [lenderId, setLenderId] = useState<number | null>(null);
+  const [dateFilterRange, setDataFilterRange] = useState<string>(STATISTICS_DATE_FILTER.CUSTOM_RANGE);
 
   const isBeforeInitialDate = (date: unknown) => {
     if (!initialDate) return false;
@@ -57,7 +59,16 @@ export function HomeOCP() {
     return dayjs(date as string).isAfter(dayjs(finalDate));
   };
 
-  const { data: dataKPI, isLoading: isLoadingKPI } = useGetStatisticsOCP(initialDate, finalDate, lenderId);
+  const handleChangeSelectDateFilter = (event: SelectChangeEvent) => {
+    setDataFilterRange(event.target.value as string);
+  };
+
+  const { data: dataKPI, isLoading: isLoadingKPI } = useGetStatisticsOCP(
+    dateFilterRange,
+    initialDate,
+    finalDate,
+    lenderId,
+  );
 
   return (
     <>
@@ -116,9 +127,24 @@ export function HomeOCP() {
       <LendersButtonGroup onLenderSelected={(id: number | null) => setLenderId(id)} />
       <Title type="subsection" label={t('Data Range')} className="mb-6 mt-10" />
       <div className="mt-6 md:mb-8 grid grid-cols-1 gap-4 md:flex md:gap-0">
+        <div className="md:mr-4">
+          <Select
+            displayEmpty
+            disableUnderline
+            input={<Input />}
+            value={dateFilterRange}
+            onChange={handleChangeSelectDateFilter}>
+            {STATISTICS_DATE_FILTER_OPTIONS.map((option) => (
+              <MenuItem key={`key-${option.value}`} value={option.value}>
+                {option.label}
+              </MenuItem>
+            ))}
+          </Select>
+        </div>
         <div className="md:mr-4">
           <DatePicker
             shouldDisableDate={isAfterFinalDate}
+            disabled={dateFilterRange !== STATISTICS_DATE_FILTER.CUSTOM_RANGE}
             onChange={(value: unknown) => {
               const date = value as Dayjs;
               if (date.isValid()) {
@@ -139,6 +165,7 @@ export function HomeOCP() {
         <div>
           <DatePicker
             shouldDisableDate={isBeforeInitialDate}
+            disabled={dateFilterRange !== STATISTICS_DATE_FILTER.CUSTOM_RANGE}
             onChange={(value: unknown) => {
               const date = value as Dayjs;
               if (date.isValid()) {
diff --git a/src/schemas/statitics.ts b/src/schemas/statitics.ts
index 5bb29ba..4be3c78 100644
--- a/src/schemas/statitics.ts
+++ b/src/schemas/statitics.ts
@@ -35,6 +35,7 @@ export interface StatisticsOCPoptIn {
 }
 
 export interface StatisticsParmsInput {
+  custom_range?: string;
   initial_date?: string;
   final_date?: string;
   lender_id?: number;
diff --git a/src/stories/form-input/FormInput.tsx b/src/stories/form-input/FormInput.tsx
index 1c352b3..5a8fb53 100644
--- a/src/stories/form-input/FormInput.tsx
+++ b/src/stories/form-input/FormInput.tsx
@@ -135,7 +135,7 @@ export const DatePicker = styled(MUIDatePicker)`
   }
   &.MuiTextField-root {
     background-color: white;
-    padding: 17px 18px;
+    padding: 18px 18px;
     margin-bottom: 0.5rem;
     border-width: 1px;
     border-style: solid;

From 230d33e797fb281db7064391580abdab471a8052 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nahuel=20Hern=C3=A1ndez?= <jnahuelhernandez@gmail.com>
Date: Mon, 24 Jul 2023 09:05:47 -0400
Subject: [PATCH 03/22] fix: linter

---
 .eslintrc.cjs                                           | 1 +
 src/components/ApplicationTableDataPreviousAwardRow.tsx | 2 +-
 src/components/Charts.tsx                               | 4 ++--
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index c1db2c4..11ff0ee 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -43,6 +43,7 @@ module.exports = {
   rules: {
     'react-refresh/only-export-components': 'warn',
     'react/react-in-jsx-scope': 'off',
+    'react/jsx-curly-brace-presence': 'off',
     'react/jsx-filename-extension': [2, { extensions: ['.js', '.jsx', '.ts', '.tsx'] }],
     'import/extensions': [
       'error',
diff --git a/src/components/ApplicationTableDataPreviousAwardRow.tsx b/src/components/ApplicationTableDataPreviousAwardRow.tsx
index dc1a898..433f85a 100644
--- a/src/components/ApplicationTableDataPreviousAwardRow.tsx
+++ b/src/components/ApplicationTableDataPreviousAwardRow.tsx
@@ -1,4 +1,4 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
+ 
 import { Box, Paper, Table, TableBody, TableContainer, TableHead, TableRow } from '@mui/material';
 import { useT } from '@transifex/react';
 import { useState } from 'react';
diff --git a/src/components/Charts.tsx b/src/components/Charts.tsx
index a32e9fd..b512a86 100644
--- a/src/components/Charts.tsx
+++ b/src/components/Charts.tsx
@@ -1,4 +1,4 @@
-/* eslint-disable react/require-default-props */
+ 
 
 /* eslint-disable react/no-array-index-key */
 
@@ -32,7 +32,7 @@ export function ChartPie({ data }: ChartsProps) {
       <PieChart width={400} height={400}>
         <Pie data={data} cx="50%" cy="50%" labelLine={false} outerRadius={80} fill="#8884d8" dataKey="value">
           {data.map((_entry, index) => (
-            // eslint-disable-next-line react/no-array-index-key
+             
             <Cell key={`cell-${index}`} fill={COLORS_TO_FILL[index % COLORS_TO_FILL.length]} />
           ))}
         </Pie>

From 821378340cb1aa0ef03ccd104c336a5fe2adf10b Mon Sep 17 00:00:00 2001
From: adrian <adrian.martinez@willdom.com>
Date: Thu, 27 Jul 2023 18:02:31 -0400
Subject: [PATCH 04/22] added set pasword image in spanish

---
 public/images/es/set_password.png | Bin 0 -> 3007 bytes
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 public/images/es/set_password.png

diff --git a/public/images/es/set_password.png b/public/images/es/set_password.png
new file mode 100644
index 0000000000000000000000000000000000000000..659672c9d29b41401bb7a05fddc390813b9b9433
GIT binary patch
literal 3007
zcmV;w3qbUVP)<h;3K|Lk000e1NJLTq00930000^Y1^@s6c!7%h00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH3sgx&K~#7F?Od@^
z8_N=HVO-_x>P9X{EZNH}YzIzWS!C};;4eUYfg!sYQurdo7a*cnFEWHLvdC^=8}S9K
zBRjhy#ARFeoYff^4ZEwAfLr+1oT~L|XJ>kPx_f$hde+pe1dT?czOb;cRjburjYgvc
zMTuSwQ8qx?;g26bjs}B4Y7r3;KNV_ug_!iog9i`xF}a&o4Lvx4PILkh5kC(egayx@
zJ>yFMU;O-sRYwDDT2G!lx%m9~^Y0cB5pnM^vGQZ$w{hFCo1ydZ<Hxqm0rn3kvQ+T;
z=);E(hjxc>{iC1FvU)FGyl5gS+Cbfd_wV2LEh6GCgd+1D*x(Qm_Z}l|*lr8I5Al0g
zmCmC3!4=<bKJkei&>F%4bZtf`x6mwjo#L80`6&d_`TqU;_AG)3`Y)aQ5ORWB3s>JF
z{+77U4jy^9cd$X)c9xTa%`^X2hrRb^qQigaN$hqezQc}a&IL|DCK&yT9<E|@PGCBK
zUo0YGPSC;Aj&Lp6Jp*{#IypI60dK4L&4r4S|FzACY~_dd;KZ-zRRGZx6DhITP)D16
z+*fTrq!`>Mi-?H02CVQ$x~I7Hbj^%Kt<bHKI^0VvV>0i|;sj8)$)mzqL+>hJNCuwP
z^qBIv5%(dS*gB&G^v(X)(f=v>@3RueiT7(LZ{V?yZNU-tO^h(=*rN2pKAt~+PFk<{
z8|{v&gnr`d73GAsgS=x<9iMKPj!k)FiX6j1K;tR-%%h>bUCMFk_Xxia^7!ExcxSG}
zZHMU0(dNL>lw6vQrpIR!<w>}Y^kwh!?$z)6{Gz;p@&?KWL@<8tSq~)RX4p0luD#^L
zBj;m37v$?X9BVM%fsJj3V@dq6__}8l3fa{t2iDVA_?vvJIsF8D4P=u^D8o>Gu)|}Y
zzq0r0W1YIf<G}T2vgdHF<>|_|pBf(C;9cSVoP)<Id@P|cLTFiav@x+dRVzd2@3iMm
z!*`&w%sZLKZ9m{KWe5cR&VuqjcwbeUU7L(<Qd|^P1GH;F|J-7{30UZ&-nP#JPdJ>x
z6eLS&e6MNre9%OAYggY(OwcZ%!3nbJXrRuB<3iu3<k5}Ma)7#LlEX3TZ{*RGfxJUm
z4?JvoZ7JiHr~f*f<=dQ`49B>FaZz4vUrwTP!l7#`_lf(}aQysUgwEQRXTf+{c3qEI
z7>uFpl_ab$dGg1LYu%^i*~?iDk8}_%juGu!7zgJ}UE?~}xF+mNQFFG1Wh9%&pRd1_
zm6cwgr;Lttm1+*2N&iW}W2Oh^019YvF7CKK7btWq0h#BWozpnj0S9FjFvE8OVY_RW
z$IphN4PJhg@Hfey@&kun-z`NpG~_z!w^fI2vWZ{NKRx=oat)gr?-rcHMqYgxWhPX$
z`Bi(dx+c3@ak7bzcU{$6;cw<MXq2MC{afacM8jlQJ~)}k3+eQ%9EpwdAWdCv)p}zy
z0QGkz^RC9XOnKUPb$g?n3}xE7WO6L~Yz3wRf%D+R&2%JM9DjS74SKZpX$!s{ZM<+D
zcsfX(?lj&M<y%T<```-LlRY=xM5TikT~~k0O<va!_1Hh1aaRtFdae6<#dF`y9S_+m
zO#MoR>#iR~W*g+mvmrXHL|bU{`lsv;eco9Q@?G<3`Ld85PuTAw8L@J-;YBDAX3tZt
zK+BNP4hG#WYdA-)z@b^R=Vz9aVZDuowoRjQ@8n%w=#%Q%8F?41yC~!n_+JGbdicCt
zM+<cw-5%=FFqmO&;rZIiBtaX5-&tH-tchm-;^LyO?MD{++IS-NK-;a19AmbkL&m!t
z7iesQ#`(*aFIl($_3KwoRywh!3(HZDhPI6HrB(q<26@rPDS4`(_iHkt!9RNRXwR->
zb^!jU2d=ywjKPgJ<5eLw`)_md;=V3N;3uaB&{1MjB1%P_q_yR3b11(|PfpK_0KG8U
z>6y_7+jl*g^gTVWJ>PX9|ECI%&smPPJh=*Oap+cSZ4nZ?uGdY-Bk>)8wkf1ZhthF-
zcOm2d;lqb};KA9@A>_-@z6n}OZV{vmecr*tHp<?Lk4t;>^=_UWU&_=95`8|XP=*@}
zTNwVajLN0~T6wY|v0Db6ki4|xX@APeLPPB)jtLbW<sKdS4n=kQycan$Cv=9BP}Z5d
z+=@nn!tJT*_VQ>r+93_oqyUX2ufM@8UsHMp;KrRfkgDySe7V2$c@uwiUF0h}k#UpW
zt|s&`9Gaui59y=qXc`Zm>`x1-P|s;77d`W;a{_tv`a%11s|d91x!)M`(*k<gKHGnG
zwu_&w9NW$86npoRK)%jNCmyLm(9baFhi!(w-m^wtPKQ{qiWrSQC>RCB^&712bAigl
z<XrZ`aSHOCb4o=(-D~fQc%MeA0K-vmJn1ebV_YRBfXawaanoqnIJ~Zk)aF2*ycDkI
zj*;(aTndNXc8f;H6*2wx?c0qKzdF~Z&i*K<lAU{((cs?PZUGvj-*2wGLVh?IN8{tU
zwzFL?q$i!UNWQo(onAQEbCAg*wBzuZlRqt^qDfC?m$}+=<scD;NigJ-QTe|9MhY(j
zKWLy6VEATZub327<v$Fy{6dAH&AbK}SId9)_KSVX2g{lKS>aa0UFh>QFUm~WU(?p1
zhz9vw4QMcI-Moua69SVm<=stS2W62nX!RT_c~uMeqZ6)q?HEmQQP>sTo?c}%aIJ@t
z8tP2_#>B0nIeK(a2jA1+C-${E@n|Sox^)>spQq}-<xeh+v1tLX+B$dW1WYnjNKgK0
zlgl~sZO+2G9LqI3<_AIk^WtdwIsUr0|8-ey?oXz!j)8})3^3V)(!%1N_F`xHABBCD
zC%O;)J82+^)`4*!&|oNJWu7zRwDLVBzfxp4m+I(-21G^Yo?I~5#UmIde$cLmqGPmM
zb9-DUovUA8d*Y_D$*h+pZ?LL&M5BeGUG+_w^SG%+2MikByD(lFBlt?i*S^Nggi>9(
z6*tBXlYWe{G{&KF2TdL!n!f4KIJWd|;I>fYUHj^`XdK#=LrJFbNxICoQ<t!f#7%Y^
zM;T0fZF4_My@Phs6zVfaAQD?P19%(;T3NmV^mrV+S0KMjy)w5T*<^fi-|b}RGWB{N
zZU-2VbVx%sMA-~H`O=1_ZjC&89pxH!^X%ARA#bme2WF#Xw1po8h0rQ6Ge%dLY5z*J
zS`Rgdt}bRW+itH%BN>e|=4`V>qobFVH{@#8#<j)FY|+@2Wn~|2P2i!9?9#mYTvGVn
zg>p8|O0!*G2`CpDGSStuvBPSMeiQenq|GB8pN5SMXoALFfP8uV@+gbNeVZI(R}o-c
zymuwz!;$xOndIFU-L6kV$G(})Y&;p;`c%4WQ{d^bFa5V|oQdb_SJHtmKleTz>A2En
zfcD23ui>N#f%lurDJ5RNgTVe1kGITrN8^)=Esl--$%clmj^sPD{ykc$UFozLMx8Z%
zI8d~Y%9um4X?--uu^khFvm~aff;>a8E`fGhRWQuDquno6+PFUGmBYkIl|HQGD@C8S
zjgwTvS!vuhW*IM5I`;w0>0l10G_P#E_ROL$O_Sfe^yh`+%gS|M$~)oYYqy~PGF{bF
z;a%<endD6|@zF>`M8y3<mhETQVz-!_Q<&Vbh=_=Li|mhieEITa`1tYT3#|VCvReQq
z|8EE}{%;Wx5%(6Cf5`_9;CDCxyJ`5Z<lBENA|m2mW8%+v!2uk@0i44Dyu{-pn*qwg
z{}v~HM8wa5Yk$K}5y1cS`Deo_K*tgPj-h@;#Lt6T*-L$;w5D&=8*&Kl3!+r#xqEkc
z1|1O*aW|;hJwf{ApCgNii1^D;`9JnVL`3|(@F!)B{G1YCfj0mE002ovPDHLkV1het
B`tJY$

literal 0
HcmV?d00001


From d906ce4aec6819fe8fd22667d1703a60bf4a996d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nahuel=20Hern=C3=A1ndez?= <jnahuelhernandez@gmail.com>
Date: Tue, 1 Aug 2023 13:52:34 -0400
Subject: [PATCH 05/22] feat: data missign update by information in award and
 borrower tables

---
 src/components/ApplicationAwardTable.tsx      | 11 ++++++
 src/components/ApplicationBorrowerTable.tsx   |  7 ++++
 .../ApplicationTableDataAwardRow.tsx          | 10 ++++-
 .../ApplicationTableDataBorrowerRow.tsx       |  6 ++-
 .../ApplicationTableDataDocumentRow.tsx       |  3 +-
 .../ApplicationTableDataPreviousAwardRow.tsx  |  3 +-
 src/components/ApplicationTableDataRow.tsx    | 10 ++++-
 src/components/DataAvailability.tsx           | 37 +++++++++++++++----
 src/schemas/application.ts                    | 12 +++++-
 9 files changed, 83 insertions(+), 16 deletions(-)

diff --git a/src/components/ApplicationAwardTable.tsx b/src/components/ApplicationAwardTable.tsx
index 7b44ba7..3169a91 100644
--- a/src/components/ApplicationAwardTable.tsx
+++ b/src/components/ApplicationAwardTable.tsx
@@ -58,6 +58,7 @@ export function ApplicationAwardTable({ application, readonly = false, className
               name="title"
               label={t('Award Title')}
               award={award}
+              modifiedFields={application.modified_data_fields?.award_updates}
             />
             <ApplicationTableDataAwardRow
               isLoading={isLoading}
@@ -67,6 +68,7 @@ export function ApplicationAwardTable({ application, readonly = false, className
               name="contracting_process_id"
               label={t('Contracting Process ID')}
               award={award}
+              modifiedFields={application.modified_data_fields?.award_updates}
             />
             <ApplicationTableDataAwardRow
               isLoading={isLoading}
@@ -76,6 +78,7 @@ export function ApplicationAwardTable({ application, readonly = false, className
               name="description"
               label={t('Award Description')}
               award={award}
+              modifiedFields={application.modified_data_fields?.award_updates}
             />
             <ApplicationTableDataAwardRow
               type="date-field"
@@ -87,6 +90,7 @@ export function ApplicationAwardTable({ application, readonly = false, className
               label={t('Award Date')}
               award={award}
               formatter={formatDateFromString}
+              modifiedFields={application.modified_data_fields?.award_updates}
             />
             <ApplicationTableDataAwardRow
               type="currency"
@@ -99,6 +103,7 @@ export function ApplicationAwardTable({ application, readonly = false, className
               formLabel={t('Award Amount')}
               award={award}
               formatter={(value) => `${award.award_currency} ${formatCurrency(value, award.award_currency)}`}
+              modifiedFields={application.modified_data_fields?.award_updates}
             />
             <ApplicationTableDataAwardRow
               type="date-field"
@@ -110,6 +115,7 @@ export function ApplicationAwardTable({ application, readonly = false, className
               label={t('Contract Start Date')}
               award={award}
               formatter={formatDateFromString}
+              modifiedFields={application.modified_data_fields?.award_updates}
             />
             <ApplicationTableDataAwardRow
               type="date-field"
@@ -121,6 +127,7 @@ export function ApplicationAwardTable({ application, readonly = false, className
               label={t('Contract End Date')}
               award={award}
               formatter={formatDateFromString}
+              modifiedFields={application.modified_data_fields?.award_updates}
             />
             <ApplicationTableDataAwardRow
               preWhitespace
@@ -132,6 +139,7 @@ export function ApplicationAwardTable({ application, readonly = false, className
               label={t('Payment Method')}
               award={award}
               formatter={formatPaymentMethod}
+              modifiedFields={application.modified_data_fields?.award_updates}
             />
             <ApplicationTableDataAwardRow
               isLoading={isLoading}
@@ -141,6 +149,7 @@ export function ApplicationAwardTable({ application, readonly = false, className
               name="buyer_name"
               label={t('Buyer Name')}
               award={award}
+              modifiedFields={application.modified_data_fields?.award_updates}
             />
             <ApplicationTableDataAwardRow
               isLoading={isLoading}
@@ -150,6 +159,7 @@ export function ApplicationAwardTable({ application, readonly = false, className
               name="procurement_method"
               label={t('Procurement Method')}
               award={award}
+              modifiedFields={application.modified_data_fields?.award_updates}
             />
             <ApplicationTableDataAwardRow
               isLoading={isLoading}
@@ -159,6 +169,7 @@ export function ApplicationAwardTable({ application, readonly = false, className
               name="procurement_category"
               label={t('Contract Type')}
               award={award}
+              modifiedFields={application.modified_data_fields?.award_updates}
             />
             <ApplicationTableDataPreviousAwardRow
               label={t('Previous Public Sector Contracts')}
diff --git a/src/components/ApplicationBorrowerTable.tsx b/src/components/ApplicationBorrowerTable.tsx
index c4ddba1..acf9804 100644
--- a/src/components/ApplicationBorrowerTable.tsx
+++ b/src/components/ApplicationBorrowerTable.tsx
@@ -76,6 +76,7 @@ export function ApplicationBorrowerTable({
               name="legal_name"
               label={t('Legal Name')}
               borrower={borrower}
+              modifiedFields={application.modified_data_fields?.borrower_updates}
             />
             <ApplicationTableDataBorrowerRow
               preWhitespace
@@ -88,6 +89,7 @@ export function ApplicationBorrowerTable({
               name="address"
               label={t('Address')}
               borrower={borrower}
+              modifiedFields={application.modified_data_fields?.borrower_updates}
             />
             <ApplicationTableDataBorrowerRow
               isLoading={isLoading || isLoadingVerifyDataField}
@@ -99,6 +101,7 @@ export function ApplicationBorrowerTable({
               name="legal_identifier"
               label={t('National Tax ID')}
               borrower={borrower}
+              modifiedFields={application.modified_data_fields?.borrower_updates}
             />
             <ApplicationTableDataBorrowerRow
               isLoading={isLoading || isLoadingVerifyDataField}
@@ -110,6 +113,7 @@ export function ApplicationBorrowerTable({
               name="type"
               label={t('Registration Type')}
               borrower={borrower}
+              modifiedFields={application.modified_data_fields?.borrower_updates}
             />
             <ApplicationTableDataBorrowerRow
               isLoading={isLoading || isLoadingVerifyDataField}
@@ -121,6 +125,7 @@ export function ApplicationBorrowerTable({
               verifiedData={application.secop_data_verification}
               borrower={borrower}
               formatter={renderSize}
+              modifiedFields={application.modified_data_fields?.borrower_updates}
             />
             <ApplicationTableDataBorrowerRow
               isLoading={isLoading || isLoadingVerifyDataField}
@@ -132,6 +137,7 @@ export function ApplicationBorrowerTable({
               verifiedData={application.secop_data_verification}
               borrower={borrower}
               formatter={renderSector}
+              modifiedFields={application.modified_data_fields?.borrower_updates}
             />
             <ApplicationTableDataBorrowerRow
               isLoading={isLoading || isLoadingVerifyDataField}
@@ -143,6 +149,7 @@ export function ApplicationBorrowerTable({
               name="email"
               label={t('Business Email')}
               borrower={borrower}
+              modifiedFields={application.modified_data_fields?.borrower_updates}
             />
           </TableBody>
         </Table>
diff --git a/src/components/ApplicationTableDataAwardRow.tsx b/src/components/ApplicationTableDataAwardRow.tsx
index 445196f..5895f7f 100644
--- a/src/components/ApplicationTableDataAwardRow.tsx
+++ b/src/components/ApplicationTableDataAwardRow.tsx
@@ -19,6 +19,7 @@ export function ApplicationTableDataAwardRow({
   updateValue,
   isLoading,
   readonly,
+  modifiedFields,
 }: ApplicationTableAwardDataRowProps) {
   const value = award[name];
   const missing = missingData[name];
@@ -28,7 +29,13 @@ export function ApplicationTableDataAwardRow({
     <TableRow>
       <DataTableCell>{label}</DataTableCell>
       <DataTableCell>
-        <DataAvailability available={!missing} name={label} readonly={readonly} />
+        <DataAvailability
+          available={!missing}
+          name={name}
+          label={label}
+          readonly={readonly}
+          modifiedFields={modifiedFields}
+        />
       </DataTableCell>
       {!missing && <DataTableCell className={preWhitespace ? 'whitespace-pre' : ''}>{formattedValue}</DataTableCell>}
       {missing && updateValue && (
@@ -54,6 +61,7 @@ ApplicationTableDataAwardRow.defaultProps = {
   preWhitespace: false,
   type: undefined,
   formLabel: undefined,
+  modifiedFields: undefined,
 };
 
 export default ApplicationTableDataAwardRow;
diff --git a/src/components/ApplicationTableDataBorrowerRow.tsx b/src/components/ApplicationTableDataBorrowerRow.tsx
index 74fbfd6..4329d6f 100644
--- a/src/components/ApplicationTableDataBorrowerRow.tsx
+++ b/src/components/ApplicationTableDataBorrowerRow.tsx
@@ -25,6 +25,7 @@ export function ApplicationTableDataBorrowerRow({
   withoutVerify,
   isLoading,
   readonly,
+  modifiedFields,
 }: ApplicationTableBorrowerDataRowProps) {
   const t = useT();
 
@@ -46,8 +47,10 @@ export function ApplicationTableDataBorrowerRow({
       <DataTableCell>
         <DataAvailability
           available={DATA_REQUESTED_FROM_MSME.includes(name) || !missing}
-          name={label}
+          name={name}
+          label={label}
           readonly={readonly}
+          modifiedFields={modifiedFields}
         />
       </DataTableCell>
       {(!missing || withoutVerify) && (
@@ -87,6 +90,7 @@ ApplicationTableDataBorrowerRow.defaultProps = {
   type: undefined,
   formLabel: undefined,
   withoutVerify: false,
+  modifiedFields: undefined,
 };
 
 export default ApplicationTableDataBorrowerRow;
diff --git a/src/components/ApplicationTableDataDocumentRow.tsx b/src/components/ApplicationTableDataDocumentRow.tsx
index 7958411..1e025db 100644
--- a/src/components/ApplicationTableDataDocumentRow.tsx
+++ b/src/components/ApplicationTableDataDocumentRow.tsx
@@ -1,4 +1,3 @@
- 
 import { TableRow } from '@mui/material';
 import DocumentIcon from 'src/assets/icons/document.svg';
 
@@ -32,7 +31,7 @@ export function ApplicationTableDataDocumentRow({
     <TableRow>
       <DataTableCell>{DOCUMENT_TYPES_NAMES[document.type]}</DataTableCell>
       <DataTableCell>
-        <DataAvailability available={!missing} name={document.type} readonly={readonly} />
+        <DataAvailability available={!missing} label={document.type} readonly={readonly} />
       </DataTableCell>
       {!downloadDocument && (
         <DataTableCell className={preWhitespace ? 'whitespace-pre' : ''}>{formattedValue}</DataTableCell>
diff --git a/src/components/ApplicationTableDataPreviousAwardRow.tsx b/src/components/ApplicationTableDataPreviousAwardRow.tsx
index 433f85a..736e27f 100644
--- a/src/components/ApplicationTableDataPreviousAwardRow.tsx
+++ b/src/components/ApplicationTableDataPreviousAwardRow.tsx
@@ -1,4 +1,3 @@
- 
 import { Box, Paper, Table, TableBody, TableContainer, TableHead, TableRow } from '@mui/material';
 import { useT } from '@transifex/react';
 import { useState } from 'react';
@@ -49,7 +48,7 @@ export function ApplicationTableDataPreviousAwardRow({
       <TableRow>
         <DataTableCell>{label}</DataTableCell>
         <DataTableCell>
-          <DataAvailability available={!missing} name={label} readonly />
+          <DataAvailability available={!missing} label={label} readonly />
         </DataTableCell>
         {!missing && (
           <DataTableCell className={preWhitespace ? 'whitespace-pre' : ''}>
diff --git a/src/components/ApplicationTableDataRow.tsx b/src/components/ApplicationTableDataRow.tsx
index a0f153b..4533569 100644
--- a/src/components/ApplicationTableDataRow.tsx
+++ b/src/components/ApplicationTableDataRow.tsx
@@ -1,5 +1,12 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { IAward, IBorrower, IBorrowerDocument, IUpdateAward, IUpdateBorrower } from '../schemas/application';
+import {
+  IAward,
+  IBorrower,
+  IBorrowerDocument,
+  IModifiedDataFields,
+  IUpdateAward,
+  IUpdateBorrower,
+} from '../schemas/application';
 
 export interface ApplicationTableDataRowProps {
   label: string;
@@ -10,6 +17,7 @@ export interface ApplicationTableDataRowProps {
   formatter?: (value: any) => string;
   isLoading: boolean;
   readonly: boolean;
+  modifiedFields?: { [key: string]: IModifiedDataFields };
 }
 
 export interface ApplicationTableAwardDataRowProps extends ApplicationTableDataRowProps {
diff --git a/src/components/DataAvailability.tsx b/src/components/DataAvailability.tsx
index ba18e88..799c445 100644
--- a/src/components/DataAvailability.tsx
+++ b/src/components/DataAvailability.tsx
@@ -4,7 +4,9 @@ import { useState } from 'react';
 
 import CheckGreen from '../assets/icons/check-green.svg';
 import WarnRed from '../assets/icons/warn-red.svg';
+import { IModifiedDataFields } from '../schemas/application';
 import Text from '../stories/text/Text';
+import { formatDateFromString } from '../util';
 
 const getIcon = (available: boolean, name: string) => {
   let icon = CheckGreen;
@@ -18,11 +20,13 @@ const getIcon = (available: boolean, name: string) => {
 
 interface DataAvailabilityProps {
   available: boolean;
-  name: string;
+  name?: string;
+  label: string;
   readonly: boolean;
+  modifiedFields?: { [key: string]: IModifiedDataFields };
 }
 
-export function DataAvailability({ available, name, readonly }: DataAvailabilityProps) {
+export function DataAvailability({ available, name, label, readonly, modifiedFields }: DataAvailabilityProps) {
   const t = useT();
   const [open, setOpen] = useState(false);
 
@@ -30,10 +34,12 @@ export function DataAvailability({ available, name, readonly }: DataAvailability
     setOpen(!open);
   };
 
+  const modified = modifiedFields && name ? modifiedFields[name] : undefined;
+
   if (available || readonly) {
     return (
       <Box className="py-2 flex flex-row">
-        {getIcon(available, name)}
+        {getIcon(available, label)}
 
         <Text fontVariant className="ml-3 mb-0 text-sm">
           {available ? t('Yes') : t('Data missing')}
@@ -49,7 +55,7 @@ export function DataAvailability({ available, name, readonly }: DataAvailability
           sx={{
             pt: '2px',
           }}>
-          {getIcon(available, name)}
+          {getIcon(available, label)}
         </Box>
         <Box className="flex flex-col">
           <Text fontVariant className="ml-3 mb-0 text-sm">
@@ -63,10 +69,20 @@ export function DataAvailability({ available, name, readonly }: DataAvailability
             </Text>
             <Collapse in={open}>
               <Text fontVariant className="ml-3 mt-4 text-sm">
-                {t(
-                  'Data for the {fieldName} for the SME is not available. Confirm manually through SECOP or alternative source.',
-                  { fieldName: name },
-                )}
+                {!modified
+                  ? t(
+                      'Data for the {fieldName} for the SME is not available. Confirm manually through SECOP or alternative source.',
+                      { fieldName: label },
+                    )
+                  : t(
+                      'Data for the {fieldName} was not available, but completed by {userType} user {userName} on {modifiedDate}.',
+                      {
+                        fieldName: label,
+                        userType: modified.user_type,
+                        userName: modified.user,
+                        modifiedDate: formatDateFromString(modified.modified_at),
+                      },
+                    )}
               </Text>
             </Collapse>
           </Box>
@@ -76,4 +92,9 @@ export function DataAvailability({ available, name, readonly }: DataAvailability
   );
 }
 
+DataAvailability.defaultProps = {
+  modifiedFields: undefined,
+  name: undefined,
+};
+
 export default DataAvailability;
diff --git a/src/schemas/application.ts b/src/schemas/application.ts
index 4160c80..b640771 100644
--- a/src/schemas/application.ts
+++ b/src/schemas/application.ts
@@ -2,7 +2,7 @@
 import { t } from '@transifex/native';
 import { TypeOf, boolean, coerce, nativeEnum, object, string } from 'zod';
 
-import { APPLICATION_STATUS, DOCUMENTS_TYPE, MSME_TYPES } from '../constants';
+import { APPLICATION_STATUS, DOCUMENTS_TYPE, MSME_TYPES, USER_TYPES } from '../constants';
 import { isDateAfterCurrentDate } from '../util';
 import { emailSchema } from './auth';
 
@@ -215,6 +215,12 @@ export interface IBorrowerDocument {
   name: string;
 }
 
+export interface IModifiedDataFields {
+  modified_at: string;
+  user: string;
+  user_type: USER_TYPES;
+}
+
 export interface IApplication {
   id: number;
   borrower: IBorrower;
@@ -255,6 +261,10 @@ export interface IApplication {
   credit_product_id?: number;
   credit_product?: ICreditProduct;
   borrower_documents: IBorrowerDocument[];
+  modified_data_fields?: {
+    award_updates: { [key: string]: IModifiedDataFields };
+    borrower_updates: { [key: string]: IModifiedDataFields };
+  };
 }
 
 export interface IExtendedApplication {

From f419f2ec43fcf223fb83652a229cebf884648c2c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nahuel=20Hern=C3=A1ndez?= <jnahuelhernandez@gmail.com>
Date: Tue, 1 Aug 2023 16:58:43 -0400
Subject: [PATCH 06/22] feat: localized dates

---
 src/components/ApplicationAwardTable.tsx      |  4 ++-
 .../ApplicationTableDataPreviousAwardRow.tsx  |  4 ++-
 src/components/CreditProductConfirmation.tsx  |  4 ++-
 src/components/CreditProductReview.tsx        |  5 +++-
 src/components/DataAvailability.tsx           |  3 ++-
 src/components/DataTable.tsx                  | 11 ++++----
 src/hooks/useLocalizedDateFormatter.ts        | 26 +++++++++++++++++++
 src/pages/msme/TermsAndConditions.tsx         |  3 ++-
 src/pages/msme/ViewCreditOptions.tsx          |  6 +++--
 src/util/index.ts                             |  8 +++---
 10 files changed, 56 insertions(+), 18 deletions(-)
 create mode 100644 src/hooks/useLocalizedDateFormatter.ts

diff --git a/src/components/ApplicationAwardTable.tsx b/src/components/ApplicationAwardTable.tsx
index 3169a91..0bab364 100644
--- a/src/components/ApplicationAwardTable.tsx
+++ b/src/components/ApplicationAwardTable.tsx
@@ -3,9 +3,10 @@ import { Paper, Table, TableBody, TableContainer, TableHead, TableRow } from '@m
 import { useT } from '@transifex/react';
 
 import useGetPreviousAwards from '../hooks/useGetPreviousAwards';
+import useLocalizedDateFormatter from '../hooks/useLocalizedDateFormatter';
 import useUpdateAward from '../hooks/useUpdateAward';
 import { IApplication, IUpdateAward } from '../schemas/application';
-import { formatCurrency, formatDateFromString, formatPaymentMethod } from '../util';
+import { formatCurrency, formatPaymentMethod } from '../util';
 import ApplicationTableDataAwardRow from './ApplicationTableDataAwardRow';
 import ApplicationTableDataPreviousAwardRow from './ApplicationTableDataPreviousAwardRow';
 import { DataTableHeadCell, DataTableHeadLabel } from './DataTable';
@@ -18,6 +19,7 @@ export interface ApplicationAwardTableProps {
 
 export function ApplicationAwardTable({ application, readonly = false, className }: ApplicationAwardTableProps) {
   const t = useT();
+  const { formatDateFromString } = useLocalizedDateFormatter();
   const { updateAwardMutation, isLoading } = useUpdateAward();
   const { data: previousAwards, isLoading: isLoadingPreviousAwards } = useGetPreviousAwards(application.id);
 
diff --git a/src/components/ApplicationTableDataPreviousAwardRow.tsx b/src/components/ApplicationTableDataPreviousAwardRow.tsx
index 736e27f..365b832 100644
--- a/src/components/ApplicationTableDataPreviousAwardRow.tsx
+++ b/src/components/ApplicationTableDataPreviousAwardRow.tsx
@@ -4,9 +4,10 @@ import { useState } from 'react';
 import Minus from 'src/assets/icons/minus.svg';
 import Plus from 'src/assets/icons/plus.svg';
 
+import useLocalizedDateFormatter from '../hooks/useLocalizedDateFormatter';
 import { IAward } from '../schemas/application';
 import Loader from '../stories/loader/Loader';
-import { formatCurrency, formatDateFromString } from '../util';
+import { formatCurrency } from '../util';
 import { ApplicationTableAwardDataRowProps } from './ApplicationTableDataRow';
 import DataAvailability from './DataAvailability';
 import { DataTableCell, DataTableHeadCell, DataTableHeadLabel } from './DataTable';
@@ -35,6 +36,7 @@ export function ApplicationTableDataPreviousAwardRow({
   preWhitespace,
 }: ApplicationTableDataPreviousAwardRowProps) {
   const t = useT();
+  const { formatDateFromString } = useLocalizedDateFormatter();
 
   const [open, setOpen] = useState(false);
 
diff --git a/src/components/CreditProductConfirmation.tsx b/src/components/CreditProductConfirmation.tsx
index 91386c9..159ac70 100644
--- a/src/components/CreditProductConfirmation.tsx
+++ b/src/components/CreditProductConfirmation.tsx
@@ -2,9 +2,10 @@ import { Paper, Table, TableBody, TableContainer, TableHead, TableRow } from '@m
 import { useT } from '@transifex/react';
 
 import { CREDIT_PRODUCT_TYPE } from '../constants';
+import useLocalizedDateFormatter from '../hooks/useLocalizedDateFormatter';
 import { IApplication, ICreditProduct } from '../schemas/application';
 import Title from '../stories/title/Title';
-import { formatCurrency, formatDateFromString } from '../util';
+import { formatCurrency } from '../util';
 import { DataTableCell, DataTableHeadCell, DataTableHeadLabel } from './DataTable';
 
 export interface CreditProductConfirmationProps {
@@ -14,6 +15,7 @@ export interface CreditProductConfirmationProps {
 
 export function CreditProductConfirmation({ creditProduct, application }: CreditProductConfirmationProps) {
   const t = useT();
+  const { formatDateFromString } = useLocalizedDateFormatter();
 
   const isLoan = creditProduct.type === CREDIT_PRODUCT_TYPE.LOAN;
 
diff --git a/src/components/CreditProductReview.tsx b/src/components/CreditProductReview.tsx
index e4c81fa..b6d9e44 100644
--- a/src/components/CreditProductReview.tsx
+++ b/src/components/CreditProductReview.tsx
@@ -2,9 +2,10 @@ import { Paper, Table, TableBody, TableContainer, TableHead, TableRow } from '@m
 import { useT } from '@transifex/react';
 
 import { CREDIT_PRODUCT_TYPE } from '../constants';
+import useLocalizedDateFormatter from '../hooks/useLocalizedDateFormatter';
 import { IApplication } from '../schemas/application';
 import Title from '../stories/title/Title';
-import { formatCurrency, formatDateFromString } from '../util';
+import { formatCurrency } from '../util';
 import { DataTableCell, DataTableHeadCell, DataTableHeadLabel } from './DataTable';
 
 export interface CreditProductReviewProps {
@@ -14,6 +15,8 @@ export interface CreditProductReviewProps {
 
 export function CreditProductReview({ application, className }: CreditProductReviewProps) {
   const t = useT();
+  const { formatDateFromString } = useLocalizedDateFormatter();
+
   const creditProduct = application.credit_product;
 
   if (!creditProduct) return null;
diff --git a/src/components/DataAvailability.tsx b/src/components/DataAvailability.tsx
index 799c445..65a4bb9 100644
--- a/src/components/DataAvailability.tsx
+++ b/src/components/DataAvailability.tsx
@@ -4,9 +4,9 @@ import { useState } from 'react';
 
 import CheckGreen from '../assets/icons/check-green.svg';
 import WarnRed from '../assets/icons/warn-red.svg';
+import useLocalizedDateFormatter from '../hooks/useLocalizedDateFormatter';
 import { IModifiedDataFields } from '../schemas/application';
 import Text from '../stories/text/Text';
-import { formatDateFromString } from '../util';
 
 const getIcon = (available: boolean, name: string) => {
   let icon = CheckGreen;
@@ -28,6 +28,7 @@ interface DataAvailabilityProps {
 
 export function DataAvailability({ available, name, label, readonly, modifiedFields }: DataAvailabilityProps) {
   const t = useT();
+  const { formatDateFromString } = useLocalizedDateFormatter();
   const [open, setOpen] = useState(false);
 
   const handleToggle = () => {
diff --git a/src/components/DataTable.tsx b/src/components/DataTable.tsx
index b066324..de1cfe0 100644
--- a/src/components/DataTable.tsx
+++ b/src/components/DataTable.tsx
@@ -18,7 +18,8 @@ import SorterIcon from 'src/assets/icons/sorter.svg';
 import { twMerge } from 'tailwind-merge';
 
 import { PAGE_SIZES } from '../constants';
-import { formatCurrency, formatDateFromString } from '../util';
+import useLocalizedDateFormatter from '../hooks/useLocalizedDateFormatter';
+import { formatCurrency } from '../util';
 
 function Sorter() {
   return <img className="pl-2" src={SorterIcon} alt="sorter-icon" />;
@@ -194,10 +195,6 @@ function renderValue<T>(row: T, headCell: HeadCell<T>) {
     return headCell.render(row, headCell);
   }
 
-  if (headCell.type === 'date') {
-    return formatDateFromString(String(row[headCell.id]));
-  }
-
   if (headCell.type === 'currency') {
     return formatCurrency(Number(row[headCell.id]));
   }
@@ -213,6 +210,7 @@ export function DataTable<T>({
   actions,
 }: DataTableProps<T>) {
   const t = useT();
+  const { formatDateFromString } = useLocalizedDateFormatter();
   const [visibleRows, setVisibleRows] = React.useState<T[]>(rows);
   const [order, setOrder] = React.useState<Order>('asc');
   const [orderBy, setOrderBy] = React.useState<Extract<keyof T, string> | undefined>();
@@ -276,7 +274,8 @@ export function DataTable<T>({
                 <TableRow tabIndex={-1} key={`${String(index)}`}>
                   {headCells.map((headCell) => (
                     <DataTableCell key={`${String(`${row[headCell.id]}-${index}-${headCell.id}`)}`}>
-                      {renderValue(row, headCell)}
+                      {headCell.type !== 'date' && renderValue(row, headCell)}
+                      {headCell.type === 'date' && formatDateFromString(String(row[headCell.id]))}
                     </DataTableCell>
                   ))}
                   {actions && <DataTableCell>{actions(row)}</DataTableCell>}
diff --git a/src/hooks/useLocalizedDateFormatter.ts b/src/hooks/useLocalizedDateFormatter.ts
new file mode 100644
index 0000000..b9d9e0f
--- /dev/null
+++ b/src/hooks/useLocalizedDateFormatter.ts
@@ -0,0 +1,26 @@
+import { useCallback } from 'react';
+
+import { formatLocalizedDate, formatLocalizedDateFromString } from '../util';
+import useLangContext from './useLangContext';
+
+const useLocalizedDateFormatter = () => {
+  const langContext = useLangContext();
+
+  const formatDate = useCallback(
+    (date: Date) => formatLocalizedDate(langContext.state.selected.replace('_', '-'), date),
+    [langContext.state.selected],
+  );
+
+  const formatDateFromString = useCallback(
+    (date: string | null | undefined) =>
+      formatLocalizedDateFromString(langContext.state.selected.replace('_', '-'), date),
+    [langContext.state.selected],
+  );
+
+  return {
+    formatDate,
+    formatDateFromString,
+  };
+};
+
+export default useLocalizedDateFormatter;
diff --git a/src/pages/msme/TermsAndConditions.tsx b/src/pages/msme/TermsAndConditions.tsx
index fbe506d..f39ddd2 100644
--- a/src/pages/msme/TermsAndConditions.tsx
+++ b/src/pages/msme/TermsAndConditions.tsx
@@ -6,12 +6,13 @@ import Text from 'src/stories/text/Text';
 import Title from 'src/stories/title/Title';
 
 import FAQComponent from '../../components/FAQComponent';
-import { formatDate } from '../../util';
+import useLocalizedDateFormatter from '../../hooks/useLocalizedDateFormatter';
 
 function TermsAndConditions() {
   const t = useT();
   const navigate = useNavigate();
   const dateUpdate = new Date();
+  const { formatDate } = useLocalizedDateFormatter();
 
   return (
     <>
diff --git a/src/pages/msme/ViewCreditOptions.tsx b/src/pages/msme/ViewCreditOptions.tsx
index 1c650a8..dbd7c43 100644
--- a/src/pages/msme/ViewCreditOptions.tsx
+++ b/src/pages/msme/ViewCreditOptions.tsx
@@ -14,6 +14,7 @@ import LoansTable from '../../components/LoansTable';
 import { MSME_TYPES, MSME_TYPES_OPTIONS, SECTOR_TYPES } from '../../constants';
 import useApplicationContext from '../../hooks/useApplicationContext';
 import useGetCreditProductsOptions from '../../hooks/useGetCreditProductsOptions';
+import useLocalizedDateFormatter from '../../hooks/useLocalizedDateFormatter';
 import useSelectCreditProduct from '../../hooks/useSelectCreditProduct';
 import {
   CreditOptionsInput,
@@ -27,11 +28,12 @@ import {
 import FormInput from '../../stories/form-input/FormInput';
 import FormSelect from '../../stories/form-select/FormSelect';
 import RadioGroup from '../../stories/radio-group/RadioGroup';
-import { addMonthsToDate, formatCurrency, formatDateFromString, isDateBeforeMonths } from '../../util';
+import { addMonthsToDate, formatCurrency, isDateBeforeMonths } from '../../util';
 
 const DEBOUNCE_TIME = 800;
 function ViewCreditOptions() {
   const t = useT();
+  const { formatDateFromString } = useLocalizedDateFormatter();
 
   const applicationContext = useApplicationContext();
   const { data, isLoading: isLoadingOptions, getCreditProductOptionsMutation } = useGetCreditProductsOptions();
@@ -180,7 +182,7 @@ function ViewCreditOptions() {
         : '',
       award_contract_startdate: `${formatDateFromString(applicationContext.state.data.award.contractperiod_startdate)}`,
     };
-  }, [applicationContext.state.data]);
+  }, [applicationContext.state.data, formatDateFromString]);
 
   return (
     <>
diff --git a/src/util/index.ts b/src/util/index.ts
index eff504d..0fbedbc 100644
--- a/src/util/index.ts
+++ b/src/util/index.ts
@@ -22,15 +22,15 @@ const dateFormatOptions: Intl.DateTimeFormatOptions = {
   year: 'numeric', // Display full year
 };
 
-export const formatDate = (date: Date) => date.toLocaleDateString('en-US', dateFormatOptions);
+export const formatLocalizedDate = (locale: string, date: Date) => date.toLocaleDateString(locale, dateFormatOptions);
 
-export const formatDateFromString = (date: string | null | undefined) => {
+export const formatLocalizedDateFromString = (locale: string, date: string | null | undefined) => {
   if (!date) {
     return t('No defined');
   }
 
   const dateObj = new Date(date);
-  return dateObj.toLocaleDateString('en-US', dateFormatOptions);
+  return dateObj.toLocaleDateString(locale, dateFormatOptions);
 };
 
 export const formatCurrency = (amount: number, currency?: string) => {
@@ -128,7 +128,7 @@ export const addMonthsToDate = (date: string | undefined, months: number) => {
 
   const addedDate = dayjs(date).add(months, 'month');
 
-  return formatDate(addedDate.toDate());
+  return addedDate.toDate().toLocaleDateString('en-US', dateFormatOptions);
 };
 
 export const isDateAfterCurrentDate = (date: string) => {

From 903974c83c7c03c2a7aa3d6682cc2b28e09b5669 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nahuel=20Hern=C3=A1ndez?= <jnahuelhernandez@gmail.com>
Date: Mon, 7 Aug 2023 20:27:50 -0400
Subject: [PATCH 07/22] fix: #142 max upload size nginx config

---
 Dockerfile         | 2 ++
 docker-compose.yml | 7 +++++--
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/Dockerfile b/Dockerfile
index fa17e4d..797ad5f 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -6,7 +6,9 @@ RUN yarn install
 RUN yarn build
 
 FROM nginx:1.25.1-alpine
+ARG client_max_body_size
 COPY ./nginx/nginx.conf /etc/nginx/conf.d/default.conf
 COPY --from=build /app/dist /usr/share/nginx/html
+RUN sed -i "/listen[ ]*80;/i client_max_body_size ${client_max_body_size}M;" /etc/nginx/conf.d/default.conf
 EXPOSE 80
 CMD ["nginx","-g","daemon off;"]
\ No newline at end of file
diff --git a/docker-compose.yml b/docker-compose.yml
index f824401..ab1529b 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -1,6 +1,9 @@
 services:
   frontend:
-    build: ./credere-frontend/
+    build:
+      context: ./credere-frontend/
+      args:
+        max_size_body: ${VITE_MAX_FILE_SIZE_MB}
     environment:
       - VITE_APP_VERSION=${VITE_APP_VERSION}
       - VITE_API_URL=${VITE_API_URL}
@@ -32,7 +35,7 @@ services:
       - HASH_KEY=${HASH_KEY}
       - TEST_MAIL_RECEIVER=${TEST_MAIL_RECEIVER}
       - IMAGES_BASE_URL=${IMAGES_BASE_URL}
-      - IMAGES_LANG_SUBPATH=${IMAGES_LANG_SUBPATH}
+      - EMAIL_TEMPLATE_LANG=${EMAIL_TEMPLATE_LANG}
       - FACEBOOK_LINK=${FACEBOOK_LINK}
       - TWITTER_LINK=${TWITTER_LINK}
       - LINK_LINK=${LINK_LINK}

From 4814f581f00016d57fee7a35baf3856424c82811 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nahuel=20Hern=C3=A1ndez?= <jnahuelhernandez@gmail.com>
Date: Mon, 7 Aug 2023 20:33:25 -0400
Subject: [PATCH 08/22] feat: #38 #39 New submission screen

---
 src/components/FAQComponent.tsx        |   2 +-
 src/layout/PublicApplicationLayout.tsx |   2 +-
 src/pages/msme/ConfirmSubmission.tsx   | 124 +++++++++++++++++++++++++
 src/pages/msme/IntroMsme.tsx           |   5 -
 src/pages/msme/UploadDocuments.tsx     |  14 ++-
 src/routes/AppRouter.tsx               |   5 +
 src/schemas/application.ts             |  17 ++--
 src/stories/faq/FAQSection.tsx         |   2 +-
 8 files changed, 152 insertions(+), 19 deletions(-)
 create mode 100644 src/pages/msme/ConfirmSubmission.tsx

diff --git a/src/components/FAQComponent.tsx b/src/components/FAQComponent.tsx
index 96e10ce..8550472 100644
--- a/src/components/FAQComponent.tsx
+++ b/src/components/FAQComponent.tsx
@@ -12,7 +12,7 @@ interface FAQComponentProps {
 export function FAQComponent({ className }: FAQComponentProps) {
   const t = useT();
   return (
-    <FAQContainer className={className}>
+    <FAQContainer title={t('Frequently Asked Questions')} className={className}>
       <FAQSection title={t('What is the MSME credit scheme?')}>
         {t(
           'Guaranteed loans give high-risk borrowers a way to access financing, and provide protection for the lender.',
diff --git a/src/layout/PublicApplicationLayout.tsx b/src/layout/PublicApplicationLayout.tsx
index 02226ad..5ad782b 100644
--- a/src/layout/PublicApplicationLayout.tsx
+++ b/src/layout/PublicApplicationLayout.tsx
@@ -51,7 +51,7 @@ export default function PublicApplicationLayout() {
       ) {
         if (lastSegment !== 'submission-completed') navigate('./submission-completed');
       } else if (application.pending_documents || application.status === APPLICATION_STATUS.INFORMATION_REQUESTED) {
-        if (lastSegment !== 'documents') navigate('./documents');
+        if (lastSegment !== 'documents' && lastSegment !== 'confirm-submission') navigate('./documents');
       } else if (application.credit_product_id && !application.lender_id) {
         if (lastSegment !== 'confirm-credit-product' && lastSegment !== 'submission-completed')
           navigate('./confirm-credit-product');
diff --git a/src/pages/msme/ConfirmSubmission.tsx b/src/pages/msme/ConfirmSubmission.tsx
new file mode 100644
index 0000000..b862126
--- /dev/null
+++ b/src/pages/msme/ConfirmSubmission.tsx
@@ -0,0 +1,124 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Box } from '@mui/material';
+import { useT } from '@transifex/react';
+import { FormProvider, SubmitHandler, useForm } from 'react-hook-form';
+import { useNavigate } from 'react-router-dom';
+import Text from 'src/stories/text/Text';
+import Title from 'src/stories/title/Title';
+
+import CreditProductConfirmation from '../../components/CreditProductConfirmation';
+import FAQComponent from '../../components/FAQComponent';
+import NeedHelpComponent from '../../components/NeedHelpComponent';
+import { DOCUMENT_TYPES_NAMES } from '../../constants';
+import useApplicationContext from '../../hooks/useApplicationContext';
+import useSubmitApplication from '../../hooks/useSubmitApplication';
+import { SubmitInput, submitSchema } from '../../schemas/application';
+import Button from '../../stories/button/Button';
+import Checkbox from '../../stories/checkbox/Checkbox';
+
+function ConfirmSubmission() {
+  const t = useT();
+  const navigate = useNavigate();
+  const { isLoading, submitApplicationMutation } = useSubmitApplication();
+  const applicationContext = useApplicationContext();
+
+  const onSubmitHandler: SubmitHandler<SubmitInput> = () => {
+    submitApplicationMutation({ uuid: applicationContext.state.data?.application.uuid });
+  };
+
+  const methods = useForm<SubmitInput>({
+    resolver: zodResolver(submitSchema),
+  });
+
+  const onBackHandler = () => {
+    navigate('../documents');
+  };
+
+  const { handleSubmit } = methods;
+
+  return (
+    <>
+      <Title type="page" label={t('Confirm Submission')} className="mb-10" />
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+        <div className="col-span-1 md:col-span-2 md:mr-10">
+          <Text className="mb-2">
+            {t('Please, confirm the data you will submit to Credere and {fi_name}.', {
+              fi_name: applicationContext.state.data?.lender.name,
+            })}
+          </Text>
+
+          <Text className="mb-8">{t('You have selected the following financing option:')}</Text>
+
+          {applicationContext.state.data?.creditProduct && applicationContext.state.data?.application && (
+            <CreditProductConfirmation
+              creditProduct={{
+                ...applicationContext.state.data?.creditProduct,
+                lender: applicationContext.state.data?.lender,
+              }}
+              application={applicationContext.state.data?.application}
+            />
+          )}
+
+          <Title
+            type="subsection"
+            className="mb-2 mt-8"
+            label={t('Documents to share with  {fi_name}.', {
+              fi_name: applicationContext.state.data?.lender.name,
+            })}
+          />
+          <ul>
+            {applicationContext.state.data?.creditProduct.required_document_types &&
+              Object.keys(applicationContext.state.data?.creditProduct.required_document_types)
+                .filter(
+                  (documentTypeKey: string) =>
+                    applicationContext.state.data?.creditProduct.required_document_types[documentTypeKey],
+                )
+                .map((documentTypeKey: string) => (
+                  <li key={documentTypeKey} className="text-darkest">
+                    <Text className="mb-2">{DOCUMENT_TYPES_NAMES[documentTypeKey]}</Text>
+                  </li>
+                ))}
+          </ul>
+          <FormProvider {...methods}>
+            <Box
+              component="form"
+              onSubmit={handleSubmit(onSubmitHandler)}
+              noValidate
+              autoComplete="off"
+              sx={{
+                display: 'flex',
+                flexDirection: 'column',
+              }}>
+              <Checkbox
+                name="agree_topass_info_to_banking_partner"
+                defaultValue={false}
+                label={t(
+                  'I agree for these documents, the information entered in my application and the information about my award to be passed to {fi_name}.',
+                  {
+                    fi_name: applicationContext.state.data?.lender.name,
+                  },
+                )}
+              />
+
+              <div className="mt-6 md:mb-8 grid grid-cols-1 gap-4 md:flex md:gap-0">
+                <div>
+                  <Button className="md:mr-4" label={t('Back')} onClick={onBackHandler} disabled={isLoading} />
+                </div>
+                <div>
+                  <Button label={t('Submit Application')} type="submit" disabled={isLoading} />
+                </div>
+              </div>
+            </Box>
+          </FormProvider>
+        </div>
+        <div className="my-6 md:my-0 md:ml-10">
+          <NeedHelpComponent />
+          <FAQComponent className="my-8" />
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default ConfirmSubmission;
diff --git a/src/pages/msme/IntroMsme.tsx b/src/pages/msme/IntroMsme.tsx
index 264b1b8..8812fc7 100644
--- a/src/pages/msme/IntroMsme.tsx
+++ b/src/pages/msme/IntroMsme.tsx
@@ -97,11 +97,6 @@ function IntroMsme() {
                 display: 'flex',
                 flexDirection: 'column',
               }}>
-              <Checkbox
-                name="agree_topass_info_to_banking_partner"
-                defaultValue={false}
-                label={t('I agree for my details to be passed onto the banking partner.')}
-              />
               <Checkbox
                 name="accept_terms_and_conditions"
                 defaultValue={false}
diff --git a/src/pages/msme/UploadDocuments.tsx b/src/pages/msme/UploadDocuments.tsx
index 491b0e3..0035803 100644
--- a/src/pages/msme/UploadDocuments.tsx
+++ b/src/pages/msme/UploadDocuments.tsx
@@ -4,6 +4,7 @@ import { Box } from '@mui/material';
 import { useT } from '@transifex/react';
 import { useEffect, useMemo, useState } from 'react';
 import { FormProvider, SubmitHandler, useForm } from 'react-hook-form';
+import { useNavigate } from 'react-router-dom';
 import ConfirmIcon from 'src/assets/icons/confirm.svg';
 import EditIcon from 'src/assets/icons/edit.svg';
 import Text from 'src/stories/text/Text';
@@ -16,7 +17,6 @@ import { APPLICATION_STATUS, DOCUMENTS_TYPE } from '../../constants';
 import useApplicationContext from '../../hooks/useApplicationContext';
 import useChangeEmail from '../../hooks/useChangeEmail';
 import useSubmitAdditionalData from '../../hooks/useSubmitAdditionalData';
-import useSubmitApplication from '../../hooks/useSubmitApplication';
 import { FormChangeEmailInput, changeEmailSchema } from '../../schemas/application';
 import Button from '../../stories/button/Button';
 import FormInput from '../../stories/form-input/FormInput';
@@ -24,9 +24,9 @@ import LinkButton from '../../stories/link-button/LinkButton';
 
 function UploadDocuments() {
   const t = useT();
+  const navigate = useNavigate();
   const [editEmail, setEditEmail] = useState<boolean>(false);
   const { isLoading: isLoadingChangeEmail, changeEmailMutation, data } = useChangeEmail();
-  const { isLoading, submitApplicationMutation } = useSubmitApplication();
   const { isLoading: isLoadingAdditionalData, submitAdditionalDataMutation } = useSubmitAdditionalData();
   const applicationContext = useApplicationContext();
   const application = applicationContext.state.data?.application;
@@ -47,7 +47,7 @@ function UploadDocuments() {
     if (applicationContext.state.data?.application.status === APPLICATION_STATUS.INFORMATION_REQUESTED) {
       submitAdditionalDataMutation({ uuid: applicationContext.state.data?.application.uuid });
     } else {
-      submitApplicationMutation({ uuid: applicationContext.state.data?.application.uuid });
+      navigate('../confirm-submission');
     }
   };
 
@@ -176,9 +176,13 @@ function UploadDocuments() {
 
             <div>
               <Button
-                label={t('Submit Application')}
+                label={
+                  applicationContext.state.data?.application.status === APPLICATION_STATUS.INFORMATION_REQUESTED
+                    ? t('Submit Additional Data')
+                    : t('Continue')
+                }
                 onClick={submitApplicationHandler}
-                disabled={!allUploaded || isLoading || isLoadingAdditionalData}
+                disabled={!allUploaded || isLoadingAdditionalData}
               />
             </div>
           </div>
diff --git a/src/routes/AppRouter.tsx b/src/routes/AppRouter.tsx
index 29485bd..4073d8e 100644
--- a/src/routes/AppRouter.tsx
+++ b/src/routes/AppRouter.tsx
@@ -41,6 +41,7 @@ import ViewApplication from '../pages/fi/ViewApplication';
 import ChangePrimaryEmail from '../pages/msme/ChangePrimaryEmail';
 import ConfirmCreditProduct from '../pages/msme/ConfirmCreditProduct';
 import ConfirmFindAlternativeCredit from '../pages/msme/ConfirmFindAlternativeCredit';
+import ConfirmSubmission from '../pages/msme/ConfirmSubmission';
 import Rejected from '../pages/msme/Rejected';
 import TermsAndConditions from '../pages/msme/TermsAndConditions';
 import UploadContract from '../pages/msme/UploadContract';
@@ -283,6 +284,10 @@ const router = createBrowserRouter([
         path: 'upload-contract-completed',
         element: <UploadContractCompleted />,
       },
+      {
+        path: 'confirm-submission',
+        element: <ConfirmSubmission />,
+      },
       {
         path: 'submission-completed',
         element: <SubmissionCompleted />,
diff --git a/src/schemas/application.ts b/src/schemas/application.ts
index b640771..3cf381d 100644
--- a/src/schemas/application.ts
+++ b/src/schemas/application.ts
@@ -6,17 +6,22 @@ import { APPLICATION_STATUS, DOCUMENTS_TYPE, MSME_TYPES, USER_TYPES } from '../c
 import { isDateAfterCurrentDate } from '../util';
 import { emailSchema } from './auth';
 
-const booleanRequiredSchema = boolean().refine((value) => value === true, {
-  message: t('You need to check this option to Access the Scheme'),
-});
-
 export const introSchema = object({
-  agree_topass_info_to_banking_partner: booleanRequiredSchema,
-  accept_terms_and_conditions: booleanRequiredSchema,
+  accept_terms_and_conditions: boolean().refine((value) => value === true, {
+    message: t('You need to check this option to Access the Scheme'),
+  }),
 });
 
 export type IntroInput = TypeOf<typeof introSchema>;
 
+export const submitSchema = object({
+  agree_topass_info_to_banking_partner: boolean().refine((value) => value === true, {
+    message: t('You need to check this option to submit the application'),
+  }),
+});
+
+export type SubmitInput = TypeOf<typeof submitSchema>;
+
 const UUIDType = string().optional();
 
 export const applicationBaseSchema = object({
diff --git a/src/stories/faq/FAQSection.tsx b/src/stories/faq/FAQSection.tsx
index 12e11ac..cf6230d 100644
--- a/src/stories/faq/FAQSection.tsx
+++ b/src/stories/faq/FAQSection.tsx
@@ -29,7 +29,7 @@ export function FAQSection({ title, className, children }: FAQSectionProps & Pro
         <Typography variant="h6" className="text-darkest text-base font-normal">
           {title}
         </Typography>
-        <Box className="ml-auto p-2">
+        <Box className="ml-auto py-2 pr-2 pl-5">
           <img
             className={twMerge(`transition-transform duration-300 ease-in-out transform ${open ? '' : 'rotate-180'}`)}
             src={ArrowGreen}

From 97b707f93fda62be2541a303d91464122d33589a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nahuel=20Hern=C3=A1ndez?= <jnahuelhernandez@gmail.com>
Date: Mon, 7 Aug 2023 20:35:27 -0400
Subject: [PATCH 09/22] fix: #144 access with link to completed applications,
 new screen

---
 src/layout/PublicApplicationLayout.tsx      |  4 +-
 src/pages/msme/ApplicationMSMECompleted.tsx | 51 +++++++++++++++++++++
 src/routes/AppRouter.tsx                    |  5 ++
 3 files changed, 59 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/msme/ApplicationMSMECompleted.tsx

diff --git a/src/layout/PublicApplicationLayout.tsx b/src/layout/PublicApplicationLayout.tsx
index 5ad782b..1d21933 100644
--- a/src/layout/PublicApplicationLayout.tsx
+++ b/src/layout/PublicApplicationLayout.tsx
@@ -33,7 +33,9 @@ export default function PublicApplicationLayout() {
       const { pathname } = location;
       const lastSegment = pathname.substring(pathname.lastIndexOf('/') + 1);
       if (lastSegment === 'change-primary-email') return;
-      if (application.status === APPLICATION_STATUS.REJECTED) {
+      if (application.status === APPLICATION_STATUS.COMPLETED) {
+        if (lastSegment !== 'application-completed') navigate('./application-completed');
+      } else if (application.status === APPLICATION_STATUS.REJECTED) {
         if (lastSegment !== 'find-alternative-credit' && lastSegment !== 'rejected') navigate('./rejected');
       } else if (application.status === APPLICATION_STATUS.CONTRACT_UPLOADED) {
         if (lastSegment !== 'upload-contract-completed') {
diff --git a/src/pages/msme/ApplicationMSMECompleted.tsx b/src/pages/msme/ApplicationMSMECompleted.tsx
new file mode 100644
index 0000000..188a731
--- /dev/null
+++ b/src/pages/msme/ApplicationMSMECompleted.tsx
@@ -0,0 +1,51 @@
+import { Link as MUILink } from '@mui/material';
+import { useT } from '@transifex/react';
+import { Button } from 'src/stories/button/Button';
+import Text from 'src/stories/text/Text';
+import Title from 'src/stories/title/Title';
+
+import useApplicationContext from '../../hooks/useApplicationContext';
+
+function ApplicationMSMECompleted() {
+  const t = useT();
+  const applicationContext = useApplicationContext();
+
+  return (
+    <>
+      <Title type="page" label={t('Application Completed')} className="mb-8" />
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+        <div className="col-span-1 md:col-span-2 md:mr-10">
+          <Text className="mb-8">
+            {t(
+              'Thank you for using Credere. This application has been mark as completed with funds disbursed by {fi_name}.',
+              {
+                fi_name: applicationContext.state.data?.lender.name,
+              },
+            )}
+          </Text>
+          <Text className="mb-8">
+            {t(
+              'If you have any questions, you can reach out to member of the Open Contracting Partnership team at: credere@open-contracting.org.',
+            )}
+          </Text>
+
+          <div className="mt-5 mb-10 grid grid-cols-1 gap-4 md:flex md:gap-0">
+            <div>
+              <Button
+                className="md:mr-4"
+                label={t('Learn more about OCP')}
+                target="_blank"
+                rel="noreferrer"
+                component={MUILink}
+                href={`${import.meta.env.VITE_MORE_INFO_OCP_URL || 'https://www.open-contracting.org/es/'}`}
+              />
+            </div>
+          </div>
+        </div>
+        <div className="my-6 md:my-0 md:ml-10" />
+      </div>
+    </>
+  );
+}
+
+export default ApplicationMSMECompleted;
diff --git a/src/routes/AppRouter.tsx b/src/routes/AppRouter.tsx
index 4073d8e..0bfe373 100644
--- a/src/routes/AppRouter.tsx
+++ b/src/routes/AppRouter.tsx
@@ -38,6 +38,7 @@ import ReviewContract from '../pages/fi/ReviewContract';
 import StageFiveApproved from '../pages/fi/StageFiveApproved';
 import StageFiveRejected from '../pages/fi/StageFiveRejected';
 import ViewApplication from '../pages/fi/ViewApplication';
+import ApplicationMSMECompleted from '../pages/msme/ApplicationMSMECompleted';
 import ChangePrimaryEmail from '../pages/msme/ChangePrimaryEmail';
 import ConfirmCreditProduct from '../pages/msme/ConfirmCreditProduct';
 import ConfirmFindAlternativeCredit from '../pages/msme/ConfirmFindAlternativeCredit';
@@ -284,6 +285,10 @@ const router = createBrowserRouter([
         path: 'upload-contract-completed',
         element: <UploadContractCompleted />,
       },
+      {
+        path: 'application-completed',
+        element: <ApplicationMSMECompleted />,
+      },
       {
         path: 'confirm-submission',
         element: <ConfirmSubmission />,

From 5711b01374b22699b20bb943e770edc59a7b9081 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nahuel=20Hern=C3=A1ndez?= <jnahuelhernandez@gmail.com>
Date: Mon, 7 Aug 2023 20:41:16 -0400
Subject: [PATCH 10/22] feat: #81 download application

---
 docker-compose.yml                     |  2 +
 src/api/private.ts                     |  8 +++
 src/components/ApplicationsList.tsx    | 84 +++++++++++++++++++++-----
 src/components/DataTable.tsx           |  7 ++-
 src/constants/index.ts                 |  1 +
 src/hooks/useDownloadApplication.ts    | 42 +++++++++++++
 src/layout/SecureApplicationLayout.tsx | 35 ++++++-----
 src/pages/fi/ApplicationCompleted.tsx  | 31 ++++++++--
 src/pages/fi/ReviewContract.tsx        | 49 ++++++++++++---
 src/pages/fi/StageFiveApproved.tsx     | 35 +++++++++--
 10 files changed, 240 insertions(+), 54 deletions(-)
 create mode 100644 src/hooks/useDownloadApplication.ts

diff --git a/docker-compose.yml b/docker-compose.yml
index ab1529b..3fd5843 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -47,6 +47,8 @@ services:
       - REMINDER_DAYS_BEFORE_EXPIRATION=${REMINDER_DAYS_BEFORE_EXPIRATION}
       - PROGRESS_TO_REMIND_STARTED_APPLICATIONS=${PROGRESS_TO_REMIND_STARTED_APPLICATIONS}
       - ENVIRONMENT=${ENVIRONMENT}
+      - TRANSIFEX_TOKEN=${TRANSIFEX_TOKEN}
+      - TRANSIFEX_SECRET=${TRANSIFEX_SECRET}
 
     extra_hosts:
       - 'host.docker.internal:host-gateway'
diff --git a/src/api/private.ts b/src/api/private.ts
index fc982a1..614416c 100644
--- a/src/api/private.ts
+++ b/src/api/private.ts
@@ -132,6 +132,14 @@ export const downloadDocumentFn = async (id: number) => {
   return response.data;
 };
 
+export const downloadApplicationFn = async (id: number, lang: string) => {
+  const response = await authApi.get(`applications/${id}/download-application/${lang}`, {
+    responseType: 'blob',
+  });
+
+  return response.data;
+};
+
 export const emailToSME = async (emailToSMEPayload: EmailToSMEInput) => {
   const { application_id, ...payload } = emailToSMEPayload;
   const response = await authApi.post<IApplication>(`applications/email-sme/${application_id}`, payload);
diff --git a/src/components/ApplicationsList.tsx b/src/components/ApplicationsList.tsx
index a3a6202..5304117 100644
--- a/src/components/ApplicationsList.tsx
+++ b/src/components/ApplicationsList.tsx
@@ -17,6 +17,7 @@ import {
   STARTED_STATUS,
   USER_TYPES,
 } from '../constants';
+import useDownloadApplication from '../hooks/useDownloadApplication';
 import useStartApplication from '../hooks/useStartApplication';
 import {
   EXTENDED_APPLICATION_FROM,
@@ -26,6 +27,7 @@ import {
   PaginationInput,
 } from '../schemas/application';
 import LinkButton from '../stories/link-button/LinkButton';
+import Loader from '../stories/loader/Loader';
 import { renderApplicationStatus } from '../util';
 import { DataTable, HeadCell, Order } from './DataTable';
 
@@ -74,12 +76,18 @@ const headCellsOCP: HeadCell<IApplication & IExtendedApplication>[] = [
 type ExtendendApplication = IApplication & IExtendedApplication;
 const ApplicationDataTable = DataTable<ExtendendApplication>;
 
-const actionsFIBase = (row: ExtendendApplication, onStartApplicationHandler: (id: number) => void) => (
+const actionsFIBase = (
+  row: ExtendendApplication,
+  isLoading: boolean,
+  onStartApplicationHandler: (id: number) => void,
+  onDownloadApplicationHandler: (id: number) => void,
+) => (
   <Box className="flex flex-row">
     {STARTED_STATUS.includes(row.status) && (
       <LinkButton
         className="p-1 justify-start"
         component={Link}
+        disabled={isLoading}
         to={`/applications/${row.id}/stage-one`}
         label={t('Continue')}
         size="small"
@@ -91,6 +99,7 @@ const actionsFIBase = (row: ExtendendApplication, onStartApplicationHandler: (id
         className="p-1 justify-start"
         onClick={() => onStartApplicationHandler(row.id)}
         label={t('Start')}
+        disabled={isLoading}
         size="small"
         noIcon
       />
@@ -101,6 +110,7 @@ const actionsFIBase = (row: ExtendendApplication, onStartApplicationHandler: (id
         component={Link}
         to={`/applications/${row.id}/complete-application`}
         label={t('Review')}
+        disabled={isLoading}
         size="small"
         noIcon
       />
@@ -111,15 +121,16 @@ const actionsFIBase = (row: ExtendendApplication, onStartApplicationHandler: (id
         component={Link}
         to={`/applications/${row.id}/view`}
         label={t('View')}
+        disabled={isLoading}
         size="small"
         noIcon
       />
     )}
     <LinkButton
       className="p-1 justify-start"
-      component={Link}
-      to={`/applications/${row.id}/download`}
+      onClick={() => onDownloadApplicationHandler(row.id)}
       label={t('Download')}
+      disabled={isLoading}
       size="small"
       noIcon
     />
@@ -156,6 +167,10 @@ interface ApplicationListProps {
 export function ApplicationList({ type }: ApplicationListProps) {
   const { enqueueSnackbar } = useSnackbar();
   const { startApplicationMutation } = useStartApplication();
+  const [idToDownload, setIdToDownload] = useState<number | undefined>();
+
+  const { downloadedApplication, isLoading } = useDownloadApplication(idToDownload);
+
   const [payload, setPayload] = useState<PaginationInput>({
     page: 0,
     page_size: PAGE_SIZES[0],
@@ -235,20 +250,59 @@ export function ApplicationList({ type }: ApplicationListProps) {
     [startApplicationMutation],
   );
 
-  const actionsFI = (row: ExtendendApplication) => actionsFIBase(row, onStartApplicationHandler);
+  useEffect(() => {
+    if (downloadedApplication) {
+      const href = window.URL.createObjectURL(downloadedApplication);
+
+      const anchorElement = document.createElement('a');
+
+      anchorElement.href = href;
+      const filename = `${t('application')}-${idToDownload}.zip`;
+      anchorElement.download = filename;
+
+      document.body.appendChild(anchorElement);
+      anchorElement.click();
+
+      document.body.removeChild(anchorElement);
+      window.URL.revokeObjectURL(href);
+      setIdToDownload(undefined);
+    }
+  }, [downloadedApplication, idToDownload]);
+
+  const onDownloadApplicationHandler = useCallback(
+    (id: number) => {
+      setIdToDownload(id);
+    },
+    [setIdToDownload],
+  );
+
+  // eslint-disable-next-line no-shadow
+  const actionsFI = (row: ExtendendApplication, isLoading?: boolean) =>
+    actionsFIBase(
+      row,
+      isLoading !== undefined ? isLoading : false,
+      onStartApplicationHandler,
+      onDownloadApplicationHandler,
+    );
 
   return (
-    <ApplicationDataTable
-      rows={rows}
-      useEmptyRows
-      handleRequestSort={handleRequestSort}
-      headCells={headCells}
-      pagination={{
-        totalCount,
-        handleChangePage,
-      }}
-      actions={type === USER_TYPES.OCP ? actionsOCP : actionsFI}
-    />
+    <>
+      {isLoading && <Loader />}
+      {!isLoading && (
+        <ApplicationDataTable
+          rows={rows}
+          useEmptyRows
+          handleRequestSort={handleRequestSort}
+          headCells={headCells}
+          pagination={{
+            totalCount,
+            handleChangePage,
+          }}
+          isLoading={isLoading}
+          actions={type === USER_TYPES.OCP ? actionsOCP : actionsFI}
+        />
+      )}
+    </>
   );
 }
 
diff --git a/src/components/DataTable.tsx b/src/components/DataTable.tsx
index de1cfe0..4e71e3e 100644
--- a/src/components/DataTable.tsx
+++ b/src/components/DataTable.tsx
@@ -187,7 +187,8 @@ export interface DataTableProps<T> {
   useEmptyRows?: boolean;
   handleRequestSort?: (property: Extract<keyof T, string>, sortOrder: Order) => void;
   pagination?: HandlePagination;
-  actions?: (row: T) => JSX.Element;
+  actions?: (row: T, isLoading?: boolean) => JSX.Element;
+  isLoading?: boolean;
 }
 
 function renderValue<T>(row: T, headCell: HeadCell<T>) {
@@ -208,6 +209,7 @@ export function DataTable<T>({
   handleRequestSort,
   pagination,
   actions,
+  isLoading,
 }: DataTableProps<T>) {
   const t = useT();
   const { formatDateFromString } = useLocalizedDateFormatter();
@@ -278,7 +280,7 @@ export function DataTable<T>({
                       {headCell.type === 'date' && formatDateFromString(String(row[headCell.id]))}
                     </DataTableCell>
                   ))}
-                  {actions && <DataTableCell>{actions(row)}</DataTableCell>}
+                  {actions && <DataTableCell>{actions(row, isLoading)}</DataTableCell>}
                 </TableRow>
               ))}
 
@@ -326,6 +328,7 @@ DataTable.defaultProps = {
   pagination: undefined,
   useEmptyRows: true,
   actions: undefined,
+  isLoading: false,
 };
 
 export default DataTable;
diff --git a/src/constants/index.ts b/src/constants/index.ts
index d7521ce..1924212 100644
--- a/src/constants/index.ts
+++ b/src/constants/index.ts
@@ -32,6 +32,7 @@ export enum QUERY_KEYS {
   users = 'users',
   credit_product = 'credit_product',
   downloadDocument = 'downloadDocument',
+  downloadApplication = 'downloadApplication',
   awards = 'awards',
   statistics_fi = 'statistics_fi',
   statistics_ocp = 'statistics_ocp',
diff --git a/src/hooks/useDownloadApplication.ts b/src/hooks/useDownloadApplication.ts
new file mode 100644
index 0000000..82be062
--- /dev/null
+++ b/src/hooks/useDownloadApplication.ts
@@ -0,0 +1,42 @@
+import { useQuery } from '@tanstack/react-query';
+import { useT } from '@transifex/react';
+import axios from 'axios';
+import { useSnackbar } from 'notistack';
+
+import { downloadApplicationFn } from '../api/private';
+import { QUERY_KEYS } from '../constants';
+import useLangContext from './useLangContext';
+
+type IUseDownloadApplication = {
+  downloadedApplication?: Blob;
+  isLoading: boolean;
+};
+
+export default function useDownloadApplication(id?: number): IUseDownloadApplication {
+  const t = useT();
+  const langContext = useLangContext();
+  const { enqueueSnackbar } = useSnackbar();
+  const lang = langContext.state.selected.split('_')[0];
+
+  const { data: downloadedApplication, isLoading } = useQuery<Blob>({
+    queryKey: [QUERY_KEYS.downloadApplication, `${id}-${lang}`],
+    queryFn: () => downloadApplicationFn(Number(id), lang),
+    enabled: Boolean(id),
+    onSuccess: (data) => data,
+    onError: (error) => {
+      if (axios.isAxiosError(error) && error.response) {
+        if (error.response.data && error.response.data.detail) {
+          enqueueSnackbar(t('Error: {error}', { error: error.response.data.detail }), {
+            variant: 'error',
+          });
+        }
+      } else {
+        enqueueSnackbar(t('Error downloading Application. {error}', { error }), {
+          variant: 'error',
+        });
+      }
+    },
+  });
+
+  return { downloadedApplication, isLoading: id ? isLoading : false };
+}
diff --git a/src/layout/SecureApplicationLayout.tsx b/src/layout/SecureApplicationLayout.tsx
index ff7786b..0a76f26 100644
--- a/src/layout/SecureApplicationLayout.tsx
+++ b/src/layout/SecureApplicationLayout.tsx
@@ -1,4 +1,3 @@
- 
 import { useQuery } from '@tanstack/react-query';
 import { useT } from '@transifex/react';
 import axios from 'axios';
@@ -28,23 +27,7 @@ export default function SecureApplicationLayout() {
     }),
   );
 
-  useEffect(() => {
-    if (applicationContext.state.data) {
-      const application = applicationContext.state.data;
-      const { pathname } = location;
-      const lastSegment = pathname.substring(pathname.lastIndexOf('/') + 1);
-
-      if (lastSegment !== 'view') {
-        if (application.status === APPLICATION_STATUS.APPROVED) {
-          if (lastSegment !== 'stage-five-approved') navigate('./stage-five-approved');
-        } else if (application.status === APPLICATION_STATUS.REJECTED) {
-          if (lastSegment !== 'stage-five-rejected') navigate('./stage-five-rejected');
-        }
-      }
-    }
-  }, [applicationContext.state.data, navigate, location]);
-
-  const { isLoading } = useQuery({
+  const { isLoading, data } = useQuery({
     queryKey: [QUERY_KEYS.applications, `${id}`],
     queryFn: async (): Promise<IApplication | null> => {
       const application = await getApplicationFn(id);
@@ -62,6 +45,22 @@ export default function SecureApplicationLayout() {
     },
   });
 
+  useEffect(() => {
+    if (data) {
+      const application = data;
+      const { pathname } = location;
+      const lastSegment = pathname.substring(pathname.lastIndexOf('/') + 1);
+
+      if (lastSegment !== 'view') {
+        if (application.status === APPLICATION_STATUS.APPROVED) {
+          if (lastSegment !== 'stage-five-approved') navigate('./stage-five-approved');
+        } else if (application.status === APPLICATION_STATUS.REJECTED) {
+          if (lastSegment !== 'stage-five-rejected') navigate('./stage-five-rejected');
+        }
+      }
+    }
+  }, [data, navigate, location]);
+
   return (
     <PageLayout>
       {isLoading && <Loader />}
diff --git a/src/pages/fi/ApplicationCompleted.tsx b/src/pages/fi/ApplicationCompleted.tsx
index f820f68..7c19f03 100644
--- a/src/pages/fi/ApplicationCompleted.tsx
+++ b/src/pages/fi/ApplicationCompleted.tsx
@@ -1,9 +1,11 @@
 import { useT } from '@transifex/react';
+import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { Button } from 'src/stories/button/Button';
 import Text from 'src/stories/text/Text';
 import Title from 'src/stories/title/Title';
 
+import useDownloadApplication from '../../hooks/useDownloadApplication';
 import useApplicationContext from '../../hooks/useSecureApplicationContext';
 
 function ApplicationCompleted() {
@@ -11,16 +13,37 @@ function ApplicationCompleted() {
   const navigate = useNavigate();
   const applicationContext = useApplicationContext();
   const application = applicationContext.state.data;
+  const [idToDownload, setIdToDownload] = useState<number | undefined>();
+
+  const { downloadedApplication, isLoading } = useDownloadApplication(idToDownload);
 
   const onGoHomeHandler = () => {
     navigate('/');
   };
 
-  const onDownloadApplication = () => {
-    // eslint-disable-next-line no-console
-    console.log('download application');
+  const onDownloadApplication = async () => {
+    setIdToDownload(application?.id);
   };
 
+  useEffect(() => {
+    if (downloadedApplication) {
+      const href = window.URL.createObjectURL(downloadedApplication);
+
+      const anchorElement = document.createElement('a');
+
+      anchorElement.href = href;
+      const filename = `${t('application')}-${application?.borrower.legal_identifier}.zip`;
+      anchorElement.download = filename;
+
+      document.body.appendChild(anchorElement);
+      anchorElement.click();
+
+      document.body.removeChild(anchorElement);
+      window.URL.revokeObjectURL(href);
+      setIdToDownload(undefined);
+    }
+  }, [application?.borrower.legal_identifier, downloadedApplication, t]);
+
   return (
     <div className="xl:w-4/5">
       <Title type="page" label={t('Application Completed')} className="mb-4" />
@@ -33,7 +56,7 @@ function ApplicationCompleted() {
           <Button primary={false} className="md:mr-4" label={t('Back to home')} onClick={onGoHomeHandler} />
         </div>
         <div>
-          <Button disabled label={t('Download application')} onClick={onDownloadApplication} />
+          <Button label={t('Download application')} onClick={onDownloadApplication} disabled={isLoading} />
         </div>
       </div>
       <Text className="mb-10 text-sm font-light">
diff --git a/src/pages/fi/ReviewContract.tsx b/src/pages/fi/ReviewContract.tsx
index 8b201d5..c7eb0b0 100644
--- a/src/pages/fi/ReviewContract.tsx
+++ b/src/pages/fi/ReviewContract.tsx
@@ -4,7 +4,7 @@
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Box, Link as MUILink } from '@mui/material';
 import { useT } from '@transifex/react';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { FormProvider, SubmitHandler, useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
 import Text from 'src/stories/text/Text';
@@ -12,6 +12,7 @@ import Title from 'src/stories/title/Title';
 
 import { DOCUMENTS_TYPE } from '../../constants';
 import useCompleteApplication from '../../hooks/useCompleteApplication';
+import useDownloadApplication from '../../hooks/useDownloadApplication';
 import useDownloadDocument from '../../hooks/useDownloadDocument';
 import useApplicationContext from '../../hooks/useSecureApplicationContext';
 import { FormCompleteApplicationInput, IBorrowerDocument, completeApplicationSchema } from '../../schemas/application';
@@ -24,13 +25,20 @@ function ReviewContract() {
   const navigate = useNavigate();
   const { isLoading, completeApplicationMutation } = useCompleteApplication();
   const applicationContext = useApplicationContext();
+  const application = applicationContext.state.data;
+  const [idToDownloadApplication, setIdToDownloadApplication] = useState<number | undefined>();
+
+  const { downloadedApplication, isLoading: isLoadingDownload } = useDownloadApplication(idToDownloadApplication);
+
+  const onDownloadApplicationHandler = useCallback(() => {
+    setIdToDownloadApplication(application?.id);
+  }, [setIdToDownloadApplication, application?.id]);
 
   const [idToDownload, setIdToDownload] = useState<number | undefined>();
   const [contract, setContract] = useState<IBorrowerDocument | undefined>();
 
   const { downloadedDocument, isLoading: isLoadingDocument } = useDownloadDocument(idToDownload);
 
-  const application = applicationContext.state.data;
   const borrower_documents = application?.borrower_documents;
 
   const onDownloadContract = () => {
@@ -64,15 +72,29 @@ function ReviewContract() {
     }
   }, [downloadedDocument, contract]);
 
+  useEffect(() => {
+    if (downloadedApplication) {
+      const href = window.URL.createObjectURL(downloadedApplication);
+
+      const anchorElement = document.createElement('a');
+
+      anchorElement.href = href;
+      const filename = `${t('application')}-${application?.borrower.legal_identifier}.zip`;
+      anchorElement.download = filename;
+
+      document.body.appendChild(anchorElement);
+      anchorElement.click();
+
+      document.body.removeChild(anchorElement);
+      window.URL.revokeObjectURL(href);
+      setIdToDownloadApplication(undefined);
+    }
+  }, [application?.borrower.legal_identifier, downloadedApplication, t]);
+
   const onGoHomeHandler = () => {
     navigate('/');
   };
 
-  const onDownloadApplication = () => {
-    // eslint-disable-next-line no-console
-    console.log('download application');
-  };
-
   const methods = useForm<FormCompleteApplicationInput>({
     resolver: zodResolver(completeApplicationSchema),
   });
@@ -152,10 +174,19 @@ function ReviewContract() {
               <Button primary={false} className="md:mr-4" label={t('Back to home')} onClick={onGoHomeHandler} />
             </div>
             <div>
-              <Button className="md:mr-4" label={t('Credit ready')} type="submit" disabled={isLoading} />
+              <Button
+                className="md:mr-4"
+                label={t('Credit ready')}
+                type="submit"
+                disabled={isLoading || isLoadingDocument || isLoadingDownload}
+              />
             </div>
             <div>
-              <Button disabled label={t('Download application')} onClick={onDownloadApplication} />
+              <Button
+                disabled={isLoadingDownload}
+                label={t('Download application')}
+                onClick={onDownloadApplicationHandler}
+              />
             </div>
           </div>
           <Text className="mb-10 text-sm font-light">
diff --git a/src/pages/fi/StageFiveApproved.tsx b/src/pages/fi/StageFiveApproved.tsx
index 27e9c32..3a55bbf 100644
--- a/src/pages/fi/StageFiveApproved.tsx
+++ b/src/pages/fi/StageFiveApproved.tsx
@@ -1,5 +1,5 @@
- 
 import { useT } from '@transifex/react';
+import { useCallback, useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import StepImage from 'src/assets/pages/stage-five.svg';
 import useApplicationContext from 'src/hooks/useSecureApplicationContext';
@@ -7,16 +7,39 @@ import Button from 'src/stories/button/Button';
 import Text from 'src/stories/text/Text';
 import Title from 'src/stories/title/Title';
 
+import useDownloadApplication from '../../hooks/useDownloadApplication';
+
 export function StageFiveApproved() {
   const t = useT();
   const navigate = useNavigate();
   const applicationContext = useApplicationContext();
   const application = applicationContext.state.data;
+  const [idToDownload, setIdToDownload] = useState<number | undefined>();
 
-  const onDownloadApplication = () => {
-    // eslint-disable-next-line no-console
-    console.log('download application');
-  };
+  const { downloadedApplication, isLoading } = useDownloadApplication(idToDownload);
+
+  const onDownloadApplicationHandler = useCallback(() => {
+    setIdToDownload(application?.id);
+  }, [setIdToDownload, application?.id]);
+
+  useEffect(() => {
+    if (downloadedApplication) {
+      const href = window.URL.createObjectURL(downloadedApplication);
+
+      const anchorElement = document.createElement('a');
+
+      anchorElement.href = href;
+      const filename = `${t('application')}-${application?.borrower.legal_identifier}.zip`;
+      anchorElement.download = filename;
+
+      document.body.appendChild(anchorElement);
+      anchorElement.click();
+
+      document.body.removeChild(anchorElement);
+      window.URL.revokeObjectURL(href);
+      setIdToDownload(undefined);
+    }
+  }, [application?.borrower.legal_identifier, downloadedApplication, t]);
 
   const onGoHomeHandler = () => {
     navigate('/');
@@ -42,7 +65,7 @@ export function StageFiveApproved() {
           <Button primary={false} className="md:mr-4" label={t('Back to home')} onClick={onGoHomeHandler} />
         </div>
         <div>
-          <Button disabled label={t('Download application')} onClick={onDownloadApplication} />
+          <Button disabled={isLoading} label={t('Download application')} onClick={onDownloadApplicationHandler} />
         </div>
       </div>
     </>

From 3dc12ce578327b635c769ad5389b3cc48c024af8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nahuel=20Hern=C3=A1ndez?= <jnahuelhernandez@gmail.com>
Date: Mon, 7 Aug 2023 21:11:09 -0400
Subject: [PATCH 11/22] fix: #148 stage one access

---
 src/layout/SecureApplicationLayout.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/layout/SecureApplicationLayout.tsx b/src/layout/SecureApplicationLayout.tsx
index 0a76f26..e50aa3e 100644
--- a/src/layout/SecureApplicationLayout.tsx
+++ b/src/layout/SecureApplicationLayout.tsx
@@ -52,7 +52,11 @@ export default function SecureApplicationLayout() {
       const lastSegment = pathname.substring(pathname.lastIndexOf('/') + 1);
 
       if (lastSegment !== 'view') {
-        if (application.status === APPLICATION_STATUS.APPROVED) {
+        if (application.status === APPLICATION_STATUS.LAPSED) {
+          navigate('./view');
+        } else if (application.status === APPLICATION_STATUS.COMPLETED) {
+          if (lastSegment !== 'application-completed') navigate('./application-completed');
+        } else if (application.status === APPLICATION_STATUS.APPROVED) {
           if (lastSegment !== 'stage-five-approved') navigate('./stage-five-approved');
         } else if (application.status === APPLICATION_STATUS.REJECTED) {
           if (lastSegment !== 'stage-five-rejected') navigate('./stage-five-rejected');

From f3563550ab29e68aa7863e768b429b331606c885 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nahuel=20Hern=C3=A1ndez?= <jnahuelhernandez@gmail.com>
Date: Tue, 8 Aug 2023 01:24:14 -0400
Subject: [PATCH 12/22] fix: nginx config max file size

---
 Dockerfile         | 4 ++--
 docker-compose.yml | 2 +-
 nginx/nginx.conf   | 1 +
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/Dockerfile b/Dockerfile
index 797ad5f..042d30b 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -7,8 +7,8 @@ RUN yarn build
 
 FROM nginx:1.25.1-alpine
 ARG client_max_body_size
-COPY ./nginx/nginx.conf /etc/nginx/conf.d/default.conf
+COPY ./nginx/nginx.conf /etc/nginx/conf.d/default.conf.template
+CMD /bin/bash -c "envsubst < /etc/nginx/conf.d/default.conf.template > /etc/nginx/conf.d/default.conf"
 COPY --from=build /app/dist /usr/share/nginx/html
-RUN sed -i "/listen[ ]*80;/i client_max_body_size ${client_max_body_size}M;" /etc/nginx/conf.d/default.conf
 EXPOSE 80
 CMD ["nginx","-g","daemon off;"]
\ No newline at end of file
diff --git a/docker-compose.yml b/docker-compose.yml
index 3fd5843..bd9be8b 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -3,7 +3,7 @@ services:
     build:
       context: ./credere-frontend/
       args:
-        max_size_body: ${VITE_MAX_FILE_SIZE_MB}
+        VITE_MAX_FILE_SIZE_MB: ${VITE_MAX_FILE_SIZE_MB}
     environment:
       - VITE_APP_VERSION=${VITE_APP_VERSION}
       - VITE_API_URL=${VITE_API_URL}
diff --git a/nginx/nginx.conf b/nginx/nginx.conf
index f65b1c0..59794f3 100644
--- a/nginx/nginx.conf
+++ b/nginx/nginx.conf
@@ -1,6 +1,7 @@
 server {
   listen                          80;
   server_name                     frontend;
+  client_max_body_size            $VITE_MAX_FILE_SIZE_MB
   location / {
     #                             This would be the directory where your React app's static files are stored at
     root                          /usr/share/nginx/html;

From a5c12abb40262ea0b89dcbf6d48bb8c1dc4a74ce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nahuel=20Hern=C3=A1ndez?= <jnahuelhernandez@gmail.com>
Date: Tue, 8 Aug 2023 01:47:52 -0400
Subject: [PATCH 13/22] fix: dockerfile

---
 Dockerfile       | 3 +--
 nginx/nginx.conf | 2 +-
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/Dockerfile b/Dockerfile
index 042d30b..3cddbb3 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -7,8 +7,7 @@ RUN yarn build
 
 FROM nginx:1.25.1-alpine
 ARG client_max_body_size
-COPY ./nginx/nginx.conf /etc/nginx/conf.d/default.conf.template
-CMD /bin/bash -c "envsubst < /etc/nginx/conf.d/default.conf.template > /etc/nginx/conf.d/default.conf"
+COPY ./nginx/nginx.conf /etc/nginx/conf.d/default.conf
 COPY --from=build /app/dist /usr/share/nginx/html
 EXPOSE 80
 CMD ["nginx","-g","daemon off;"]
\ No newline at end of file
diff --git a/nginx/nginx.conf b/nginx/nginx.conf
index 59794f3..ea84f61 100644
--- a/nginx/nginx.conf
+++ b/nginx/nginx.conf
@@ -1,7 +1,7 @@
 server {
   listen                          80;
   server_name                     frontend;
-  client_max_body_size            $VITE_MAX_FILE_SIZE_MB
+  client_max_body_size            10M;
   location / {
     #                             This would be the directory where your React app's static files are stored at
     root                          /usr/share/nginx/html;

From 9f33a642787631831a60d27c0a647d8c1c9235fa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nahuel=20Hern=C3=A1ndez?= <jnahuelhernandez@gmail.com>
Date: Mon, 14 Aug 2023 08:17:16 -0400
Subject: [PATCH 14/22] fix: #41 refetch application on summary

---
 src/layout/SecureApplicationLayout.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/layout/SecureApplicationLayout.tsx b/src/layout/SecureApplicationLayout.tsx
index e50aa3e..96eea07 100644
--- a/src/layout/SecureApplicationLayout.tsx
+++ b/src/layout/SecureApplicationLayout.tsx
@@ -27,7 +27,7 @@ export default function SecureApplicationLayout() {
     }),
   );
 
-  const { isLoading, data } = useQuery({
+  const { isLoading, data, refetch } = useQuery({
     queryKey: [QUERY_KEYS.applications, `${id}`],
     queryFn: async (): Promise<IApplication | null> => {
       const application = await getApplicationFn(id);
@@ -61,9 +61,10 @@ export default function SecureApplicationLayout() {
         } else if (application.status === APPLICATION_STATUS.REJECTED) {
           if (lastSegment !== 'stage-five-rejected') navigate('./stage-five-rejected');
         }
+        if (lastSegment === 'stage-four') refetch();
       }
     }
-  }, [data, navigate, location]);
+  }, [data, navigate, location, refetch]);
 
   return (
     <PageLayout>

From 410d7dfc5e86db46084c238685346dfc006985ed Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nahuel=20Hern=C3=A1ndez?= <jnahuelhernandez@gmail.com>
Date: Mon, 14 Aug 2023 08:19:28 -0400
Subject: [PATCH 15/22] feat: #40 msme legal type in credit product form

---
 src/constants/index.ts              | 11 +++++++++++
 src/pages/ocp/CreditProductForm.tsx | 25 +++++++++++++++++++++----
 src/schemas/OCPsettings.ts          |  9 ++++++++-
 3 files changed, 40 insertions(+), 5 deletions(-)

diff --git a/src/constants/index.ts b/src/constants/index.ts
index 1924212..2cbfeee 100644
--- a/src/constants/index.ts
+++ b/src/constants/index.ts
@@ -151,6 +151,17 @@ export enum DOCUMENTS_TYPE {
   COMPLIANCE_REPORT = 'COMPLIANCE_REPORT',
 }
 
+// eslint-disable-next-line no-shadow
+export enum BORROWER_TYPE {
+  NATURAL_PERSON = 'NATURAL_PERSON',
+  LEGAL_PERSON = 'LEGAL_PERSON',
+}
+
+export const BORROWER_TYPES_NAMES: { [key: string]: string } = {
+  [BORROWER_TYPE.NATURAL_PERSON]: t('Natural Person'),
+  [BORROWER_TYPE.LEGAL_PERSON]: t('Legal Person'),
+};
+
 // eslint-disable-next-line no-shadow
 export enum MSME_TYPES {
   NOT_INFORMED = 'NOT_INFORMED',
diff --git a/src/pages/ocp/CreditProductForm.tsx b/src/pages/ocp/CreditProductForm.tsx
index b4dd8a4..4797322 100644
--- a/src/pages/ocp/CreditProductForm.tsx
+++ b/src/pages/ocp/CreditProductForm.tsx
@@ -1,7 +1,3 @@
- 
-
- 
-
 /* eslint-disable react/jsx-props-no-spreading */
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Box } from '@mui/material';
@@ -22,6 +18,8 @@ import { z } from 'zod';
 
 import { getCreditProductFn } from '../../api/private';
 import {
+  BORROWER_TYPE,
+  BORROWER_TYPES_NAMES,
   CREDIT_PRODUCT_OPTIONS,
   DOCUMENTS_TYPE,
   DOCUMENT_TYPES_NAMES,
@@ -127,6 +125,25 @@ export function CreditProductForm({ creditProduct, lenderId }: CreditProductForm
             placeholder={t('Type')}
           />
 
+          <Text className="mb-4">
+            {t('Select the legal type of MSMEs the credit provider is willing to offer credit to')}
+          </Text>
+          <Box className="mb-4">
+            <Box className="w-3/5 flex flex-col items-start justify-start gap-2">
+              <Checkbox
+                label={BORROWER_TYPES_NAMES[BORROWER_TYPE.NATURAL_PERSON]}
+                name={`borrower_types.${BORROWER_TYPE.NATURAL_PERSON}`}
+                className={errors.borrower_types ? 'text-red' : ''}
+              />
+              <Checkbox
+                label={BORROWER_TYPES_NAMES[BORROWER_TYPE.LEGAL_PERSON]}
+                name={`borrower_types.${BORROWER_TYPE.LEGAL_PERSON}`}
+                className={errors.borrower_types ? 'text-red' : ''}
+              />
+            </Box>
+            <FormInputError fieldError={errors.borrower_types} />
+          </Box>
+
           <Text className="mb-1">
             {t(
               'Enter the lower and upper limits that the credit provider will be willing to offer for this credit product',
diff --git a/src/schemas/OCPsettings.ts b/src/schemas/OCPsettings.ts
index 1145fed..1fe1494 100644
--- a/src/schemas/OCPsettings.ts
+++ b/src/schemas/OCPsettings.ts
@@ -1,7 +1,7 @@
 import { t } from '@transifex/native';
 import { TypeOf, boolean, coerce, nativeEnum, object, preprocess, string } from 'zod';
 
-import { CREDIT_PRODUCT_TYPE, DOCUMENTS_TYPE, MSME_TYPES } from '../constants';
+import { BORROWER_TYPE, CREDIT_PRODUCT_TYPE, DOCUMENTS_TYPE, MSME_TYPES } from '../constants';
 
 const creditProviderNameSchema = string().min(1, t('Provider name is required'));
 const creditProviderTypeSchema = string().nonempty(t('Provider type is required'));
@@ -80,6 +80,13 @@ export const creditProductSchema = object({
       message: t('You need to check at least one option'),
     },
   ),
+  borrower_types: object({
+    [BORROWER_TYPE.NATURAL_PERSON]: boolean(),
+    [BORROWER_TYPE.LEGAL_PERSON]: boolean(),
+  }).refine((data) => data[BORROWER_TYPE.NATURAL_PERSON] || data[BORROWER_TYPE.LEGAL_PERSON], {
+    path: [''],
+    message: t('You need to check at least one option'),
+  }),
   other_fees_total_amount: preprocess(
     (args) => (args === '' ? undefined : args),
     coerce

From a3788cea329598d372c6ce591e64809bad5aa678 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nahuel=20Hern=C3=A1ndez?= <jnahuelhernandez@gmail.com>
Date: Thu, 17 Aug 2023 13:47:22 -0400
Subject: [PATCH 16/22] feat: loader for document upload

---
 src/components/DocumentField.tsx |  6 ++--
 src/components/FileUploader.tsx  | 52 ++++++++++++++++++--------------
 2 files changed, 33 insertions(+), 25 deletions(-)

diff --git a/src/components/DocumentField.tsx b/src/components/DocumentField.tsx
index b8dd9ed..d8c03a0 100644
--- a/src/components/DocumentField.tsx
+++ b/src/components/DocumentField.tsx
@@ -31,6 +31,7 @@ export function DocumentField({ label, documentType, secure = false, className,
   const { enqueueSnackbar } = useSnackbar();
   const [current, setCurrent] = useState<IBorrowerDocument | undefined>();
   const [showUploader, setShowUploader] = useState<boolean>(true);
+  const [loading, setLoading] = useState<boolean>(false);
 
   const applicationContext = useApplicationContext();
   const secureApplicationContext = useSecureApplicationContext();
@@ -68,6 +69,7 @@ export function DocumentField({ label, documentType, secure = false, className,
       if (!application) return;
 
       try {
+        setLoading(true);
         if (documentType === DOCUMENTS_TYPE.COMPLIANCE_REPORT) {
           const payload: UploadComplianceInput = {
             file,
@@ -94,7 +96,7 @@ export function DocumentField({ label, documentType, secure = false, className,
           const uploaded = await uploadFileFn(payload);
           setCurrent(uploaded);
         }
-
+        setLoading(false);
         setShowUploader(false);
         if (setUploadState) setUploadState((prev) => ({ ...prev, [documentType]: true }));
       } catch (error) {
@@ -139,7 +141,7 @@ export function DocumentField({ label, documentType, secure = false, className,
           />
         </Box>
       )}
-      {showUploader && <FileUploader className={className} onAcceptedFile={onAcceptedFile} />}
+      {showUploader && <FileUploader loading={loading} className={className} onAcceptedFile={onAcceptedFile} />}
     </Box>
   );
 }
diff --git a/src/components/FileUploader.tsx b/src/components/FileUploader.tsx
index 98c6b54..ff417e9 100644
--- a/src/components/FileUploader.tsx
+++ b/src/components/FileUploader.tsx
@@ -14,8 +14,11 @@ import Cloud from 'src/assets/icons/cloud.svg';
 import Button from 'src/stories/button/Button';
 import Text from 'src/stories/text/Text';
 
+import { Progress } from '../stories/loader/Loader';
+
 interface FileUploaderProps {
   className?: string;
+  loading: boolean;
   onAcceptedFile: (file: File) => void;
 }
 
@@ -27,7 +30,7 @@ const errorsMap = {
   [ErrorCode.FileTooLarge]: tNative('File is larger than {maxSizeMB} MB', { maxSizeMB }),
 };
 
-export function FileUploader({ className, onAcceptedFile }: FileUploaderProps) {
+export function FileUploader({ className, loading, onAcceptedFile }: FileUploaderProps) {
   const t = useT();
   const { enqueueSnackbar } = useSnackbar();
 
@@ -67,29 +70,32 @@ export function FileUploader({ className, onAcceptedFile }: FileUploaderProps) {
       <div
         {...getRootProps({ className: `dropzone flex items-center justify-center ${className}` })}
         onClick={(e) => e.stopPropagation()}>
-        <label
-          htmlFor="dropzone-file"
-          onClick={(e) => e.stopPropagation()}
-          className="flex flex-col items-center justify-center w-full h-64 border-1 border-fieldBorder border-dashed rounded-lg cursor-pointer bg-white dark:hover:bg-bray-800 dark:bg-gray-700 hover:bg-gray-100">
-          <div className="flex flex-col items-center justify-center pt-5 pb-6">
-            <div className="flex flex-row items-center justify-center">
-              <img src={Cloud} alt="cloud-icon" />
-              <Text className="text-sm font-light mb-0 ml-2">
-                {!isDragActive && t('Drag and drop or click here')}
-                {isDragAccept && t('File will be accepted')}
-                {isDragReject && t('File will be rejected')}
-              </Text>
+        {!loading && (
+          <label
+            htmlFor="dropzone-file"
+            onClick={(e) => e.stopPropagation()}
+            className="flex flex-col items-center justify-center w-full h-64 border-1 border-fieldBorder border-dashed rounded-lg cursor-pointer bg-white dark:hover:bg-bray-800 dark:bg-gray-700 hover:bg-gray-100">
+            <div className="flex flex-col items-center justify-center pt-5 pb-6">
+              <div className="flex flex-row items-center justify-center">
+                <img src={Cloud} alt="cloud-icon" />
+                <Text className="text-sm font-light mb-0 ml-2">
+                  {!isDragActive && t('Drag and drop or click here')}
+                  {isDragAccept && t('File will be accepted')}
+                  {isDragReject && t('File will be rejected')}
+                </Text>
+              </div>
+              <Button
+                noIcon
+                primary={false}
+                className="mt-4 border border-solid border-fieldBorder"
+                label={t('Browse file')}
+                onClick={open}
+              />
             </div>
-            <Button
-              noIcon
-              primary={false}
-              className="mt-4 border border-solid border-fieldBorder"
-              label={t('Browse file')}
-              onClick={open}
-            />
-          </div>
-          <input id="dropzone-file" type="file" className="hidden" {...getInputProps({ multiple: true })} />
-        </label>
+            <input id="dropzone-file" type="file" className="hidden" {...getInputProps({ multiple: true })} />
+          </label>
+        )}
+        {loading && <Progress />}
       </div>
       <Text className="text-sm font-light mt-4">
         {t('Accepted formats are PDF, JPEG and PNG. The maximum file size permitted is {maxSizeMB}MB.', { maxSizeMB })}

From 1bddfbd383dba45865070867217b95c93adf503c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nahuel=20Hern=C3=A1ndez?= <jnahuelhernandez@gmail.com>
Date: Thu, 17 Aug 2023 13:55:54 -0400
Subject: [PATCH 17/22] fix: linter

---
 .eslintrc.cjs | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 11ff0ee..55d0ebf 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -42,6 +42,7 @@ module.exports = {
   plugins: ['react-refresh', '@typescript-eslint', 'react', 'prettier'],
   rules: {
     'react-refresh/only-export-components': 'warn',
+    'import/order': 'warn',
     'react/react-in-jsx-scope': 'off',
     'react/jsx-curly-brace-presence': 'off',
     'react/jsx-filename-extension': [2, { extensions: ['.js', '.jsx', '.ts', '.tsx'] }],

From a5d5c7e14fe86d2dae9fe5cb30a959d5c576c6c8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nahuel=20Hern=C3=A1ndez?= <jnahuelhernandez@gmail.com>
Date: Thu, 17 Aug 2023 14:27:03 -0400
Subject: [PATCH 18/22] fix: missing translations

---
 src/components/ApplicationTableDataDocumentRow.tsx | 4 +++-
 src/components/ApplicationsList.tsx                | 5 ++---
 src/components/DataTable.tsx                       | 6 +++---
 src/pages/fi/ViewApplication.tsx                   | 2 +-
 src/pages/ocp/ApplicationDetail.tsx                | 2 +-
 5 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/components/ApplicationTableDataDocumentRow.tsx b/src/components/ApplicationTableDataDocumentRow.tsx
index 1e025db..f8bd25d 100644
--- a/src/components/ApplicationTableDataDocumentRow.tsx
+++ b/src/components/ApplicationTableDataDocumentRow.tsx
@@ -1,4 +1,5 @@
 import { TableRow } from '@mui/material';
+import { useT } from '@transifex/react';
 import DocumentIcon from 'src/assets/icons/document.svg';
 
 import { DOCUMENT_TYPES_NAMES } from '../constants';
@@ -17,6 +18,7 @@ export function ApplicationTableDataDocumentRow({
   isLoading = false,
   readonly = false,
 }: ApplicationTableDocumentDataRowProps) {
+  const t = useT();
   const value = document.name;
   const missing = false;
 
@@ -29,7 +31,7 @@ export function ApplicationTableDataDocumentRow({
 
   return (
     <TableRow>
-      <DataTableCell>{DOCUMENT_TYPES_NAMES[document.type]}</DataTableCell>
+      <DataTableCell>{t(DOCUMENT_TYPES_NAMES[document.type])}</DataTableCell>
       <DataTableCell>
         <DataAvailability available={!missing} label={document.type} readonly={readonly} />
       </DataTableCell>
diff --git a/src/components/ApplicationsList.tsx b/src/components/ApplicationsList.tsx
index 5304117..01375d0 100644
--- a/src/components/ApplicationsList.tsx
+++ b/src/components/ApplicationsList.tsx
@@ -57,9 +57,8 @@ const headCellsBase: HeadCell<IApplication & IExtendedApplication>[] = [
     disablePadding: false,
     label: t('Stage'),
     sortable: true,
-    render: (row: IApplication & IExtendedApplication, headCell: HeadCell<IApplication & IExtendedApplication>) => (
-      <>{renderApplicationStatus(String(row[headCell.id]))}</>
-    ),
+    render: (row: IApplication & IExtendedApplication, headCell: HeadCell<IApplication & IExtendedApplication>) =>
+      renderApplicationStatus(String(row[headCell.id])),
   },
 ];
 
diff --git a/src/components/DataTable.tsx b/src/components/DataTable.tsx
index 4e71e3e..e154ba6 100644
--- a/src/components/DataTable.tsx
+++ b/src/components/DataTable.tsx
@@ -71,7 +71,7 @@ export interface HeadCell<T> {
   id: Extract<keyof T, string>;
   label: string;
   type?: DataCellType;
-  render?: (row: T, headCell: HeadCell<T>) => JSX.Element;
+  render?: (row: T, headCell: HeadCell<T>) => JSX.Element | string;
   sortable?: boolean;
   width?: number;
 }
@@ -156,7 +156,7 @@ function DataTableHead<T>({
                 className="flex flex-row justify-between text-moodyBlue text-sm font-normal"
                 IconComponent={orderBy === headCell.id ? SorterDirection : Sorter}
                 onClick={createSortHandler(headCell.id)}>
-                {headCell.label}
+                {t(headCell.label)}
               </TableSortLabel>
             )}
             {!headCell.sortable && <DataTableHeadLabel label={headCell.label} />}
@@ -276,7 +276,7 @@ export function DataTable<T>({
                 <TableRow tabIndex={-1} key={`${String(index)}`}>
                   {headCells.map((headCell) => (
                     <DataTableCell key={`${String(`${row[headCell.id]}-${index}-${headCell.id}`)}`}>
-                      {headCell.type !== 'date' && renderValue(row, headCell)}
+                      {headCell.type !== 'date' && t(renderValue(row, headCell))}
                       {headCell.type === 'date' && formatDateFromString(String(row[headCell.id]))}
                     </DataTableCell>
                   ))}
diff --git a/src/pages/fi/ViewApplication.tsx b/src/pages/fi/ViewApplication.tsx
index 756b6dc..41117e0 100644
--- a/src/pages/fi/ViewApplication.tsx
+++ b/src/pages/fi/ViewApplication.tsx
@@ -30,7 +30,7 @@ export function ViewApplication() {
         <>
           <Box className="flex flex-row items-center mb-2">
             <Text className="text-lg mr-2">{t('Status:')}</Text>
-            <Text className="text-lg font-light">{renderApplicationStatus(application.status)}</Text>
+            <Text className="text-lg font-light">{t(renderApplicationStatus(application.status))}</Text>
           </Box>
 
           {application.status === APPLICATION_STATUS.APPROVED && (
diff --git a/src/pages/ocp/ApplicationDetail.tsx b/src/pages/ocp/ApplicationDetail.tsx
index 92ba1d5..22c367b 100644
--- a/src/pages/ocp/ApplicationDetail.tsx
+++ b/src/pages/ocp/ApplicationDetail.tsx
@@ -50,7 +50,7 @@ export function ApplicationDetail({ application, readonly }: ApplicationDetailPr
       </div>
       <Box className="flex flex-row items-center mb-2">
         <Text className="text-lg mr-2">{t('Status:')}</Text>
-        <Text className="text-lg font-light">{renderApplicationStatus(application.status)}</Text>
+        <Text className="text-lg font-light">{t(renderApplicationStatus(application.status))}</Text>
       </Box>
 
       {application.status === APPLICATION_STATUS.APPROVED && <DataDisplay data={application.lender_approved_data} />}

From d5f1f31547f9b1b61ba1eb53243aa87e01957511 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nahuel=20Hern=C3=A1ndez?= <jnahuelhernandez@gmail.com>
Date: Thu, 17 Aug 2023 14:35:46 -0400
Subject: [PATCH 19/22] chore: change sentry env name

---
 docker-compose.yml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/docker-compose.yml b/docker-compose.yml
index bd9be8b..f971586 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -38,6 +38,7 @@ services:
       - EMAIL_TEMPLATE_LANG=${EMAIL_TEMPLATE_LANG}
       - FACEBOOK_LINK=${FACEBOOK_LINK}
       - TWITTER_LINK=${TWITTER_LINK}
+      - SENTRY_DSN=${SENTRY_DSN}
       - LINK_LINK=${LINK_LINK}
       - OCP_EMAIL_GROUP=${OCP_EMAIL_GROUP}
       - APPLICATION_EXPIRATION_DAYS=${APPLICATION_EXPIRATION_DAYS}

From 664fb9e0cb7de55c77133d48b177c641d0f8a0f8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nahuel=20Hern=C3=A1ndez?= <jnahuelhernandez@gmail.com>
Date: Thu, 17 Aug 2023 15:09:00 -0400
Subject: [PATCH 20/22] fix: render translations

---
 src/components/CreditProductList.tsx | 5 ++---
 src/components/LenderList.tsx        | 5 +----
 2 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/src/components/CreditProductList.tsx b/src/components/CreditProductList.tsx
index a3846d8..7ec1308 100644
--- a/src/components/CreditProductList.tsx
+++ b/src/components/CreditProductList.tsx
@@ -1,4 +1,3 @@
- 
 import { t } from '@transifex/native';
 import { Link } from 'react-router-dom';
 
@@ -13,7 +12,7 @@ const headCells: HeadCell<ICreditProduct>[] = [
     disablePadding: false,
     label: t('Borrower size'),
     sortable: false,
-    render: (row: ICreditProduct) => <>{renderBorrowerSizeType(row.borrower_size)}</>,
+    render: (row: ICreditProduct) => renderBorrowerSizeType(row.borrower_size),
   },
   {
     id: 'lower_limit',
@@ -41,7 +40,7 @@ const headCells: HeadCell<ICreditProduct>[] = [
     disablePadding: false,
     label: t('Type'),
     sortable: false,
-    render: (row: ICreditProduct) => <>{renderCreditProductType(row.type)}</>,
+    render: (row: ICreditProduct) => renderCreditProductType(row.type),
   },
 ];
 
diff --git a/src/components/LenderList.tsx b/src/components/LenderList.tsx
index 6fa3dca..6f1572d 100644
--- a/src/components/LenderList.tsx
+++ b/src/components/LenderList.tsx
@@ -1,6 +1,3 @@
- 
-
- 
 import { useQuery } from '@tanstack/react-query';
 import { t } from '@transifex/native';
 import axios from 'axios';
@@ -34,7 +31,7 @@ const headCells: HeadCell<ILender>[] = [
     disablePadding: false,
     label: t('Type'),
     sortable: false,
-    render: (row: ILender) => <>{renderLenderType(row.type)}</>,
+    render: (row: ILender) => renderLenderType(row.type),
   },
 ];
 

From 7ced95f2300d00fe9b49002b097b7a09c1dafeb3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nahuel=20Hern=C3=A1ndez?= <jnahuelhernandez@gmail.com>
Date: Thu, 17 Aug 2023 15:11:13 -0400
Subject: [PATCH 21/22] fix: render user type in list

---
 src/components/UserList.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/UserList.tsx b/src/components/UserList.tsx
index cedbe55..f2182e6 100644
--- a/src/components/UserList.tsx
+++ b/src/components/UserList.tsx
@@ -35,7 +35,7 @@ const headCells: HeadCell<ExtendendUser>[] = [
     disablePadding: false,
     label: t('Type'),
     sortable: true,
-    render: (row: ExtendendUser) => <>{renderUserType(row.type)}</>,
+    render: (row: ExtendendUser) => renderUserType(row.type),
   },
   {
     id: 'lender_name',

From 332c54bc36e869a75fac8e15e8cc4058c0988f94 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nahuel=20Hern=C3=A1ndez?= <jnahuelhernandez@gmail.com>
Date: Mon, 4 Sep 2023 09:31:26 -0400
Subject: [PATCH 22/22] feat: check user type on routes

---
 src/layout/SecureApplicationLayout.tsx | 15 +++++++++------
 src/routes/AppRouter.tsx               | 21 +++++++++++----------
 src/routes/ProtectedRoute.tsx          | 16 +++++++++++++++-
 3 files changed, 35 insertions(+), 17 deletions(-)

diff --git a/src/layout/SecureApplicationLayout.tsx b/src/layout/SecureApplicationLayout.tsx
index 96eea07..5694a2e 100644
--- a/src/layout/SecureApplicationLayout.tsx
+++ b/src/layout/SecureApplicationLayout.tsx
@@ -6,10 +6,11 @@ import { Outlet, useLocation, useNavigate } from 'react-router-dom';
 import { z } from 'zod';
 
 import { getApplicationFn } from '../api/private';
-import { APPLICATION_STATUS, DISPATCH_ACTIONS, QUERY_KEYS } from '../constants';
+import { APPLICATION_STATUS, DISPATCH_ACTIONS, QUERY_KEYS, USER_TYPES } from '../constants';
 import { useParamsTypeSafe } from '../hooks/useParamsTypeSafe';
 import useApplicationContext from '../hooks/useSecureApplicationContext';
 import ApplicationErrorPage from '../pages/msme/ApplicationErrorPage';
+import ProtectedRoute from '../routes/ProtectedRoute';
 import { IApplication } from '../schemas/application';
 import Loader from '../stories/loader/Loader';
 import PageLayout from './PageLayout';
@@ -67,10 +68,12 @@ export default function SecureApplicationLayout() {
   }, [data, navigate, location, refetch]);
 
   return (
-    <PageLayout>
-      {isLoading && <Loader />}
-      {!isLoading && !queryError && <Outlet />}
-      {queryError && <ApplicationErrorPage message={queryError} />}
-    </PageLayout>
+    <ProtectedRoute requiredUserType={USER_TYPES.FI}>
+      <PageLayout>
+        {isLoading && <Loader />}
+        {!isLoading && !queryError && <Outlet />}
+        {queryError && <ApplicationErrorPage message={queryError} />}
+      </PageLayout>
+    </ProtectedRoute>
   );
 }
diff --git a/src/routes/AppRouter.tsx b/src/routes/AppRouter.tsx
index 0bfe373..8762762 100644
--- a/src/routes/AppRouter.tsx
+++ b/src/routes/AppRouter.tsx
@@ -31,6 +31,7 @@ import SecureApplicationContextProvider from 'src/providers/SecureApplicationCon
 import StateContextProvider from 'src/providers/StateContextProvider';
 import ProtectedRoute from 'src/routes/ProtectedRoute';
 
+import { USER_TYPES } from '../constants';
 import PageLayout from '../layout/PageLayout';
 import SecureApplicationLayout from '../layout/SecureApplicationLayout';
 import ApplicationCompleted from '../pages/fi/ApplicationCompleted';
@@ -78,7 +79,7 @@ const router = createBrowserRouter([
   {
     path: '/admin/applications',
     element: (
-      <ProtectedRoute>
+      <ProtectedRoute requiredUserType={USER_TYPES.OCP}>
         <PageLayout>
           <Applications />
         </PageLayout>
@@ -89,7 +90,7 @@ const router = createBrowserRouter([
   {
     path: '/admin/applications/:id/view',
     element: (
-      <ProtectedRoute>
+      <ProtectedRoute requiredUserType={USER_TYPES.OCP}>
         <PageLayout>
           <LoadApplication readonly />
         </PageLayout>
@@ -100,7 +101,7 @@ const router = createBrowserRouter([
   {
     path: '/admin/applications/:id/update',
     element: (
-      <ProtectedRoute>
+      <ProtectedRoute requiredUserType={USER_TYPES.OCP}>
         <PageLayout>
           <LoadApplication />
         </PageLayout>
@@ -111,7 +112,7 @@ const router = createBrowserRouter([
   {
     path: '/settings',
     element: (
-      <ProtectedRoute>
+      <ProtectedRoute requiredUserType={USER_TYPES.OCP}>
         <PageLayout>
           <Settings />
         </PageLayout>
@@ -122,7 +123,7 @@ const router = createBrowserRouter([
   {
     path: '/settings/lender/new',
     element: (
-      <ProtectedRoute>
+      <ProtectedRoute requiredUserType={USER_TYPES.OCP}>
         <PageLayout>
           <LenderForm />
         </PageLayout>
@@ -133,7 +134,7 @@ const router = createBrowserRouter([
   {
     path: '/settings/lender/:id/edit',
     element: (
-      <ProtectedRoute>
+      <ProtectedRoute requiredUserType={USER_TYPES.OCP}>
         <PageLayout>
           <LoadLender />
         </PageLayout>
@@ -144,7 +145,7 @@ const router = createBrowserRouter([
   {
     path: '/settings/user/new',
     element: (
-      <ProtectedRoute>
+      <ProtectedRoute requiredUserType={USER_TYPES.OCP}>
         <PageLayout>
           <UserForm />
         </PageLayout>
@@ -155,7 +156,7 @@ const router = createBrowserRouter([
   {
     path: '/settings/user/:id/edit',
     element: (
-      <ProtectedRoute>
+      <ProtectedRoute requiredUserType={USER_TYPES.OCP}>
         <PageLayout>
           <LoadUser />
         </PageLayout>
@@ -166,7 +167,7 @@ const router = createBrowserRouter([
   {
     path: '/settings/lender/:lenderId/credit-product/new',
     element: (
-      <ProtectedRoute>
+      <ProtectedRoute requiredUserType={USER_TYPES.OCP}>
         <PageLayout>
           <LoadCreditProduct />
         </PageLayout>
@@ -177,7 +178,7 @@ const router = createBrowserRouter([
   {
     path: '/settings/lender/:lenderId/credit-product/:id/edit',
     element: (
-      <ProtectedRoute>
+      <ProtectedRoute requiredUserType={USER_TYPES.OCP}>
         <PageLayout>
           <LoadCreditProduct />
         </PageLayout>
diff --git a/src/routes/ProtectedRoute.tsx b/src/routes/ProtectedRoute.tsx
index 8561c6b..cd94ff6 100644
--- a/src/routes/ProtectedRoute.tsx
+++ b/src/routes/ProtectedRoute.tsx
@@ -1,13 +1,27 @@
+import { useT } from '@transifex/react';
 import { PropsWithChildren } from 'react';
 import { Navigate } from 'react-router-dom';
 
+import { USER_TYPES } from '../constants';
 import useUser from '../hooks/useUser';
 
-export default function ProtectedRoute({ children }: PropsWithChildren) {
+export interface ProtectedRouteProps extends PropsWithChildren {
+  requiredUserType?: USER_TYPES;
+}
+
+export default function ProtectedRoute({ children, requiredUserType }: ProtectedRouteProps) {
   const user = useUser();
+  const t = useT();
 
   if (!user) return <Navigate to="/login" replace />;
+  if (requiredUserType && requiredUserType !== user.type) {
+    throw new Error(t('Not authorized to access this page'));
+  }
 
   // eslint-disable-next-line react/jsx-no-useless-fragment
   return <>{children}</>;
 }
+
+ProtectedRoute.defaultProps = {
+  requiredUserType: undefined,
+};