From ddf4adda9d08f3f79ad027f48520472451a3f532 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Dro=C5=84?= <dron.official@yahoo.com>
Date: Wed, 11 Jan 2023 17:10:04 +0100
Subject: [PATCH] Mark taxes as preview (#2971)

* Create dedicated TaxPageTitle component

* Change page headers in taxes views

* Apply CR fixes
---
 .../components/TaxPageTitle/TaxPageTitle.tsx  | 29 +++++++++++++++++++
 src/taxes/components/TaxPageTitle/index.ts    |  2 ++
 .../pages/TaxChannelsPage/TaxChannelsPage.tsx |  4 +--
 .../pages/TaxClassesPage/TaxClassesPage.tsx   |  4 +--
 .../TaxCountriesPage/TaxCountriesPage.tsx     |  4 +--
 5 files changed, 37 insertions(+), 6 deletions(-)
 create mode 100644 src/taxes/components/TaxPageTitle/TaxPageTitle.tsx
 create mode 100644 src/taxes/components/TaxPageTitle/index.ts

diff --git a/src/taxes/components/TaxPageTitle/TaxPageTitle.tsx b/src/taxes/components/TaxPageTitle/TaxPageTitle.tsx
new file mode 100644
index 000000000..b843be04f
--- /dev/null
+++ b/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;
diff --git a/src/taxes/components/TaxPageTitle/index.ts b/src/taxes/components/TaxPageTitle/index.ts
new file mode 100644
index 000000000..d34b5b342
--- /dev/null
+++ b/src/taxes/components/TaxPageTitle/index.ts
@@ -0,0 +1,2 @@
+export { default } from "./TaxPageTitle";
+export * from "./TaxPageTitle";
diff --git a/src/taxes/pages/TaxChannelsPage/TaxChannelsPage.tsx b/src/taxes/pages/TaxChannelsPage/TaxChannelsPage.tsx
index 93f6c0640..d839c2cc3 100644
--- a/src/taxes/pages/TaxChannelsPage/TaxChannelsPage.tsx
+++ b/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)}
diff --git a/src/taxes/pages/TaxClassesPage/TaxClassesPage.tsx b/src/taxes/pages/TaxClassesPage/TaxClassesPage.tsx
index b38cba767..808ccc6ce 100644
--- a/src/taxes/pages/TaxClassesPage/TaxClassesPage.tsx
+++ b/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)}
diff --git a/src/taxes/pages/TaxCountriesPage/TaxCountriesPage.tsx b/src/taxes/pages/TaxCountriesPage/TaxCountriesPage.tsx
index 4d3a0a5d2..ac78f407c 100644
--- a/src/taxes/pages/TaxCountriesPage/TaxCountriesPage.tsx
+++ b/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)}