Fix copy

src/components/AccountStatus/AccountStatus.tsx

@@ -12,12 +12,14 @@ interface StaffStatusProps {
     isActive: boolean;
   };
   disabled: boolean;
+  label: React.ReactNode;
   onChange: (event: React.ChangeEvent<any>) => void;
 }
 
 const StaffStatus: React.StatelessComponent<StaffStatusProps> = ({
   data,
   disabled,
+  label,
   onChange
 }) => {
   const intl = useIntl();
@@ -37,10 +39,7 @@ const StaffStatus: React.StatelessComponent<StaffStatusProps> = ({
         <ControlledCheckbox
           checked={data.isActive}
           disabled={disabled}
-          label={intl.formatMessage({
+          label={label}
-            defaultMessage: "User is active",
-            description: "checkbox label"
-          })}
           name="isActive"
           onChange={onChange}
         />

src/services/components/ServiceDefaultToken/ServiceDefaultToken.tsx

@@ -8,11 +8,14 @@ import { fade } from "@material-ui/core/styles/colorManipulator";
 import Typography from "@material-ui/core/Typography";
 import CloseIcon from "@material-ui/icons/Close";
 import { makeStyles } from "@material-ui/styles";
+import Link from "@saleor/components/Link";
 import React from "react";
 import { FormattedMessage } from "react-intl";
 
 export interface ServiceDefaultTokenProps {
+  apiUri: string;
   token: string;
+  onApiUriClick: () => void;
   onTokenClose: () => void;
 }
 
@@ -28,6 +31,12 @@ const useStyles = makeStyles(
       right: -theme.spacing.unit,
       top: -theme.spacing.unit
     },
+    content: {
+      display: "grid",
+      gridColumnGap: theme.spacing.unit * 3 + "px",
+      gridTemplateColumns: "1fr 60px",
+      marginBottom: theme.spacing.unit * 3
+    },
     copy: {
       marginTop: theme.spacing.unit,
       position: "relative",
@@ -39,12 +48,6 @@ const useStyles = makeStyles(
     },
     root: {
       boxShadow: "0px 5px 10px rgba(0, 0, 0, 0.05)"
-    },
-    text: {
-      display: "grid",
-      gridColumnGap: theme.spacing.unit * 3 + "px",
-      gridTemplateColumns: "1fr 60px",
-      marginBottom: theme.spacing.unit * 3
     }
   }),
   {
@@ -57,16 +60,30 @@ function handleCopy(token: string) {
 }
 
 const ServiceDefaultToken: React.FC<ServiceDefaultTokenProps> = props => {
-  const { token, onTokenClose } = props;
+  const { apiUri, token, onApiUriClick, onTokenClose } = props;
   const classes = useStyles(props);
 
   return (
     <Card className={classes.root}>
       <CardContent>
-        <div className={classes.text}>
+        <div className={classes.content}>
-          <Typography>
+          <div>
-            <FormattedMessage defaultMessage="We’ve created your default token. Make sure to copy your new personal access token now. You won’t be able to see it again." />
+            <Typography>
-          </Typography>
+              <FormattedMessage defaultMessage="We’ve created your default token. Make sure to copy your new personal access token now. You won’t be able to see it again." />
+            </Typography>
+            <Typography>
+              <FormattedMessage
+                defaultMessage="This token gives you access to your shop's API, which you'll find here: {url}"
+                values={{
+                  url: (
+                    <Link href={apiUri} onClick={onApiUriClick}>
+                      {apiUri}
+                    </Link>
+                  )
+                }}
+              />
+            </Typography>
+          </div>
           <div className={classes.closeContainer}>
             <IconButton onClick={onTokenClose}>
               <CloseIcon />

src/services/components/ServiceDetailsPage/ServiceDetailsPage.stories.tsx

@@ -10,8 +10,10 @@ import ServiceDetailsPage, {
 } from "./ServiceDetailsPage";
 
 const props: ServiceDetailsPageProps = {
+  apiUri: "https://example.com/graphql/",
   disabled: false,
   errors: [],
+  onApiUriClick: () => undefined,
   onBack: () => undefined,
   onDelete: () => undefined,
   onSubmit: () => undefined,

src/services/components/ServiceDetailsPage/ServiceDetailsPage.tsx

@@ -28,12 +28,14 @@ export interface ServiceDetailsPageFormData {
   permissions: PermissionEnum[];
 }
 export interface ServiceDetailsPageProps {
+  apiUri: string;
   disabled: boolean;
   errors: UserError[];
   permissions: ShopInfo_shop_permissions[];
   saveButtonBarState: ConfirmButtonTransitionState;
   service: ServiceDetails_serviceAccount;
   token: string;
+  onApiUriClick: () => void;
   onBack: () => void;
   onTokenDelete: (id: string) => void;
   onDelete: () => void;
@@ -44,12 +46,14 @@ export interface ServiceDetailsPageProps {
 
 const ServiceDetailsPage: React.FC<ServiceDetailsPageProps> = props => {
   const {
+    apiUri,
     disabled,
     errors: formErrors,
     permissions,
     saveButtonBarState,
     service,
     token,
+    onApiUriClick,
     onBack,
     onDelete,
     onTokenClose,
@@ -92,7 +96,9 @@ const ServiceDetailsPage: React.FC<ServiceDetailsPageProps> = props => {
               {token && (
                 <>
                   <ServiceDefaultToken
+                    apiUri={apiUri}
                     token={token}
+                    onApiUriClick={onApiUriClick}
                     onTokenClose={onTokenClose}
                   />
                   <CardSpacer />
@@ -122,6 +128,10 @@ const ServiceDetailsPage: React.FC<ServiceDetailsPageProps> = props => {
               <AccountStatus
                 data={data}
                 disabled={disabled}
+                label={intl.formatMessage({
+                  defaultMessage: "Service account is active",
+                  description: "checkbox label"
+                })}
                 onChange={change}
               />
             </div>

src/services/views/ServiceDetails/ServiceDetails.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { useIntl } from "react-intl";
 
 import { WindowTitle } from "@saleor/components/WindowTitle";
+import { API_URI } from "@saleor/config";
 import useNavigator from "@saleor/hooks/useNavigator";
 import useNotifier from "@saleor/hooks/useNotifier";
 import useShop from "@saleor/hooks/useShop";
@@ -207,9 +208,11 @@ export const ServiceDetails: React.StatelessComponent<OrderListProps> = ({
                                 title={maybe(() => data.serviceAccount.name)}
                               />
                               <ServiceDetailsPage
+                                apiUri={API_URI}
                                 disabled={loading}
                                 errors={[]}
                                 token={token}
+                                onApiUriClick={() => open(API_URI, "blank")}
                                 onBack={handleBack}
                                 onDelete={() => openModal("remove")}
                                 onSubmit={handleSubmit}

src/staff/components/StaffDetailsPage/StaffDetailsPage.tsx

@@ -107,6 +107,10 @@ const StaffDetailsPage: React.StatelessComponent<StaffDetailsPageProps> = ({
                 <AccountStatus
                   data={data}
                   disabled={disabled}
+                  label={intl.formatMessage({
+                    defaultMessage: "User is active",
+                    description: "checkbox label"
+                  })}
                   onChange={change}
                 />
               </div>