From 9198dc5c6487afdabbea8c1f10e08a4ee613c548 Mon Sep 17 00:00:00 2001
From: Awais Ansari <79941147+awais-ansari@users.noreply.github.com>
Date: Fri, 15 Oct 2021 11:24:47 +0500
Subject: [PATCH] fix: blackout UI, validation and browser related issues
 [TNL-8667]  (#199)

* fix: spacing issue between blackout dates and status badge [TNL-8808]

* fix: display date and time for multi month and year date range  [TNL-8803]
---
 .../shared/blackout-dates/CollapseCardHeading.jsx  |  2 +-
 .../discussions/app-config-form/utils.js           | 14 +++++++-------
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/pages-and-resources/discussions/app-config-form/apps/shared/blackout-dates/CollapseCardHeading.jsx b/src/pages-and-resources/discussions/app-config-form/apps/shared/blackout-dates/CollapseCardHeading.jsx
index 23649f61d..428516047 100644
--- a/src/pages-and-resources/discussions/app-config-form/apps/shared/blackout-dates/CollapseCardHeading.jsx
+++ b/src/pages-and-resources/discussions/app-config-form/apps/shared/blackout-dates/CollapseCardHeading.jsx
@@ -16,7 +16,7 @@ const CollapseCardHeading = ({
   return (
     <div className="py-2">
       {badgeStatus && <Badge variant={badgeVariant}>{badgeStatus}</Badge>}
-      <div>{collapseHeadingText}</div>
+      <div className="mt-2">{collapseHeadingText}</div>
     </div>
   );
 };
diff --git a/src/pages-and-resources/discussions/app-config-form/utils.js b/src/pages-and-resources/discussions/app-config-form/utils.js
index fefab1c0e..b7f29d809 100644
--- a/src/pages-and-resources/discussions/app-config-form/utils.js
+++ b/src/pages-and-resources/discussions/app-config-form/utils.js
@@ -62,21 +62,21 @@ export const formatBlackoutDates = ({
       ${mStartDate.format('MMMM D')} -
       ${mEndDate.format('D, YYYY')}
     `;
-  } else if (hasSameMonth && isTimeAvailable) {
-    formattedDate = `
-      ${mStartDateTime.format('MMMM D, YYYY, h:mma')} -
-      ${mEndDateTime.format('MMMM D, YYYY, h:mma')}
-    `;
-  } else if (!hasSameMonth && hasSameYear) {
+  } else if (!hasSameMonth && hasSameYear && !isTimeAvailable) {
     formattedDate = `
       ${mStartDate.format('MMMM D')} -
       ${mEndDate.format('MMMM D, YYYY')}
     `;
-  } else if (!hasSameMonth && !hasSameYear) {
+  } else if (!hasSameMonth && !hasSameYear && !isTimeAvailable) {
     formattedDate = `
       ${mStartDate.format('MMMM D, YYYY')} -
       ${mEndDate.format('MMMM D, YYYY')}
     `;
+  } else {
+    formattedDate = `
+      ${mStartDateTime.format('MMMM D, YYYY, h:mma')} -
+      ${mEndDateTime.format('MMMM D, YYYY, h:mma')}
+    `;
   }
   return formattedDate;
 };