Merge branch 'feature/contracts' of github.com:code4romania/teo into …

…feature/contracts
code4romania · Sep 23, 2024 · d5914f3 · d5914f3
2 parents e45fab6 + ccecc37
commit d5914f3
Show file tree

Hide file tree

Showing 5 changed files with 129 additions and 47 deletions.
diff --git a/frontend/src/assets/locales/en/translation.json b/frontend/src/assets/locales/en/translation.json
@@ -1006,13 +1006,16 @@
         "description": "Successfully sent {{value1}}/{{value2}} contracts"
       },
       "success": {
-        "title": "Contracts generated"
+        "title": "Contracts generated",
+        "description": "Successfully sent {{value1}}/{{value2}} contracts"
       },
       "error": {
         "title": "Contract Generation",
         "description": "Close this window to see the contracts that could not be generated and require your attention"
       }
-    }
+    },
+    "back_alert": "Are you sure you want to go back? All your progress will be lost.",
+    "dont_refresh": "To ensure that no progress will not be lost, please do not refresh the page during the contract generation process"
   },
   "doc_templates": {
     "title": "Create template",

diff --git a/frontend/src/assets/locales/ro/translation.json b/frontend/src/assets/locales/ro/translation.json
@@ -1006,13 +1006,16 @@
         "description": "S-au trimis cu succes {{value1}}/{{value2}} contracte"
       },
       "success": {
-        "title": "Contracte generate"
+        "title": "Contracte generate",
+        "description": "Toate contractele au fost trimise cu succes!"
       },
       "error": {
         "title": "Generare Contract",
         "description": " Închide această fereastră pentru a vedea contractele care nu au putut fi generate și necesită atenție"
       }
-    }
+    },
+    "back_alert": "Esti sigur ca vrei sa te intorci? Tot progresul tau se va pierde.",
+    "dont_refresh": "Pentru a te asigura că progresul tău nu se pierde, te rugăm să nu reîncarci pagina în timpul generării contractelor"
   },
   "doc_templates": {
     "title": "Creează template",

diff --git a/frontend/src/components/ContractCard.tsx b/frontend/src/components/ContractCard.tsx
@@ -18,6 +18,8 @@ import { IDocumentVolunteerData } from '../pages/GenerateContract';
 import { XCircleIcon } from '@heroicons/react/24/solid';
 import { AxiosError } from 'axios';
 import { mapErrorCodeToTranslationKey } from '../common/utils/document-contracts.util';
+import { useAddDocumentContractMutation } from '../services/document-contracts/document-contracts.service';
+import Spinner from './Spinner';
 
 const dotsString = '.........................';
 
@@ -61,13 +63,21 @@ export const ContractCard = ({
   saveVolunteerData,
   volunteersData,
   isOpen = false,
-  error,
+  error: initialError,
 }: ContractCardProps) => {
   const { t } = useTranslation(['doc_templates', 'general']);
   // contract card states
   const [open, setOpen] = useState(isOpen);
   const [edit, setEdit] = useState(false);
   const isVolunteerDataIncomplete: boolean = !(volunteersData && volunteersData[volunteer.id]);
+
+  const [retryError, setRetryError] = useState<AxiosError | null>(null);
+  useEffect(() => {
+    setRetryError(initialError || null);
+  }, [initialError]);
+
+  const { mutateAsync: addDocumentContract, isLoading: isLoadingAddDocumentContract } =
+    useAddDocumentContractMutation();
   const {
     control,
     handleSubmit,
@@ -162,6 +172,24 @@ export const ContractCard = ({
     setEdit(false);
   };
 
+  const handleRetrySendContract = async () => {
+    try {
+      await addDocumentContract({
+        documentTemplateId: template.id,
+        volunteerId: volunteer.id,
+        documentNumber: watch('documentNumber').toString(),
+        documentDate: format(watch('documentDate'), 'yyyy-MM-dd'),
+        documentStartDate: format(watch('documentPeriod')[0], 'yyyy-MM-dd'),
+        documentEndDate: format(watch('documentPeriod')[1], 'yyyy-MM-dd'),
+      });
+      setRetryError(null); // Clear retry error on success
+    } catch (error) {
+      setRetryError(error as AxiosError); // Set retry error on failure
+    }
+  };
+
+  const currentError = retryError || initialError;
+
   return (
     <div className="flex flex-col">
       <ContractCardHeader
@@ -170,30 +198,47 @@ export const ContractCard = ({
         setOpen={setOpen}
         volunteer={volunteer}
         isVolunteerDataIncomplete={isVolunteerDataIncomplete}
-        error={error}
+        error={currentError}
       />
 
       {open && (
         <div className="bg-white shadow-xs p-4 mt-[-16px] pt-8 rounded flex flex-col gap-4 sm:flex-row">
           {/* datele contractului */}
           <div className="flex flex-col flex-1 sm:self-baseline  gap-4">
-            {!!error && (
-              <div className="bg-red-100 rounded p-4 flex flex-row gap-2 ">
-                <XCircleIcon width={15} height={15} className="text-red-400" />
-                <div>
-                  <p className="text-red-700 text-sm">{t('error.title')}</p>
-                  <ul>
-                    <li className="text-red-600">
-                      <p className="text-red-600 text-sm">
-                        {t(
-                          mapErrorCodeToTranslationKey(
-                            (error.response?.data as { code_error?: string }).code_error ?? '',
-                          ),
-                        )}
-                      </p>
-                    </li>
-                  </ul>
-                </div>
+            {!!currentError && (
+              <div className="bg-red-100 rounded p-4 flex flex-row gap-2">
+                {isLoadingAddDocumentContract ? (
+                  <div className="w-full flex justify-center items-center">
+                    <Spinner className="w-8 h-8 fill-red-400" />
+                  </div>
+                ) : (
+                  <>
+                    <XCircleIcon width={15} height={15} className="text-red-400" />
+                    <div className="w-full flex flex-col">
+                      <p className="text-red-700 text-sm">{t('error.title')}</p>
+                      <ul>
+                        <li className="text-red-600">
+                          <p className="text-red-600 text-sm">
+                            {t(
+                              mapErrorCodeToTranslationKey(
+                                (currentError.response?.data as { code_error?: string })
+                                  .code_error ?? '',
+                              ),
+                            )}
+                          </p>
+                        </li>
+                      </ul>
+                      {(currentError.response?.data as { statusCode?: number })?.statusCode ===
+                        500 && (
+                        <Button
+                          label={t('organization.organization_data_form.retry_button')}
+                          className="self-baseline"
+                          onClick={handleRetrySendContract}
+                        />
+                      )}
+                    </div>
+                  </>
+                )}
               </div>
             )}
             <div className="bg-gray-100 rounded flex-1 flex  flex-col p-4 gap-4 ">

diff --git a/frontend/src/pages/GenerateContract.tsx b/frontend/src/pages/GenerateContract.tsx
@@ -23,6 +23,45 @@ export interface IDocumentVolunteerData {
   documentPeriod: [Date, Date];
 }
 
+const SuccessModalContent = () => {
+  const navigate = useNavigate();
+  const { t } = useTranslation('volunteering_contracts');
+  return (
+    <div className="flex flex-col gap-4 items-center pb-4">
+      <div className="flex flex-row justify-center">
+        <CheckCircleIcon width={70} height={70} className="text-yellow-500" />
+      </div>
+      <p className="text-center">{t('modal.success.description')}</p>
+      <Button
+        label="Înapoi la lista de contracte"
+        onClick={() => navigate('/documents/templates')}
+        className="btn-primary"
+      />
+    </div>
+  );
+};
+
+const ErrorModalContent = ({
+  sentContractsCount,
+  totalNumberOfVolunteers,
+}: {
+  sentContractsCount: number;
+  totalNumberOfVolunteers: number;
+}) => {
+  const { t } = useTranslation('volunteering_contracts');
+  return (
+    <div className="flex flex-col gap-2">
+      <div className="flex flex-row justify-center">
+        <ExclamationCircleIcon width={70} height={70} className="text-red-400" />
+      </div>
+      <p className="text-center">
+        {`${t('modal.loading.description', { value1: sentContractsCount, value2: totalNumberOfVolunteers })}`}
+      </p>
+      <p className="text-center">{t('modal.error.description')}</p>
+    </div>
+  );
+};
+
 export const GenerateContract = () => {
   const [selectedTemplate, setSelectedTemplate] = useState<IDocumentTemplateListItem | null>(null);
   const [selectedVolunteers, setSelectedVolunteers] = useState<IVolunteer[]>([]);
@@ -216,10 +255,17 @@ export const GenerateContract = () => {
     setIsLoadingModalOpen(false);
   };
 
+  const handleNavigateBack = () => {
+    if (window.confirm(t('back_alert'))) {
+      navigateBack();
+    }
+  };
+
   return (
     <>
       <PageLayout>
-        <PageHeader onBackButtonPress={navigateBack}>{t('generate.title')}</PageHeader>
+        <PageHeader onBackButtonPress={handleNavigateBack}>{t('generate.title')}</PageHeader>
+        <p className="text-sm text-gray-500">{t('dont_refresh')}</p>
         <Stepper
           steps={steps}
           currentStep={currentStep}
@@ -264,31 +310,16 @@ export const GenerateContract = () => {
           {/* success content */}
           {!isLoadingAddDocumentContracts &&
             (!contractsWithErrors || Object.keys(contractsWithErrors).length === 0) && (
-              <div className="flex flex-col gap-4 items-center pb-4">
-                <div className="flex flex-row justify-center">
-                  <CheckCircleIcon width={70} height={70} className="text-yellow-500" />
-                </div>
-                <p className="text-center">Toate contractele au fost trimise cu succes!</p>
-                <Button
-                  label="Înapoi la lista de contracte"
-                  onClick={() => navigate('/documents/templates')}
-                  className="btn-primary"
-                />
-              </div>
+              <SuccessModalContent />
             )}
           {/* error content */}
           {!isLoadingAddDocumentContracts &&
             contractsWithErrors &&
             Object.keys(contractsWithErrors).length > 0 && (
-              <div className="flex flex-col gap-2">
-                <div className="flex flex-row justify-center">
-                  <ExclamationCircleIcon width={70} height={70} className="text-red-400" />
-                </div>
-                <p className="text-center">
-                  {`${t('modal.loading.description', { value1: sentContractsCount, value2: selectedVolunteers.length })}`}
-                </p>
-                <p className="text-center">{t('modal.error.description')}</p>
-              </div>
+              <ErrorModalContent
+                sentContractsCount={sentContractsCount}
+                totalNumberOfVolunteers={selectedVolunteers.length}
+              />
             )}
         </Modal>
       )}

diff --git a/mobile/app.config.ts b/mobile/app.config.ts
@@ -7,7 +7,7 @@ const expoConfig: ExpoConfig = {
   name: 'vic',
   slug: 'vic',
   scheme: 'vic',
-  version: '1.0.19',
+  version: '1.0.21',
   orientation: 'portrait',
   icon: './src/assets/images/icon.png',
   userInterfaceStyle: 'light',
@@ -18,7 +18,7 @@ const expoConfig: ExpoConfig = {
   },
   assetBundlePatterns: ['**/*'],
   ios: {
-    buildNumber: '22',
+    buildNumber: '23',
     supportsTablet: false,
     bundleIdentifier: 'org.commitglobal.vic',
     entitlements: {
@@ -32,7 +32,7 @@ const expoConfig: ExpoConfig = {
     },
   },
   android: {
-    versionCode: 22,
+    versionCode: 23,
     adaptiveIcon: {
       foregroundImage: './src/assets/images/adaptive-icon.png',
       backgroundColor: '#ffffff',