ordering-ui-external 2.6.5 → 2.6.8

package/src/themes/five/src/components/CardFormCustom/index.js

@@ -0,0 +1,161 @@
+import React, { useState } from 'react'
+import Card from 'react-credit-cards-2'
+import 'react-credit-cards-2/es/styles-compiled.css'
+import {
+  formatCreditCardNumber,
+  formatCVC,
+  formatExpirationDate,
+  getCardType
+} from './cardUtils'
+import { useForm } from 'react-hook-form'
+import { Input } from '../../styles/Inputs'
+import { useLanguage } from 'ordering-components-external'
+import Button from '../../styles/Buttons'
+import { FormContainer, InputContainer } from './styles'
+
+export const CardFormCustom = (props) => {
+  const {
+    handleNewCard,
+    setAddCardOpen
+  } = props
+
+  const [, t] = useLanguage()
+  const [formState, setFormState] = useState({
+    cvc: '',
+    expiry: '',
+    focus: '',
+    name: '',
+    number: ''
+  })
+
+  const formMethods = useForm()
+
+  const handleInputFocus = (e) => {
+    setFormState({
+      ...formState,
+      focus: e.target.name
+    })
+  }
+
+  const handleInputChange = ({ target }) => {
+    if (target.name === 'number') {
+      target.value = formatCreditCardNumber(target.value)
+    } else if (target.name === 'expiry') {
+      target.value = formatExpirationDate(target.value)
+    } else if (target.name === 'cvc') {
+      target.value = formatCVC(target.value)
+    }
+    setFormState({
+      ...formState,
+      [target.name]: target.value
+    })
+  }
+
+  const onSubmit = (values) => {
+    const cardBrand = getCardType(values?.number)
+    const lastFourDigits = values?.number.substr(-4)
+    const card = {
+      type: 'card',
+      brand: cardBrand,
+      last4: lastFourDigits,
+      ccnumber: values?.number?.replace(/\s/g, ''),
+      ccexp: values?.expiry?.replace('/', ''),
+      cvv: values?.cvc
+    }
+    handleNewCard(card)
+    setAddCardOpen(false)
+  }
+
+  return (
+    <FormContainer id='PaymentForm'>
+      <Card
+        cvc={formState.cvc}
+        expiry={formState.expiry}
+        focused={formState.focus}
+        name={formState.name}
+        number={formState.number}
+        placeholders={{
+          name: t('YOUR_NAME_HERE', 'Your name here')
+        }}
+      />
+      <form
+        onSubmit={formMethods.handleSubmit(onSubmit)}
+      >
+        <InputContainer>
+          <Input
+            type='tel'
+            name='number'
+            placeholder={t('CARD_NUMBER', 'Card number')}
+            inputMode='numeric'
+            onChange={handleInputChange}
+            onFocus={handleInputFocus}
+            pattern='[\d| ]{16,22}'
+            format={formatCreditCardNumber}
+            maxLength={19}
+            ref={
+              formMethods.register({
+                required: t('CARD_NUMBER_REQUIRED', 'Card number is required'),
+                pattern: /^[\d| ]{16,22}$/i
+              })
+            }
+            isError={formMethods.errors.number}
+          />
+        </InputContainer>
+        <InputContainer>
+          <Input
+            type='text'
+            name='name'
+            placeholder={t('NAME', 'Name')}
+            onChange={handleInputChange}
+            onFocus={handleInputFocus}
+            ref={
+              formMethods.register({
+                required: t('NAME_REQUIRED', 'Name is required'),
+              })
+            }
+            isError={formMethods.errors.name}
+          />
+        </InputContainer>
+        <InputContainer>
+          <Input
+            type='text'
+            name='expiry'
+            pattern='\d\d/\d\d'
+            placeholder={t('EXPIRY', 'Expiry')}
+            onChange={handleInputChange}
+            onFocus={handleInputFocus}
+            format={formatExpirationDate}
+            ref={
+              formMethods.register({
+                required: t('EXPIRY_DATE_REQUIRED', 'Expiry date required')
+              })
+            }
+            isError={formMethods.errors.expiry}
+          />
+          <Input
+            type='text'
+            name='cvc'
+            placeholder={t('CVC', 'CVC')}
+            pattern='\d{3,4}'
+            onChange={handleInputChange}
+            onFocus={handleInputFocus}
+            format={formatCVC}
+            ref={
+              formMethods.register({
+                required: t('CVC_REQUIRED', 'CVC is required')
+              })
+            }
+            isError={formMethods.errors.cvc}
+          />
+        </InputContainer>
+        <Button
+          type='submit'
+          color='primary'
+          disabled={Object.keys(formMethods.errors)?.length > 0}
+        >
+          {t('SAVE', 'Save')}
+        </Button>
+      </form>
+    </FormContainer>
+  )
+}

package/src/themes/five/src/components/CardFormCustom/styles.js

@@ -0,0 +1,20 @@
+import styled, { css } from 'styled-components'
+
+export const InputContainer = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+
+  input{
+    box-sizing: border-box;
+    width: 100%;
+    margin: 10px;
+  }
+`
+
+export const FormContainer = styled.div`
+  button{
+    width: 100%;
+    margin: 10px;
+  }
+`

package/src/themes/five/src/components/CartPopover/styles.js

@@ -31,7 +31,7 @@ export const PopoverBody = styled.div`
   padding: 15px;
   border-radius: 10px;
   max-width: 500px;
-  z-index: 2000;
+  z-index: 10002;
   box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 24px;
 `
 

package/src/themes/five/src/components/Checkout/index.js

@@ -3,7 +3,7 @@ import VscWarning from '@meronex/icons/vsc/VscWarning'
 import Skeleton from 'react-loading-skeleton'
 import { useTheme } from 'styled-components'
 import { Modal } from '../Modal'
-import {
+import {  
   Checkout as CheckoutController,
   useOrder,
   useSession,
@@ -21,7 +21,6 @@ import { UpsellingPage } from '../UpsellingPage'
 import parsePhoneNumber from 'libphonenumber-js'
 import { useHistory } from 'react-router-dom'
 import { ArrowLeft } from 'react-bootstrap-icons'
-
 import {
   Container,
   WrapperLeftContainer,
@@ -129,7 +128,7 @@ const CheckoutUI = (props) => {
   const [openModal, setOpenModal] = useState({ login: false, signup: false })
   const [allowedGuest, setAllowedGuest] = useState(false)
   const [cardList, setCardList] = useState([])
-
+  const cardsMethods = ['stripe', 'credomatic']
   const businessConfigs = businessDetails?.business?.configs ?? []
   const isTableNumberEnabled = configs?.table_numer_enabled?.value
   const isWalletCashEnabled = businessConfigs.find(config => config.key === 'wallet_cash_enabled')?.value === '1'
@@ -147,7 +146,7 @@ const CheckoutUI = (props) => {
 
   const isDisablePlaceOrderButton = !cart?.valid ||
     (!paymethodSelected && cart?.balance > 0) ||
-    (paymethodSelected?.gateway === 'stripe' && cardList?.cards?.length === 0) ||
+    (cardsMethods.includes(paymethodSelected?.gateway) && cardList?.cards?.length === 0) ||
     placing ||
     errorCash ||
     loading ||
@@ -246,7 +245,7 @@ const CheckoutUI = (props) => {
     if (userSelected && userSelected?.cellphone) {
       if (userSelected?.country_phone_code) {
         let phone = null
-        phone = `+${userSelected?.country_phone_code}${userSelected?.cellphone}`
+        phone = `+${userSelected?.country_phone_code}${userSelected?.cellphone.replace(`+${userSelected?.country_phone_code}`, '')}`
         const phoneNumber = parsePhoneNumber(phone)
         if (!phoneNumber?.isValid()) {
           errors.push(t('VALIDATION_ERROR_MOBILE_PHONE_INVALID', 'The field Phone number is invalid.'))
@@ -526,24 +525,24 @@ const CheckoutUI = (props) => {
 
         {
           !!(!isMultiDriverTips && driverTipsField) &&
-            <>
-              <DriverTipContainer>
-                <h1>{t('DRIVER_TIPS', 'Driver Tips')}</h1>
-                <p>{t('100%_OF_THE_TIP_YOUR_DRIVER', '100% of the tip goes to your driver')}</p>
-                <DriverTips
-                  businessId={cart?.business_id}
-                  driverTipsOptions={driverTipsOptions}
-                  isFixedPrice={parseInt(configs?.driver_tip_type?.value, 10) === 1}
-                  isDriverTipUseCustom={!!parseInt(configs?.driver_tip_use_custom?.value, 10)}
-                  driverTip={parseInt(configs?.driver_tip_type?.value, 10) === 1
-                    ? cart?.driver_tip
-                    : cart?.driver_tip_rate}
-                  cart={cart}
-                  useOrderContext
-                />
-              </DriverTipContainer>
-              <DriverTipDivider />
-            </>
+          <>
+            <DriverTipContainer>
+              <h1>{t('DRIVER_TIPS', 'Driver Tips')}</h1>
+              <p>{t('100%_OF_THE_TIP_YOUR_DRIVER', '100% of the tip goes to your driver')}</p>
+              <DriverTips
+                businessId={cart?.business_id}
+                driverTipsOptions={driverTipsOptions}
+                isFixedPrice={parseInt(configs?.driver_tip_type?.value, 10) === 1}
+                isDriverTipUseCustom={!!parseInt(configs?.driver_tip_use_custom?.value, 10)}
+                driverTip={parseInt(configs?.driver_tip_type?.value, 10) === 1
+                  ? cart?.driver_tip
+                  : cart?.driver_tip_rate}
+                cart={cart}
+                useOrderContext
+              />
+            </DriverTipContainer>
+            <DriverTipDivider />
+          </>
         }
         {!cartState.loading && placeSpotsEnabled && cart?.business_id && (
           <SelectSpotContainer>
@@ -576,7 +575,7 @@ const CheckoutUI = (props) => {
               businessConfigs={businessConfigs}
               loyaltyRewardRate={
                 creditPointPlanOnBusiness?.accumulation_rate ??
-                  (!!creditPointPlanOnBusiness && creditPointPlan?.accumulation_rate) ?? 0
+                (!!creditPointPlanOnBusiness && creditPointPlan?.accumulation_rate) ?? 0
               }
             />
           </CartContainer>
@@ -838,8 +837,18 @@ export const Checkout = (props) => {
         handleOrderRedirect(result.order.uuid)
         setCartState({ ...cartState, loading: false })
       } else if (result.status === 2) {
+        let credomaticData = null
+        if (result?.paymethod_data?.gateway === 'credomatic') {
+          const urlParams = new URLSearchParams(window.location.search)
+          const paramsObj = Object.fromEntries(urlParams.entries())
+          credomaticData = {
+            credomatic: {
+              ...paramsObj
+            }
+          }
+        }
         try {
-          const confirmCartRes = await confirmCart(cartUuid)
+          const confirmCartRes = await confirmCart(cartUuid, credomaticData)
           if (confirmCartRes.error) {
             setAlertState({
               open: true,

package/src/themes/five/src/components/LanguageSelector/index.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import { LanguageSelector as LanguageSelectorController } from 'ordering-components-external'
 import { Select } from '../../styles/Select'
 import { Container } from './styles'
@@ -40,6 +40,7 @@ const LanguageSelectorUI = (props) => {
           src={`http://purecatamphetamine.github.io/country-flag-icons/3x2/${transformLanguageToCountry(currentLanguage)}.svg`}
         />
         <Select
+          zIndex={20000}
           isHomeStyle
           options={languagesState?.loading ? defaultLanguages : _languages}
           defaultValue={languagesState?.loading ? defaultCurrentLanguage : currentLanguage}

package/src/themes/five/src/components/LoginForm/index.js

@@ -11,7 +11,8 @@ import {
   useSession,
   useToast, ToastType,
   ReCaptcha,
-  useApi
+  useApi,
+  useOptimizationLoad
 } from 'ordering-components-external'
 import { Alert } from '../Confirm'
 import { SpinnerLoader } from '../../../../../components/SpinnerLoader'
@@ -96,6 +97,7 @@ const LoginFormUI = (props) => {
   const theme = useTheme()
   const [, { showToast }] = useToast()
   const [{ configs }] = useConfig()
+  const [optimizationLoad] = useOptimizationLoad()
   const formMethods = useForm()
   const [recaptchaConfig] = useRecaptcha(enableReCaptcha)
   const [alertState, setAlertState] = useState({ open: false, content: [] })
@@ -118,9 +120,9 @@ const LoginFormUI = (props) => {
     scope: 'profile'
   }
 
-  const googleLoginEnabled = configs?.google_login_enabled?.value === '1' || !configs?.google_login_enabled?.enabled
-  const facebookLoginEnabled = configs?.facebook_login_enabled?.value === '1' || !configs?.facebook_login_enabled?.enabled
-  const appleLoginEnabled = configs?.apple_login_enabled?.value === '1' || !configs?.apple_login_enabled?.enabled
+  const googleLoginEnabled = optimizationLoad?.result?.configs?.google_login_enabled?.value === '1'
+  const facebookLoginEnabled = optimizationLoad?.result?.configs?.facebook_login_enabled?.value === '1'
+  const appleLoginEnabled = optimizationLoad?.result?.configs?.apple_login_enabled?.value === '1'
 
   const spoonityTitle = configs?.spoonity_title?.value
 

package/src/themes/five/src/components/Modal/styles.js

@@ -22,6 +22,7 @@ export const ModalDialog = styled.div`
   max-height: 100vh;
   overflow: auto;
   overflow-x: ${({ disableOverflowX }) => disableOverflowX ? 'hidden' : 'auto'};
+  z-index: 10001;
   @media (min-width: 769px) {
     width: ${({ width }) => width || '50%'};
     max-height: 90vh;

package/src/themes/five/src/components/OrderContextUI/index.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { useLanguage, useOrder, useConfig, useSession } from 'ordering-components-external'
 import { MomentPopover } from '../../../../pwa/src/components/MomentPopover'
 import { OrderTypeSelectorHeader } from '../../../../../components/OrderTypeSelectorHeader'
@@ -13,6 +13,7 @@ import {
   FeatureItems,
   ItemInline
 } from './styles'
+import { useWindowSize } from '../../../../../hooks/useWindowSize'
 
 export const OrderContextUI = (props) => {
   const { isCheckOut, setMapErrors, isCustomerMode, isBusinessList } = props
@@ -25,7 +26,7 @@ export const OrderContextUI = (props) => {
   const [openPopover, setOpenPopover] = useState({})
   const [modals, setModals] = useState({ listOpen: false, formOpen: false, citiesOpen: false })
   const [alertState, setAlertState] = useState({ open: false, content: [] })
-
+  const windowSize = useWindowSize()
   const userCustomer = JSON.parse(window.localStorage.getItem('user-customer'))
 
   const configTypes = configState?.configs?.order_types_allowed?.value.split('|').map(value => Number(value)) || []
@@ -66,6 +67,12 @@ export const OrderContextUI = (props) => {
     }
   }
 
+  useEffect(() => {
+    const handleCloseallPopovers = () => handleClosePopover('moment')
+    window.addEventListener('scroll', handleCloseallPopovers)
+    return () => window.removeEventListener('scroll', handleCloseallPopovers)
+  }, [])
+
   return (
     <>
       <Container isBusinessList={isBusinessList} hero={props.hideHero} isCheckOut={isCheckOut}>
@@ -78,7 +85,7 @@ export const OrderContextUI = (props) => {
         </AddressMenu>
         <FeatureItems>
           <ItemInline>
-            <OrderTypeSelectorHeader configTypes={configTypes} />
+            <OrderTypeSelectorHeader configTypes={configTypes} autoCloseWhenScroll={windowSize.width < 576} />
           </ItemInline>
           {isPreOrderSetting && (
             <ItemInline>

package/src/themes/five/src/components/OrderDetails/OrderHistory.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { useLanguage, useUtils } from 'ordering-components-external'
+import { useLanguage, useUtils, useConfig } from 'ordering-components-external'
 import { ArrowRight, CheckCircleFill } from 'react-bootstrap-icons'
 import { Button } from '../../styles/Buttons'
 import { formatSeconds, getTraduction } from '../../../../../utils'
@@ -21,6 +21,7 @@ export const OrderHistory = (props) => {
 
   const [, t] = useLanguage()
   const [{ parseDate }] = useUtils()
+  const [{ configs }] = useConfig()
 
   const getLogisticTagStatus = (status) => {
     switch (status) {
@@ -113,7 +114,7 @@ export const OrderHistory = (props) => {
               {t('VIA', 'Via')}{' '}
               {order.app_id ? t(order.app_id.toUpperCase(), order.app_id) : t('OTHER', 'Other')}
             </h3>
-            <p>{parseDate(order.created_at, { outputFormat: 'MMM DD, hh:mm A' })}</p>
+            <p>{parseDate(order.created_at, { outputFormat: `MMM DD, ${configs?.general_hour_format?.value}` })}</p>
           </DetailWrapper>
         </HistoryItemWrapper>
       )}
@@ -152,7 +153,7 @@ export const OrderHistory = (props) => {
                 ) : <>{t('DRIVER_UNASSIGNED', 'Driver unassigned')}</>}
               </h3>
             )}
-            <p>{parseDate(message.created_at, { outputFormat: 'MMM DD, hh:mm A' })}</p>
+            <p>{parseDate(message.created_at, { outputFormat: `MMM DD, ${configs?.general_hour_format?.value}` })}</p>
           </DetailWrapper>
         </HistoryItemWrapper>
       ))}

package/src/themes/five/src/components/OrderDetails/index.js

@@ -424,7 +424,7 @@ const OrderDetailsUI = (props) => {
                     {activeStatus.includes(order?.status) ? (
                       <OrderEta order={order} />
                     ) : (
-                      parseDate(order?.reporting_data?.at[`status:${order.status}`])
+                      parseDate(order?.reporting_data?.at[`status:${order.status}`], { outputFormat: `YYYY-MM-DD ${configs?.general_hour_format?.value}` })
                     )}
                   </p>
                 )}

package/src/themes/five/src/components/PaymentOptionCard/index.js

@@ -0,0 +1,70 @@
+import { PaymentOptionStripe, useLanguage, useSession } from 'ordering-components-external'
+import React, { useEffect, useState } from 'react'
+import { CardFormCustom } from '../CardFormCustom'
+import Modal from '../Modal'
+import { PaymentOptionStripeUI } from '../PaymentOptionStripe'
+import { AddNewCard } from '../PaymentOptionStripe/styles'
+
+const PaymentOptionCardUI = (props) => {
+  const {
+    deleteCard,
+    cardsList,
+    handleCardClick,
+    handleNewCard,
+    paymethodSelected,
+    cardSelected,
+    gateway,
+    paymethodsWithoutSaveCards,
+    onSelectCard
+  } = props
+
+  const [, t] = useLanguage()
+  const [{ token }] = useSession()
+
+  const [addCardOpen, setAddCardOpen] = useState(false)
+
+  useEffect(() => {
+    if (cardsList?.cards?.length > 0) {
+      setAddCardOpen(true)
+    }
+  }, [cardsList?.cards])
+
+  return (
+    <>
+      <PaymentOptionStripeUI
+        deleteCard={deleteCard}
+        cardsList={cardsList}
+        handleCardClick={handleCardClick}
+        handleNewCard={handleNewCard}
+        paymethodSelected={paymethodSelected}
+        cardSelected={cardSelected}
+        gateway={gateway}
+        onSelectCard={onSelectCard}
+      />
+
+      {token && !cardsList.loading && (!cardSelected || !paymethodsWithoutSaveCards.includes(gateway)) && (
+        <AddNewCard>
+          <span onClick={() => setAddCardOpen(true)}>{t('ADD_NEW_CARD', 'Add new card')}</span>
+        </AddNewCard>
+      )}
+
+      <Modal
+        open={addCardOpen}
+        onClose={() => setAddCardOpen(false)}
+        title={t('ADD_NEW_CARD', 'Add new card')}
+      >
+        <CardFormCustom handleNewCard={handleNewCard} setAddCardOpen={setAddCardOpen} />
+      </Modal>
+    </>
+  )
+}
+
+export const PaymentOptionCard = (props) => {
+  const paymentOptionStripeProps = {
+    ...props,
+    UIComponent: PaymentOptionCardUI
+  }
+  return (
+    <PaymentOptionStripe {...paymentOptionStripeProps} />
+  )
+}

package/src/themes/five/src/components/PaymentOptionStripe/index.js

@@ -5,7 +5,9 @@ import {
   useSession,
   useLanguage
 } from 'ordering-components-external'
-import FiMoreVertical from '@meronex/icons/fi/FiMoreVertical'
+import IosRadioButtonOn from '@meronex/icons/ios/IosRadioButtonOn'
+import IosRadioButtonOff from '@meronex/icons/ios/IosRadioButtonOff'
+import { Trash } from 'react-bootstrap-icons'
 import { useTheme } from 'styled-components'
 
 import { Modal } from '../Modal'
@@ -22,16 +24,18 @@ import {
   CardItemActions,
   BlockLoading,
   AddNewCard,
-  ActionsContent,
   CardItemActionsWrapper
 } from './styles'
 
-const PaymentOptionStripeUI = (props) => {
+export const PaymentOptionStripeUI = (props) => {
   const {
     deleteCard,
     cardsList,
     handleCardClick,
-    handleNewCard
+    handleNewCard,
+    paymethodSelected,
+    cardSelected,
+    gateway
   } = props
   const [{ token }] = useSession()
   const [, t] = useLanguage()
@@ -39,6 +43,8 @@ const PaymentOptionStripeUI = (props) => {
 
   const [addCartOpen, setAddCardOpen] = useState(false)
 
+  const paymethodsWithoutSaveCards = ['credomatic']
+
   const _handleNewCard = (card) => {
     setAddCardOpen(false)
     handleNewCard(card)
@@ -55,6 +61,12 @@ const PaymentOptionStripeUI = (props) => {
     })
   }
 
+  useEffect(() => {
+    if (!cardsList?.loading && cardsList?.cards?.length === 0 && !paymethodsWithoutSaveCards.includes(gateway)) {
+      setAddCardOpen(true)
+    }
+  }, [cardsList?.loading])
+
   return (
     <>
       {props.beforeElements?.map((BeforeElement, i) => (
@@ -79,7 +91,7 @@ const PaymentOptionStripeUI = (props) => {
         )}
         {token && cardsList.cards && cardsList.cards.length > 0 && (
           <>
-            {cardsList?.cards?.map((card, i) => (
+            {cardsList?.cards?.map((card, i) =>
               <PaymentCard
                 {...props}
                 key={i}
@@ -87,11 +99,14 @@ const PaymentOptionStripeUI = (props) => {
                 handleDeleteCard={() => handleDeleteCard(card)}
                 card={card}
                 defaultSelected={i === 0}
+                active={(paymethodSelected || cardSelected?.id) === card.id}
+                cardSelected={cardSelected}
+                paymethodSelected={paymethodSelected}
               />
-            ))}
+            )}
           </>
         )}
-        {token && !cardsList.loading && (
+        {token && !cardsList.loading && !paymethodsWithoutSaveCards.includes(gateway) && (
           <AddNewCard>
             <span onClick={() => setAddCardOpen(true)}>{t('ADD_NEW_CARD', 'Add new card')}</span>
           </AddNewCard>
@@ -148,14 +163,15 @@ export const PaymentCard = (props) => {
     handleDeleteCard,
     card,
     handleCardClick,
-    onSelectCard
+    onSelectCard,
+    active,
+    cardSelected
   } = props
 
-  const [, t] = useLanguage()
-  const theme = useTheme()
   const [isShowActions, setIsShowActions] = useState(false)
   const cardActionsRef = useRef(null)
   const actionWrapperRef = useRef(null)
+  const theme = useTheme()
 
   const handleClickOutside = (e) => {
     if (!isShowActions) return
@@ -168,7 +184,8 @@ export const PaymentCard = (props) => {
   const handleChangeDefaultCard = (e) => {
     if (actionWrapperRef.current?.contains(e.target)) return
     handleCardClick(card)
-    onSelectCard({
+    onSelectCard && onSelectCard({
+      ...cardSelected,
       id: card.id,
       type: 'card',
       card: {
@@ -178,6 +195,19 @@ export const PaymentCard = (props) => {
     })
   }
 
+  useEffect(() => {
+    if (!cardSelected) return
+    onSelectCard && onSelectCard({
+      ...cardSelected,
+      id: cardSelected?.id,
+      type: 'card',
+      card: {
+        brand: cardSelected?.brand,
+        last4: cardSelected?.last4
+      }
+    })
+  }, [cardSelected])
+
   useEffect(() => {
     window.addEventListener('click', handleClickOutside)
     return () => window.removeEventListener('click', handleClickOutside)
@@ -186,25 +216,21 @@ export const PaymentCard = (props) => {
   return (
     <CardItem onClick={handleChangeDefaultCard} isCursor>
       <CardItemContent>
+        <span className='checks'>
+          {active ? <IosRadioButtonOn /> : <IosRadioButtonOff />}
+        </span>
         <div>
           <img src={getIconCard(card?.brand)} alt={card?.brand} />
         </div>
         <span>
-          {card?.brand} {card.last4}
+          XXXX-XXXX-XXXX-{card?.last4}
         </span>
       </CardItemContent>
       <CardItemActions>
         <CardItemActionsWrapper ref={actionWrapperRef}>
           <span ref={cardActionsRef}>
-            <FiMoreVertical onClick={() => setIsShowActions(true)} />
+            <Trash color={theme.colors.lightGray} onClick={() => handleDeleteCard()} />
           </span>
-          {
-            isShowActions && (
-              <ActionsContent>
-                <div className='delete' onClick={handleDeleteCard}>{t('DELETE', 'Delete')}</div>
-              </ActionsContent>
-            )
-          }
         </CardItemActionsWrapper>
       </CardItemActions>
     </CardItem>