wip

packages/webapp/src/containers/Preferences/General/GeneralForm.tsx

@@ -2,10 +2,10 @@
 import React from 'react';
 import styled from 'styled-components';
 import classNames from 'classnames';
-import { Form } from 'formik';
+import { Form, useFormikContext } from 'formik';
 import { Button, FormGroup, Intent } from '@blueprintjs/core';
-import { TimezonePicker } from '@blueprintjs/timezone';
-import { ErrorMessage, FastField } from 'formik';
+import { TimezonePicker, getTimezoneMetadata } from '@blueprintjs/timezone';
+import { ErrorMessage } from 'formik';
 import { useHistory } from 'react-router-dom';
 import { getAllCountries } from '@bigcapital/utils';
 
@@ -26,6 +26,7 @@ import { getLanguages } from '@/constants/languagesOptions';
 import { useGeneralFormContext } from './GeneralFormProvider';
 
 import { shouldBaseCurrencyUpdate } from './utils';
+import { SelectButton } from '@/components/Forms/Select';
 
 const Countries = getAllCountries();
 /**
@@ -211,32 +212,8 @@ export default function PreferencesGeneralForm({ isSubmitting }) {
         />
       </FormGroup>
 
-      {/* ----------  Time zone ----------  */}
-      <FastField name={'timezone'}>
-        {({ form, field: { value }, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'time_zone'} />}
-            labelInfo={<FieldRequiredHint />}
-            inline={true}
-            className={classNames(
-              'form-group--time-zone',
-              CLASSES.FORM_GROUP_LIST_SELECT,
-              CLASSES.FILL,
-            )}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="timezone" />}
-          >
-            <TimezonePicker
-              value={value}
-              onChange={(timezone) => {
-                form.setFieldValue('timezone', timezone);
-              }}
-              valueDisplayFormat="composite"
-              placeholder={<T id={'select_time_zone'} />}
-            />
-          </FormGroup>
-        )}
-      </FastField>
+      {/* --------- Timezone ----------- */}
+      <TimezoneField />
 
       {/* --------- Data format ----------- */}
       <FFormGroup
@@ -286,3 +263,48 @@ const CardFooterActions = styled.div`
     }
   }
 `;
+
+function TimezoneField() {
+  const { values, setFieldValue, touched, errors } = useFormikContext();
+  const value = values?.timezone;
+  const error = errors?.timezone;
+  const isTouched = touched?.timezone;
+
+  const compositeLabel = React.useMemo(() => {
+    const placeholder = <T id={'select_time_zone'} />;
+    if (!value) return placeholder;
+    try {
+      const { abbreviation, offsetAsString } = getTimezoneMetadata(
+        value,
+        new Date(),
+      );
+      return `${value}${abbreviation ? ` (${abbreviation})` : ''} ${offsetAsString}`;
+    } catch (e) {
+      return value; // fallback
+    }
+  }, [value]);
+
+  return (
+    <FFormGroup
+      name={'timezone'}
+      label={<T id={'time_zone'} />}
+      labelInfo={<FieldRequiredHint />}
+      inline={true}
+      intent={inputIntent({ error, touched: isTouched })}
+      helperText={<ErrorMessage name="timezone" />}
+    >
+      <TimezonePicker
+        value={value}
+        onChange={(timezone) => setFieldValue('timezone', timezone)}
+        popoverProps={{ minimal: true, fill: true }}
+        fill
+      >
+        <SelectButton
+          text={compositeLabel}
+          className={classNames({ 'is-selected': !!value })}
+          fill
+        />
+      </TimezonePicker>
+    </FFormGroup>
+  );
+}