[MM-28218] Edit Company Information screen (mattermost#6806)

* [MM-28218] Edit Company Information screen

* Revert me: Temporary mock data to show visuals for company info

* PR feedback

* PR feedback and redux update

* Type check

* Remove temp code

* Don't show number of employees if no info is present

components/admin_console/billing/company_info_display.scss

@@ -127,9 +127,12 @@
 .CompanyInfoDisplay__companyInfo-editButton {
  color: rgba(var(--sys-center-channel-color-rgb), 0.56);
  font-size: 18px;
+ border-radius: 4px;
+ padding: 2px;
 
  &:hover, &:focus {
  text-decoration: none;
- color: var(--sys-center-channel-color);
+ color: rgba(var(--sys-center-channel-color-rgb),.72);
+ background: rgba(var(--sys-center-channel-color-rgb),.08);
  }
 }

components/admin_console/billing/company_info_display.tsx

@@ -13,9 +13,6 @@ import {GlobalState} from 'types/store';
 
 import './company_info_display.scss';
 
-// To be removed once add company info is complete.
-const supportAddCompanyInfo = false;
-
 const addInfoButton = (
  <div className='CompanyInfoDisplay__addInfo'>
  <BlockableLink
@@ -44,18 +41,16 @@ const noCompanyInfoSection = (
  defaultMessage='There is currently no company information on file.'
  />
  </div>
- {supportAddCompanyInfo &&
- <BlockableLink
- to='/admin_console/billing/company_info_edit'
- className='CompanyInfoDisplay__noCompanyInfo-link'
- onClick={() => trackEvent('cloud_admin', 'click_add_company_info')}
- >
- <FormattedMessage
- id='admin.billing.company_info.add'
- defaultMessage='Add Company Information'
- />
- </BlockableLink>
- }
+ <BlockableLink
+ to='/admin_console/billing/company_info_edit'
+ className='CompanyInfoDisplay__noCompanyInfo-link'
+ onClick={() => trackEvent('cloud_admin', 'click_add_company_info')}
+ >
+ <FormattedMessage
+ id='admin.billing.company_info.add'
+ defaultMessage='Add Company Information'
+ />
+ </BlockableLink>
  </div>
 );
 
@@ -67,22 +62,22 @@ const CompanyInfoDisplay: React.FC = () => {
  }
 
  let body = noCompanyInfoSection;
- const address = companyInfo.company_address?.line1 ? companyInfo.company_address : companyInfo.billing_address;
+ const address = companyInfo?.company_address?.line1 ? companyInfo.company_address : companyInfo?.billing_address;
  if (address?.line1) {
  body = (
  <div className='CompanyInfoDisplay__companyInfo'>
  <div className='CompanyInfoDisplay__companyInfo-text'>
  <div className='CompanyInfoDisplay__companyInfo-name'>
- {companyInfo.name}
- </div>
- {supportAddCompanyInfo &&
- <div className='CompanyInfoDisplay__companyInfo-numEmployees'>
- <FormattedMarkdownMessage
- id='admin.billing.company_info.employees'
- defaultMessage='{employees} employees'
- values={{employees: companyInfo.num_employees}}
- />
+ {companyInfo?.name}
  </div>
+ {Boolean(companyInfo.num_employees) &&
+ <div className='CompanyInfoDisplay__companyInfo-numEmployees'>
+ <FormattedMarkdownMessage
+ id='admin.billing.company_info.employees'
+ defaultMessage='{employees} employees'
+ values={{employees: companyInfo.num_employees}}
+ />
+ </div>
  }
  <div className='CompanyInfoDisplay__companyInfo-addressTitle'>
  <FormattedMessage
@@ -97,7 +92,6 @@ const CompanyInfoDisplay: React.FC = () => {
  <div>{address.country}</div>
  </div>
  </div>
- {supportAddCompanyInfo &&
  <div className='CompanyInfoDisplay__companyInfo-edit'>
  <BlockableLink
  to='/admin_console/billing/company_info_edit'
@@ -107,7 +101,6 @@ const CompanyInfoDisplay: React.FC = () => {
  <i className='icon icon-pencil-outline'/>
  </BlockableLink>
  </div>
- }
  </div>
  );
  }
@@ -129,7 +122,7 @@ const CompanyInfoDisplay: React.FC = () => {
  />
  </div>
  </div>
- {!companyInfo && supportAddCompanyInfo && addInfoButton}
+ {!address?.line1 && addInfoButton}
  </div>
  <div className='CompanyInfoDisplay__body'>
  {body}

components/admin_console/billing/company_info_edit.scss

@@ -0,0 +1,131 @@
+.CompanyInfoEdit__card {
+ background-color: var(--sys-center-channel-bg);
+ border: 1px solid rgba(var(--sys-center-channel-color-rgb), 0.08);
+ box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.08);
+ border-radius: 4px;
+ padding: 28px 32px;
+ margin-top: 20px;
+
+ .checkbox {
+ margin-top: 0;
+ margin-bottom: 24px;
+
+ input {
+ height: 16px;
+ width: 16px;
+ margin-top: 2px;
+ }
+
+ span {
+ padding-left: 4px;
+ }
+ }
+
+ .form-row {
+ width: 100%;
+ margin-bottom: 24px;
+ display: flex;
+ }
+
+ .form-row-third-1 {
+ .DropdownInput {
+ margin-top: 0px;
+ z-index: 99999;
+ }
+ width: 66%;
+ margin-right: 16px;
+ }
+
+ .form-row-third-2 {
+ width: 34%;
+ }
+
+ .section-title {
+ font-weight: 600;
+ font-size: 16px;
+ color: var(--sys-center-channel-text);
+ text-align: left;
+ margin-bottom: 24px;
+ }
+
+ .section-title:not(:first-child) {
+ font-size: 14px;
+ line-height: 20px;
+ }
+
+ .DropdownInput {
+ margin-bottom: 24px;
+ height: 36px;
+ position: relative;
+
+ z-index: 999999;
+
+ .DropDown__control {
+ min-height: 0px;
+ }
+ }
+
+ .full-width {
+ width: 100%
+ }
+
+ Input{
+ font-size: 14px;
+ }
+
+ .Input_fieldset {
+ background: var(--sys-center-channel-bg);
+ height: 40px;
+ padding: 2px 1px;
+
+ .Input_wrapper {
+ margin: 0;
+ }
+
+ &.Input_fieldset___legend {
+ >legend {
+ margin-left: 11px;
+ }
+ }
+
+ &.Input_fieldset:focus-within {
+ box-shadow: inset 0 0 0 2px var(--sys-button-bg);
+ color: var(--button-bg);
+ padding-top: 2px
+ }
+
+
+ &.Input_fieldset___error {
+ color: var(--error-text);
+ box-shadow: inset 0 0 0 1px var(--sys-error-text);
+ padding-top: 1px;
+ padding-bottom: 1px;
+ }
+
+ &.Input_fieldset___error:focus-within {
+ color: var(--error-text);
+ box-shadow: inset 0 0 0 2px var(--sys-error-text);
+ }
+
+ .Input {
+ height: 32px;
+ &::placeholder{
+ color: var(--sys-center-channel-color);
+ opacity: 0.64;
+ }
+ }
+ }
+}
+
+.CompanyInfoEdit__form {
+ max-width: 480px;
+}
+
+.CompanyInfoEdit__companyInfo-addressTitle {
+ font-weight: 600;
+ margin-top: 16px;
+}
+
+.CompanyInfoEdit__companyInfo-address > div {
+ margin-top: 4px;
+}