fix: discount selection card should still present even no available c…

…oupons
urfit-tech · Oct 18, 2024 · d1230d8 · d1230d8
1 parent 1dfc86e
commit d1230d8
Show file tree

Hide file tree

Showing 2 changed files with 82 additions and 91 deletions.
diff --git a/src/components/appointment/MultiPeriodCouponSelectionModal.tsx b/src/components/appointment/MultiPeriodCouponSelectionModal.tsx
@@ -10,7 +10,7 @@ import { handleError } from 'lodestar-app-element/src/helpers'
 import { checkoutMessages, commonMessages } from 'lodestar-app-element/src/helpers/translation'
 import { useToastMessage } from 'lodestar-app-element/src/hooks/util'
 import { CouponProps, OrderDiscountProps, OrderProductProps } from 'lodestar-app-element/src/types/checkout'
-import { sum } from 'ramda'
+import { always, ifElse, isEmpty, map, sum } from 'ramda'
 import React, { useState } from 'react'
 import { useIntl } from 'react-intl'
 import styled from 'styled-components'
@@ -27,24 +27,14 @@ const MultiPeriodCouponSelectionModal: React.VFC<{
   memberId: string
   orderProducts: OrderProductProps[]
   orderDiscounts: OrderDiscountProps[]
-  currentlyUsedDiscountIds: Array<string>
   coupons: CouponProps[]
   loadingCoupons: boolean
   refetchCoupons: (
     variables?: Partial<Exact<{ memberId: string }>> | undefined,
   ) => Promise<ApolloQueryResult<GET_COUPON_COLLECTION>>
   renderTrigger: (params: { onOpen: () => void; selectedCoupon?: CouponProps }) => React.ReactElement
   onSelect?: (coupon: CouponProps) => void
-}> = ({
-  orderProducts,
-  orderDiscounts,
-  currentlyUsedDiscountIds,
-  coupons,
-  loadingCoupons,
-  refetchCoupons,
-  onSelect,
-  renderTrigger,
-}) => {
+}> = ({ orderProducts, orderDiscounts, coupons, loadingCoupons, refetchCoupons, onSelect, renderTrigger }) => {
   const { formatMessage } = useIntl()
   const { authToken } = useAuth()
 
@@ -91,44 +81,50 @@ const MultiPeriodCouponSelectionModal: React.VFC<{
         {loadingCoupons ? (
           <Spinner />
         ) : (
-          coupons.map(coupon => {
-            const couponPlanScope = coupon.couponCode.couponPlan.scope
-            const couponPlanProductIds = coupon.couponCode.couponPlan.productIds || []
-            const isInCouponScope = (productId: string) => {
-              const [productType] = productId.split('_')
-              return (
-                couponPlanScope === null ||
-                couponPlanScope.includes(productType) ||
-                couponPlanProductIds.includes(productId)
-              )
-            }
+          ifElse(
+            isEmpty,
+            always(<p style={{ fontSize: '1.2em' }}>目前無可用折價券，請於下列輸入框中輸入代碼，新增折價券：</p>),
+            map((coupon: CouponProps) => {
+              const couponPlanScope = coupon.couponCode.couponPlan.scope
+              const couponPlanProductIds = coupon.couponCode.couponPlan.productIds || []
+              const isInCouponScope = (productId: string) => {
+                const [productType] = productId.split('_')
+                return (
+                  couponPlanScope === null ||
+                  couponPlanScope.includes(productType) ||
+                  couponPlanProductIds.includes(productId)
+                )
+              }
 
-            const filteredOrderProducts = orderProducts.filter(orderProduct => isInCouponScope(orderProduct.productId))
-            const filteredOrderDiscounts = orderDiscounts.filter(orderDiscount => orderDiscount.type === 'DownPrice')
-            const price =
-              sum(filteredOrderProducts.map(orderProduct => orderProduct.price)) -
-              sum(filteredOrderDiscounts.map(orderDiscount => orderDiscount.price))
+              const filteredOrderProducts = orderProducts.filter(orderProduct =>
+                isInCouponScope(orderProduct.productId),
+              )
+              const filteredOrderDiscounts = orderDiscounts.filter(orderDiscount => orderDiscount.type === 'DownPrice')
+              const price =
+                sum(filteredOrderProducts.map(orderProduct => orderProduct.price)) -
+                sum(filteredOrderDiscounts.map(orderDiscount => orderDiscount.price))
 
-            const isDisabled = filteredOrderProducts.length === 0 || coupon.couponCode.couponPlan.constraint > price
-            return (
-              <CouponCard
-                key={coupon.id}
-                coupon={coupon}
-                onClick={() => {
-                  if (isDisabled) {
-                    return
-                  }
-                  onSelect && onSelect(coupon)
-                  setSelectedCoupon(coupon)
-                  setVisible(false)
-                }}
-                isDisabled={isDisabled}
-              />
-            )
-          })
+              const isDisabled = filteredOrderProducts.length === 0 || coupon.couponCode.couponPlan.constraint > price
+              return (
+                <CouponCard
+                  key={coupon.id}
+                  coupon={coupon}
+                  onClick={() => {
+                    if (isDisabled) {
+                      return
+                    }
+                    onSelect && onSelect(coupon)
+                    setSelectedCoupon(coupon)
+                    setVisible(false)
+                  }}
+                  isDisabled={isDisabled}
+                />
+              )
+            }),
+          )(coupons)
         )}
 
-        <Divider>{formatMessage(commonMessages.label.or)}</Divider>
+        {coupons.length > 0 ? <Divider>{formatMessage(commonMessages.label.or)}</Divider> : <></>}
 
         <div className="d-flex">
           <StyledInputWrapper className="flex-grow-1">

diff --git a/src/components/appointment/MultiPeriodDiscountSelectionCard.tsx b/src/components/appointment/MultiPeriodDiscountSelectionCard.tsx
@@ -46,51 +46,46 @@ const DiscountSelectionCard: React.VFC<{
         <StyledRadio height="3rem" colorScheme="primary" value="None">
           {formatMessage(checkoutMessages.form.radio.noDiscount)}
         </StyledRadio>
-        {discountId || leftCoupons.length > 0 ? (
-          <div className="d-flex align-items-center">
-            <StyledRadio height="3rem" colorScheme="primary" value="Coupon">
-              <span>{formatMessage(checkoutMessages.form.radio.useCoupon)}</span>
-            </StyledRadio>
-            {discountType === 'Coupon' && (
-              <span className="ml-2">
-                {currentMemberId ? (
-                  <MultiPeriodCouponSelectionModal
-                    memberId={currentMemberId}
-                    orderProducts={check?.orderProducts || []}
-                    orderDiscounts={check?.orderDiscounts || []}
-                    currentlyUsedDiscountIds={currentlyUsedDiscountIds}
-                    coupons={leftCoupons}
-                    loadingCoupons={loadingCoupons}
-                    refetchCoupons={refetchCoupons}
-                    onSelect={coupon => {
-                      onChange?.(`Coupon_${coupon.id}`)
-                    }}
-                    renderTrigger={({ onOpen, selectedCoupon }) => (
-                      <>
-                        <Button variant="outline" onClick={onOpen}>
-                          {discountTarget
-                            ? formatMessage(commonMessages.button.reselectCoupon)
-                            : formatMessage(commonMessages.button.chooseCoupon)}
-                        </Button>
-                        {selectedCoupon && (
-                          <span className="ml-3">
-                            {selectedCoupon.couponCode.couponPlan.title} {selectedCoupon.couponCode.code}
-                          </span>
-                        )}
-                      </>
-                    )}
-                  />
-                ) : (
-                  <Button onClick={() => setAuthModalVisible && setAuthModalVisible(true)}>
-                    {formatMessage(commonMessages.button.chooseCoupon)}
-                  </Button>
-                )}
-              </span>
-            )}
-          </div>
-        ) : (
-          <></>
-        )}
+        <div className="d-flex align-items-center">
+          <StyledRadio height="3rem" colorScheme="primary" value="Coupon">
+            <span>{formatMessage(checkoutMessages.form.radio.useCoupon)}</span>
+          </StyledRadio>
+          {discountType === 'Coupon' && (
+            <span className="ml-2">
+              {currentMemberId ? (
+                <MultiPeriodCouponSelectionModal
+                  memberId={currentMemberId}
+                  orderProducts={check?.orderProducts || []}
+                  orderDiscounts={check?.orderDiscounts || []}
+                  coupons={leftCoupons}
+                  loadingCoupons={loadingCoupons}
+                  refetchCoupons={refetchCoupons}
+                  onSelect={coupon => {
+                    onChange?.(`Coupon_${coupon.id}`)
+                  }}
+                  renderTrigger={({ onOpen, selectedCoupon }) => (
+                    <>
+                      <Button variant="outline" onClick={onOpen}>
+                        {discountTarget
+                          ? formatMessage(commonMessages.button.reselectCoupon)
+                          : formatMessage(commonMessages.button.chooseCoupon)}
+                      </Button>
+                      {selectedCoupon && (
+                        <span className="ml-3">
+                          {selectedCoupon.couponCode.couponPlan.title} {selectedCoupon.couponCode.code}
+                        </span>
+                      )}
+                    </>
+                  )}
+                />
+              ) : (
+                <Button onClick={() => setAuthModalVisible && setAuthModalVisible(true)}>
+                  {formatMessage(commonMessages.button.chooseCoupon)}
+                </Button>
+              )}
+            </span>
+          )}
+        </div>
         {enrolledMembershipCardIds.length > 0 && (
           <StyledRadio height="3rem" value="Card" colorScheme="primary">
             <span>{formatMessage(checkoutMessages.content.useMemberCard)}</span>