spa_instat_tv/src/features/UserAccount/components/PageSubscriptions/index.tsx

import { SubscriptionType } from 'features/BuyMatchPopup/types'
import { T9n } from 'features/T9n'
import { Loader } from 'features/Loader'

import type { Subscribe } from 'requests/getUserSubscribes'

import format from 'date-fns/format'

import { useUserSubscribes } from './hooks'

import { ChangeCardPopup } from '../ChangeCardPopup'
import { CancelSubPopup } from '../CancelSubPopup'

import {
  Wrapper,
  ScItem,
  ScText,
  ScSubscribe,
  ScCancelButton,
  ScBtnWrap,
  ScItemPaymentSum,
  ScCard,
  ScLoaderWrapper,
} from './styled'

type MatchSubscription = {
  description: string,
  header: string,
  isActive?: boolean,
  price: number,
  subscription_id: number,
  type: SubscriptionType,
}

export type MatchSubscriptions = Array<MatchSubscription>

export const PageSubscriptions = () => {
  const {
    cancelSub,
    changeCardPopupOpen,
    error,
    handleClose,
    isCancelPopupOpen,
    isFetching,
    isSubCanceled,
    selectedSubscribe,
    setChangeCardPopupOpen,
    setIsCancelPopupOpen,
    setSelectedSubscribe,
    subscribes,
  } = useUserSubscribes()

  return (
    <>
      {isFetching
        ? (
          <ScLoaderWrapper>
            <Loader color='#515151' />
          </ScLoaderWrapper>
        ) : (
          <Wrapper>
            {subscribes?.map((subscribe: Subscribe) => {
              const {
                card,
                is_active,
                iso,
                name,
                option_sys_name,
                price,
                purchase_type,
                sub_id,
                ts_payment,
              } = subscribe

              const hideCancel = selectedSubscribe.sub_id === sub_id && isSubCanceled

              return (
                <ScSubscribe key={ts_payment}>
                  <ScItem>
                    <T9n t='subscription_plan' className='payment_title' />
                    <ScText isActive={is_active}>
                      {option_sys_name} — {name}
                    </ScText>
                  </ScItem>
                  <ScItemPaymentSum>
                    <ScItem>
                      <T9n t='sum' className='payment_title' />
                      <ScText isActive={is_active}>
                        {is_active && !hideCancel ? `${iso} ${price}` : '—'}
                        {is_active && purchase_type === 'subscription' && !hideCancel ? (
                          <>
                            /
                            <T9n t='month' className='payment_plan' />
                          </>
                        ) : ''}
                      </ScText>
                    </ScItem>
                    <ScItem>
                      <T9n
                        t={
                          purchase_type === 'subscription'
                            ? 'next_payment'
                            : 'payment_date'
                        }
                        className='payment_title'
                      />
                      <ScText isActive={is_active}>
                        {is_active && !hideCancel ? format(new Date(ts_payment), 'd MMM   yyyy') : '—'}
                      </ScText>
                    </ScItem>
                  </ScItemPaymentSum>
                  <ScItem className='isActive'>
                    <T9n t='payment_method' className='payment_title' />
                    <ScText
                      isActive={is_active}
                      className='payment_method'
                    >
                      <ScCard>{card}</ScCard>
                      {/* <Icon
                    refIcon='Edit'
                    color='white'
                    onClick={() => setChangeCardPopupOpen(true)}
                  />
                  <T9n t='change'
                    className='change'
                    onClick={() => setChangeCardPopupOpen(true)}
                  /> */}
                    </ScText>
                  </ScItem>
                  {is_active
                    && purchase_type === 'subscription'
                    && !hideCancel ? (
                      <ScItem>
                        <ScBtnWrap>
                          {!error
                            && !isSubCanceled
                            && selectedSubscribe.sub_id === sub_id
                            && isCancelPopupOpen ? null : (
                              <ScCancelButton
                                onClick={() => {
                                  setIsCancelPopupOpen(true)
                                  setSelectedSubscribe(subscribe)
                                }}
                              >
                                <T9n t='cancel_sub' />
                              </ScCancelButton>
                            )}
                        </ScBtnWrap>
                        <ScText className='additional_info' onClick={handleClose}>
                          <T9n t='will_automatically' />
                          &nbsp;
                          {iso} {price}
                          <T9n t='and_month' />
                          &nbsp;
                          <T9n t='using_payment' />
                        </ScText>
                      </ScItem>
                    ) : null}
                </ScSubscribe>
              )
            })}
          </Wrapper>
        )}
      <CancelSubPopup
        cancelSub={cancelSub}
        error={error}
        isFetching={isFetching}
        isModalOpen={isCancelPopupOpen}
        isSubCanceled={isSubCanceled}
        handleModalClose={handleClose}
        subscribe={selectedSubscribe}
      />
      <ChangeCardPopup
        changeCardPopupOpen={changeCardPopupOpen}
        setChangeCardPopupOpen={setChangeCardPopupOpen}
      />
    </>
  )
}