Contact.js

import React from 'react';
import { Row, Col, Title, Tabs, Loader } from '../../../../ui/base';
import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
import ContactForm from './ContactForm';
import PropTypes from 'prop-types';
import { pick, isEmpty } from 'ramda';

const TabPane = Tabs.TabPane;

const Contact = ({ form, intl, brands, selectedDealer }) => {
  const dealersBrands = pick(selectedDealer.brandIds, brands);
  return (
    (!isEmpty(brands) && (
      <Row>
        <Col>
          <Title level={2}>
            <FormattedMessage id="contact_information" />
          </Title>
          <Tabs defaultActiveKey="1" data-cy="contactTabs">
            <TabPane
              tab={intl.formatMessage({ id: 'default' })}
              key="1"
              data-cy="defaultTab"
            >
              <ContactForm contact={selectedDealer} form={form} />
            </TabPane>
            {Object.keys(dealersBrands).map((key, index) => {
              return (
                <TabPane
                  tab={dealersBrands[key].name}
                  key={'' + index + 1}
                  data-cy={`tab${index}`}
                >
                  {/* <ContactForm
                    contact={selectedDealer.brandContacts[key] || {}}
                    brandId={key}
                    form={form}
                  /> */}
                </TabPane>
              );
            })}
          </Tabs>
        </Col>
      </Row>
    )) || <Loader />
  );
};

Contact.propTypes = {
  form: PropTypes.object.isRequired,
  intl: intlShape.isRequired,
  brands: PropTypes.object.isRequired,
  selectedDealer: PropTypes.object.isRequired
};

export default injectIntl(Contact);