Revert "Revert "Merge pull request #417 from urfit-tech/feat/reschedu…

…le-appointment"" This reverts commit f834f58.
urfit-tech · Oct 5, 2023 · fff557e · fff557e
1 parent 31900d6
commit fff557e
Show file tree

Hide file tree

Showing 13 changed files with 610 additions and 75 deletions.
diff --git a/src/components/appointment/AppointmentCard.tsx b/src/components/appointment/AppointmentCard.tsx
diff --git a/src/components/appointment/AppointmentCollectionTabs.tsx b/src/components/appointment/AppointmentCollectionTabs.tsx
@@ -157,7 +157,7 @@ const AppointmentCollectionTabs: React.VFC<{
   )
 }
 
-const AppointmentPlanCollection: React.FC<{
+export const AppointmentPlanCollection: React.FC<{
   appointmentPlans: (AppointmentPlan & { periods: AppointmentPeriod[] })[]
 }> = ({ appointmentPlans }) => {
   const { formatMessage } = useIntl()

diff --git a/src/components/appointment/AppointmentItem.tsx b/src/components/appointment/AppointmentItem.tsx
@@ -13,7 +13,7 @@ const StyledItemWrapper = styled.div<{ variant?: 'default' | 'excluded' | 'disab
   border: solid 1px ${props => (props.variant === 'disabled' ? 'var(--gray-light)' : 'var(--gray-dark)')};
   color: ${props => (props.variant === 'disabled' ? 'var(--gray-dark)' : 'var(--gray-darker)')};
   border-radius: 4px;
-  cursor: ${props => (props.variant === 'disabled' ? 'not-allowed' : 'pointer')};
+  cursor: ${props => (props.variant !== 'default' ? 'not-allowed' : 'pointer')};
 
   ${props =>
     props.variant === 'excluded'
@@ -50,11 +50,12 @@ const AppointmentItem: React.VFC<{
   startedAt: Date
   isEnrolled?: boolean
   isExcluded?: boolean
-}> = ({ id, startedAt, isEnrolled, isExcluded }) => {
+  onClick: () => void
+}> = ({ startedAt, isEnrolled, isExcluded, onClick }) => {
   const { formatMessage } = useIntl()
 
   return (
-    <StyledItemWrapper variant={isEnrolled ? 'disabled' : isExcluded ? 'excluded' : 'default'}>
+    <StyledItemWrapper variant={isEnrolled ? 'disabled' : isExcluded ? 'excluded' : 'default'} onClick={onClick}>
       <StyledItemTitle>
         {startedAt.getHours().toString().padStart(2, '0')}:{startedAt.getMinutes().toString().padStart(2, '0')}
       </StyledItemTitle>

diff --git a/src/components/appointment/AppointmentPeriodCollection.tsx b/src/components/appointment/AppointmentPeriodCollection.tsx
@@ -21,7 +21,7 @@ const AppointmentPeriodCollection: React.VFC<{
   reservationType?: ReservationType
   reservationAmount?: number
   diffPlanBookedTimes?: String[]
-  onClick?: (period: AppointmentPeriod) => void
+  onClick: (period: AppointmentPeriod) => void
 }> = ({ appointmentPeriods, reservationType, reservationAmount, diffPlanBookedTimes, onClick }) => {
   const { setVisible: setAuthModalVisible } = useContext(AuthModalContext)
   const { isAuthenticated } = useAuth()
@@ -57,6 +57,12 @@ const AppointmentPeriodCollection: React.VFC<{
                   id={period.id}
                   startedAt={period.startedAt}
                   isEnrolled={period.currentMemberBooked}
+                  isExcluded={period.isBookedReachLimit || !period.available}
+                  onClick={() =>
+                    !period.currentMemberBooked && !period.isBookedReachLimit && !period.available
+                      ? onClick(period)
+                      : null
+                  }
                 />
               )
 

diff --git a/src/components/appointment/translation.tsx b/src/components/appointment/translation.tsx
@@ -9,6 +9,10 @@ const appointmentMessages = {
     finished: { id: 'appointment.*.finished', defaultMessage: '已結束' },
   }),
   AppointmentCard: defineMessages({
+    periodDurationAtMost: {
+      id: 'appointment.text.periodDurationAtMost',
+      defaultMessage: '諮詢一次 {duration} 分鐘為限',
+    },
     attend: { id: 'appointment.AppointmentCard.attend', defaultMessage: '進入會議' },
     toCalendar: { id: 'appointment.AppointmentCard.toCalendar', defaultMessage: '加入行事曆' },
     appointmentIssue: { id: 'appointment.AppointmentCard.appointmentIssue', defaultMessage: '提問單' },
@@ -23,6 +27,37 @@ const appointmentMessages = {
       defaultMessage: '已於 {time} 取消預約',
     },
     cancelAppointment: { id: 'appointment.AppointmentCard.cancelAppointment', defaultMessage: '取消預約' },
+    rescheduleAppointment: {
+      id: 'appointment.AppointmentCard.rescheduleAppointment',
+      defaultMessage: '更換時段',
+    },
+    notRescheduleAppointmentPeriod: {
+      id: 'appointment.AppointmentCard.notRescheduleAppointmentPeriod',
+      defaultMessage: '無可更換的時段',
+    },
+    rescheduleOriginScheduled: {
+      id: 'appointment.AppointmentCard.rescheduleOriginScheduled',
+      defaultMessage: '原時段',
+    },
+    rescheduled: {
+      id: 'appointment.AppointmentCard.rescheduled',
+      defaultMessage: '更換為：',
+    },
+    rescheduleSuccess: {
+      id: 'appointment.AppointmentCard.rescheduleSuccess',
+      defaultMessage: '更換成功',
+    },
+    rescheduleSuccessAppointmentPlanTitle: {
+      id: 'appointment.AppointmentCard.rescheduleSuccessAppointmentPlanTitle',
+      defaultMessage: '{title} 已更換時段為',
+    },
+    rescheduleAppointmentPlanTitle: {
+      id: 'appointment.AppointmentCard.rescheduleAppointmentPlanTitle',
+      defaultMessage: '更換時段：{title}',
+    },
+    rescheduleConfirm: { id: 'appointment.AppointmentCard.rescheduleConfirm', defaultMessage: '確定更換' },
+    rescheduleCancel: { id: 'appointment.AppointmentCard.rescheduleCancel', defaultMessage: '重選時段' },
+    confirm: { id: 'appointment.AppointmentCard.confirm', defaultMessage: '好' },
     confirmCancelAlert: { id: 'appointment.AppointmentCard.confirmCancelAlert', defaultMessage: '確定要取消預約嗎？' },
     confirmCancelNotation: {
       id: 'appointment.AppointmentCard.confirmCancelNotation',

diff --git a/src/components/common/Footer/index.tsx b/src/components/common/Footer/index.tsx
@@ -86,11 +86,11 @@ export const NavLinks: React.VFC = () => {
         .filter(nav => nav.block === 'footer' && nav.locale === currentLocale)
         .map(nav =>
           nav.external ? (
-            <StyledNavAnchor key={nav.label} href={nav.href} target="_blank" rel="noopener noreferrer">
+            <StyledNavAnchor key={nav.id} href={nav.href} target="_blank" rel="noopener noreferrer">
               {nav.label}
             </StyledNavAnchor>
           ) : (
-            <StyledNavLink key={nav.label} to={nav.href}>
+            <StyledNavLink key={nav.id} to={nav.href}>
               {nav.label}
             </StyledNavLink>
           ),
@@ -106,7 +106,7 @@ export const SocialLinks: React.VFC = () => {
       {navs
         .filter(nav => nav.block === 'social_media')
         .map(socialLink => (
-          <StyledSocialAnchor key={socialLink.label} href={socialLink.href} target="_blank" rel="noopener noreferrer">
+          <StyledSocialAnchor key={socialLink.id} href={socialLink.href} target="_blank" rel="noopener noreferrer">
             {socialLink.label === 'facebook' && <Icon as={FacebookIcon} />}
             {socialLink.label === 'group' && <Icon as={GroupIcon} />}
             {socialLink.label === 'youtube' && <Icon as={YoutubeIcon} />}

diff --git a/src/components/common/MemberProfileButton.tsx b/src/components/common/MemberProfileButton.tsx
@@ -128,7 +128,7 @@ export const CustomNavLinks: React.VFC = () => {
       {navs
         .filter(nav => nav.block === 'header')
         .map(nav => {
-          return <CollapseNavLinks nav={nav} />
+          return <CollapseNavLinks key={nav.id} nav={nav} />
         })}
     </>
   )