Mark taxes as preview (#2971)

* Create dedicated TaxPageTitle component

* Change page headers in taxes views

* Apply CR fixes

src/taxes/components/TaxPageTitle/TaxPageTitle.tsx

@@ -0,0 +1,29 @@
+import HorizontalSpacer from "@saleor/apps/components/HorizontalSpacer";
+import PreviewPill from "@saleor/components/PreviewPill";
+import { sectionNames } from "@saleor/intl";
+import { makeStyles } from "@saleor/macaw-ui";
+import React from "react";
+import { FormattedMessage } from "react-intl";
+
+const useStyles = makeStyles(
+  () => ({
+    wrapper: {
+      display: "flex",
+    },
+  }),
+  { name: "TaxPageTitle" },
+);
+
+export const TaxPageTitle = () => {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.wrapper}>
+      <FormattedMessage {...sectionNames.taxes} />
+      <HorizontalSpacer />
+      <PreviewPill />
+    </div>
+  );
+};
+
+export default TaxPageTitle;

src/taxes/components/TaxPageTitle/index.ts

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

src/taxes/pages/TaxChannelsPage/TaxChannelsPage.tsx

@@ -17,7 +17,6 @@ import {
   TaxConfigurationUpdateInput,
 } from "@saleor/graphql";
 import useNavigator from "@saleor/hooks/useNavigator";
-import { sectionNames } from "@saleor/intl";
 import {
   Button,
   ConfirmButtonTransitionState,
@@ -29,6 +28,7 @@ import {
   PageTabs,
 } from "@saleor/macaw-ui";
 import TaxCountryDialog from "@saleor/taxes/components/TaxCountryDialog";
+import TaxPageTitle from "@saleor/taxes/components/TaxPageTitle";
 import { taxesMessages } from "@saleor/taxes/messages";
 import { isLastElement } from "@saleor/taxes/utils/utils";
 import React from "react";
@@ -161,7 +161,7 @@ export const TaxChannelsPage: React.FC<TaxChannelsPageProps> = props => {
 
         return (
           <Container>
-            <PageHeader title={intl.formatMessage(sectionNames.taxes)} />
+            <PageHeader title={<TaxPageTitle />} />
             <PageTabs value="channels" onChange={handleTabChange}>
               <PageTab
                 label={intl.formatMessage(taxesMessages.channelsSection)}

src/taxes/pages/TaxClassesPage/TaxClassesPage.tsx

@@ -17,7 +17,6 @@ import { configurationMenuUrl } from "@saleor/configuration";
 import { TaxClassFragment } from "@saleor/graphql";
 import { SubmitPromise } from "@saleor/hooks/useForm";
 import useNavigator from "@saleor/hooks/useNavigator";
-import { sectionNames } from "@saleor/intl";
 import {
   ConfirmButtonTransitionState,
   List,
@@ -30,6 +29,7 @@ import {
 } from "@saleor/macaw-ui";
 import { getById } from "@saleor/misc";
 import { parseQuery } from "@saleor/orders/components/OrderCustomerAddressesEditDialog/utils";
+import TaxPageTitle from "@saleor/taxes/components/TaxPageTitle";
 import { taxesMessages } from "@saleor/taxes/messages";
 import { TaxClassesPageFormData } from "@saleor/taxes/types";
 import { useAutofocus } from "@saleor/taxes/utils/useAutofocus";
@@ -99,7 +99,7 @@ export const TaxClassesPage: React.FC<TaxClassesPageProps> = props => {
 
         return (
           <Container>
-            <PageHeader title={intl.formatMessage(sectionNames.taxes)} />
+            <PageHeader title={<TaxPageTitle />} />
             <PageTabs value="tax-classes" onChange={handleTabChange}>
               <PageTab
                 label={intl.formatMessage(taxesMessages.channelsSection)}

src/taxes/pages/TaxCountriesPage/TaxCountriesPage.tsx

@@ -20,7 +20,6 @@ import {
 } from "@saleor/graphql";
 import { SubmitPromise } from "@saleor/hooks/useForm";
 import useNavigator from "@saleor/hooks/useNavigator";
-import { sectionNames } from "@saleor/intl";
 import {
   ConfirmButtonTransitionState,
   List,
@@ -32,6 +31,7 @@ import {
   SearchIcon,
 } from "@saleor/macaw-ui";
 import { parseQuery } from "@saleor/orders/components/OrderCustomerAddressesEditDialog/utils";
+import TaxPageTitle from "@saleor/taxes/components/TaxPageTitle";
 import { taxesMessages } from "@saleor/taxes/messages";
 import { isLastElement } from "@saleor/taxes/utils/utils";
 import React from "react";
@@ -91,7 +91,7 @@ export const TaxCountriesPage: React.FC<TaxCountriesPageProps> = props => {
 
         return (
           <Container>
-            <PageHeader title={intl.formatMessage(sectionNames.taxes)} />
+            <PageHeader title={<TaxPageTitle />} />
             <PageTabs value="countries" onChange={handleTabChange}>
               <PageTab
                 label={intl.formatMessage(taxesMessages.channelsSection)}