From e0e42e3df52a4f2da5ea9e2f1dc037d2f6008b5e Mon Sep 17 00:00:00 2001
From: Andrei Dekterev <ad933@mail.ru>
Date: Thu, 27 Jan 2022 23:26:02 +0700
Subject: [PATCH] fix(#2183): fix change cards

---
 .../BuyMatchPopup/components/CardStep/index.tsx   |  5 +++++
 .../BuyMatchPopup/components/CardsList/index.tsx  | 15 ++++++++++++---
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/features/BuyMatchPopup/components/CardStep/index.tsx b/src/features/BuyMatchPopup/components/CardStep/index.tsx
index 82849b07..6cc91f37 100644
--- a/src/features/BuyMatchPopup/components/CardStep/index.tsx
+++ b/src/features/BuyMatchPopup/components/CardStep/index.tsx
@@ -7,6 +7,7 @@ import {
   CloseButton,
   HeaderActions,
 } from 'features/PopupComponents'
+import { Arrow } from 'features/HeaderFilters/components/DateFilter/styled'
 import { T9n } from 'features/T9n'
 
 import { CardsList } from '../CardsList'
@@ -17,6 +18,7 @@ import {
   Header,
   HeaderTitle,
   Button,
+  ButtonPrevious,
 } from '../../styled'
 
 export const CardStep = () => {
@@ -28,6 +30,9 @@ export const CardStep = () => {
   return (
     <Wrapper width={642}>
       <Header>
+        <ButtonPrevious onClick={goBack}>
+          <Arrow direction='left' />
+        </ButtonPrevious>
         <HeaderTitle>
           <T9n t='pay' />
         </HeaderTitle>
diff --git a/src/features/BuyMatchPopup/components/CardsList/index.tsx b/src/features/BuyMatchPopup/components/CardsList/index.tsx
index e2f4e252..9b0abeca 100644
--- a/src/features/BuyMatchPopup/components/CardsList/index.tsx
+++ b/src/features/BuyMatchPopup/components/CardsList/index.tsx
@@ -1,4 +1,8 @@
+import { useState } from 'react'
+
 import map from 'lodash/map'
+import sortBy from 'lodash/sortBy'
+
 import styled, { css } from 'styled-components/macro'
 
 import { isMobileDevice } from 'config/userAgent'
@@ -64,15 +68,20 @@ export const CardsList = () => {
     onSetDefaultCard,
   } = useCardsStore()
 
+  const [activeCard, setActiveCard] = useState(defaultCard?.id)
+
   return (
     <List>
       {
-        map(cards, (card) => (
+        map(sortBy(cards, ['last4']), (card) => (
           <Item key={card.id}>
             <Radio
               label={`${card.brand} •••• ${card.last4}`}
-              checked={card.id === defaultCard?.id}
-              onChange={() => onSetDefaultCard(card.id)}
+              checked={card.id === activeCard}
+              onChange={() => {
+                setActiveCard(card.id)
+                onSetDefaultCard(card.id)
+              }}
             />
           </Item>
         ))