From d8a080a802e3aa2eb6466612952b85afefebf1d3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=9F=D0=B8=D0=BC=D0=B8=D0=BD=D0=BE=D0=B2=20=D0=98=D0=B2?=
 =?UTF-8?q?=D0=B0=D0=BD?= <ivan.piminov@instatsport.com>
Date: Tue, 7 Dec 2021 14:05:11 +0300
Subject: [PATCH] Ott 1992 subscription position

---
 src/features/PaymentPeriodTabs/index.tsx | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/features/PaymentPeriodTabs/index.tsx b/src/features/PaymentPeriodTabs/index.tsx
index 37e5ece3..475d6076 100644
--- a/src/features/PaymentPeriodTabs/index.tsx
+++ b/src/features/PaymentPeriodTabs/index.tsx
@@ -1,6 +1,7 @@
 import { useMemo } from 'react'
 
 import map from 'lodash/map'
+import size from 'lodash/size'
 import styled, { css } from 'styled-components/macro'
 
 import { isMobileDevice } from 'config/userAgent'
@@ -10,10 +11,15 @@ import { T9n } from 'features/T9n'
 
 import { getCorrectPaymentTabs } from './helpers'
 
-const List = styled.ul`
+type ListProps = {
+  countSubscriptions: number,
+}
+const List = styled.ul<ListProps>`
   display: flex;
   min-width: 395px;
-  justify-content: space-between;
+  justify-content: ${({ countSubscriptions }) => (countSubscriptions === 1
+    ? 'center'
+    : 'space-between')};
   ${isMobileDevice
     ? css`
       min-width: 90%;
@@ -89,7 +95,7 @@ export const PaymentPeriodTabs = ({
   ), [matchSubscriptions])
 
   return (
-    <List className={className}>
+    <List className={className} countSubscriptions={size(matchSubscriptionsWithValues)}>
       {map(matchSubscriptionsWithValues, ({ tabLexic, type }) => (
         <Item
           key={type}