결제 내역에 쿠폰 결제를 추가하며 분기를 한곳으로 모은 과정

interface PaymentHistoryResponse {
  id?: number | null;
  method: 'NORMAL' | 'CANCEL' | 'COUPON';
  status: 'PROCESSING' | 'WAITING' | 'COMPLETED';
  paymentAmount: number;
  paymentDate?: string | null;
  memberCouponId?: number | null;
  couponName?: string | null;
}

interface PaymentHistoryFormValue extends PaymentHistoryResponse {
  couponDiscountAmount?: number | null;
}

// 확정 전 예약 상세의 결제 내역은 화면이 만든 쿠폰 행 하나뿐이다.
const couponPayment = payments.find(({ method }) => method === 'COUPON');
if (!couponPayment) return;
 
confirmReservation({
  reservationId,
  paymentAmount: couponPayment.paymentAmount,
  paymentDate: couponPayment.paymentDate,
  memberCouponId: couponPayment.memberCouponId,
  // 견적 금액·내원일·메모는 폼의 다른 칸에서 채운다.
});

const VISIBLE_STATUSES = ['COMPLETED', 'PROCESSING', 'WAITING'] as const;
// as const만 쓰면 includes의 인자가 'NORMAL' | 'CANCEL'로 좁혀져
// payment.method를 받지 못하므로, 원소 타입을 method 전체 union으로 선언한다.
const VISIBLE_METHODS: readonly PaymentHistoryResponse['method'][] = [
  'NORMAL',
  'CANCEL',
];
 
function isVisiblePayment(payment: PaymentHistoryResponse | undefined) {
  if (!payment) return false;
 
  const isVisibleOnsitePayment =
    VISIBLE_STATUSES.includes(payment.status) &&
    VISIBLE_METHODS.includes(payment.method);
 
  const isEditingCoupon =
    payment.method === 'COUPON' && payment.id == null;
 
  return isVisibleOnsitePayment || isEditingCoupon;
}

import { P, match } from 'ts-pattern';
 
const isCanceledPayment = (payment: PaymentHistoryResponse | undefined) =>
  payment?.method === 'CANCEL' && payment.status === 'COMPLETED';
 
const isCompletedNormalPayment = (payment: PaymentHistoryResponse | undefined) =>
  payment?.method === 'NORMAL' && payment.status === 'COMPLETED';
 
function PaymentHistoryDescriptions({ field }: { field: FormListFieldData }) {
  const form = paymentForm.useFormInstance();
  const payment = paymentForm.useWatch(['payments', field.name], form);
 
  return (
    match(payment)
      // 미저장: 값이 없거나 id가 없다. 그 안에서 결제수단을 본다.
      .with(P.union(P.nullish, { id: P.optional(P.nullish) }), (unsaved) =>
        match(unsaved)
          .with({ method: 'COUPON' }, () => <CouponDescriptions field={field} />)
          .otherwise(() => <WaitingDescriptions field={field} />),
      )
      // 저장됨: 취소 → 완료 → 그 외
      .when(isCanceledPayment, () => <CanceledDescriptions field={field} />)
      .when(isCompletedNormalPayment, () => <CompletedDescriptions field={field} />)
      .otherwise(() => <WaitingDescriptions field={field} />)
  );
}

function CouponDescriptions({ field }: { field: FormListFieldData }) {
  const { message } = App.useApp();
  const form = paymentForm.useFormInstance();
  const paymentAmount = paymentForm.useWatch(['payments', field.name, 'paymentAmount'], form);
  const memberCouponId = paymentForm.useWatch(['payments', field.name, 'memberCouponId'], form);
  const couponDiscountAmount =
    paymentForm.useWatch(['payments', field.name, 'couponDiscountAmount'], form) ?? 0;
 
  const finalAmount = (paymentAmount ?? 0) - couponDiscountAmount;
 
  // 금액은 Form.Item이 폼에 쓰고, 여기서는 적용된 쿠폰만 푼다.
  const handlePaymentAmountChange = () => {
    if (memberCouponId == null) return;
 
    form.setFields([
      { name: ['payments', field.name, 'memberCouponId'], value: null },
      { name: ['payments', field.name, 'couponName'], value: null },
      { name: ['payments', field.name, 'couponDiscountAmount'], value: 0 },
    ]);
    message.info('총 결제 예정 금액이 변경되어 적용된 쿠폰이 초기화되었습니다.');
  };
 
  return (
    <>
      <CouponSelector field={field} />
      <Form.Item name={[field.name, 'paymentAmount']} noStyle>
        <InputNumber onChange={handlePaymentAmountChange} />
      </Form.Item>
      <FinalAmount value={finalAmount} />
    </>
  );
}