Merge branch 'beta' into react-query-start

Author: magicznyleszek

jsapp/js/account/changePasswordRoute.component.tsx

@@ -36,7 +36,7 @@ const ChangePasswordRoute = class ChangePassword extends React.Component<WithRou
           <bem.AccountSettings__actions>
             <Button
               type='bare'
-              color='storm'
+              color='dark-blue'
               size='l'
               startIcon='close'
               onClick={this.close.bind(this)}

jsapp/js/account/plans/plan.component.tsx

@@ -428,16 +428,16 @@ export default function Plan(props: PlanProps) {
     hasMetaFeatures() && (
       <div className={styles.comparisonButton}>
         <Button
-          type='full'
-          color='light-storm'
+          type='bare'
+          color='dark-blue'
           size='m'
-          isFullWidth
           label={
             expandComparison
               ? t('Collapse full comparison')
               : t('Display full comparison')
           }
           onClick={() => setExpandComparison(!expandComparison)}
+          endIcon={expandComparison ? 'angle-up' : 'angle-down'}
         />
       </div>
     );

jsapp/js/account/plans/plan.module.scss

@@ -237,6 +237,7 @@ a.enterpriseLink {
   margin-left: auto;
   margin-right: auto;
   width: $plans-page-card-width;
+  text-align: center;
 }
 
 .planButton {

jsapp/js/account/security/mfa/mfaSection.component.tsx

@@ -220,7 +220,7 @@ export default class SecurityRoute extends React.Component<{}, SecurityState> {
                 <bem.MFAOptions__buttons>
                   <Button
                     type='frame'
-                    color='storm'
+                    color='dark-blue'
                     label={t('Reconfigure')}
                     size='m'
                     onClick={(evt: React.ChangeEvent<HTMLInputElement>) => {
@@ -238,7 +238,7 @@ export default class SecurityRoute extends React.Component<{}, SecurityState> {
                 <bem.MFAOptions__buttons>
                   <Button
                     type='frame'
-                    color='storm'
+                    color='dark-blue'
                     label={t('Generate new')}
                     size='m'
                     onClick={(evt: React.ChangeEvent<HTMLInputElement>) => {

jsapp/js/account/stripe.types.ts

@@ -157,6 +157,13 @@ export enum PlanNames {
   'ENTERPRISE' = 'Enterprise',
 }
 
+export enum UsageLimitTypes {
+  'STORAGE' = 'storage',
+  'SUBMISSION' = 'submission',
+  'TRANSCRIPTION' = 'automated transcription',
+  'TRANSLATION' = 'machine translation',
+}
+
 export enum Limits {
   'unlimited' = 'unlimited',
 }

jsapp/js/account/usage/usage.component.tsx

@@ -10,7 +10,7 @@ import UsageContainer, {
   USAGE_CONTAINER_TYPE,
 } from 'js/account/usage/usageContainer';
 import envStore from 'js/envStore';
-import {formatDate} from 'js/utils';
+import {convertSecondsToMinutes, formatDate} from 'js/utils';
 import styles from './usage.module.scss';
 import useWhenStripeIsEnabled from 'js/hooks/useWhenStripeIsEnabled.hook';
 import {ProductsContext} from '../useProducts.hook';
@@ -104,7 +104,7 @@ export default function Usage() {
           nlpCharacterLimit: limits.nlp_character_limit,
           nlpMinuteLimit:
             typeof limits.nlp_seconds_limit === 'number'
-              ? limits.nlp_seconds_limit / 60
+              ? convertSecondsToMinutes(limits.nlp_seconds_limit)
               : limits.nlp_seconds_limit,
           submissionLimit: limits.submission_limit,
           isLoaded: true,

jsapp/js/account/usage/usageProjectBreakdown.tsx

@@ -11,8 +11,8 @@ import {USAGE_ASSETS_PER_PAGE} from 'jsapp/js/constants';
 import SortableProjectColumnHeader from 'jsapp/js/projects/projectsTable/sortableProjectColumnHeader';
 import type {ProjectFieldDefinition} from 'jsapp/js/projects/projectViews/constants';
 import type {ProjectsTableOrder} from 'jsapp/js/projects/projectsTable/projectsTable';
-import {truncateNumber} from 'jsapp/js/utils';
-import {UsageContext, useUsage} from './useUsage.hook';
+import {convertSecondsToMinutes} from 'jsapp/js/utils';
+import {UsageContext} from './useUsage.hook';
 import Button from 'js/components/common/button';
 import Icon from 'js/components/common/icon';
 import {OrganizationContext} from 'js/account/organizations/useOrganization.hook';
@@ -132,10 +132,8 @@ const ProjectBreakdown = () => {
         `submission_count_current_${usage.trackingPeriod}`
       ].toLocaleString();
 
-    const periodASRSeconds = truncateNumber(
-      project[`nlp_usage_current_${usage.trackingPeriod}`]
-        .total_nlp_asr_seconds / 60,
-      1
+    const periodASRSeconds = convertSecondsToMinutes(
+      project[`nlp_usage_current_${usage.trackingPeriod}`].total_nlp_asr_seconds
     ).toLocaleString();
 
     const periodMTCharacters =
@@ -154,9 +152,7 @@ const ProjectBreakdown = () => {
           </Link>
         </td>
         <td>{project.submission_count_all_time.toLocaleString()}</td>
-        <td className={styles.currentMonth}>
-          {periodSubmissions}
-        </td>
+        <td className={styles.currentMonth}>{periodSubmissions}</td>
         <td>{prettyBytes(project.storage_bytes)}</td>
         <td>{periodASRSeconds}</td>
         <td>{periodMTCharacters}</td>
@@ -180,7 +176,7 @@ const ProjectBreakdown = () => {
             </div>
           </div>
           <Button
-            color='storm'
+            color='dark-blue'
             size='s'
             type='bare'
             startIcon='close'

jsapp/js/account/usage/useUsage.hook.ts

@@ -1,7 +1,7 @@
 import {createContext, useCallback} from 'react';
 import type {Organization, RecurringInterval} from 'js/account/stripe.types';
 import {getSubscriptionInterval} from 'js/account/stripe.api';
-import {formatRelativeTime, truncateNumber} from 'js/utils';
+import {convertSecondsToMinutes, formatRelativeTime} from 'js/utils';
 import {getUsage} from 'js/account/usage/usage.api';
 import {useApiFetcher, withApiFetcher} from 'js/hooks/useApiFetcher.hook';
 
@@ -50,11 +50,9 @@ const loadUsage = async (
   return {
     storage: usage.total_storage_bytes,
     submissions: usage.total_submission_count[`current_${trackingPeriod}`],
-    transcriptionMinutes: Math.floor(
-      truncateNumber(
-        usage.total_nlp_usage[`asr_seconds_current_${trackingPeriod}`] / 60
-      )
-    ), // seconds to minutes
+    transcriptionMinutes: convertSecondsToMinutes(
+      usage.total_nlp_usage[`asr_seconds_current_${trackingPeriod}`]
+    ),
     translationChars:
       usage.total_nlp_usage[`mt_characters_current_${trackingPeriod}`],
     currentMonthStart: usage.current_month_start,

jsapp/js/components/RESTServices/RESTServiceLogs.es6

@@ -205,7 +205,7 @@ export default class RESTServiceLogs extends React.Component {
       <header className='rest-services-list__header'>
         <Button
           type='frame'
-          color='storm'
+          color='dark-blue'
           size='m'
           onClick={() => {
             window.location.assign(`/#/forms/${this.state.assetUid}/settings/rest`);
@@ -268,7 +268,7 @@ export default class RESTServiceLogs extends React.Component {
                 { this.hasAnyFailedLogs() &&
                   <Button
                     type='bare'
-                    color='storm'
+                    color='dark-blue'
                     size='m'
                     onClick={this.retryAll.bind(this)}
                     tooltip={t('Retry all submissions')}
@@ -319,7 +319,7 @@ export default class RESTServiceLogs extends React.Component {
                     {log.status === HOOK_LOG_STATUSES.FAILED &&
                       <Button
                         type='bare'
-                        color='storm'
+                        color='dark-blue'
                         size='m'
                         isDisabled={!this.state.isHookActive}
                         onClick={this.retryLog.bind(this, log)}
@@ -331,7 +331,7 @@ export default class RESTServiceLogs extends React.Component {
                     {this.hasInfoToDisplay(log) &&
                       <Button
                         type='bare'
-                        color='storm'
+                        color='dark-blue'
                         size='m'
                         onClick={this.showLogInfo.bind(this, log)}
                         tooltip={t('More info')}

jsapp/js/components/RESTServices/RESTServicesForm.es6

@@ -375,8 +375,8 @@ export default class RESTServicesForm extends React.Component {
         })}
 
         <Button
-          type='full'
-          color='storm'
+          type='frame'
+          color='dark-blue'
           size='s'
           startIcon='plus'
           onClick={this.addNewCustomHeaderRow.bind(this)}