From 6be3a4c324c5673905d829ec46ae56de8be93da6 Mon Sep 17 00:00:00 2001
From: Sylvain <sylvain@sleede.com>
Date: Wed, 27 Apr 2022 15:36:36 +0200
Subject: [PATCH] (ui) stylized form-switch

---
 .../components/form/form-multi-select.tsx     |  2 +-
 .../components/form/form-select.tsx           |  2 +-
 .../components/form/form-switch.tsx           | 26 ++++++++++++++++---
 .../components/user/user-profile-form.tsx     | 12 +++++----
 .../stylesheets/modules/form/form-item.scss   |  2 +-
 .../stylesheets/modules/form/form-switch.scss | 25 ++++++++++++++++++
 config/locales/app.shared.en.yml              |  3 ++-
 7 files changed, 60 insertions(+), 12 deletions(-)

diff --git a/app/frontend/src/javascript/components/form/form-multi-select.tsx b/app/frontend/src/javascript/components/form/form-multi-select.tsx
index 1171f16cc..c3d5d0537 100644
--- a/app/frontend/src/javascript/components/form/form-multi-select.tsx
+++ b/app/frontend/src/javascript/components/form/form-multi-select.tsx
@@ -37,7 +37,7 @@ export const FormMultiSelect = <TFieldValues extends FieldValues, TContext exten
 
   return (
     <AbstractFormItem id={id} formState={formState} label={label}
-                      className={`form-multi-select ${className}`} tooltip={tooltip}
+                      className={`form-multi-select ${className || ''}`} tooltip={tooltip}
                       disabled={disabled} readOnly={readOnly}
                       rules={rules} error={error} warning={warning}>
         <Controller name={id as FieldPath<TFieldValues>}
diff --git a/app/frontend/src/javascript/components/form/form-select.tsx b/app/frontend/src/javascript/components/form/form-select.tsx
index 3220190f9..7cdb6f108 100644
--- a/app/frontend/src/javascript/components/form/form-select.tsx
+++ b/app/frontend/src/javascript/components/form/form-select.tsx
@@ -37,7 +37,7 @@ export const FormSelect = <TFieldValues extends FieldValues, TContext extends ob
 
   return (
     <AbstractFormItem id={id} label={label} tooltip={tooltip}
-                      className={`form-select ${className}`} formState={formState}
+                      className={`form-select ${className || ''}`} formState={formState}
                       error={error} warning={warning} rules={rules}
                       disabled={disabled} readOnly={readOnly}>
       <Controller name={id as FieldPath<TFieldValues>}
diff --git a/app/frontend/src/javascript/components/form/form-switch.tsx b/app/frontend/src/javascript/components/form/form-switch.tsx
index 91bb9a0af..d46a09752 100644
--- a/app/frontend/src/javascript/components/form/form-switch.tsx
+++ b/app/frontend/src/javascript/components/form/form-switch.tsx
@@ -8,22 +8,42 @@ import { AbstractFormItem, AbstractFormItemProps } from './abstract-form-item';
 
 interface FormSwitchProps<TFieldValues, TContext extends object> extends FormControlledComponent<TFieldValues, TContext>, AbstractFormItemProps<TFieldValues> {
   defaultValue?: boolean,
+  onChange?: (value: boolean) => void,
 }
 
 /**
  * This component is a wrapper for react-switch, to use with react-hook-form.
  */
-export const FormSwitch = <TFieldValues, TContext extends object>({ id, label, tooltip, className, error, rules, disabled, control, defaultValue, formState, readOnly, warning }: FormSwitchProps<TFieldValues, TContext>) => {
+export const FormSwitch = <TFieldValues, TContext extends object>({ id, label, tooltip, className, error, rules, disabled, control, defaultValue, formState, readOnly, warning, onChange }: FormSwitchProps<TFieldValues, TContext>) => {
+  /**
+   * The following callback will trigger the onChange callback, if it was passed to this component,
+   * when the selected option changes.
+   */
+  const onChangeCb = (newValue: boolean): void => {
+    if (typeof onChange === 'function') {
+      onChange(newValue);
+    }
+  };
+
   return (
     <AbstractFormItem id={id} formState={formState} label={label}
-                      className={`form-switch ${className}`} tooltip={tooltip}
+                      className={`form-switch ${className || ''}`} tooltip={tooltip}
                       disabled={disabled} readOnly={readOnly}
                       rules={rules} error={error} warning={warning}>
         <Controller name={id as FieldPath<TFieldValues>}
                     control={control}
                     defaultValue={defaultValue as UnpackNestedValue<FieldPathValue<TFieldValues, Path<TFieldValues>>>}
                     render={({ field: { onChange, value, ref } }) =>
-                      <Switch onChange={onChange} checked={value as boolean} ref={ref} disabled={disabled} readOnly={readOnly} />
+                      <Switch onChange={val => {
+                        onChange(val);
+                        onChangeCb(val);
+                      }}
+                      checked={value as boolean}
+                      height={19}
+                      width={40}
+                      ref={ref}
+                      disabled={disabled}
+                      readOnly={readOnly} />
                     } />
     </AbstractFormItem>
   );
diff --git a/app/frontend/src/javascript/components/user/user-profile-form.tsx b/app/frontend/src/javascript/components/user/user-profile-form.tsx
index 398294cb9..7c4122a22 100644
--- a/app/frontend/src/javascript/components/user/user-profile-form.tsx
+++ b/app/frontend/src/javascript/components/user/user-profile-form.tsx
@@ -9,8 +9,8 @@ import { useTranslation } from 'react-i18next';
 import { Avatar } from './avatar';
 import { GenderInput } from './gender-input';
 import { ChangePassword } from './change-password';
-import Switch from 'react-switch';
 import { PasswordInput } from './password-input';
+import { FormSwitch } from '../form/form-switch';
 
 declare const Application: IApplication;
 
@@ -106,10 +106,12 @@ export const UserProfileForm: React.FC<UserProfileFormProps> = ({ action, size,
         </div>
         <div className="organization-data">
           <h4>{t('app.shared.user_profile_form.organization_data')}</h4>
-          <label className="organization-toggle">
-            <p>{t('app.shared.user_profile_form.declare_organization')}</p>
-            <Switch checked={isOrganization} onChange={setIsOrganization} />
-          </label>
+          <FormSwitch control={control}
+                      id="invoicing_profile_attributes.organization"
+                      label={t('app.shared.user_profile_form.declare_organization')}
+                      tooltip={t('app.shared.user_profile_form.declare_organization_help')}
+                      defaultValue={user.invoicing_profile.organization !== null}
+                      onChange={setIsOrganization} />
           {isOrganization && <div className="organization-fields">
             <FormInput id="invoicing_profile_attributes.organization_attributes.id"
                        register={register}
diff --git a/app/frontend/src/stylesheets/modules/form/form-item.scss b/app/frontend/src/stylesheets/modules/form/form-item.scss
index 412723f17..d20bead3d 100644
--- a/app/frontend/src/stylesheets/modules/form/form-item.scss
+++ b/app/frontend/src/stylesheets/modules/form/form-item.scss
@@ -16,7 +16,7 @@
 
     .item-tooltip {
       position: relative;
-      cursor: pointer;
+      cursor: help;
 
       .trigger i { display: block; }
       .content {
diff --git a/app/frontend/src/stylesheets/modules/form/form-switch.scss b/app/frontend/src/stylesheets/modules/form/form-switch.scss
index 6c58a4b11..72599a4a3 100644
--- a/app/frontend/src/stylesheets/modules/form/form-switch.scss
+++ b/app/frontend/src/stylesheets/modules/form/form-switch.scss
@@ -1,3 +1,28 @@
 .form-switch {
+  position: relative;
 
+  .form-item-header {
+    position: absolute;
+    top: 16px;
+    left: 16px;
+    padding-top: 2px;
+    width: fit-content;
+
+    .item-tooltip {
+      margin-left: 12px;
+      position: unset;
+
+      .content {
+        right: unset;
+        left: 0;
+      }
+    }
+  }
+
+  .form-item-field {
+    display: flex;
+    flex-direction: row-reverse;
+    background-color: white;
+    padding: 16px;
+  }
 }
diff --git a/config/locales/app.shared.en.yml b/config/locales/app.shared.en.yml
index 688bdc9db..cc0ee22ad 100644
--- a/config/locales/app.shared.en.yml
+++ b/config/locales/app.shared.en.yml
@@ -38,7 +38,8 @@ en:
         personal_data: "Personal"
         account_data: "Account"
         organization_data: "Organization"
-        declare_organization: "I am an organization"
+        declare_organization: "I declare to be an organization"
+        declare_organization_help: "If you declare to be an organization, your invoices will be issued in the name of the organization."
         pseudonym: "Nickname"
         first_name: "First name"
         surname: "Surname"