From 1ca120f0eca697f0cd8c6abf16991e708cdb3a53 Mon Sep 17 00:00:00 2001
From: Hanz <e102777tw@gmail.com>
Date: Wed, 20 Sep 2023 15:56:02 +0800
Subject: [PATCH] fix: appointment display

---
 .../appointment/AppointmentCard.tsx           | 22 +++----
 .../AppointmentPeriodCollection.tsx           | 60 +++++++------------
 src/containers/common/AuthButton.tsx          |  8 +--
 3 files changed, 35 insertions(+), 55 deletions(-)

diff --git a/src/components/appointment/AppointmentCard.tsx b/src/components/appointment/AppointmentCard.tsx
index 04a9a22da..845f076bd 100644
--- a/src/components/appointment/AppointmentCard.tsx
+++ b/src/components/appointment/AppointmentCard.tsx
@@ -278,6 +278,7 @@ const AppointmentCard: React.VFC<AppointmentCardProps> = ({
       periodEndedAt: null,
       appointmentPlanId: '',
     })
+    setRescheduleModalVisible(true)
   }
 
   if (loadingOrderProduct) {
@@ -564,16 +565,17 @@ const AppointmentCard: React.VFC<AppointmentCardProps> = ({
                   startedAt={period.startedAt}
                   isEnrolled={period.currentMemberBooked}
                   isExcluded={period.isBookedReachLimit || period.available}
-                  onClick={() =>
-                    !period.currentMemberBooked && !period.isBookedReachLimit && !period.available
-                      ? setRescheduleAppointment({
-                          rescheduleAppointment: true,
-                          periodStartedAt: period.startedAt,
-                          periodEndedAt: period.endedAt,
-                          appointmentPlanId: appointmentPlanId,
-                        })
-                      : null
-                  }
+                  onClick={() => {
+                    if (!period.currentMemberBooked && !period.isBookedReachLimit) {
+                      setRescheduleAppointment({
+                        rescheduleAppointment: true,
+                        periodStartedAt: period.startedAt,
+                        periodEndedAt: period.endedAt,
+                        appointmentPlanId: appointmentPlanId,
+                      })
+                      setRescheduleModalVisible(false)
+                    }
+                  }}
                 />
               </div>
             ))}
diff --git a/src/components/appointment/AppointmentPeriodCollection.tsx b/src/components/appointment/AppointmentPeriodCollection.tsx
index 50183c369..24df43b20 100644
--- a/src/components/appointment/AppointmentPeriodCollection.tsx
+++ b/src/components/appointment/AppointmentPeriodCollection.tsx
@@ -30,12 +30,6 @@ const AppointmentPeriodCollection: React.VFC<{
     period => moment(period.startedAt).format('YYYY-MM-DD(dd)'),
     appointmentPeriods
       .filter(v => v.available)
-      .filter(
-        v =>
-          !diffPlanBookedTimes?.some(
-            diffPlanBookedTime => moment(v.startedAt).format('YYYY-MM-DD HH:mm').toString() === diffPlanBookedTime,
-          ),
-      )
       .filter(v =>
         reservationType && reservationAmount && reservationAmount !== 0
           ? moment(v.startedAt).subtract(reservationType, reservationAmount).toDate() > moment().toDate()
@@ -50,41 +44,27 @@ const AppointmentPeriodCollection: React.VFC<{
           <StyledScheduleTitle>{moment(periods[0].startedAt).format('YYYY-MM-DD(dd)')}</StyledScheduleTitle>
 
           <div className="d-flex flex-wrap justify-content-start">
-            {periods.map(period => {
-              const ItemElem = (
-                <AppointmentItem
-                  key={period.id}
-                  id={period.id}
-                  startedAt={period.startedAt}
-                  isEnrolled={period.currentMemberBooked}
-                  isExcluded={period.isBookedReachLimit || !period.available}
-                  onClick={() =>
-                    !period.currentMemberBooked && !period.isBookedReachLimit && !period.available
-                      ? onClick(period)
-                      : null
+            {periods.map(period => (
+              <AppointmentItem
+                key={period.id}
+                id={period.id}
+                startedAt={period.startedAt}
+                isEnrolled={period.currentMemberBooked}
+                isExcluded={period.isBookedReachLimit || !period.available}
+                onClick={() => {
+                  if (!isAuthenticated && setAuthModalVisible) {
+                    setAuthModalVisible(true)
+                  } else if (
+                    !period.currentMemberBooked &&
+                    !period.isBookedReachLimit &&
+                    period.available &&
+                    isAuthenticated
+                  ) {
+                    onClick(period)
                   }
-                />
-              )
-
-              return isAuthenticated && !period.currentMemberBooked ? (
-                <div key={period.id} onClick={() => onClick && onClick(period)}>
-                  {ItemElem}
-                </div>
-              ) : isAuthenticated && period.currentMemberBooked ? (
-                <div
-                  key={period.id}
-                  onClick={() => {
-                    return
-                  }}
-                >
-                  {ItemElem}
-                </div>
-              ) : (
-                <div key={period.id} onClick={() => setAuthModalVisible && setAuthModalVisible(true)}>
-                  {ItemElem}
-                </div>
-              )
-            })}
+                }}
+              />
+            ))}
           </div>
         </div>
       ))}
diff --git a/src/containers/common/AuthButton.tsx b/src/containers/common/AuthButton.tsx
index 73fade88f..4b1941fdc 100644
--- a/src/containers/common/AuthButton.tsx
+++ b/src/containers/common/AuthButton.tsx
@@ -44,11 +44,9 @@ const AuthButton: React.VFC = () => {
 
       <Responsive.Desktop>
         {renderAuthButton?.(setVisible) || (
-          <a href="/#">
-            <Button className="ml-2" onClick={handleClick}>
-              {formatMessage(commonMessages.button.loginRegister)}
-            </Button>
-          </a>
+          <Button className="ml-2" onClick={handleClick}>
+            {formatMessage(commonMessages.button.loginRegister)}
+          </Button>
         )}
       </Responsive.Desktop>
     </>