migrating operation on est branch

App.ios.js

@@ -373,7 +373,7 @@ const AppSuperAdministrator = createDrawerNavigator({
     headerMode: 'none'
 });
 
-export const AppNavigator = createSwitchNavigator({
+const AppNavigator = createSwitchNavigator({
     first: {
         screen: SplashScreen
     },
@@ -387,16 +387,15 @@ export const AppNavigator = createSwitchNavigator({
 });
 const AppContainer = createAppContainer(AppNavigator);
 
-class App extends React.Component {
-
+export default class App extends React.Component {
 
     constructor(props) {
         super(props);
         console.log("APP PROPS", this.props);
         global.appHasLoaded = false;
-        IlinkEmitter.on("langueChange", this.updateLangue.bind(this))
         //Remove this method to stop OneSignal Debugging
-/*        OneSignal.setLogLevel(6, 0);
+        OneSignal.setLogLevel(6, 0);
+        IlinkEmitter.on("langueChange", this.updateLangue.bind(this))
         // Replace 'YOUR_ONESIGNAL_APP_ID' with your OneSignal App ID.
         OneSignal.init("e8e7251f-713d-4658-9510-86d877fa6a7c", {
             kOSSettingsKeyAutoPrompt: false,
@@ -410,7 +409,7 @@ class App extends React.Component {
 
         OneSignal.addEventListener('received', this.onReceived);
         OneSignal.addEventListener('opened', this.onOpened);
-        OneSignal.addEventListener('ids', this.onIds);*/
+        OneSignal.addEventListener('ids', this.onIds);
     }
 
     updateLangue() {
@@ -541,8 +540,6 @@ function myiOSPromptCallback(permission) {
     // do something with permission value
 }
 
-export default App;
-
 const styles = StyleSheet.create({
     container: {
         flex: 1,

App.js

@@ -83,6 +83,8 @@ import CasserEpargneUser from './screens/nano-credit/CasserEpargneUser';
 import {IlinkEmitter} from './utils/events';
 import EnvoieWalletToBankAgent from "./screens/wallet/agent/EnvoieWalletToBankAgent";
 import ReattachAccountUser from "./screens/wallet/user/ReattachAccountUser";
+import InsuranceSubscriptionScreen from "./screens/wallet/user/InsuranceSubscriptionScreen";
+import AddBeneficiaryScreen from "./screens/wallet/user/AddBeneficiaryScreen";
 
 
 const instructions = Platform.select({
@@ -113,7 +115,8 @@ const AppStack = createDrawerNavigator({
         /* filtre:Filter,
          network:Networks,*/
         useraccount: {
-            screen: UserAccount,
+            screen: InsuranceSubscriptionScreen,
+            /*screen: UserAccount,*/
             navigationOptions: {},
         },
         walletSelect: WalletSelect,
@@ -130,6 +133,8 @@ const AppStack = createDrawerNavigator({
         envoieWalletToCashUser: EnvoieWalletToCashUser,
         envoieWalletToCardUser: EnvoieWalletToCardUser,
         envoieWalletToBankUser: EnvoieWalletToBankUser,
+        addBeneficiaryScreen:AddBeneficiaryScreen,
+        insuranceSubscriptionScreen: InsuranceSubscriptionScreen,
         retraitWalletVersCashUser: RetraitWalletVersCashUser,
         retraitCarteVersCashUser: RetraitCarteVersCashUser,
         retraitCarteVersWalletUser: RetraitCarteVersWalletUser,
@@ -397,7 +402,7 @@ export default class App extends React.Component {
         OneSignal.setLogLevel(6, 0);
         IlinkEmitter.on("langueChange", this.updateLangue.bind(this))
         // Replace 'YOUR_ONESIGNAL_APP_ID' with your OneSignal App ID.
-        OneSignal.init("ab02121a-ecec-424f-910a-2709ef85698d", {
+        OneSignal.init("e8e7251f-713d-4658-9510-86d877fa6a7c", {
             kOSSettingsKeyAutoPrompt: false,
             kOSSettingsKeyInAppLaunchURL: false,
             kOSSettingsKeyInFocusDisplayOption: 2
@@ -438,7 +443,6 @@ export default class App extends React.Component {
 
     goToScreen = (routeName, params, isReset = true) => {
         const {navigator} = this.refs;
-        console.log("NAVIGATOR", navigator);
         if (typeof navigator !== 'undefined') {
             console.log("APP HAS LOADED", global.appHasLoaded);
             if (global.appHasLoaded) {

components/Button/index.js

@@ -0,0 +1,75 @@
+import React from "react";
+import {ActivityIndicator, StyleSheet, TouchableOpacity} from "react-native";
+import PropTypes from "prop-types";
+import styles from "./styles";
+import {Color} from "../../config/Color";
+import Text from '../Text';
+
+
+export default function Button(props) {
+    const {
+        style,
+        styleText,
+        icon,
+        outline,
+        full,
+        round,
+        loading,
+        children,
+        ...rest
+    } = props;
+
+    return (
+        <TouchableOpacity
+            {...rest}
+            style={StyleSheet.flatten([
+                [styles.default, {backgroundColor: Color.primaryColor}],
+                outline && [
+                    styles.outline,
+                    {backgroundColor: Color.cardBackgroundColor, borderColor: Color.primaryColor}
+                ],
+                full && styles.full,
+                round && styles.round,
+                style
+            ])}
+            activeOpacity={0.9}
+        >
+            {icon ? icon : null}
+            <Text
+                style={StyleSheet.flatten([
+                    styles.textDefault,
+                    outline && {color: Color.primaryColor},
+                    styleText
+                ])}
+                numberOfLines={1}
+            >
+                {children || "Button"}
+            </Text>
+            {loading ? (
+                <ActivityIndicator
+                    size="small"
+                    color={outline ? Color.primaryColor : Color.whiteColor}
+                    style={{paddingLeft: 5}}
+                />
+            ) : null}
+        </TouchableOpacity>
+    );
+}
+
+Button.propTypes = {
+    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+    icon: PropTypes.node,
+    outline: PropTypes.bool,
+    full: PropTypes.bool,
+    round: PropTypes.bool,
+    loading: PropTypes.bool
+};
+
+Button.defaultProps = {
+    style: {},
+    icon: null,
+    outline: false,
+    full: false,
+    round: false,
+    loading: false
+};

components/Button/styles.js

@@ -0,0 +1,30 @@
+import {StyleSheet} from "react-native";
+import {FontWeight, Typography} from "../../config/typography";
+import {Color} from "../../config/Color";
+
+export default StyleSheet.create({
+    default: {
+        height: 56,
+        borderRadius: 8,
+        flexDirection: "row",
+        justifyContent: "center",
+        alignItems: "center",
+        paddingHorizontal: 20
+    },
+    textDefault: {
+        ...Typography.headline,
+        color: Color.whiteColor,
+        fontWeight: FontWeight.semibold
+    },
+    outline: {
+        borderWidth: 1
+    },
+
+    full: {
+        width: "100%",
+        alignSelf: "auto"
+    },
+    round: {
+        borderRadius: 28
+    }
+});

components/Icon/index.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import {StyleSheet} from 'react-native';
+import PropTypes from 'prop-types';
+import Icon from 'react-native-vector-icons/FontAwesome5';
+import styles from './styles';
+
+export default function Index(props) {
+  const {style, enableRTL, ...rest} = props;
+  const layoutStyle = enableRTL ? styles.styleRTL : {};
+  return <Icon style={StyleSheet.flatten([style, layoutStyle])} {...rest} />;
+}
+
+Index.propTypes = {
+  style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+  enableRTL: PropTypes.bool,
+};
+
+Index.defaultProps = {
+  style: {},
+  enableRTL: false,
+};

components/Icon/styles.js

@@ -0,0 +1,5 @@
+import {StyleSheet, I18nManager} from 'react-native';
+
+export default StyleSheet.create({
+  styleRTL: {transform: [{scaleX: I18nManager.isRTL ? -1 : 1}]},
+});

components/NetInfoBar.js

@@ -0,0 +1,39 @@
+/**
+ * Project iLinkWorld
+ * File NetInfoBar
+ * Path components
+ * Created by BRICE ZELE
+ * Date: 18/10/2021
+ */
+import React from 'react';
+import {useNetInfo} from '@react-native-community/netinfo';
+import {Dimensions, StyleSheet, View} from 'react-native';
+import Text from './Text';
+
+const {width} = Dimensions.get('window');
+
+export const NetInfoBar = () => {
+    const netInfo = useNetInfo();
+
+    if (!netInfo.isConnected && netInfo.isConnected !== null) {
+        return (
+            <View style={styles.offlineContainer}>
+                <Text style={styles.offlineText}>No Internet Connection</Text>
+            </View>
+        );
+    }
+    return null;
+};
+
+const styles = StyleSheet.create({
+    offlineContainer: {
+        backgroundColor: '#C31C0D',
+        height: 30,
+        justifyContent: 'center',
+        alignItems: 'center',
+        flexDirection: 'row',
+        width,
+        position: 'absolute',
+    },
+    offlineText: {color: '#fff'},
+});

components/PasswordInput/index.js

@@ -0,0 +1,108 @@
+import React, {useState} from 'react';
+import {Platform, TextInput, View} from 'react-native';
+import PropTypes from 'prop-types';
+import Icon from '../Icon';
+import {Color} from '../../config/Color';
+
+
+export default function Index(props) {
+    const cardColor = Color.cardBackgroundColor;
+    const {
+        style,
+        onChangeText,
+        onFocus,
+        placeholder,
+        value,
+        success,
+        secureTextEntry,
+        keyboardType,
+        multiline,
+        textAlignVertical,
+        icon,
+        onSubmitEditing,
+    } = props;
+
+    const [secure, setSecure] = useState(true);
+
+    return (
+        <View style={[{
+            height: 46,
+            borderRadius: 5,
+            paddingHorizontal: 10,
+            width: '100%',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            flexDirection: 'row',
+            backgroundColor: cardColor
+        }, style]}>
+            {React.Children.map(icon, child =>
+                React.cloneElement(child, {
+                    color: success ? Color.primaryColor : Color.accentColor,
+                    style: {marginRight: Platform.OS === 'ios' ? 10 : 5}
+                }),
+            )}
+            <TextInput
+                style={{
+                    fontFamily: 'Raleway',
+                    flex: 1,
+                    height: '100%',
+                    color: Color.textColor,
+                    paddingTop: 5,
+                    paddingBottom: 5,
+                }}
+                onChangeText={text => onChangeText(text)}
+                onFocus={() => onFocus()}
+                autoCorrect={false}
+                placeholder={placeholder}
+                placeholderTextColor={success ? Color.grayColor : Color.primaryColor}
+                secureTextEntry={secure}
+                value={value}
+                selectionColor={Color.primaryColor}
+                keyboardType={keyboardType}
+                multiline={multiline}
+                textAlignVertical={textAlignVertical}
+                onSubmitEditing={onSubmitEditing}
+            />
+            <Icon
+                style={{paddingRight: 5}}
+                name={!secure ? 'eye' : 'eye-slash'}
+                size={20}
+                color="gray"
+                onPress={() => setSecure(!secure)}
+            />
+        </View>
+    );
+}
+
+Index.propTypes = {
+    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+    onChangeText: PropTypes.func,
+    onFocus: PropTypes.func,
+    placeholder: PropTypes.string,
+    value: PropTypes.string,
+    success: PropTypes.bool,
+    secureTextEntry: PropTypes.bool,
+    keyboardType: PropTypes.string,
+    multiline: PropTypes.bool,
+    textAlignVertical: PropTypes.string,
+    icon: PropTypes.node,
+    onSubmitEditing: PropTypes.func,
+};
+
+Index.defaultProps = {
+    style: {},
+    onChangeText: text => {
+    },
+    onFocus: () => {
+    },
+    placeholder: 'Placeholder',
+    value: '',
+    success: true,
+    secureTextEntry: false,
+    keyboardType: 'default',
+    multiline: false,
+    textAlignVertical: 'center',
+    icon: null,
+    onSubmitEditing: () => {
+    },
+};

components/PasswordInput/styles.js

@@ -0,0 +1,14 @@
+import {StyleSheet} from 'react-native';
+
+export default StyleSheet.create({
+    textInput: {
+        height: 46,
+        borderRadius: 5,
+        paddingHorizontal: 10,
+        width: '100%',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        flexDirection: 'row',
+    },
+});
+

components/ScreenComponent.js

@@ -0,0 +1,21 @@
+/**
+ * Project YooLearn
+ * File index
+ * Path app/components/Screen
+ * Created by BRICE ZELE
+ * Date: 26/08/2021
+ */
+import React from 'react';
+import {SafeAreaView} from 'react-native';
+import {NetInfoBar} from './NetInfoBar';
+import {Color} from "../config/Color";
+
+export const ScreenComponent = React.forwardRef((props, ref) => (
+    <SafeAreaView style={[{flex: 1, backgroundColor: Color.containerBackgroundColor}, props.style]} {...props}>
+        <NetInfoBar/>
+        {/* React.Children.map(props.children, child =>
+                React.cloneElement(child, {}),
+            ) */}
+        {props.children}
+    </SafeAreaView>
+));

components/Text/index.js

@@ -0,0 +1,180 @@
+import React from 'react';
+import {StyleSheet, Text} from 'react-native';
+import PropTypes from 'prop-types';
+import {FontWeight, Typography} from "../../config/typography";
+import {Color} from "../../config/Color";
+
+export default function Index(props) {
+    const {
+        //props style
+        header,
+        title1,
+        title2,
+        title3,
+        headline,
+        body1,
+        body2,
+        callout,
+        subhead,
+        footnote,
+        caption1,
+        caption2,
+        overline,
+        // props font
+        thin,
+        ultraLight,
+        light,
+        regular,
+        medium,
+        semibold,
+        bold,
+        heavy,
+        black,
+        //custom color
+        primaryColor,
+        darkPrimaryColor,
+        lightPrimaryColor,
+        accentColor,
+        grayColor,
+        dividerColor,
+        whiteColor,
+        fieldColor,
+        //numberOfLines
+        numberOfLines,
+        textAlign,
+        //custom
+        style,
+        //children
+        children,
+    } = props;
+
+    return (
+        <Text
+            style={StyleSheet.flatten([
+                {textAlign},
+                header && Typography.header,
+                title1 && Typography.title1,
+                title2 && Typography.title2,
+                title3 && Typography.title3,
+                headline && Typography.headline,
+                body1 && Typography.body1,
+                body2 && Typography.body2,
+                callout && Typography.callout,
+                subhead && Typography.subhead,
+                footnote && Typography.footnote,
+                caption1 && Typography.caption1,
+                caption2 && Typography.caption2,
+                overline && Typography.overline,
+                //custom for font
+                thin && StyleSheet.flatten({fontWeight: FontWeight.thin}),
+                ultraLight && StyleSheet.flatten({fontWeight: FontWeight.ultraLight}),
+                light && StyleSheet.flatten({fontWeight: FontWeight.light}),
+                regular && StyleSheet.flatten({fontWeight: FontWeight.regular}),
+                medium && StyleSheet.flatten({fontWeight: FontWeight.medium}),
+                semibold && StyleSheet.flatten({fontWeight: FontWeight.semibold}),
+                bold && StyleSheet.flatten({fontWeight: FontWeight.bold}),
+                heavy && StyleSheet.flatten({fontWeight: FontWeight.heavy}),
+                black && StyleSheet.flatten({fontWeight: FontWeight.black}),
+                // default color
+                StyleSheet.flatten({color: Color.textColor}),
+                //custom for color
+                primaryColor && StyleSheet.flatten({color: Color.primaryColor}),
+                darkPrimaryColor && StyleSheet.flatten({color: Color.primaryDarkColor}),
+                lightPrimaryColor && StyleSheet.flatten({color: Color.primaryLightColor}),
+                accentColor && StyleSheet.flatten({color: Color.accentColor}),
+                grayColor && StyleSheet.flatten({color: Color.grayColor}),
+                dividerColor && StyleSheet.flatten({color: Color.dividerColor}),
+                whiteColor && StyleSheet.flatten({color: Color.whiteColor}),
+                fieldColor && StyleSheet.flatten({color: Color.fieldColor}),
+                style && style,
+            ])}
+            numberOfLines={numberOfLines}>
+            {children}
+        </Text>
+    );
+}
+
+// Define typechecking
+Index.propTypes = {
+    //define style
+    header: PropTypes.bool,
+    title1: PropTypes.bool,
+    title2: PropTypes.bool,
+    title3: PropTypes.bool,
+    headline: PropTypes.bool,
+    body1: PropTypes.bool,
+    body2: PropTypes.bool,
+    callout: PropTypes.bool,
+    subhead: PropTypes.bool,
+    footnote: PropTypes.bool,
+    caption1: PropTypes.bool,
+    caption2: PropTypes.bool,
+    overline: PropTypes.bool,
+    //define font custom
+    thin: PropTypes.bool,
+    ultraLight: PropTypes.bool,
+    light: PropTypes.bool,
+    regular: PropTypes.bool,
+    medium: PropTypes.bool,
+    semibold: PropTypes.bool,
+    bold: PropTypes.bool,
+    heavy: PropTypes.bool,
+    black: PropTypes.bool,
+    //custon for text color
+    primaryColor: PropTypes.bool,
+    darkPrimaryColor: PropTypes.bool,
+    lightPrimaryColor: PropTypes.bool,
+    accentColor: PropTypes.bool,
+    grayColor: PropTypes.bool,
+    dividerColor: PropTypes.bool,
+    whiteColor: PropTypes.bool,
+    fieldColor: PropTypes.bool,
+    //numberOfLines
+    numberOfLines: PropTypes.number,
+    textAlign: PropTypes.string,
+    //custom style
+    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+    children: PropTypes.node, // plain text
+};
+
+Index.defaultProps = {
+    //props for style
+    header: false,
+    title1: false,
+    title2: false,
+    title3: false,
+    headline: false,
+    body1: false,
+    body2: false,
+    callout: false,
+    subhead: false,
+    footnote: false,
+    caption1: false,
+    caption2: false,
+    overline: false,
+    //props for font
+    thin: false,
+    ultraLight: false,
+    light: false,
+    regular: false,
+    medium: false,
+    semibold: false,
+    bold: false,
+    heavy: false,
+    black: false,
+    //custon for text color
+    primaryColor: false,
+    darkPrimaryColor: false,
+    lightPrimaryColor: false,
+    accentColor: false,
+    grayColor: false,
+    dividerColor: false,
+    whiteColor: false,
+    fieldColor: false,
+    //numberOfLines
+    numberOfLines: 10,
+    textAlign: 'left',
+    //custom style
+    style: {},
+    children: '',
+};

components/TextInput/index.js

@@ -1,45 +1,53 @@
 import React from 'react';
-import { TextInput, View } from 'react-native';
+import {Platform, TextInput, View} from 'react-native';
 import PropTypes from 'prop-types';
-import { Color } from '../../config/Color';
-
+import {Color} from '../../config/Color';
+import Text from '../Text';
 
 export default function Index(props) {
-     const cardColor = Color.cardBackgroundColor;
-     const {
-          style,
-          onChangeText,
-          onFocus,
-          placeholder,
-          value,
-          success,
-          secureTextEntry,
-          keyboardType,
-          multiline,
-          textAlignVertical,
-          icon,
-          onSubmitEditing,
-     } = props;
-     return (
-          <View style={[{
-               textInput: {
-                    height: 46,
-                    borderRadius: 5,
-                    paddingHorizontal: 10,
-                    width: '100%',
-                    justifyContent: 'space-between',
-                    alignItems: 'center',
-                    flexDirection: 'row',
-               }, backgroundColor: cardColor
-          }, style]}>
-               <TextInput
+    const cardColor = Color.cardBackgroundColor;
+    const {
+        style,
+        onChangeText,
+        onFocus,
+        placeholder,
+        value,
+        success,
+        secureTextEntry,
+        keyboardType,
+        multiline,
+        textAlignVertical,
+        icon,
+        onSubmitEditing,
+        error,
+        ...rest
+    } = props;
+    return (
+        <View>
+            <View style={[{
+                height: 46,
+                borderRadius: 5,
+                paddingHorizontal: 10,
+                width: '100%',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+                flexDirection: 'row',
+                backgroundColor: cardColor
+            }, style]}>
+                {React.Children.map(icon, child =>
+                    React.cloneElement(child, {
+                        color: success ? Color.primaryColor : Color.accentColor,
+                        style: {marginRight: Platform.OS === 'ios' ? 10 : 5}
+                    }),
+                )}
+                <TextInput
                     style={{
-                         fontFamily: 'Raleway',
-                         flex: 1,
-                         height: '100%',
-                         color: colors.text,
-                         paddingTop: 5,
-                         paddingBottom: 5,
+                        fontFamily: 'Raleway',
+                        flex: 1,
+                        height: '100%',
+                        color: Color.textColor,
+                        paddingTop: 5,
+                        paddingBottom: 5,
                     }}
                     onChangeText={text => onChangeText(text)}
                     onFocus={() => onFocus()}
@@ -53,38 +61,54 @@ export default function Index(props) {
                     multiline={multiline}
                     textAlignVertical={textAlignVertical}
                     onSubmitEditing={onSubmitEditing}
-               />
-               {icon}
-          </View>
-     );
+                    {...rest}
+                />
+            </View>
+            {error !== '' && !success && (
+                <View
+                    style={{
+                        alignSelf: 'flex-start',
+                        justifyContent: 'flex-start',
+                        marginTop: 5,
+                    }}>
+                    <Text caption2 accentColor>
+                        {`${error}  `}
+                    </Text>
+                </View>
+            )}
+        </View>
+    );
 }
 
 Index.propTypes = {
-     style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
-     onChangeText: PropTypes.func,
-     onFocus: PropTypes.func,
-     placeholder: PropTypes.string,
-     value: PropTypes.string,
-     success: PropTypes.bool,
-     secureTextEntry: PropTypes.bool,
-     keyboardType: PropTypes.string,
-     multiline: PropTypes.bool,
-     textAlignVertical: PropTypes.string,
-     icon: PropTypes.node,
-     onSubmitEditing: PropTypes.func,
+    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+    onChangeText: PropTypes.func,
+    onFocus: PropTypes.func,
+    placeholder: PropTypes.string,
+    value: PropTypes.string,
+    success: PropTypes.bool,
+    secureTextEntry: PropTypes.bool,
+    keyboardType: PropTypes.string,
+    multiline: PropTypes.bool,
+    textAlignVertical: PropTypes.string,
+    icon: PropTypes.node,
+    onSubmitEditing: PropTypes.func,
 };
 
 Index.defaultProps = {
-     style: {},
-     onChangeText: text => { },
-     onFocus: () => { },
-     placeholder: 'Placeholder',
-     value: '',
-     success: true,
-     secureTextEntry: false,
-     keyboardType: 'default',
-     multiline: false,
-     textAlignVertical: 'center',
-     icon: null,
-     onSubmitEditing: () => { },
+    style: {},
+    onChangeText: text => {
+    },
+    onFocus: () => {
+    },
+    placeholder: 'Placeholder',
+    value: '',
+    success: true,
+    secureTextEntry: false,
+    keyboardType: 'default',
+    multiline: false,
+    textAlignVertical: 'center',
+    icon: null,
+    onSubmitEditing: () => {
+    },
 };

config/BaseStyle.js

@@ -0,0 +1,25 @@
+/**
+ * Project iLinkWorld
+ * File BaseStyle
+ * Path config
+ * Created by BRICE ZELE
+ * Date: 18/10/2021
+ */
+import {StyleSheet} from 'react-native';
+import {Color} from "./Color";
+
+export const BaseStyle = StyleSheet.create({
+    textInput: {
+        height: 46,
+        borderRadius: 5,
+        paddingHorizontal: 10,
+        width: '100%',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        flexDirection: 'row',
+    },
+    safeAreaView: {
+        flex: 1,
+        backgroundColor: Color.containerBackgroundColor
+    },
+});

config/Color.js

@@ -19,10 +19,8 @@ export const Color = {
      orangeColor: '#E5634D',
      blueColor: '#5DADE2',
      pinkColor: '#A569BD',
-     greenColor: '#58D68D',
-     yellowColor: '#FDC60A',
      textColor: '#212121',
      borderColor: '#c7c7cc',
      redColor: 'red',
      greenColor: 'green'
-}
+}