Fix wrong words and ordering for staff member form (#1424) (#1471)

* fix wrong words and ordering for staff member form

* add messages

* remove line

* apply changes from review

* change to local messages

Co-authored-by: Kamil Pastuszka <33246308+kamilpastuszka@users.noreply.github.com>

locale/defaultMessages.json

@@ -1849,13 +1849,6 @@
   "src_dot_components_dot_AddressEdit_dot_944851093": {
     "string": "Country area"
   },
-  "src_dot_components_dot_AppStatus_dot_1624959454": {
-    "string": "If you want to disable this App please uncheck the box below."
-  },
-  "src_dot_components_dot_AppStatus_dot_1750277107": {
-    "context": "section header",
-    "string": "App Status"
-  },
   "src_dot_components_dot_AssignAttributeDialog_dot_2173976534": {
     "context": "button",
     "string": "Assign attributes"
@@ -7125,7 +7118,7 @@
     "context": "dialog header",
     "string": "Permissions"
   },
-  "src_dot_staff_dot_components_dot_StaffDetailsPage_dot_881953347": {
+  "src_dot_staff_dot_components_dot_StaffDetailsPage_dot_userStatusActive": {
     "context": "checkbox label",
     "string": "User is active"
   },
@@ -7232,6 +7225,13 @@
     "context": "button",
     "string": "Delete photo"
   },
+  "src_dot_staff_dot_components_dot_UserStatus_dot_userDisableInstruction": {
+    "string": "If you want to disable this User please uncheck the box below."
+  },
+  "src_dot_staff_dot_components_dot_UserStatus_dot_userStatus": {
+    "context": "section header",
+    "string": "User Status"
+  },
   "src_dot_staff_dot_views_dot_1308770978": {
     "context": "dialog header",
     "string": "delete Staff User"

src/components/AppStatus/index.ts

@@ -1,2 +0,0 @@
-export { default } from "./AppStatus";
-export * from "./AppStatus";

src/staff/components/StaffDetailsPage/StaffDetailsPage.tsx

@@ -1,6 +1,5 @@
 import { Card, CardContent, Typography } from "@material-ui/core";
 import AccountPermissionGroups from "@saleor/components/AccountPermissionGroups";
-import AccountStatus from "@saleor/components/AppStatus";
 import CardSpacer from "@saleor/components/CardSpacer";
 import CardTitle from "@saleor/components/CardTitle";
 import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton";
@@ -18,6 +17,7 @@ import { sectionNames } from "@saleor/intl";
 import { Backlink } from "@saleor/macaw-ui";
 import { getUserName } from "@saleor/misc";
 import { SearchPermissionGroups_search_edges_node } from "@saleor/searches/types/SearchPermissionGroups";
+import UserStatus from "@saleor/staff/components/UserStatus";
 import { FetchMoreProps, SearchPageProps } from "@saleor/types";
 import createMultiAutocompleteSelectHandler from "@saleor/utils/handlers/multiAutocompleteSelectChangeHandler";
 import React from "react";
@@ -27,6 +27,7 @@ import { StaffMemberDetails_user } from "../../types/StaffMemberDetails";
 import StaffPassword from "../StaffPassword/StaffPassword";
 import StaffPreferences from "../StaffPreferences";
 import StaffProperties from "../StaffProperties/StaffProperties";
+import { staffDetailsPageMessages as messages } from "./messages";
 
 export interface StaffDetailsFormData {
   email: string;
@@ -143,6 +144,13 @@ const StaffDetailsPage: React.FC<StaffDetailsPageProps> = ({
                 )}
                 {canEditStatus && (
                   <>
+                    <UserStatus
+                      data={formData}
+                      disabled={disabled}
+                      label={intl.formatMessage(messages.userStatusActive)}
+                      onChange={change}
+                    />
+                    <CardSpacer />
                     <Card>
                       <CardTitle
                         title={intl.formatMessage({
@@ -171,16 +179,6 @@ const StaffDetailsPage: React.FC<StaffDetailsPageProps> = ({
                         />
                       </CardContent>
                     </Card>
-                    <CardSpacer />
-                    <AccountStatus
-                      data={formData}
-                      disabled={disabled}
-                      label={intl.formatMessage({
-                        defaultMessage: "User is active",
-                        description: "checkbox label"
-                      })}
-                      onChange={change}
-                    />
                   </>
                 )}
               </div>

src/staff/components/StaffDetailsPage/messages.ts

@@ -0,0 +1,8 @@
+import { defineMessages } from "react-intl";
+
+export const staffDetailsPageMessages = defineMessages({
+  userStatusActive: {
+    defaultMessage: "User is active",
+    description: "checkbox label"
+  }
+});

src/staff/components/UserStatus/UserStatus.tsx

@@ -2,7 +2,9 @@ import { Card, CardContent, Typography } from "@material-ui/core";
 import CardTitle from "@saleor/components/CardTitle";
 import { ControlledCheckbox } from "@saleor/components/ControlledCheckbox";
 import React from "react";
-import { FormattedMessage, useIntl } from "react-intl";
+import { useIntl } from "react-intl";
+
+import { userStatusMessages as messages } from "./messages";
 
 interface AppStatusProps {
   data: {
@@ -23,15 +25,10 @@ const AppStatus: React.FC<AppStatusProps> = ({
 
   return (
     <Card>
-      <CardTitle
+      <CardTitle title={intl.formatMessage(messages.userStatus)} />
-        title={intl.formatMessage({
-          defaultMessage: "App Status",
-          description: "section header"
-        })}
-      />
       <CardContent>
         <Typography variant="body2">
-          <FormattedMessage defaultMessage="If you want to disable this App please uncheck the box below." />
+          {intl.formatMessage(messages.userDisableInstruction)}
         </Typography>
         <ControlledCheckbox
           checked={data.isActive}

src/staff/components/UserStatus/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./UserStatus";
+export * from "./UserStatus";

src/staff/components/UserStatus/messages.ts

@@ -0,0 +1,12 @@
+import { defineMessages } from "react-intl";
+
+export const userStatusMessages = defineMessages({
+  userStatus: {
+    defaultMessage: "User Status",
+    description: "section header"
+  },
+  userDisableInstruction: {
+    defaultMessage:
+      "If you want to disable this User please uncheck the box below."
+  }
+});

src/storybook/__snapshots__/Stories.test.ts.snap

@@ -251187,6 +251187,75 @@ exports[`Storyshots Views / Staff / Staff member details default 1`] = `
           </div>
         </div>
         <div>
+          <div
+            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
+              >
+                User Status
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <div
+                class="MuiTypography-root-id MuiTypography-body2-id"
+              >
+                If you want to disable this User please uncheck the box below.
+              </div>
+              <label
+                class="MuiFormControlLabel-root-id"
+              >
+                <span
+                  aria-disabled="false"
+                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
+                >
+                  <span
+                    class="MuiIconButton-label-id"
+                  >
+                    <input
+                      checked=""
+                      class="PrivateSwitchBase-input-id"
+                      data-indeterminate="false"
+                      name="isActive"
+                      type="checkbox"
+                    />
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
+                      />
+                    </svg>
+                  </span>
+                </span>
+                <span
+                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
+                >
+                  User is active
+                </span>
+              </label>
+            </div>
+          </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
           >
@@ -251350,75 +251419,6 @@ exports[`Storyshots Views / Staff / Staff member details default 1`] = `
               </div>
             </div>
           </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="CardTitle-root-id"
-            >
-              <span
-                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
-              >
-                App Status
-              </span>
-              <div
-                class="CardTitle-toolbar-id"
-              />
-            </div>
-            <div
-              class="CardTitle-children-id"
-            />
-            <hr
-              class="CardTitle-hr-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id"
-              >
-                If you want to disable this App please uncheck the box below.
-              </div>
-              <label
-                class="MuiFormControlLabel-root-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      checked=""
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      name="isActive"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
-                      />
-                    </svg>
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                >
-                  User is active
-                </span>
-              </label>
-            </div>
-          </div>
         </div>
       </div>
     </div>
@@ -251980,6 +251980,76 @@ exports[`Storyshots Views / Staff / Staff member details loading 1`] = `
           </div>
         </div>
         <div>
+          <div
+            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
+              >
+                User Status
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <div
+                class="MuiTypography-root-id MuiTypography-body2-id"
+              >
+                If you want to disable this User please uncheck the box below.
+              </div>
+              <label
+                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
+              >
+                <span
+                  aria-disabled="true"
+                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                  tabindex="-1"
+                >
+                  <span
+                    class="MuiIconButton-label-id"
+                  >
+                    <input
+                      class="PrivateSwitchBase-input-id"
+                      data-indeterminate="false"
+                      disabled=""
+                      name="isActive"
+                      type="checkbox"
+                    />
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
+                      />
+                    </svg>
+                  </span>
+                </span>
+                <span
+                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
+                >
+                  User is active
+                </span>
+              </label>
+            </div>
+          </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
           >
@@ -252073,76 +252143,6 @@ exports[`Storyshots Views / Staff / Staff member details loading 1`] = `
               />
             </div>
           </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="CardTitle-root-id"
-            >
-              <span
-                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
-              >
-                App Status
-              </span>
-              <div
-                class="CardTitle-toolbar-id"
-              />
-            </div>
-            <div
-              class="CardTitle-children-id"
-            />
-            <hr
-              class="CardTitle-hr-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id"
-              >
-                If you want to disable this App please uncheck the box below.
-              </div>
-              <label
-                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
-              >
-                <span
-                  aria-disabled="true"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                  tabindex="-1"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      disabled=""
-                      name="isActive"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
-                      />
-                    </svg>
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
-                >
-                  User is active
-                </span>
-              </label>
-            </div>
-          </div>
         </div>
       </div>
     </div>