Use esbuild-loader (#1983)

* Minor fixes for intl messages

* Add esbuild-loader
* switch from babel to esbuild-loader
* use formatjs enforce-id linter

* Generate ids for intl messages

* id format defined by idInterpolationPattern

* Modify intl messages extraction

* remove react-intl-translations-manager
* remove transpile-tx.js
* use formatjs cli

* Modify defaultMessages.json

* modify ids in defaultMessages.json with defined idInterpolationPattern

* Fix errors

* Fix page crash

* Use babel to transpile tests

* Fix useStateFromProps

* Improve render count

* Add test to useStateFromProps

* Fix reloading state buh

* Do not check if form with channels is dirty

* Stop blocking save if form has not changed

* Remove debug code

* Fix form disabling

* Fix variant selection checkbox onClick

* Update translations

* Update messages

* Use esbuild to build storybook

Co-authored-by: Bartłomiej Wiaduch <tukan2can@gmail.com>
Co-authored-by: Jakub Majorek <majorek.jakub@gmail.com>

.eslintrc.json

@@ -13,7 +13,8 @@
     "local-rules",
     "simple-import-sort",
     "cypress",
-    "chai-friendly"
+    "chai-friendly",
+    "formatjs"
   ],
   "rules": {
     "@typescript-eslint/adjacent-overload-signatures": "error",
@@ -82,6 +83,12 @@
     "dot-notation": "error",
     "eol-last": "off",
     "eqeqeq": ["error", "smart"],
+    "formatjs/enforce-id": [
+      "error",
+      {
+        "idInterpolationPattern": "[sha512:contenthash:base64:6]"
+      }
+    ],
     "guard-for-in": "error",
     "id-blacklist": "off",
     "import/no-duplicates": "error",

babel.config.js

@@ -1,24 +1,12 @@
 module.exports = api => {
-  const isExtract = api.env("extract");
+  api.cache(true);
-  const isTest = api.env("test");
-  const isStorybook = api.env("storybook");
-
-  const ignore =
-    isTest || isStorybook
-      ? []
-      : [
-          "**/*.test.ts",
-          "**/*.test.tsx",
-          "src/storybook",
-          "node_modules/core-js"
-        ];
 
   const presets = [
     [
       "@babel/preset-env",
       {
         corejs: "3.2.1",
-        modules: isTest ? "auto" : false,
+        modules: "auto",
         useBuiltIns: "usage"
       }
     ],
@@ -38,23 +26,10 @@ module.exports = api => {
     ],
     "@babel/plugin-proposal-object-rest-spread",
     "@babel/plugin-proposal-nullish-coalescing-operator",
-    "react-intl-auto"
+    "macros"
   ];
 
-  if (isExtract) {
-    plugins.push([
-      "react-intl",
-      {
-        extractFromFormatMessageCall: true,
-        messagesDir: "build/locale/"
-      }
-    ]);
-  }
-
-  plugins.push("macros");
-
   return {
-    ignore,
     plugins,
     presets
   };

package.json

@@ -65,7 +65,7 @@
     "react-helmet": "^6.1.0",
     "react-infinite-scroll-component": "^6.1.0",
     "react-inlinesvg": "^2.1.1",
-    "react-intl": "^5.10.2",
+    "react-intl": "^5.21.2",
     "react-jss": "^10.0.0",
     "react-markdown": "^4.3.1",
     "react-moment": "^1.0.0",
@@ -93,6 +93,7 @@
     "@babel/preset-typescript": "^7.13.0",
     "@babel/runtime": "^7.7.6",
     "@editorjs/embed": "^2.4.6",
+    "@formatjs/cli": "^4.5.0",
     "@graphql-codegen/add": "^3.1.1",
     "@graphql-codegen/cli": "^2.1.1",
     "@graphql-codegen/fragment-matcher": "^3.1.0",
@@ -140,8 +141,6 @@
     "babel-core": "^7.0.0-bridge.0",
     "babel-jest": "^23.6.0",
     "babel-loader": "^8.0.6",
-    "babel-plugin-react-intl": "^5.1.11",
-    "babel-plugin-react-intl-auto": "^3.1.0",
     "codecov": "^3.7.1",
     "core-js": "^3.7.0",
     "cross-env": "^6.0.3",
@@ -153,10 +152,11 @@
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.5",
     "enzyme-to-json": "^3.6.1",
-    "eslint": "^6.8.0",
+    "esbuild-loader": "^2.18.0",
-    "eslint-loader": "^3.0.2",
+    "eslint": "^7.4.0",
     "eslint-plugin-chai-friendly": "^0.6.0",
     "eslint-plugin-cypress": "^2.11.2",
+    "eslint-plugin-formatjs": "^2.18.0",
     "eslint-plugin-import": "^2.19.1",
     "eslint-plugin-local-rules": "^0.1.1",
     "eslint-plugin-prefer-arrow": "^1.1.6",
@@ -177,7 +177,6 @@
     "mochawesome-report-generator": "^6.0.1",
     "mock-apollo-client": "^0.4.0",
     "prettier": "^1.19.1",
-    "react-intl-translations-manager": "^5.0.3",
     "react-test-renderer": "^16.12.0",
     "regenerator-runtime": "^0.11.1",
     "register-service-worker": "^1.7.2",
@@ -187,7 +186,7 @@
     "setup-polly-jest": "^0.9.1",
     "speed-measure-webpack-plugin": "^1.5.0",
     "start-server-and-test": "^1.11.0",
-    "ts-jest": "^24.2.0",
+    "ts-jest": "^27.0.7",
     "tsconfig-paths-webpack-plugin": "^3.2.0",
     "typescript": "^4.3.5",
     "webpack": "^4.35.3",
@@ -258,8 +257,8 @@
     "build": "npm run build-types && webpack -p",
     "check-strict-null-errors": "tsc --noEmit --strictNullChecks | node scripts/count-strict-null-check-errors.js",
     "check-types": "tsc --noEmit",
-    "extract-json-messages": "rimraf build/locale && cross-env NODE_ENV=extract babel src 'src/**/*.{ts,tsx}' -o build/dashboard.bundle.js",
+    "extract-json-messages": "formatjs extract 'src/**/*.{ts,tsx}' --out-file locale/defaultMessages.json --format scripts/formatter.js",
-    "extract-messages": "npm run extract-json-messages && npm run transpile-messages",
+    "extract-messages": "npm run extract-json-messages",
     "fetch-schema": "graphql-codegen --config ./fetch-schema.yml && node scripts/build-schema.js",
     "heroku-postbuild": "npm run build",
     "serve:lhci": "NODE_ENV=production npm run server",
@@ -279,7 +278,6 @@
     "test:e2e:run:record": "start-server-and-test start http://localhost:9000 cy:run:record",
     "test:e2e:dev": "start-server-and-test start http://localhost:9000 cy:open",
     "test": "TZ=UTC jest src/",
-    "transpile-messages": "node scripts/transpile-tx.js",
     "lint": "npx eslint \"src/**/*.@(tsx|ts|jsx|js)\" --fix ; npx prettier --check \"src/**/*.@(tsx|ts|jsx|js)\" --write",
     "postbuild": "rimraf ./build/**/*.js.map",
     "release": "release-it"

scripts/formatter.js

@@ -0,0 +1,10 @@
+exports.format = function(msgs) {
+  const results = {};
+  for (const [id, msg] of Object.entries(msgs)) {
+    results[id] = {
+      context: msg.description,
+      string: msg.defaultMessage
+    };
+  }
+  return results;
+};

scripts/transpile-tx.js

@@ -1,43 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-const {
-  createSingleMessagesFile,
-  default: manageTranslations
-} = require("react-intl-translations-manager");
-
-const dotSeparator = "_dot_";
-const sortKeys = true;
-const translationsDirectory = "locale";
-
-manageTranslations({
-  messagesDirectory: "build/locale/src",
-  overrideCoreMethods: {
-    outputSingleFile: combinedFiles => {
-      const msgDescriptors = combinedFiles.reduce(
-        (acc, messages) => [...acc, ...messages.descriptors],
-        []
-      );
-      const structuredJsonFormat = msgDescriptors.reduce((msgs, msg) => {
-        const key = msg.id.replace(/\./g, dotSeparator);
-        if (msgs[key] && msgs[key].context === undefined) {
-          msgs[key].context = msg.description;
-        } else {
-          msgs[key] = {
-            context: msg.description,
-            string: msg.defaultMessage
-          };
-        }
-
-        return msgs;
-      }, {});
-
-      createSingleMessagesFile({
-        directory: translationsDirectory,
-        messages: structuredJsonFormat,
-        sortKeys
-      });
-    }
-  },
-  singleMessagesFile: true,
-  sortKeys,
-  translationsDirectory
-});

src/apps/components/AppActivateDialog/AppActivateDialog.tsx

@@ -25,6 +25,7 @@ const AppActivateDialog: React.FC<AppActivateDialogProps> = ({
   return (
     <ActionDialog
       confirmButtonLabel={intl.formatMessage({
+        id: "D3E2b5",
         defaultMessage: "Activate",
         description: "button label"
       })}
@@ -33,6 +34,7 @@ const AppActivateDialog: React.FC<AppActivateDialogProps> = ({
       onClose={onClose}
       onConfirm={onConfirm}
       title={intl.formatMessage({
+        id: "YHNozE",
         defaultMessage: "Activate App",
         description: "dialog header"
       })}
@@ -41,11 +43,13 @@ const AppActivateDialog: React.FC<AppActivateDialogProps> = ({
       <DialogContentText>
         {["", null].includes(name) ? (
           <FormattedMessage
+            id="Q47ovw"
             defaultMessage="Are you sure you want to activate this app? Activating will start gathering events."
             description="activate app"
           />
         ) : (
           <FormattedMessage
+            id="JbUg2b"
             defaultMessage="Are you sure you want to activate {name}? Activating will start gathering events."
             description="activate app"
             values={{

src/apps/components/AppDeactivateDialog/AppDeactivateDialog.tsx

@@ -29,6 +29,7 @@ const AppDeactivateDialog: React.FC<AppDeactivateDialogProps> = ({
   return (
     <ActionDialog
       confirmButtonLabel={intl.formatMessage({
+        id: "W+AFZY",
         defaultMessage: "Deactivate",
         description: "button label"
       })}
@@ -37,6 +38,7 @@ const AppDeactivateDialog: React.FC<AppDeactivateDialogProps> = ({
       onClose={onClose}
       onConfirm={onConfirm}
       title={intl.formatMessage({
+        id: "yMi8I8",
         defaultMessage: "Dectivate App",
         description: "dialog header"
       })}

src/apps/components/AppDeactivateDialog/messages.ts

@@ -2,21 +2,25 @@ import { defineMessages } from "react-intl";
 
 export default defineMessages({
   deactivateApp: {
+    id: "73RU3R",
     defaultMessage:
       "Are you sure you want to disable this app? Your data will be kept until you reactivate the app. You will be still billed for the app.",
     description: "deactivate app"
   },
   deactivateNamedApp: {
+    id: "w6Gau0",
     defaultMessage:
       "Are you sure you want to disable {name}? Your data will be kept until you reactivate the app. You will be still billed for the app.",
     description: "deactivate named app"
   },
   deactivateLocalApp: {
+    id: "7O2EsY",
     defaultMessage:
       "Are you sure you want to disable this app? Your data will be kept until you reactivate the app.",
     description: "deactivate local app"
   },
   deactivateLocalNamedApp: {
+    id: "Np7J92",
     defaultMessage:
       "Are you sure you want to disable {name}? Your data will be kept until you reactivate the app.",
     description: "deactivate local named app"

src/apps/components/AppDeleteDialog/AppDeleteDialog.tsx

@@ -31,6 +31,7 @@ const AppDeleteDialog: React.FC<AppDeleteDialogProps> = ({
       onClose={onClose}
       onConfirm={onConfirm}
       title={intl.formatMessage({
+        id: "zQX6xO",
         defaultMessage: "Delete App",
         description: "dialog header"
       })}
@@ -39,11 +40,13 @@ const AppDeleteDialog: React.FC<AppDeleteDialogProps> = ({
       <DialogContentText>
         {["", null].includes(name) ? (
           <FormattedMessage
+            id="6hLZNA"
             defaultMessage="Are you sure you want to delete this app?"
             description="delete app"
           />
         ) : type === "EXTERNAL" ? (
           <FormattedMessage
+            id="EWD/wU"
             defaultMessage="Deleting {name}, you will remove installation of the app. If you are paying for app subscription, remember to unsubscribe from the app in Saleor Marketplace. Are you sure you want to delete the app?"
             description="delete app"
             values={{
@@ -52,6 +55,7 @@ const AppDeleteDialog: React.FC<AppDeleteDialogProps> = ({
           />
         ) : (
           <FormattedMessage
+            id="LtqrM8"
             defaultMessage="Deleting {name}, you will delete all the data and webhooks regarding this app. Are you sure you want to do that?"
             description="delete custom app"
             values={{

src/apps/components/AppDetailsPage/AppDetailsPage.tsx

@@ -54,7 +54,11 @@ export const AppDetailsPage: React.FC<AppDetailsPageProps> = ({
         }
       >
         <Button onClick={navigateToApp} variant="primary" data-tc="open-app">
-          <FormattedMessage defaultMessage="Open App" description="button" />
+          <FormattedMessage
+            id="HtfL5/"
+            defaultMessage="Open App"
+            description="button"
+          />
         </Button>
       </PageHeader>
       <div className={classes.appHeader}>
@@ -67,6 +71,7 @@ export const AppDetailsPage: React.FC<AppDetailsPageProps> = ({
             >
               <SVG src={supportIcon} />
               <FormattedMessage
+                id="Gjb6eq"
                 defaultMessage="Get Support"
                 description="link"
               />
@@ -79,6 +84,7 @@ export const AppDetailsPage: React.FC<AppDetailsPageProps> = ({
               >
                 <SVG src={settingsIcon} />
                 <FormattedMessage
+                  id="89PSdB"
                   defaultMessage="Edit settings"
                   description="link"
                 />
@@ -92,11 +98,13 @@ export const AppDetailsPage: React.FC<AppDetailsPageProps> = ({
               <SVG src={activateIcon} />
               {data?.isActive ? (
                 <FormattedMessage
+                  id="whTEcF"
                   defaultMessage="Deactivate"
                   description="link"
                 />
               ) : (
                 <FormattedMessage
+                  id="P5twxk"
                   defaultMessage="Activate"
                   description="link"
                 />
@@ -112,6 +120,7 @@ export const AppDetailsPage: React.FC<AppDetailsPageProps> = ({
       <Card>
         <CardTitle
           title={intl.formatMessage({
+            id: "jDIRQV",
             defaultMessage: "About this app",
             description: "section header"
           })}
@@ -124,6 +133,7 @@ export const AppDetailsPage: React.FC<AppDetailsPageProps> = ({
       <Card>
         <CardTitle
           title={intl.formatMessage({
+            id: "VsGcdP",
             defaultMessage: "App permissions",
             description: "section header"
           })}
@@ -133,6 +143,7 @@ export const AppDetailsPage: React.FC<AppDetailsPageProps> = ({
             <>
               <Typography>
                 <FormattedMessage
+                  id="7oQUMG"
                   defaultMessage="This app has permissions to:"
                   description="apps about permissions"
                 />
@@ -155,6 +166,7 @@ export const AppDetailsPage: React.FC<AppDetailsPageProps> = ({
       <Card>
         <CardTitle
           title={intl.formatMessage({
+            id: "a55zOn",
             defaultMessage: "Data privacy",
             description: "section header"
           })}
@@ -169,6 +181,7 @@ export const AppDetailsPage: React.FC<AppDetailsPageProps> = ({
                 target="_blank"
               >
                 <FormattedMessage
+                  id="Go50v2"
                   defaultMessage="View this app’s privacy policy"
                   description="app privacy policy link"
                 />

src/apps/components/AppFrame/useAppActions.ts

@@ -46,6 +46,7 @@ export const useAppActions = (
             if (isExternalDomain) {
               success = window.confirm(
                 intl.formatMessage({
+                  id: "MSItJD",
                   defaultMessage:
                     "You are about to leave the Dashboard. Do you want to continue?"
                 })

src/apps/components/AppInProgressDeleteDialog/AppInProgressDeleteDialog.tsx

@@ -29,6 +29,7 @@ const AppInProgressDeleteDialog: React.FC<AppInProgressDeleteDialogProps> = ({
       onClose={onClose}
       onConfirm={onConfirm}
       title={intl.formatMessage({
+        id: "zQX6xO",
         defaultMessage: "Delete App",
         description: "dialog header"
       })}
@@ -37,11 +38,13 @@ const AppInProgressDeleteDialog: React.FC<AppInProgressDeleteDialogProps> = ({
       <DialogContentText>
         {["", null].includes(name) ? (
           <FormattedMessage
+            id="6hLZNA"
             defaultMessage="Are you sure you want to delete this app?"
             description="delete app"
           />
         ) : (
           <FormattedMessage
+            id="EWD/wU"
             defaultMessage="Deleting {name}, you will remove installation of the app. If you are paying for app subscription, remember to unsubscribe from the app in Saleor Marketplace. Are you sure you want to delete the app?"
             description="delete app"
             values={{

src/apps/components/AppInstallErrorPage/AppInstallErrorPage.tsx

@@ -25,18 +25,21 @@ export const AppInstallErrorPage: React.FC<AppInstallErrorPageProps> = ({
         <Grid xs={12} sm={6} item>
           <Typography variant="h3" component="h3">
             <FormattedMessage
+              id="WnlZMO"
               defaultMessage="There’s a problem with app."
               description="title"
             />
           </Typography>
           <Typography variant="body2">
             <FormattedMessage
+              id="4yRwN+"
               defaultMessage="Saleor couldn’t fetch crucial information regarding installation. Without those System can’t install the app in your Saleor. Please use the button below to get back to system’s dashboard."
               description="content"
             />
           </Typography>
           <Button className={classes.button} variant="primary" onClick={onBack}>
             <FormattedMessage
+              id="906uUr"
               defaultMessage="Back to homepage"
               description="button"
             />

src/apps/components/AppInstallPage/AppInstallPage.tsx

@@ -45,6 +45,7 @@ export const AppInstallPage: React.FC<AppInstallPageProps> = ({
             ) : (
               intl.formatMessage(
                 {
+                  id: "Id7C0X",
                   defaultMessage: `You are about to install {name}`,
                   description: "section header"
                 },
@@ -78,6 +79,7 @@ export const AppInstallPage: React.FC<AppInstallPageProps> = ({
       <Card>
         <CardTitle
           title={intl.formatMessage({
+            id: "VsGcdP",
             defaultMessage: "App permissions",
             description: "section header"
           })}
@@ -89,6 +91,7 @@ export const AppInstallPage: React.FC<AppInstallPageProps> = ({
             <>
               <Typography className={classes.installPermissionTitle}>
                 <FormattedMessage
+                  id="BL/Lbk"
                   defaultMessage="Installing this app will give it following permissions:"
                   description="install app permissions"
                 />
@@ -107,6 +110,7 @@ export const AppInstallPage: React.FC<AppInstallPageProps> = ({
                 className={classes.installPrivacyText}
               >
                 <FormattedMessage
+                  id="t1UYU6"
                   defaultMessage="Uninstalling the app will remove all your customer’s personal data stored by {name}. "
                   description="install app privacy"
                   values={{ name }}
@@ -117,6 +121,7 @@ export const AppInstallPage: React.FC<AppInstallPageProps> = ({
                   target="_blank"
                 >
                   <FormattedMessage
+                    id="k5lHFp"
                     defaultMessage="Learn more about data privacy"
                     description="app data privacy link"
                   />
@@ -136,6 +141,7 @@ export const AppInstallPage: React.FC<AppInstallPageProps> = ({
         <Grid xs={6} item className={classes.alignRight}>
           <Button variant="primary" onClick={onSubmit}>
             <FormattedMessage
+              id="PkCmGU"
               defaultMessage="Install App"
               description="install button"
             />

src/apps/components/AppPage/AppPage.tsx

@@ -64,7 +64,11 @@ export const AppPage: React.FC<AppPageProps> = ({
         </div>
         <div className={classes.appSettingsHeader}>
           <Button onClick={navigateToAbout} variant="primary">
-            <FormattedMessage defaultMessage="About" description="button" />
+            <FormattedMessage
+              id="UCHtG6"
+              defaultMessage="About"
+              description="button"
+            />
           </Button>
           <Button
             component="a"
@@ -74,6 +78,7 @@ export const AppPage: React.FC<AppPageProps> = ({
             target="_blank"
           >
             <FormattedMessage
+              id="llC1q8"
               defaultMessage="App home page"
               description="button"
             />
@@ -86,6 +91,7 @@ export const AppPage: React.FC<AppPageProps> = ({
             target="_blank"
           >
             <FormattedMessage
+              id="hdcGSJ"
               defaultMessage="Support/FAQ"
               description="button"
             />

src/apps/components/AppsInProgress/AppsInProgress.tsx

@@ -44,6 +44,7 @@ const AppsInProgress: React.FC<AppsInProgressProps> = ({
     <Card>
       <CardTitle
         title={intl.formatMessage({
+          id: "nIrjSR",
           defaultMessage: "Ongoing Installations",
           description: "section header"
         })}
@@ -64,6 +65,7 @@ const AppsInProgress: React.FC<AppsInProgressProps> = ({
                 >
                   <Typography variant="body2" className={classes.text}>
                     <FormattedMessage
+                      id="1qRwgQ"
                       defaultMessage="Installing app..."
                       description="app installation"
                     />
@@ -82,6 +84,7 @@ const AppsInProgress: React.FC<AppsInProgressProps> = ({
                 >
                   <Typography variant="body2" className={classes.error}>
                     <FormattedMessage
+                      id="JufWFT"
                       defaultMessage="There was a problem during installation"
                       description="app installation error"
                     />
@@ -96,6 +99,7 @@ const AppsInProgress: React.FC<AppsInProgressProps> = ({
                   </Typography>
                   <Button onClick={() => onAppInstallRetry(id)}>
                     <FormattedMessage
+                      id="+c/f61"
                       defaultMessage="Retry"
                       description="retry installation"
                     />

src/apps/components/CustomAppCreatePage/CustomAppCreatePage.tsx

@@ -69,6 +69,7 @@ const CustomAppCreatePage: React.FC<CustomAppCreatePageProps> = props => {
           </Backlink>
           <PageHeader
             title={intl.formatMessage({
+              id: "GjH9uy",
               defaultMessage: "Create New App",
               description: "header"
             })}
@@ -90,10 +91,12 @@ const CustomAppCreatePage: React.FC<CustomAppCreatePageProps> = props => {
               permissionsExceeded={false}
               onChange={change}
               fullAccessLabel={intl.formatMessage({
+                id: "D4nzdD",
                 defaultMessage: "Grant this app full access to the store",
                 description: "checkbox label"
               })}
               description={intl.formatMessage({
+                id: "flP8Hj",
                 defaultMessage:
                   "Expand or restrict app permissions to access certain part of Saleor system.",
                 description: "card description"

src/apps/components/CustomAppDefaultToken/CustomAppDefaultToken.tsx

@@ -26,10 +26,14 @@ const CustomAppDefaultToken: React.FC<CustomAppDefaultTokenProps> = props => {
         <div className={classes.content}>
           <div>
             <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." />
+              <FormattedMessage
+                id="ixjvkM"
+                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
+                id="DGCzal"
                 defaultMessage="This token gives you access to your shop's API, which you'll find here: {url}"
                 values={{
                   url: (
@@ -49,14 +53,19 @@ const CustomAppDefaultToken: React.FC<CustomAppDefaultTokenProps> = props => {
         </div>
         <Paper className={classes.paper} elevation={0}>
           <Typography variant="caption">
-            <FormattedMessage defaultMessage="Generated Token" />
+            <FormattedMessage id="Kxiige" defaultMessage="Generated Token" />
           </Typography>
           <Typography>{token}</Typography>
           <Button className={classes.copy} onClick={() => copy(token)}>
             {copied ? (
-              <FormattedMessage defaultMessage="Copied" description="button" />
+              <FormattedMessage
+                id="r86alc"
+                defaultMessage="Copied"
+                description="button"
+              />
             ) : (
               <FormattedMessage
+                id="HVFq//"
                 defaultMessage="Copy token"
                 description="button"
               />

src/apps/components/CustomAppDetailsPage/CustomAppDetailsPage.tsx

@@ -122,11 +122,13 @@ const CustomAppDetailsPage: React.FC<CustomAppDetailsPageProps> = props => {
               <img src={activateIcon} alt="" />
               {data?.isActive ? (
                 <FormattedMessage
+                  id="whTEcF"
                   defaultMessage="Deactivate"
                   description="link"
                 />
               ) : (
                 <FormattedMessage
+                  id="P5twxk"
                   defaultMessage="Activate"
                   description="link"
                 />
@@ -175,10 +177,12 @@ const CustomAppDetailsPage: React.FC<CustomAppDetailsPageProps> = props => {
                 permissionsExceeded={false}
                 onChange={change}
                 fullAccessLabel={intl.formatMessage({
+                  id: "D4nzdD",
                   defaultMessage: "Grant this app full access to the store",
                   description: "checkbox label"
                 })}
                 description={intl.formatMessage({
+                  id: "flP8Hj",
                   defaultMessage:
                     "Expand or restrict app permissions to access certain part of Saleor system.",
                   description: "card description"

src/apps/components/CustomAppInformation/CustomAppInformation.tsx

@@ -30,6 +30,7 @@ const CustomAppInformation: React.FC<CustomAppInfoProps> = ({
     <Card>
       <CardTitle
         title={intl.formatMessage({
+          id: "imYxM9",
           defaultMessage: "App Information",
           description: "header"
         })}
@@ -39,6 +40,7 @@ const CustomAppInformation: React.FC<CustomAppInfoProps> = ({
           disabled={disabled}
           error={!!formErrors.name}
           label={intl.formatMessage({
+            id: "foNlhn",
             defaultMessage: "App Name",
             description: "custom app name"
           })}

src/apps/components/CustomAppTokens/CustomAppTokens.tsx

@@ -33,6 +33,7 @@ const CustomAppTokens: React.FC<CustomAppTokensProps> = props => {
     <Card>
       <CardTitle
         title={intl.formatMessage({
+          id: "0Mg8o5",
           defaultMessage: "Tokens",
           description: "header"
         })}
@@ -43,6 +44,7 @@ const CustomAppTokens: React.FC<CustomAppTokensProps> = props => {
             data-test-id="create-token"
           >
             <FormattedMessage
+              id="RMB6fU"
               defaultMessage="Create Token"
               description="button"
             />
@@ -53,16 +55,18 @@ const CustomAppTokens: React.FC<CustomAppTokensProps> = props => {
         <TableHead>
           <TableRow>
             <TableCell className={classes.colNote}>
-              <FormattedMessage defaultMessage="Token Note" />
+              <FormattedMessage id="0DRBjg" defaultMessage="Token Note" />
             </TableCell>
             <TableCell className={classes.colKey}>
               <FormattedMessage
+                id="MAsLIT"
                 defaultMessage="Key"
                 description="custom app token key"
               />
             </TableCell>
             <TableCell className={classes.colActions}>
               <FormattedMessage
+                id="VHuzgq"
                 defaultMessage="Actions"
                 description="table actions"
               />
@@ -94,7 +98,10 @@ const CustomAppTokens: React.FC<CustomAppTokensProps> = props => {
             () => (
               <TableRow>
                 <TableCell colSpan={numberOfColumns}>
-                  <FormattedMessage defaultMessage="No tokens found" />
+                  <FormattedMessage
+                    id="bsP4f3"
+                    defaultMessage="No tokens found"
+                  />
                 </TableCell>
               </TableRow>
             )

src/apps/components/CustomApps/CustomApps.tsx

@@ -49,6 +49,7 @@ const CustomApps: React.FC<CustomAppsProps> = ({
               data-test-id="create-app"
             >
               <FormattedMessage
+                id="XB2Jj9"
                 defaultMessage="Create App"
                 description="create app button"
               />
@@ -96,6 +97,7 @@ const CustomApps: React.FC<CustomAppsProps> = ({
                 <TableCell className={classes.colName}>
                   <Typography className={classes.text} variant="body2">
                     <FormattedMessage
+                      id="voRaz3"
                       defaultMessage="Your custom-created apps will be shown here."
                       description="custom apps content"
                     />

src/apps/components/DeactivatedText/DeactivatedText.tsx

@@ -9,6 +9,7 @@ export const DeactivatedText: React.FC<{}> = () => {
   return (
     <Typography className={classes.root}>
       <FormattedMessage
+        id="5+Xcrz"
         defaultMessage="Deactivated"
         description="app deactivated"
       />

src/apps/components/InstalledApps/InstalledApps.tsx

@@ -52,6 +52,7 @@ const InstalledApps: React.FC<InstalledAppsProps> = ({
     <Card className={classes.apps}>
       <CardTitle
         title={intl.formatMessage({
+          id: "ZeD2TK",
           defaultMessage: "Third-party Apps",
           description: "section header"
         })}
@@ -105,6 +106,7 @@ const InstalledApps: React.FC<InstalledAppsProps> = ({
                       onClick={stopPropagation(onRowAboutClick(app.node.id))}
                     >
                       <FormattedMessage
+                        id="TBaMo2"
                         defaultMessage="About"
                         description="about app"
                       />
@@ -126,6 +128,7 @@ const InstalledApps: React.FC<InstalledAppsProps> = ({
                 <TableCell className={classes.colName}>
                   <Typography className={classes.text} variant="body2">
                     <FormattedMessage
+                      id="9tgY4G"
                       defaultMessage="You don’t have any installed apps in your dashboard"
                       description="apps content"
                     />

src/apps/components/Marketplace/Marketplace.tsx

@@ -16,6 +16,7 @@ const Marketplace: React.FC<MarketplaceProps> = ({ link }) => {
       <Card>
         <CardTitle
           title={intl.formatMessage({
+            id: "SwISVH",
             defaultMessage: "Saleor Marketplace",
             description: "section header"
           })}
@@ -25,12 +26,14 @@ const Marketplace: React.FC<MarketplaceProps> = ({ link }) => {
             <>
               <Typography variant="body2">
                 <FormattedMessage
+                  id="LATpSE"
                   defaultMessage="Discover great free and paid apps in our Saleor Marketplace."
                   description="marketplace content"
                 />
               </Typography>
               <Button onClick={link}>
                 <FormattedMessage
+                  id="wxFwUW"
                   defaultMessage="Visit Marketplace"
                   description="marketplace button"
                 />
@@ -39,6 +42,7 @@ const Marketplace: React.FC<MarketplaceProps> = ({ link }) => {
           ) : (
             <Typography variant="body2">
               <FormattedMessage
+                id="NskBjH"
                 defaultMessage="Marketplace is coming soon"
                 description="marketplace content"
               />

src/apps/components/TokenCreateDialog/TokenCreateDialog.tsx

@@ -58,6 +58,7 @@ const TokenCreateDialog: React.FC<TokenCreateDialogProps> = props => {
           <>
             <DialogTitle>
               <FormattedMessage
+                id="T5nU7u"
                 defaultMessage="Create Token"
                 description="header"
               />
@@ -66,11 +67,15 @@ const TokenCreateDialog: React.FC<TokenCreateDialogProps> = props => {
               {step === "form" ? (
                 <>
                   <Typography>
-                    <FormattedMessage defaultMessage="Access token is used to authenticate service accounts" />
+                    <FormattedMessage
+                      id="k0rGBI"
+                      defaultMessage="Access token is used to authenticate service accounts"
+                    />
                   </Typography>
                   <FormSpacer />
                   <TextField
                     label={intl.formatMessage({
+                      id: "0DRBjg",
                       defaultMessage: "Token Note"
                     })}
                     value={data.name}
@@ -82,12 +87,18 @@ const TokenCreateDialog: React.FC<TokenCreateDialogProps> = props => {
               ) : (
                 <>
                   <Typography>
-                    <FormattedMessage defaultMessage="We’ve created your token. Make sure to copy your new personal access token now. You won’t be able to see it again." />
+                    <FormattedMessage
+                      id="t9a9GQ"
+                      defaultMessage="We’ve created your token. Make sure to copy your new personal access token now. You won’t be able to see it again."
+                    />
                   </Typography>
                   <CardSpacer />
                   <Paper className={classes.paper} elevation={0}>
                     <Typography variant="caption">
-                      <FormattedMessage defaultMessage="Generated Token" />
+                      <FormattedMessage
+                        id="Kxiige"
+                        defaultMessage="Generated Token"
+                      />
                     </Typography>
                     <Typography data-test-id="generated-token">
                       {token}
@@ -97,6 +108,7 @@ const TokenCreateDialog: React.FC<TokenCreateDialogProps> = props => {
                       onClick={() => handleCopy(token)}
                     >
                       <FormattedMessage
+                        id="HVFq//"
                         defaultMessage="Copy token"
                         description="button"
                       />
@@ -115,6 +127,7 @@ const TokenCreateDialog: React.FC<TokenCreateDialogProps> = props => {
                     onClick={submit}
                   >
                     <FormattedMessage
+                      id="isM94c"
                       defaultMessage="Create"
                       description="create service token, button"
                     />

src/apps/components/TokenDeleteDialog/TokenDeleteDialog.tsx

@@ -29,12 +29,14 @@ const TokenDeleteDialog: React.FC<TokenDeleteDialogProps> = ({
       onConfirm={onConfirm}
       variant="delete"
       title={intl.formatMessage({
+        id: "quV5zH",
         defaultMessage: "Delete Token",
         description: "dialog title"
       })}
     >
       <DialogContentText>
         <FormattedMessage
+          id="2VSP8C"
           defaultMessage="Are you sure you want to delete token {token}?"
           description="delete token"
           values={{

src/apps/messages.ts

@@ -2,14 +2,17 @@ import { defineMessages } from "react-intl";
 
 export const appMessages = defineMessages({
   failedToFetchAppSettings: {
+    id: "ac+Y98",
     defaultMessage: "Failed to fetch app settings",
     description: "app settings error"
   },
   appActivated: {
+    id: "D/+84n",
     defaultMessage: "App activated",
     description: "snackbar text"
   },
   appDeactivated: {
+    id: "USO8PB",
     defaultMessage: "App deactivated",
     description: "snackbar text"
   }

src/apps/views/AppInstall/messages.ts

@@ -2,6 +2,7 @@ import { defineMessages } from "react-intl";
 
 export const messages = defineMessages({
   installApp: {
+    id: "2cjt25",
     defaultMessage: "Install App",
     description: "window title"
   }

src/apps/views/AppsList/messages.ts

@@ -2,18 +2,22 @@ import { defineMessages } from "react-intl";
 
 export const messages = defineMessages({
   appInstalled: {
+    id: "0fM/pV",
     defaultMessage: "App installed",
     description: "message title"
   },
   appRemoved: {
+    id: "uIPD1i",
     defaultMessage: "App successfully removed",
     description: "app has been removed"
   },
   appReadyToUse: {
+    id: "ZprV2g",
     defaultMessage: "{name} is ready to be used",
     description: "app has been installed"
   },
   appCouldntInstall: {
+    id: "5t/4um",
     defaultMessage: "Couldn’t Install {name}",
     description: "message title"
   }

src/apps/views/CustomAppCreate/messages.ts

@@ -2,6 +2,7 @@ import { defineMessages } from "react-intl";
 
 export const messages = defineMessages({
   createApp: {
+    id: "agZQkB",
     defaultMessage: "Create App",
     description: "window title"
   }

src/attributes/components/AttributeBulkDeleteDialog/AttributeBulkDeleteDialog.tsx

@@ -28,6 +28,7 @@ const AttributeBulkDeleteDialog: React.FC<AttributeBulkDeleteDialogProps> = ({
       onClose={onClose}
       onConfirm={onConfirm}
       title={intl.formatMessage({
+        id: "rKf4LU",
         defaultMessage: "Delete attributes",
         description: "dialog title"
       })}
@@ -35,6 +36,7 @@ const AttributeBulkDeleteDialog: React.FC<AttributeBulkDeleteDialogProps> = ({
     >
       <DialogContentText>
         <FormattedMessage
+          id="lG/MDw"
           defaultMessage="{counter,plural,one{Are you sure you want to delete this attribute?} other{Are you sure you want to delete {displayQuantity} attributes?}}"
           description="dialog content"
           values={{

src/attributes/components/AttributeDeleteDialog/AttributeDeleteDialog.tsx

@@ -29,12 +29,14 @@ const AttributeDeleteDialog: React.FC<AttributeDeleteDialogProps> = ({
       onConfirm={onConfirm}
       variant="delete"
       title={intl.formatMessage({
+        id: "JI2Xwp",
         defaultMessage: "Delete attribute",
         description: "dialog title"
       })}
     >
       <DialogContentText>
         <FormattedMessage
+          id="h1rPPg"
           defaultMessage="Are you sure you want to delete {attributeName}?"
           description="dialog content"
           values={{

src/attributes/components/AttributeDetails/AttributeDetails.tsx

@@ -24,10 +24,12 @@ import { inputTypeMessages, messages } from "./messages";
 
 const entityTypeMessages = defineMessages({
   page: {
+    id: "Iafyt5",
     defaultMessage: "Pages",
     description: "page attribute entity type"
   },
   product: {
+    id: "5TUpjG",
     defaultMessage: "Products",
     description: "product attribute entity type"
   }

src/attributes/components/AttributeDetails/messages.tsx

@@ -3,43 +3,53 @@ import { defineMessages } from "react-intl";
 
 export const messages = defineMessages({
   attributeLabel: {
+    id: "xOEZjV",
     defaultMessage: "Default Label",
     description: "attribute's label"
   },
   attributeSlug: {
+    id: "P79U4b",
     defaultMessage: "Attribute Code",
     description: "attribute's slug short code label"
   },
   attributeSlugHelperText: {
+    id: "Q7uuDr",
     defaultMessage: "This is used internally. Make sure you don’t use spaces",
     description: "attribute slug input field helper text"
   },
   entityType: {
+    id: "LnRlch",
     defaultMessage: "Entity",
     description: "attribute's editor component entity"
   },
   inputType: {
+    id: "oIvtua",
     defaultMessage: "Catalog Input type for Store Owner",
     description: "attribute's editor component"
   },
   valueRequired: {
+    id: "njBulj",
     defaultMessage: "Value Required",
     description: "check to require attribute to have value"
   },
   selectUnit: {
+    id: "PiSXjb",
     defaultMessage: "Select unit",
     description: "check to require numeric attribute unit"
   },
   unitSystem: {
+    id: "ghje1I",
     defaultMessage: "System",
     description: "numeric attribute unit system"
   },
 
   unitOf: {
+    id: "zWM89r",
     defaultMessage: "Units of",
     description: "numeric attribute units of"
   },
   unit: {
+    id: "Orgqv4",
     defaultMessage: "Unit",
     description: "numeric attribute unit"
   }
@@ -47,42 +57,52 @@ export const messages = defineMessages({
 
 export const inputTypeMessages = defineMessages({
   dropdown: {
+    id: "bZksto",
     defaultMessage: "Dropdown",
     description: "product attribute type"
   },
   file: {
+    id: "z1y9oL",
     defaultMessage: "File",
     description: "file attribute type"
   },
   multiselect: {
+    id: "cKjFfl",
     defaultMessage: "Multiple Select",
     description: "product attribute type"
   },
   references: {
+    id: "5dLpx0",
     defaultMessage: "References",
     description: "references attribute type"
   },
   text: {
+    id: "fdbqIs",
     defaultMessage: "Text",
     description: "text attribute type"
   },
   numeric: {
+    id: "SNiyXb",
     defaultMessage: "Numeric",
     description: "numeric attribute type"
   },
   boolean: {
+    id: "l5V0QT",
     defaultMessage: "Boolean",
     description: "boolean attribute type"
   },
   date: {
+    id: "fU+a9k",
     defaultMessage: "Date",
     description: "date attribute type"
   },
   dateTime: {
+    id: "DzPVnj",
     defaultMessage: "Date Time",
     description: "date time attribute type"
   },
   swatch: {
+    id: "gx4wCT",
     defaultMessage: "Swatch",
     description: "swatch attribute type"
   }
@@ -90,10 +110,12 @@ export const inputTypeMessages = defineMessages({
 
 export const unitSystemMessages = defineMessages({
   metric: {
+    id: "ZayvsI",
     defaultMessage: "Metric",
     description: "metric unit system"
   },
   imperial: {
+    id: "YgE6ga",
     defaultMessage: "Imperial",
     description: "imperial unit system"
   }
@@ -101,28 +123,40 @@ export const unitSystemMessages = defineMessages({
 
 export const unitTypeMessages = defineMessages({
   volume: {
+    id: "cy8sV7",
     defaultMessage: "Volume",
     description: "volume units types"
   },
 
   distance: {
+    id: "k/mTEl",
     defaultMessage: "Distance",
     description: "distance units type"
   },
   weight: {
+    id: "Vdy5g7",
     defaultMessage: "Weight",
     description: "weight units type"
   },
   area: {
+    id: "A9QSur",
     defaultMessage: "Area",
     description: "area units type"
   }
 });
 
 export const unitMessages = defineMessages({
-  pint: { defaultMessage: "pint", description: "pint unit" },
+  pint: { id: "B0PaVS", defaultMessage: "pint", description: "pint unit" },
-  acreInch: { defaultMessage: "acre-inch", description: "acre-inch unit" },
+  acreInch: {
-  acreFt: { defaultMessage: "acre-ft", description: "acre-ft unit" }
+    id: "jBu2yj",
+    defaultMessage: "acre-inch",
+    description: "acre-inch unit"
+  },
+  acreFt: {
+    id: "5XG1CO",
+    defaultMessage: "acre-ft",
+    description: "acre-ft unit"
+  }
 });
 
 export const units = {

src/attributes/components/AttributeList/AttributeList.tsx

@@ -101,7 +101,7 @@ const AttributeList: React.FC<AttributeListProps> = ({
           arrowPosition="right"
           onClick={() => onSort(AttributeListUrlSortField.slug)}
         >
-          <FormattedMessage defaultMessage="Attribute Code" />
+          <FormattedMessage id="oJkeS6" defaultMessage="Attribute Code" />
         </TableCellHeader>
         <TableCellHeader
           className={classes.colName}
@@ -113,6 +113,7 @@ const AttributeList: React.FC<AttributeListProps> = ({
           onClick={() => onSort(AttributeListUrlSortField.name)}
         >
           <FormattedMessage
+            id="HjUoHK"
             defaultMessage="Default Label"
             description="attribute's label'"
           />
@@ -128,6 +129,7 @@ const AttributeList: React.FC<AttributeListProps> = ({
           onClick={() => onSort(AttributeListUrlSortField.visible)}
         >
           <FormattedMessage
+            id="k6WDZl"
             defaultMessage="Visible"
             description="attribute is visible"
           />
@@ -143,6 +145,7 @@ const AttributeList: React.FC<AttributeListProps> = ({
           onClick={() => onSort(AttributeListUrlSortField.searchable)}
         >
           <FormattedMessage
+            id="yKuba7"
             defaultMessage="Searchable"
             description="attribute can be searched in dashboard"
           />
@@ -159,6 +162,7 @@ const AttributeList: React.FC<AttributeListProps> = ({
         >
           <FormattedMessage
             defaultMessage="Use as filter"
+            id="Y3pCRX"
             description="attribute can be searched in storefront"
           />
         </TableCellHeader>
@@ -248,7 +252,10 @@ const AttributeList: React.FC<AttributeListProps> = ({
           () => (
             <TableRow>
               <TableCell colSpan={numberOfColumns}>
-                <FormattedMessage defaultMessage="No attributes found" />
+                <FormattedMessage
+                  id="ztQgD8"
+                  defaultMessage="No attributes found"
+                />
               </TableCell>
             </TableRow>
           )

src/attributes/components/AttributeListPage/AttributeListPage.tsx

@@ -64,6 +64,7 @@ const AttributeListPage: React.FC<AttributeListPageProps> = ({
           data-test-id="create-attribute-button"
         >
           <FormattedMessage
+            id="IGvQ8k"
             defaultMessage="Create attribute"
             description="button"
           />
@@ -72,6 +73,7 @@ const AttributeListPage: React.FC<AttributeListPageProps> = ({
       <Card>
         <FilterBar
           allTabLabel={intl.formatMessage({
+            id: "dKPMyh",
             defaultMessage: "All Attributes",
             description: "tab name"
           })}
@@ -79,6 +81,7 @@ const AttributeListPage: React.FC<AttributeListPageProps> = ({
           filterStructure={structure}
           initialSearch={initialSearch}
           searchPlaceholder={intl.formatMessage({
+            id: "1div9r",
             defaultMessage: "Search Attribute"
           })}
           tabs={tabs}

src/attributes/components/AttributeListPage/filters.ts

@@ -20,18 +20,22 @@ export interface AttributeListFilterOpts {
 
 const messages = defineMessages({
   filterableInStorefront: {
+    id: "PsRG+v",
     defaultMessage: "Filterable in Storefront",
     description: "use attribute in filtering"
   },
   isVariantOnly: {
+    id: "rvk9ls",
     defaultMessage: "Variant Only",
     description: "attribute can be used only in variants"
   },
   valueRequired: {
+    id: "HQR2y0",
     defaultMessage: "Value Required",
     description: "attribute value is required"
   },
   visibleInStorefront: {
+    id: "cvbqJu",
     defaultMessage: "Visible on Product Page in Storefront",
     description: "attribute"
   }

src/attributes/components/AttributeOrganization/AttributeOrganization.tsx

@@ -17,10 +17,12 @@ export interface AttributeOrganizationProps {
 
 const messages = defineMessages({
   contentAttribute: {
+    id: "zbJHl7",
     defaultMessage: "Content Attribute",
     description: "attribute type"
   },
   productAttribute: {
+    id: "qkRuT0",
     defaultMessage: "Product Attribute",
     description: "attribute type"
   }
@@ -52,6 +54,7 @@ const AttributeOrganization: React.FC<AttributeOrganizationProps> = props => {
     <Card>
       <CardTitle
         title={intl.formatMessage({
+          id: "nwvQPg",
           defaultMessage: "Organization",
           description: "section header"
         })}
@@ -72,9 +75,15 @@ const AttributeOrganization: React.FC<AttributeOrganizationProps> = props => {
             disabled={disabled}
             label={
               <>
-                <FormattedMessage defaultMessage="Attribute Class" />
+                <FormattedMessage
+                  id="v1pNHW"
+                  defaultMessage="Attribute Class"
+                />
                 <Typography variant="caption">
-                  <FormattedMessage defaultMessage="Define where this attribute should be used in Saleor system" />
+                  <FormattedMessage
+                    id="ErNH3D"
+                    defaultMessage="Define where this attribute should be used in Saleor system"
+                  />
                 </Typography>
               </>
             }
@@ -85,7 +94,7 @@ const AttributeOrganization: React.FC<AttributeOrganizationProps> = props => {
         ) : (
           <>
             <Typography className={classes.label} variant="caption">
-              <FormattedMessage defaultMessage="Attribute Class" />
+              <FormattedMessage id="v1pNHW" defaultMessage="Attribute Class" />
             </Typography>
             <Typography>
               {data.type === AttributeTypeEnum.PRODUCT_TYPE

src/attributes/components/AttributePage/AttributePage.tsx

@@ -184,6 +184,7 @@ const AttributePage: React.FC<AttributePageProps> = ({
                 title={
                   attribute === null
                     ? intl.formatMessage({
+                        id: "8cUEPV",
                         defaultMessage: "Create New Attribute",
                         description: "page title"
                       })

src/attributes/components/AttributeProperties/AttributeProperties.tsx

@@ -15,44 +15,54 @@ import { AttributePageFormData } from "../AttributePage";
 
 const messages = defineMessages({
   availableInGrid: {
+    id: "jswILH",
     defaultMessage: "Add to Column Options",
     description: "add attribute as column in product list table"
   },
   availableInGridCaption: {
+    id: "AzMSmb",
     defaultMessage:
       "If enabled this attribute can be used as a column in product table.",
     description: "caption"
   },
   dashboardPropertiesTitle: {
+    id: "lCxfDe",
     defaultMessage: "Dashboard Properties",
     description: "attribute properties regarding dashboard"
   },
   filterableInDashboard: {
+    id: "RH+aOF",
     defaultMessage: "Use in Filtering",
     description: "use attribute in filtering"
   },
   filterableInDashboardCaption: {
+    id: "Q9wTrz",
     defaultMessage:
       "If enabled, you’ll be able to use this attribute to filter products in product list.",
     description: "caption"
   },
   filterableInStorefront: {
     defaultMessage: "Use as filter",
+    id: "e1vU/4",
     description: "attribute is filterable in storefront"
   },
   storefrontPropertiesTitle: {
+    id: "AgY5Mv",
     defaultMessage: "Storefront Properties",
     description: "attribute properties regarding storefront"
   },
   storefrontSearchPosition: {
+    id: "cJ5ASN",
     defaultMessage: "Position in faceted navigation",
     description: "attribute position in storefront filters"
   },
   visibleInStorefront: {
+    id: "x8V/xS",
     defaultMessage: "Public",
     description: "attribute visibility in storefront"
   },
   visibleInStorefrontCaption: {
+    id: "h2Hta6",
     defaultMessage: "If enabled, attribute will be accessible to customers.",
     description: "caption"
   }

src/attributes/components/AttributeSwatchField/messages.ts

@@ -2,10 +2,12 @@ import { defineMessages } from "react-intl";
 
 export const swatchFieldMessages = defineMessages({
   image: {
+    id: "I2wCwj",
     defaultMessage: "Image",
     description: "swatch attribute image label"
   },
   picker: {
+    id: "0DgA8v",
     defaultMessage: "Picker",
     description: "swatch attribute color picker label"
   }

src/attributes/components/AttributeValueDeleteDialog/AttributeValueDeleteDialog.tsx

@@ -33,6 +33,7 @@ const AttributeValueDeleteDialog: React.FC<AttributeValueDeleteDialogProps> = ({
       onConfirm={onConfirm}
       variant="delete"
       title={intl.formatMessage({
+        id: "WWV8aZ",
         defaultMessage: "Delete attribute value",
         description: "dialog title"
       })}
@@ -40,6 +41,7 @@ const AttributeValueDeleteDialog: React.FC<AttributeValueDeleteDialogProps> = ({
       <DialogContentText>
         {useName ? (
           <FormattedMessage
+            id="no3Ygn"
             defaultMessage='Are you sure you want to delete "{name}" value? If you delete it you won’t be able to assign it to any of the products with "{attributeName}" attribute.'
             values={{
               attributeName,
@@ -48,6 +50,7 @@ const AttributeValueDeleteDialog: React.FC<AttributeValueDeleteDialogProps> = ({
           />
         ) : (
           <FormattedMessage
+            id="JyQoES"
             defaultMessage='Are you sure you want to delete "{name}" value?'
             description="delete attribute value"
             values={{

src/attributes/components/AttributeValueEditDialog/AttributeValueEditDialog.tsx

@@ -65,11 +65,13 @@ const AttributeValueEditDialog: React.FC<AttributeValueEditDialogProps> = ({
       <DialogTitle>
         {attributeValue === null ? (
           <FormattedMessage
+            id="PqMbma"
             defaultMessage="Add Value"
             description="add attribute value"
           />
         ) : (
           <FormattedMessage
+            id="XYhE8p"
             defaultMessage="Edit Value"
             description="edit attribute value"
           />
@@ -91,6 +93,7 @@ const AttributeValueEditDialog: React.FC<AttributeValueEditDialogProps> = ({
                 )}
                 name={"name" as keyof AttributeValueEditDialogFormData}
                 label={intl.formatMessage({
+                  id: "UhcALJ",
                   defaultMessage: "Name",
                   description: "attribute name"
                 })}

src/attributes/components/AttributeValues/AttributeValues.tsx

@@ -92,6 +92,7 @@ const AttributeValues: React.FC<AttributeValuesProps> = ({
     <Card>
       <CardTitle
         title={intl.formatMessage({
+          id: "J3uE0t",
           defaultMessage: "Attribute Values",
           description: "section header"
         })}
@@ -103,6 +104,7 @@ const AttributeValues: React.FC<AttributeValuesProps> = ({
             data-test-id="assign-value-button"
           >
             <FormattedMessage
+              id="+iVKR1"
               defaultMessage="Assign value"
               description="assign attribute value button"
             />
@@ -116,6 +118,7 @@ const AttributeValues: React.FC<AttributeValuesProps> = ({
             {isSwatch && (
               <TableCell className={classes.columnSwatch}>
                 <FormattedMessage
+                  id="NUevU9"
                   defaultMessage="Swatch"
                   description="attribute values list: slug column header"
                 />
@@ -123,12 +126,14 @@ const AttributeValues: React.FC<AttributeValuesProps> = ({
             )}
             <TableCell className={classes.columnAdmin}>
               <FormattedMessage
+                id="3psvRS"
                 defaultMessage="Admin"
                 description="attribute values list: slug column header"
               />
             </TableCell>
             <TableCell className={classes.columnStore}>
               <FormattedMessage
+                id="H60H6L"
                 defaultMessage="Default Store View"
                 description="attribute values list: name column header"
               />
@@ -196,6 +201,7 @@ const AttributeValues: React.FC<AttributeValuesProps> = ({
               <TableRow>
                 <TableCell colSpan={numberOfColumns}>
                   <FormattedMessage
+                    id="g5zIpS"
                     defaultMessage="No values found"
                     description="No attribute values found"
                   />

src/attributes/errors.ts

@@ -4,9 +4,11 @@ import { defineMessages, IntlShape } from "react-intl";
 
 const messages = defineMessages({
   attributeSlugUnique: {
+    id: "eWV760",
     defaultMessage: "Attribute with this slug already exists"
   },
   attributeValueAlreadyExists: {
+    id: "J/QqOI",
     defaultMessage: "This value already exists within this attribute"
   }
 });

src/attributes/views/AttributeCreate/AttributeCreate.tsx

@@ -89,6 +89,7 @@ const AttributeDetails: React.FC<AttributeDetailsProps> = ({ params }) => {
         notify({
           status: "success",
           text: intl.formatMessage({
+            id: "jTifz+",
             defaultMessage: "Successfully created attribute"
           })
         });
@@ -100,7 +101,7 @@ const AttributeDetails: React.FC<AttributeDetailsProps> = ({ params }) => {
   const [updatePrivateMetadata] = useUpdatePrivateMetadataMutation({});
 
   const id = params.id
-    ? parseInt(params.id, 0) + pageInfo.startCursor
+    ? parseInt(params.id, 10) + pageInfo.startCursor
     : undefined;
 
   const [openModal, closeModal] = createDialogActionHandlers<

src/attributes/views/AttributeDetails/AttributeDetails.tsx

@@ -95,6 +95,7 @@ const AttributeDetails: React.FC<AttributeDetailsProps> = ({ id, params }) => {
         notify({
           status: "success",
           text: intl.formatMessage({
+            id: "V/VAHG",
             defaultMessage: "Attribute deleted"
           })
         });
@@ -112,6 +113,7 @@ const AttributeDetails: React.FC<AttributeDetailsProps> = ({ id, params }) => {
         notify({
           status: "success",
           text: intl.formatMessage({
+            id: "7H2D5m",
             defaultMessage: "Value deleted",
             description: "attribute value deleted"
           })
@@ -150,6 +152,7 @@ const AttributeDetails: React.FC<AttributeDetailsProps> = ({ id, params }) => {
         notify({
           status: "success",
           text: intl.formatMessage({
+            id: "xVn5B0",
             defaultMessage: "Added new value",
             description: "added new attribute value"
           })
@@ -224,7 +227,10 @@ const AttributeDetails: React.FC<AttributeDetailsProps> = ({ id, params }) => {
               "metadata",
               "privateMetadata"
             ]),
-            storefrontSearchPosition: parseInt(data.storefrontSearchPosition, 0)
+            storefrontSearchPosition: parseInt(
+              data.storefrontSearchPosition,
+              10
+            )
           }
         }
       })

src/attributes/views/AttributeList/AttributeList.tsx

@@ -81,6 +81,7 @@ const AttributeList: React.FC<AttributeListProps> = ({ params }) => {
         notify({
           status: "success",
           text: intl.formatMessage({
+            id: "lw9WIk",
             defaultMessage: "Attributes successfully delete",
             description: "deleted multiple attributes"
           })

src/auth/components/LoginPage/LoginPage.tsx

@@ -56,6 +56,7 @@ const LoginCard: React.FC<LoginCardProps> = props => {
         <>
           <Typography variant="h3" className={classes.header}>
             <FormattedMessage
+              id="vzgZ3U"
               defaultMessage="Sign In"
               description="card header"
             />
@@ -84,6 +85,7 @@ const LoginCard: React.FC<LoginCardProps> = props => {
               fullWidth
               autoComplete="password"
               label={intl.formatMessage({
+                id: "5sg7KC",
                 defaultMessage: "Password"
               })}
               name="password"
@@ -114,6 +116,7 @@ const LoginCard: React.FC<LoginCardProps> = props => {
             data-test-id="reset-password-link"
           >
             <FormattedMessage
+              id="3tbL7x"
               defaultMessage="Forgot password?"
               description="description"
             />
@@ -127,7 +130,11 @@ const LoginCard: React.FC<LoginCardProps> = props => {
               type="submit"
               data-test-id="submit"
             >
-              <FormattedMessage defaultMessage="Sign in" description="button" />
+              <FormattedMessage
+                id="AubJ/S"
+                defaultMessage="Sign in"
+                description="button"
+              />
             </Button>
           </div>
           {externalAuthentications.length > 0 && (
@@ -137,6 +144,7 @@ const LoginCard: React.FC<LoginCardProps> = props => {
               <FormSpacer />
               <Typography>
                 <FormattedMessage
+                  id="ENBELI"
                   defaultMessage="or login using"
                   description="description"
                 />

src/auth/components/LoginPage/form.tsx

@@ -11,7 +11,6 @@ export interface LoginFormData {
 export interface UseLoginFormResult {
   change: FormChange;
   data: LoginFormData;
-  hasChanged: boolean;
   submit: () => SubmitPromise;
 }
 
@@ -35,16 +34,15 @@ function useLoginForm(
 ): UseLoginFormResult {
   const form = useForm(getLoginFormData());
 
-  const { change, hasChanged, data, setChanged } = form;
+  const { change, data } = form;
 
-  const handleFormSubmit = useHandleFormSubmit({ onSubmit, setChanged });
+  const handleFormSubmit = useHandleFormSubmit({ onSubmit });
 
   const submit = async () => handleFormSubmit(data);
 
   return {
     change,
     data,
-    hasChanged,
     submit
   };
 }

src/auth/components/LoginPage/messages.ts

@@ -3,15 +3,18 @@ import { defineMessages, IntlShape } from "react-intl";
 
 export const errorMessages = defineMessages({
   loginError: {
+    id: "tTtoKd",
     defaultMessage:
       "Sorry, your username and/or password are incorrect. Please try again.",
     description: "error message"
   },
   externalLoginError: {
+    id: "M4q0Ye",
     defaultMessage: "Sorry, login went wrong. Please try again.",
     description: "error message"
   },
   serverError: {
+    id: "ChGI4V",
     defaultMessage:
       "Saleor is unavailable, please check your network connection and try again.",
     description: "error message"

src/auth/components/NewPasswordPage/NewPasswordPage.tsx

@@ -45,13 +45,17 @@ const NewPasswordPage: React.FC<NewPasswordPageProps> = props => {
           <>
             <Typography variant="h3" className={classes.header}>
               <FormattedMessage
+                id="WhKGPA"
                 defaultMessage="Set up new password"
                 description="page title"
               />
             </Typography>
             {!!error && <div className={classes.panel}>{error}</div>}
             <Typography variant="caption" color="textSecondary">
-              <FormattedMessage defaultMessage="Please set up a new password for your account. Repeat your new password to make sure you will be able to remember it." />
+              <FormattedMessage
+                id="m0Dz+2"
+                defaultMessage="Please set up a new password for your account. Repeat your new password to make sure you will be able to remember it."
+              />
             </Typography>
             <FormSpacer />
             <TextField
@@ -60,6 +64,7 @@ const NewPasswordPage: React.FC<NewPasswordPageProps> = props => {
               autoComplete="none"
               disabled={disabled}
               label={intl.formatMessage({
+                id: "Ev6SEF",
                 defaultMessage: "New Password"
               })}
               name="password"
@@ -77,6 +82,7 @@ const NewPasswordPage: React.FC<NewPasswordPageProps> = props => {
               autoComplete="none"
               disabled={disabled}
               label={intl.formatMessage({
+                id: "vfG+nh",
                 defaultMessage: "Confirm Password"
               })}
               name="confirmPassword"
@@ -86,6 +92,7 @@ const NewPasswordPage: React.FC<NewPasswordPageProps> = props => {
               helperText={
                 passwordError &&
                 intl.formatMessage({
+                  id: "7Chrsf",
                   defaultMessage: "Passwords do not match"
                 })
               }
@@ -103,6 +110,7 @@ const NewPasswordPage: React.FC<NewPasswordPageProps> = props => {
               type="submit"
             >
               <FormattedMessage
+                id="S22jIs"
                 defaultMessage="Set new password"
                 description="button"
               />

src/auth/components/ResetPasswordPage/ResetPasswordPage.tsx

@@ -38,11 +38,14 @@ const ResetPasswordPage: React.FC<ResetPasswordPageProps> = props => {
             <ArrowRightIcon className={classes.arrow} />
           </IconButton>
           <Typography variant="h3" className={classes.header}>
-            <FormattedMessage defaultMessage="Reset password" />
+            <FormattedMessage id="Yy/yDL" defaultMessage="Reset password" />
           </Typography>
           {!!error && <div className={classes.panel}>{error}</div>}
           <Typography variant="caption" color="textSecondary">
-            <FormattedMessage defaultMessage="Provide us with an email - if we find it in our database we will send you a link to reset your password. You should be able to find it in your inbox in the next couple of minutes." />
+            <FormattedMessage
+              id="54M0Gu"
+              defaultMessage="Provide us with an email - if we find it in our database we will send you a link to reset your password. You should be able to find it in your inbox in the next couple of minutes."
+            />
           </Typography>
           <FormSpacer />
           <TextField
@@ -68,6 +71,7 @@ const ResetPasswordPage: React.FC<ResetPasswordPageProps> = props => {
             type="submit"
           >
             <FormattedMessage
+              id="lm9NSK"
               defaultMessage="Send an email with reset link"
               description="password reset, button"
             />

src/auth/components/ResetPasswordSuccessPage/ResetPasswordSuccessPage.tsx

@@ -21,10 +21,13 @@ const ResetPasswordSuccessPage: React.FC<ResetPasswordSuccessPageProps> = props
   return (
     <>
       <Typography variant="h3" className={classes.header}>
-        <FormattedMessage defaultMessage="Reset password" />
+        <FormattedMessage id="Yy/yDL" defaultMessage="Reset password" />
       </Typography>
       <Typography>
-        <FormattedMessage defaultMessage="Success! In a few minutes you’ll receive a message with instructions on how to reset your password." />
+        <FormattedMessage
+          id="2ob30/"
+          defaultMessage="Success! In a few minutes you’ll receive a message with instructions on how to reset your password."
+        />
       </Typography>
       <FormSpacer />
       <Button
@@ -33,7 +36,11 @@ const ResetPasswordSuccessPage: React.FC<ResetPasswordSuccessPageProps> = props
         onClick={onBack}
         type="submit"
       >
-        <FormattedMessage defaultMessage="Back to login" description="button" />
+        <FormattedMessage
+          id="2oyWT9"
+          defaultMessage="Back to login"
+          description="button"
+        />
       </Button>
     </>
   );

src/auth/views/ResetPassword.tsx

@@ -30,6 +30,7 @@ const ResetPasswordView: React.FC = () => {
         ) {
           setError(
             intl.formatMessage({
+              id: "C0JLNW",
               defaultMessage:
                 "Provided email address does not exist in our database."
             })

src/categories/components/CategoryBackground/CategoryBackground.tsx

@@ -59,6 +59,7 @@ const CategoryBackground: React.FC<CategoryBackgroundProps> = props => {
     <Card>
       <CardTitle
         title={intl.formatMessage({
+          id: "DP6b8U",
           defaultMessage: "Background Image (optional)",
           description: "section header"
         })}
@@ -102,6 +103,7 @@ const CategoryBackground: React.FC<CategoryBackgroundProps> = props => {
               name="backgroundImageAlt"
               label={intl.formatMessage(commonMessages.description)}
               helperText={intl.formatMessage({
+                id: "0iMYc+",
                 defaultMessage: "(Optional)",
                 description: "field is optional"
               })}