-[x] Error Screen Added For Step 3

-[x] Added Step 1 to be completed even when Pending Status
younginnovations · Sep 27, 2024 · 3efe9f8 · 3efe9f8
1 parent 0b867a4
commit 3efe9f8
Show file tree

Hide file tree

Showing 11 changed files with 457 additions and 372 deletions.
diff --git a/public/css/app.css b/public/css/app.css
diff --git a/public/css/webportal-app.css b/public/css/webportal-app.css
diff --git a/public/js/app.js b/public/js/app.js
diff --git a/public/mix-manifest.json b/public/mix-manifest.json
@@ -1,10 +1,10 @@
 {
-    "/js/app.js": "/js/app.js?id=5887402a5dce0500d93f88f918978b6b",
+    "/js/app.js": "/js/app.js?id=567e600bfce8f557946262fe697c50c6",
     "/js/script.js": "/js/script.js?id=486f329f14e1f080305e7c109ca928ac",
     "/js/webportal-script.js": "/js/webportal-script.js?id=fd5980061c5c73a9d216570039251afa",
     "/js/formbuilder.js": "/js/formbuilder.js?id=85537cfbc99853ea9793f54c417c10f9",
     "/manifest.js": "/manifest.js?id=3ed1124c8f4dcb98acc36de67cb80349",
-    "/css/webportal-app.css": "/css/webportal-app.css?id=e7337fa8b1358a969a82c43fa0b98010",
-    "/css/app.css": "/css/app.css?id=9c824f8be6bc63f683a5ff907709258b",
+    "/css/webportal-app.css": "/css/webportal-app.css?id=7f1c2db0d96bb1dc95a809c7d547556b",
+    "/css/app.css": "/css/app.css?id=a4176b69939abe2a5599e27187fd1eab",
     "/js/vendor.js": "/js/vendor.js?id=fd88a53589d5bef5911c2bfa2da9fc92"
 }
diff --git a/resources/assets/images/svg/exclamation-warning-fill.svg b/resources/assets/images/svg/exclamation-warning-fill.svg
diff --git a/resources/assets/js/components/HoverText.vue b/resources/assets/js/components/HoverText.vue
@@ -14,6 +14,8 @@
       :class="[
         position === 'right'
           ? 'help__text left-0 ' + width
+          : position === 'top-left'
+          ? 'help__text !top-auto bottom-full right-0 ' + width
           : 'help__text right-0 ' + width,
       ]"
     >

diff --git a/resources/assets/js/components/SideHelpText.vue b/resources/assets/js/components/SideHelpText.vue
@@ -4,6 +4,7 @@
       class="sidebar-help-block sticky top-20 rounded-lg bg-eggshell p-4 text-xs text-n-50"
     >
       <p class="pb-1.5 font-bold text-bluecoral">{{ props.title }}</p>
+      <!-- eslint-disable-next-line vue/no-v-html -->
       <div class="space-y-1.5" v-html="content"></div>
     </div>
     <button class="absolute top-3 right-4" @click="closeSidebar">

diff --git a/resources/assets/js/views/activity/onboarding/Steps/DefaultValuesStep.vue b/resources/assets/js/views/activity/onboarding/Steps/DefaultValuesStep.vue
@@ -220,6 +220,7 @@
                   <button>
                     <HoverText
                       width="w-72"
+                      position="top-left"
                       name="default-aid-type"
                       hover-text="The type of aid being supplied (project-type intervention, budget support, debt relief, etc.). This element specifies a default for all the activity’s financial transactions; it can be overridden at the individual transaction level. <a target='_blank' href='https://iatistandard.org/en/iati-standard/203/activity-standard/iati-activities/iati-activity/default-aid-type/'>For more information</a>"
                       :show-iati-reference="true"
@@ -253,6 +254,7 @@
                   <button>
                     <HoverText
                       width="w-72"
+                      position="top-left"
                       name="default-tied-status"
                       hover-text="Whether the aid is untied, tied, or partially tied. This element specifies a default for all the activity’s financial transactions; it can be overridden at the individual transaction level.<a target='_blank' href='https://iatistandard.org/en/iati-standard/203/activity-standard/iati-activities/iati-activity/default-tied-status/'>For more information</a>"
                       :show-iati-reference="true"
@@ -475,7 +477,7 @@ const proceedStep = () => {
         }
       }
     )
-    .catch((err) => console.log('eror', err));
+    .catch((err) => console.log('Error', err));
 };
 
 const previousStep = () => {

diff --git a/resources/assets/js/views/activity/onboarding/Steps/OrganisationDataStep.vue b/resources/assets/js/views/activity/onboarding/Steps/OrganisationDataStep.vue
@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/no-v-html -->
 <template>
   <ToastMessage
     v-if="toastVisibility"
@@ -6,18 +7,52 @@
     :type="toastType"
   />
 
+  <Loader v-if="isLoaderVisible" />
+
   <div v-if="!props.status">
     <div v-if="!isSaving">
+      <!-- Error -->
+      <div
+        v-if="hasError"
+        class="flex gap-2 border-l-[3px] border-crimson-40 bg-rose py-[10px] px-[14px]"
+      >
+        <div>
+          <svg-vue
+            class="text-[22px]"
+            icon="exclamation-warning-fill"
+          ></svg-vue>
+        </div>
+        <div class="text-xs leading-[20px] tracking-[-2%]">
+          <p class="font-bold">Verification Required</p>
+          <ul class="list-disc">
+            <li
+              v-for="(message, index) in errorMessages"
+              :key="index"
+              class="translate-x-3"
+              v-html="message"
+            ></li>
+          </ul>
+          <em>
+            You can skip this step for now and come back to it once your account
+            has been verified.
+          </em>
+        </div>
+      </div>
+
+      <!-- Organization Data Publish -->
       <div>
         <h3 class="pb-[2px] text-[20px] font-bold leading-9 text-n-50">
-          Complete and Publish Core Organisation Data
+          Publish Organisation Data
         </h3>
         <ul class="list-disc pl-4 text-sm">
           <li>
             Review the basic information on your organisation and publish it.
           </li>
         </ul>
-        <div class="mt-3 rounded-lg bg-n-10 pt-[20px] pl-[27px] pb-[20px]">
+        <div
+          class="mt-3 rounded-lg bg-n-10 pt-[20px] pl-[27px] pb-[20px]"
+          :class="{ 'max-h-[270px] overflow-y-auto': hasError }"
+        >
           <div class="border-b border-n-20 py-4">
             <p class="flex items-center font-bold">
               <svg-vue
@@ -121,6 +156,7 @@
                   </label>
                   <button>
                     <HoverText
+                      position="top-left"
                       name="secondary-reporter"
                       hover-text="A flag indicating that the reporting organisation of this activity is acting as a secondary reporter. A secondary reporter is one that reproduces data on the activities of an organisation for which it is not directly responsible."
                       :show-iati-reference="true"
@@ -197,7 +233,7 @@
             <svg-vue icon="green-circle-tick" class="text-[41px]" />
             <span
               class="max-w-[200px] text-center text-sm font-bold text-bluecoral"
-              >Core Organisation data has been successfully published.</span
+              >Organisation data has been successfully published.</span
             >
           </div>
         </Transition>
@@ -212,7 +248,7 @@
           <svg-vue icon="green-circle-tick" class="text-[34px]" />
           <div>
             <h2 class="max-w-[693px] py-[5.4px] text-2xl font-bold text-n-50">
-              Core Organisation data has been successfully published.
+              Organisation data has been successfully published.
             </h2>
             <p class="max-w-[587px] text-sm text-n-50">
               If you want to make changes, go to
@@ -239,6 +275,7 @@ import SideHelpText from 'Components/SideHelpText.vue';
 import axios from 'axios';
 import LinesLoader from 'Components/LinesLoader.vue';
 import ToastMessage from 'Components/ToastMessage.vue';
+import Loader from 'Components/Loader.vue';
 
 const props = defineProps({
   organizationTypeOptions: {
@@ -284,6 +321,11 @@ const helpVisible = ref(false);
 const isSaving = ref(false);
 const isSaved = ref(false);
 
+const hasError = ref(false);
+const errorMessages = ref<string[]>([]);
+
+const isLoaderVisible = ref(false);
+
 const toastVisibility = ref(false);
 const toastMessage = ref('');
 const toastType = ref(false);
@@ -315,11 +357,53 @@ const showHelp = (title: string) => {
   helpVisible.value = true;
 };
 
+const resendVerificationEmail = () => {
+  isLoaderVisible.value = true;
+  axios
+    .post('/user/verification/email')
+    .then((res) => {
+      toastVisibility.value = true;
+      setTimeout(() => (toastVisibility.value = false), 3000);
+      toastMessage.value = res.data.message;
+      toastType.value = res.data.success;
+      isLoaderVisible.value = false;
+    })
+    .catch((error) => {
+      toastVisibility.value = true;
+      setTimeout(() => (toastVisibility.value = false), 3000);
+      toastMessage.value = error.data.message;
+      toastType.value = false;
+      isLoaderVisible.value = false;
+    });
+};
+
+document.addEventListener('click', (e) => {
+  if ((e.target as HTMLElement).classList.contains('resend-verification')) {
+    resendVerificationEmail();
+  }
+});
+
+const transformMessages = (messages: string[]): string[] => {
+  return messages.map((message) => {
+    switch (message) {
+      case 'You have not verified your email address.':
+        return `Your email address has not been verified. <span class="resend-verification text-bluecoral cursor-pointer hover:text-spring-50 underline transition-all duration-[400ms]">Resend Verification email</span>`;
+
+      case 'The Publisher ID is not verified in IATI Registry.':
+        return 'Your IATI Registry account is pending approval. Contact <a href="mailto:support@iatistandard.org">support@iatistandard.org</a> if your account has not been approved within two working days of registering.';
+
+      default:
+        return message;
+    }
+  });
+};
+
 const previousStep = () => {
   emit('previousStep');
 };
 
 const proceedStep = () => {
+  hasError.value = false;
   isSaving.value = true;
   const finalData = [
     {
@@ -334,32 +418,42 @@ const proceedStep = () => {
     })
     .then(() => {
       axios
-        .post('/organisation/publish')
-        .then(
-          (response: {
-            data: { success: boolean; message: string | string[] };
-          }) => {
-            if (response.data.success) {
-              setTimeout(() => {
-                isSaved.value = true;
-              }, 1000);
-              setTimeout(() => {
-                props.fetchData();
-                emit('completeStep', 3);
-                emit('proceedStep');
-              }, 4000);
-            } else {
-              toastVisibility.value = true;
-              setTimeout(() => (toastVisibility.value = false), 3000);
-              toastMessage.value = Array.isArray(response.data.message)
-                ? response.data.message.join('<br>')
-                : response.data.message;
-
-              isSaving.value = false;
-              isSaved.value = false;
-            }
+        .get('organisation/checks-for-organisation-publish')
+        .then((response: { data: { success: boolean; message: string[] } }) => {
+          if (response.data.success) {
+            axios
+              .post('/organisation/publish')
+              .then(
+                (response: {
+                  data: { success: boolean; message: string[] };
+                }) => {
+                  if (response.data.success) {
+                    setTimeout(() => {
+                      isSaved.value = true;
+                    }, 1000);
+                    setTimeout(() => {
+                      props.fetchData();
+                      emit('completeStep', 3);
+                      emit('proceedStep');
+                    }, 4000);
+                  } else {
+                    hasError.value = true;
+                    errorMessages.value = transformMessages(
+                      response.data.message
+                    );
+                    isSaving.value = false;
+                    isSaved.value = false;
+                  }
+                }
+              );
+          } else {
+            hasError.value = true;
+            errorMessages.value = transformMessages(response.data.message);
+
+            isSaving.value = false;
+            isSaved.value = false;
           }
-        )
+        })
         .catch((err) => {
           console.log('Error', err);
           isSaving.value = false;

diff --git a/resources/assets/js/views/activity/onboarding/Steps/PublishingSettingsStep.vue b/resources/assets/js/views/activity/onboarding/Steps/PublishingSettingsStep.vue
@@ -204,6 +204,7 @@ import { ref, defineProps, watchEffect, defineEmits, watch } from 'vue';
 import LinesLoader from 'Components/LinesLoader.vue';
 import axios from 'axios';
 import ShimmerLoading from 'Components/ShimmerLoading.vue';
+import ToastMessage from 'Components/ToastMessage.vue';
 
 const props = defineProps({
   publisherId: {
@@ -284,7 +285,10 @@ const verifyToken = () => {
     .then((response: { data: { data: { token_status: string } } }) => {
       verifyTokenStatus.value = true;
       tokenStatus.value = response.data.data.token_status;
-      if (response.data.data.token_status === 'Correct') {
+      if (
+        response.data.data.token_status === 'Correct' ||
+        response.data.data.token_status === 'Pending'
+      ) {
         isSuccess.value = true;
       }
     })
@@ -320,7 +324,10 @@ const proceedStep = async () => {
         };
       }) => {
         if (response.data.success) {
-          if (response.data.data.token_status === 'Correct') {
+          if (
+            response.data.data.token_status === 'Correct' ||
+            response.data.data.token_status === 'Pending'
+          ) {
             emit('completeStep', 1);
           } else {
             emit('removeCompletedStep', 1);

diff --git a/resources/assets/sass/component/_input.scss b/resources/assets/sass/component/_input.scss
@@ -256,41 +256,41 @@ label {
 }
 
 select.select2.default-value-indicator
-+ .select2
-.selection
-.select2-selection:not(:focus) {
+  + .select2
+  .selection
+  .select2-selection:not(:focus) {
   border: 2px solid #3f9a7c;
   background-color: #3f9a7c15;
 }
 
 select.select2.default-value-indicator
-+ .select2
-.selection
-.select2-selection:not(:focus) {
+  + .select2
+  .selection
+  .select2-selection:not(:focus) {
   border: 2px solid #3f9a7c;
   background-color: #3f9a7c15;
 }
 
 select.select2.default-value-indicator
-+ .select2
-.selection
-.select2-selection
-.select2-selection__placeholder {
+  + .select2
+  .selection
+  .select2-selection
+  .select2-selection__placeholder {
   color: var(--bluecoral-50);
 }
 
 select.select2.default-value-indicator
-+ .select2.select2-container--open
-.selection
-.select2-selection {
+  + .select2.select2-container--open
+  .selection
+  .select2-selection {
   border: 1px solid #a6b5ba;
   background-color: transparent;
 }
 
 select.select2.default-value-indicator
-+ .select2
-.selection
-.select2-selection.select2-selection--clearable {
+  + .select2
+  .selection
+  .select2-selection.select2-selection--clearable {
   border: 1px solid #a6b5ba;
   background-color: transparent;
 }