diff --git a/.eslintrc.json b/.eslintrc.json index 1bb03ae24..e811033a0 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -173,7 +173,7 @@ "no-restricted-imports": [ "error", { - "paths": ["lodash"] + "paths": ["lodash", "@material-ui/icons/Delete"] } ] }, diff --git a/assets/images/ChevronDown.svg b/assets/images/ChevronDown.svg index cc047ee72..7d034aeb6 100644 --- a/assets/images/ChevronDown.svg +++ b/assets/images/ChevronDown.svg @@ -1,3 +1,3 @@ - + diff --git a/assets/images/activate-icon.svg b/assets/images/activate-icon.svg index 8ac7d076a..de6644b1f 100644 --- a/assets/images/activate-icon.svg +++ b/assets/images/activate-icon.svg @@ -1,4 +1,4 @@ - + diff --git a/assets/images/login-background.svg b/assets/images/login-background.svg index 30389401f..fa9be13c1 100644 --- a/assets/images/login-background.svg +++ b/assets/images/login-background.svg @@ -1,201 +1,144 @@ - - - - - - - - - - - + - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +ks \ No newline at end of file diff --git a/assets/images/logo-dark.svg b/assets/images/logo-dark.svg index d0fe1c523..2c328440c 100644 --- a/assets/images/logo-dark.svg +++ b/assets/images/logo-dark.svg @@ -1,9 +1,27 @@ - - - - - - - - - + + + + + + + + + + + + + \ No newline at end of file diff --git a/assets/images/logo-light.svg b/assets/images/logo-light.svg index 60f632623..f3388557d 100644 --- a/assets/images/logo-light.svg +++ b/assets/images/logo-light.svg @@ -1 +1,15 @@ - \ No newline at end of file + + + + + + + + + + + + + + + diff --git a/assets/images/menu-apps-icon.svg b/assets/images/menu-apps-icon.svg index 85d36954a..ed41e8b19 100644 --- a/assets/images/menu-apps-icon.svg +++ b/assets/images/menu-apps-icon.svg @@ -1,3 +1,3 @@ - - + + diff --git a/assets/images/menu-catalog-icon.svg b/assets/images/menu-catalog-icon.svg index 159804b6d..18665a678 100644 --- a/assets/images/menu-catalog-icon.svg +++ b/assets/images/menu-catalog-icon.svg @@ -1,3 +1,3 @@ - + diff --git a/assets/images/menu-configure-icon.svg b/assets/images/menu-configure-icon.svg index 7a435af97..11eff625d 100644 --- a/assets/images/menu-configure-icon.svg +++ b/assets/images/menu-configure-icon.svg @@ -1,3 +1,4 @@ - - + + + diff --git a/assets/images/menu-customers-icon.svg b/assets/images/menu-customers-icon.svg index 989bc7b0d..d228cbe95 100644 --- a/assets/images/menu-customers-icon.svg +++ b/assets/images/menu-customers-icon.svg @@ -1,3 +1,3 @@ - + diff --git a/assets/images/menu-discounts-icon.svg b/assets/images/menu-discounts-icon.svg index 30ca87a8e..00be9402b 100644 --- a/assets/images/menu-discounts-icon.svg +++ b/assets/images/menu-discounts-icon.svg @@ -1,3 +1,3 @@ - + diff --git a/assets/images/menu-home-icon.svg b/assets/images/menu-home-icon.svg index 2c90eedf3..a803c9003 100644 --- a/assets/images/menu-home-icon.svg +++ b/assets/images/menu-home-icon.svg @@ -1,3 +1,3 @@ - + diff --git a/assets/images/menu-orders-icon.svg b/assets/images/menu-orders-icon.svg index 74603fe7a..cdc844603 100644 --- a/assets/images/menu-orders-icon.svg +++ b/assets/images/menu-orders-icon.svg @@ -1,3 +1,3 @@ - + diff --git a/assets/images/menu-pages-icon.svg b/assets/images/menu-pages-icon.svg new file mode 100644 index 000000000..3701d4a7a --- /dev/null +++ b/assets/images/menu-pages-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/images/menu-translation-icon.svg b/assets/images/menu-translation-icon.svg index e869dedd1..e4526502f 100644 --- a/assets/images/menu-translation-icon.svg +++ b/assets/images/menu-translation-icon.svg @@ -1,3 +1,3 @@ - - + + diff --git a/assets/images/plus-icon.svg b/assets/images/plus-icon.svg index 8a0ed5ebd..5d07de8c8 100644 --- a/assets/images/plus-icon.svg +++ b/assets/images/plus-icon.svg @@ -1,4 +1,4 @@ - + diff --git a/assets/images/settings-icon.svg b/assets/images/settings-icon.svg index 452240eb0..e72823456 100644 --- a/assets/images/settings-icon.svg +++ b/assets/images/settings-icon.svg @@ -1,4 +1,4 @@ - + diff --git a/assets/images/support-icon.svg b/assets/images/support-icon.svg index 71b29d507..92189b9e5 100644 --- a/assets/images/support-icon.svg +++ b/assets/images/support-icon.svg @@ -1,3 +1,3 @@ - + diff --git a/assets/images/what.svg b/assets/images/what.svg index 52ca6ab45..e5d832934 100644 --- a/assets/images/what.svg +++ b/assets/images/what.svg @@ -1,3 +1,140 @@ - - - \ No newline at end of file + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/babel.config.js b/babel.config.js index ba7eccdfc..fd645ac3b 100644 --- a/babel.config.js +++ b/babel.config.js @@ -6,7 +6,12 @@ module.exports = api => { const ignore = isTest || isStorybook ? [] - : ["**/*.test.ts", "**/*.test.tsx", "src/storybook"]; + : [ + "**/*.test.ts", + "**/*.test.tsx", + "src/storybook", + "node_modules/core-js" + ]; const presets = [ [ diff --git a/cypress.json b/cypress.json index 9dfcafb13..68f27ecf5 100644 --- a/cypress.json +++ b/cypress.json @@ -9,4 +9,4 @@ "retries": { "runMode": 2 } -} \ No newline at end of file +} diff --git a/cypress/elements/catalog/products/products-list.js b/cypress/elements/catalog/products/products-list.js index a5bd60ab0..adb071ba3 100644 --- a/cypress/elements/catalog/products/products-list.js +++ b/cypress/elements/catalog/products/products-list.js @@ -42,6 +42,6 @@ export const PRODUCTS_LIST = { }, nextPageButton: "[data-test='button-pagination-next']", previousPagePagination: "[data-test='button-pagination-back']", - resultsOnPageSelect: "[data-test-id='rowNumberSelect']", + resultsOnPageSelect: "[data-test-id='PaginationRowNumberSelect']", rowNumberOption: "[data-test-id='rowNumberOption']" }; diff --git a/cypress/elements/catalog/products/variants-selectors.js b/cypress/elements/catalog/products/variants-selectors.js index 3c4f5fe78..747772bfe 100644 --- a/cypress/elements/catalog/products/variants-selectors.js +++ b/cypress/elements/catalog/products/variants-selectors.js @@ -7,7 +7,7 @@ export const VARIANTS_SELECTORS = { attributeSelector: "[data-test='attribute-value']", attributeOption: "[data-test-type='option'], [data-test='multiautocomplete-select-option']", - addWarehouseButton: "button[class*='MuiIconButton-colorPrimary']", + addWarehouseButton: "[data-test-id='add-warehouse']", warehouseOption: "[role='menuitem']", saveButton: "[data-test='button-bar-confirm']", skuInputInAddVariant: "[name='sku']", diff --git a/locale/defaultMessages.json b/locale/defaultMessages.json index 8f0e43968..57e6d926f 100644 --- a/locale/defaultMessages.json +++ b/locale/defaultMessages.json @@ -91,9 +91,6 @@ "configurationMenuPageTypes": { "string": "Define types of content pages used in your store" }, - "configurationMenuPages": { - "string": "Manage and add additional pages" - }, "configurationMenuPermissionGroups": { "string": "Manage your permission groups and their permissions" }, @@ -765,14 +762,14 @@ "context": "table actions", "string": "Actions" }, - "src_dot_apps_dot_components_dot_CustomApps_dot_3152347892": { - "context": "custom apps content", - "string": "Your custom created apps will be shown here." - }, "src_dot_apps_dot_components_dot_CustomApps_dot_3230241731": { "context": "create app button", "string": "Create App" }, + "src_dot_apps_dot_components_dot_CustomApps_dot_4044120866": { + "context": "custom apps content", + "string": "Your custom-created apps will be shown here." + }, "src_dot_apps_dot_components_dot_DeactivatedText_dot_3064552173": { "context": "app deactivated", "string": "Deactivated" @@ -1227,25 +1224,25 @@ "context": "deleted multiple attributes", "string": "Attributes successfully delete" }, - "src_dot_auth_dot_components_dot_LoginPage_dot_109182747": { + "src_dot_auth_dot_components_dot_LoginPage_dot_1173110163": { + "context": "card header", + "string": "Sign In" + }, + "src_dot_auth_dot_components_dot_LoginPage_dot_1405865627": { "context": "button", - "string": "Login" + "string": "Sign in" }, "src_dot_auth_dot_components_dot_LoginPage_dot_2237029987": { "string": "Password" }, - "src_dot_auth_dot_components_dot_LoginPage_dot_2981302356": { - "context": "link", - "string": "Use this link to recover it" + "src_dot_auth_dot_components_dot_LoginPage_dot_3242928626": { + "context": "description", + "string": "Forgot password?" }, "src_dot_auth_dot_components_dot_LoginPage_dot_3762459576": { "context": "description", "string": "or login using" }, - "src_dot_auth_dot_components_dot_LoginPage_dot_599516345": { - "context": "description", - "string": "Forgot password? {resetPasswordLink}" - }, "src_dot_auth_dot_components_dot_LoginPage_dot_externalLoginError": { "context": "error message", "string": "Sorry, login went wrong. Please try again." @@ -1261,9 +1258,6 @@ "src_dot_auth_dot_components_dot_NewPasswordPage_dot_1254879564": { "string": "New Password" }, - "src_dot_auth_dot_components_dot_NewPasswordPage_dot_1915811227": { - "string": "Please set up a new password." - }, "src_dot_auth_dot_components_dot_NewPasswordPage_dot_2342634351": { "context": "button", "string": "Set new password" @@ -1271,20 +1265,33 @@ "src_dot_auth_dot_components_dot_NewPasswordPage_dot_2799926859": { "string": "Confirm Password" }, + "src_dot_auth_dot_components_dot_NewPasswordPage_dot_3349581442": { + "string": "Please set up a new password for your account. Repeat your new password to make sure you will be able to remember it." + }, "src_dot_auth_dot_components_dot_NewPasswordPage_dot_4253911811": { "string": "Passwords do not match" }, - "src_dot_auth_dot_components_dot_ResetPasswordPage_dot_2370700732": { - "string": "Forgot your password? Don't worry, we'll reset it for you." + "src_dot_auth_dot_components_dot_NewPasswordPage_dot_533029895": { + "context": "page title", + "string": "Set up new password" }, - "src_dot_auth_dot_components_dot_ResetPasswordPage_dot_3663311080": { + "src_dot_auth_dot_components_dot_ResetPasswordPage_dot_2422931690": { "context": "password reset, button", - "string": "Send Instructions" + "string": "Send an email with reset link" + }, + "src_dot_auth_dot_components_dot_ResetPasswordPage_dot_2925394684": { + "string": "Reset password" + }, + "src_dot_auth_dot_components_dot_ResetPasswordPage_dot_365271428": { + "string": "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." }, "src_dot_auth_dot_components_dot_ResetPasswordSuccessPage_dot_2245157344": { "context": "button", "string": "Back to login" }, + "src_dot_auth_dot_components_dot_ResetPasswordSuccessPage_dot_2925394684": { + "string": "Reset password" + }, "src_dot_auth_dot_components_dot_ResetPasswordSuccessPage_dot_4066297200": { "string": "Success! In a few minutes you’ll receive a message with instructions on how to reset your password." }, @@ -2124,21 +2131,23 @@ "context": "header", "string": "Error" }, - "src_dot_components_dot_ErrorPage_dot_1723676032": { - "context": "button", - "string": "Back to home" + "src_dot_components_dot_ErrorPage_dot_btnDashboard": { + "context": "button linking to dashboard", + "string": "Dashboard" }, - "src_dot_components_dot_ErrorPage_dot_2736139139": { - "string": "Ooops!..." + "src_dot_components_dot_ErrorPage_dot_btnRefresh": { + "context": "button refreshing page", + "string": "Refresh page" }, - "src_dot_components_dot_ErrorPage_dot_2845142593": { - "string": "Error" + "src_dot_components_dot_ErrorPage_dot_content": { + "string": "Don’t worry we will fix it soon. Try to refresh the page or go back to dashboard." }, - "src_dot_components_dot_ErrorPage_dot_3090161573": { - "string": "Don't worry, everything is gonna be fine" + "src_dot_components_dot_ErrorPage_dot_header": { + "string": "We’ve encountered an unexpected error" }, - "src_dot_components_dot_ErrorPage_dot_3182212440": { - "string": "We've encountered a problem..." + "src_dot_components_dot_ErrorPage_dot_or": { + "context": "conjunction, choice between going to dashboard or refreshing page", + "string": "or" }, "src_dot_components_dot_FilterBar_dot_2173195312": { "context": "button", @@ -2205,18 +2214,18 @@ "context": "header", "string": "Private Metadata" }, - "src_dot_components_dot_Metadata_dot_2024779015": { - "context": "empty metadata text", - "string": "There is no private metadata created for this element." - }, - "src_dot_components_dot_Metadata_dot_2087058956": { - "context": "empty metadata text", - "string": "There is no metadata created for this element." + "src_dot_components_dot_Metadata_dot_1827848527": { + "context": "number of metadata fields in model", + "string": "{number,plural,one{{number} string} other{{number} strings}}" }, "src_dot_components_dot_Metadata_dot_2537046678": { "context": "metadata field name, header", "string": "Field" }, + "src_dot_components_dot_Metadata_dot_2741366539": { + "context": "empty metadata text", + "string": "No metadata created for this element. Use the button below to add new metadata field." + }, "src_dot_components_dot_Metadata_dot_3181473584": { "context": "add metadata field,button", "string": "Add Field" @@ -2225,14 +2234,6 @@ "context": "table action", "string": "Actions" }, - "src_dot_components_dot_Metadata_dot_549104951": { - "context": "number of metadata fields in model", - "string": "{number,plural,one{{number} Field} other{{number} Fields}}" - }, - "src_dot_components_dot_Metadata_dot_553451245": { - "context": "empty metadata text", - "string": "Use the button below to add new metadata field" - }, "src_dot_components_dot_MoneyRange_dot_12301532": { "context": "money", "string": "to {money}" @@ -2469,6 +2470,10 @@ "src_dot_components_dot_TableHead_dot_868570480": { "string": "Selected {number} items" }, + "src_dot_components_dot_TablePagination_dot_noOfRows": { + "context": "pagination", + "string": "No. of rows" + }, "src_dot_components_dot_Timeline_dot_1359200231": { "context": "add order note, button", "string": "Send" @@ -3484,7 +3489,7 @@ "string": "Edit" }, "src_dot_email": { - "string": "E-mail Address" + "string": "Email address" }, "src_dot_endDate": { "string": "End Date" @@ -3657,50 +3662,54 @@ "context": "gift card settings header", "string": "Gift Cards Settings" }, - "src_dot_giftCards_dot_GiftCardUpdate_dot_GiftCardHistory_dot_giftCardActivated": { + "src_dot_giftCards_dot_GiftCardUpdate_dot_GiftCardHistory_dot_activated": { "context": "gift card history message", "string": "Gift card was activated by {activatedBy}" }, - "src_dot_giftCards_dot_GiftCardUpdate_dot_GiftCardHistory_dot_giftCardBalanceReset": { + "src_dot_giftCards_dot_GiftCardUpdate_dot_GiftCardHistory_dot_activatedAnonymous": { + "context": "gift card history message", + "string": "Gift card was activated" + }, + "src_dot_giftCards_dot_GiftCardUpdate_dot_GiftCardHistory_dot_balanceReset": { "context": "gift card history message", "string": "Gift card balance was reset by {resetBy}" }, - "src_dot_giftCards_dot_GiftCardUpdate_dot_GiftCardHistory_dot_giftCardBought": { + "src_dot_giftCards_dot_GiftCardUpdate_dot_GiftCardHistory_dot_balanceResetAnonymous": { + "context": "gift card history message", + "string": "Gift card balance was reset by {resetBy}" + }, + "src_dot_giftCards_dot_GiftCardUpdate_dot_GiftCardHistory_dot_bought": { "context": "gift card history message", "string": "Gift card was bought in order {orderNumber}" }, - "src_dot_giftCards_dot_GiftCardUpdate_dot_GiftCardHistory_dot_giftCardDeactivated": { + "src_dot_giftCards_dot_GiftCardUpdate_dot_GiftCardHistory_dot_deactivated": { "context": "gift card history message", "string": "Gift card was deactivated by {deactivatedBy}" }, - "src_dot_giftCards_dot_GiftCardUpdate_dot_GiftCardHistory_dot_giftCardExpiryDateUpdate": { + "src_dot_giftCards_dot_GiftCardUpdate_dot_GiftCardHistory_dot_deactivatedAnonymous": { + "context": "gift card history message", + "string": "Gift card was deactivated" + }, + "src_dot_giftCards_dot_GiftCardUpdate_dot_GiftCardHistory_dot_expiryDateUpdate": { "context": "gift card history message", "string": "Gift card expiry date was updated by {expiryUpdatedBy}" }, - "src_dot_giftCards_dot_GiftCardUpdate_dot_GiftCardHistory_dot_giftCardIssued": { - "context": "dsc", - "string": "Gift card was issued by {issuedBy}" - }, - "src_dot_giftCards_dot_GiftCardUpdate_dot_GiftCardHistory_dot_giftCardResent": { + "src_dot_giftCards_dot_GiftCardUpdate_dot_GiftCardHistory_dot_expiryDateUpdateAnonymous": { "context": "gift card history message", - "string": "Gift card was resent" - }, - "src_dot_giftCards_dot_GiftCardUpdate_dot_GiftCardHistory_dot_giftCardSentToCustomer": { - "context": "gift card history message", - "string": "Gift card was sent to customer" - }, - "src_dot_giftCards_dot_GiftCardUpdate_dot_GiftCardHistory_dot_giftCardTagsUpdated": { - "context": "gift card history message", - "string": "Gift card tags were updated" - }, - "src_dot_giftCards_dot_GiftCardUpdate_dot_GiftCardHistory_dot_giftCardUsedInOrder": { - "context": "gift card history message", - "string": "Gift card was used as a payment method on order {orderLink} by" + "string": "Gift card expiry date was updated" }, "src_dot_giftCards_dot_GiftCardUpdate_dot_GiftCardHistory_dot_historyHeaderTitle": { "context": "section header title", "string": "Gift Card Timeline" }, + "src_dot_giftCards_dot_GiftCardUpdate_dot_GiftCardHistory_dot_issued": { + "context": "gift card history message", + "string": "Gift card was issued by {issuedBy}" + }, + "src_dot_giftCards_dot_GiftCardUpdate_dot_GiftCardHistory_dot_issuedAnonymous": { + "context": "gift card history message", + "string": "Gift card was issued" + }, "src_dot_giftCards_dot_GiftCardUpdate_dot_GiftCardHistory_dot_noteAddError": { "context": "notifier message", "string": "There was an error adding a note" @@ -3709,6 +3718,26 @@ "context": "notifier message", "string": "Note was added sucessfully" }, + "src_dot_giftCards_dot_GiftCardUpdate_dot_GiftCardHistory_dot_resent": { + "context": "gift card history message", + "string": "Gift card was resent" + }, + "src_dot_giftCards_dot_GiftCardUpdate_dot_GiftCardHistory_dot_sentToCustomer": { + "context": "gift card history message", + "string": "Gift card was sent to customer" + }, + "src_dot_giftCards_dot_GiftCardUpdate_dot_GiftCardHistory_dot_tagsUpdated": { + "context": "gift card history message", + "string": "Gift card tags were updated" + }, + "src_dot_giftCards_dot_GiftCardUpdate_dot_GiftCardHistory_dot_usedInOrder": { + "context": "gift card history message", + "string": "Gift card was used as a payment method on order {orderLink} by" + }, + "src_dot_giftCards_dot_GiftCardUpdate_dot_GiftCardHistory_dot_usedInOrderAnonymous": { + "context": "gift card history message", + "string": "Gift card was used as a payment method on order {orderLink}" + }, "src_dot_giftCards_dot_GiftCardUpdate_dot_GiftCardResendCodeDialog_dot_consentCheckboxLabel": { "context": "consent to send gift card to different address checkbox label", "string": "Yes, I want to send gift card to different address" @@ -3759,7 +3788,7 @@ }, "src_dot_giftCards_dot_GiftCardUpdate_dot_GiftCardUpdateDetailsCard_dot_setBalanceButtonLabel": { "context": "set balance button label", - "string": "set balance" + "string": "Set Balance" }, "src_dot_giftCards_dot_GiftCardUpdate_dot_GiftCardUpdateDetailsCard_dot_tagInputLabel": { "context": "tag label", @@ -5489,13 +5518,13 @@ "src_dot_pageTypes_dot_components_dot_PageTypeDetails_dot_1631499902": { "string": "Content Type Name" }, - "src_dot_pageTypes_dot_components_dot_PageTypeListPage_dot_1793515137": { - "context": "button", - "string": "create page type" - }, "src_dot_pageTypes_dot_components_dot_PageTypeListPage_dot_1793828289": { "string": "Search Page Type" }, + "src_dot_pageTypes_dot_components_dot_PageTypeListPage_dot_4077151320": { + "context": "button", + "string": "Create page type" + }, "src_dot_pageTypes_dot_components_dot_PageTypeListPage_dot_464566131": { "context": "tab name", "string": "All Page Types" @@ -5848,8 +5877,8 @@ "context": "section header", "string": "Plugin Information and Status" }, - "src_dot_plugins_dot_components_dot_PluginInfo_dot_4013064767": { - "string": "Set plugin as Active" + "src_dot_plugins_dot_components_dot_PluginInfo_dot_3954867850": { + "string": "Set plugin as active" }, "src_dot_plugins_dot_components_dot_PluginSecretFieldDialog_dot_3032939398": { "context": "header", diff --git a/package-lock.json b/package-lock.json index b2b0ceb0c..5aeda228a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1664,6 +1664,52 @@ "@babel/plugin-transform-typescript": "^7.13.0" } }, + "@babel/register": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/register/-/register-7.16.0.tgz", + "integrity": "sha512-lzl4yfs0zVXnooeLE0AAfYaT7F3SPA8yB2Bj4W1BiZwLbMS3MZH35ZvCWSRHvneUugwuM+Wsnrj7h0F7UmU3NQ==", + "dev": true, + "requires": { + "clone-deep": "^4.0.1", + "find-cache-dir": "^2.0.0", + "make-dir": "^2.1.0", + "pirates": "^4.0.0", + "source-map-support": "^0.5.16" + }, + "dependencies": { + "clone-deep": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-4.0.1.tgz", + "integrity": "sha512-neHB9xuzh/wk0dIHweyAXv2aPGZIVk3pLMe+/RNzINf17fe0OG96QroktYAUm7SM1PBnzTabaLboqqxDyMU+SQ==", + "dev": true, + "requires": { + "is-plain-object": "^2.0.4", + "kind-of": "^6.0.2", + "shallow-clone": "^3.0.0" + } + }, + "find-cache-dir": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-2.1.0.tgz", + "integrity": "sha512-Tq6PixE0w/VMFfCgbONnkiQIVol/JJL7nRMi20fqzA4NRs9AfeqMGeRdPi3wIhYkxjeBaWh2rxwapn5Tu3IqOQ==", + "dev": true, + "requires": { + "commondir": "^1.0.1", + "make-dir": "^2.0.0", + "pkg-dir": "^3.0.0" + } + }, + "shallow-clone": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/shallow-clone/-/shallow-clone-3.0.1.tgz", + "integrity": "sha512-/6KqX+GVUdqPuPPd2LxDDxzX6CAbjJehAAOKlNpqqUpAqPM6HeL8f+o3a+JsyGjn2lv0WY8UsTgUJjU9Ok55NA==", + "dev": true, + "requires": { + "kind-of": "^6.0.2" + } + } + } + }, "@babel/runtime": { "version": "7.13.10", "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.13.10.tgz", @@ -5286,9 +5332,9 @@ } }, "@saleor/macaw-ui": { - "version": "0.2.7", - "resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-0.2.7.tgz", - "integrity": "sha512-sRt193W5u1Vu+5893zEsRbkVF3H1uXuqNC+BEXwTg85i+J9YHmykJZjDneExgGH24nYe948S5dffsy3NMOGSTQ==", + "version": "0.3.1-0", + "resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-0.3.1-0.tgz", + "integrity": "sha512-aIG226XQMES65Bg/hkaE5+WzSXYBuosgVTT/Oqk1FZezMx1VHp0ySOJbZhSBbCFk0u02uUK6uH79AZNfoTSgqw==", "requires": { "clsx": "^1.1.1", "lodash": "^4.17.21", @@ -6483,11 +6529,21 @@ } }, "@types/js-yaml": { - "version": "4.0.3", - "resolved": "https://registry.npmjs.org/@types/js-yaml/-/js-yaml-4.0.3.tgz", - "integrity": "sha512-5t9BhoORasuF5uCPr+d5/hdB++zRFUTMIZOzbNkr+jZh3yQht4HYbRDyj9fY8n2TZT30iW9huzav73x4NikqWg==", + "version": "4.0.5", + "resolved": "https://registry.npmjs.org/@types/js-yaml/-/js-yaml-4.0.5.tgz", + "integrity": "sha512-FhpRzf927MNQdRZP0J5DLIdTXhjLYzeUTmLAu69mnVksLH9CJY3IuSeEgbKUki7GQZm0WqDkGzyxju2EZGD2wA==", "dev": true }, + "@types/jscodeshift": { + "version": "0.11.3", + "resolved": "https://registry.npmjs.org/@types/jscodeshift/-/jscodeshift-0.11.3.tgz", + "integrity": "sha512-pM0JD9kWVDH9DQp5Y6td16924V3MwZHei8P3cTeuFhXpzpk0K+iWraBZz8wF61QkFs9fZeAQNX0q8SG0+TFm2w==", + "dev": true, + "requires": { + "ast-types": "^0.14.1", + "recast": "^0.20.3" + } + }, "@types/json-schema": { "version": "7.0.7", "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.7.tgz", @@ -15643,6 +15699,12 @@ "integrity": "sha512-r5wGx7YeOwNWNlCA0wQ86zKyDLMQr+/RB8xy74M4hTphfmjlijTSSXGuH8rnvKZnfT9i+75zmd8jcKdMR4O6jA==", "dev": true }, + "flow-parser": { + "version": "0.165.1", + "resolved": "https://registry.npmjs.org/flow-parser/-/flow-parser-0.165.1.tgz", + "integrity": "sha512-vz/5MZIePDCZO9FfnRaH398cc+XSwtgoUzR6pC5zbekpk5ttCaXOnxypho+hb0NzUyQNFV+6vpU8joRZ1llrCw==", + "dev": true + }, "flush-write-stream": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/flush-write-stream/-/flush-write-stream-1.1.1.tgz", @@ -19628,6 +19690,416 @@ "integrity": "sha1-peZUwuWi3rXyAdls77yoDA7y9RM=", "dev": true }, + "jscodeshift": { + "version": "0.13.0", + "resolved": "https://registry.npmjs.org/jscodeshift/-/jscodeshift-0.13.0.tgz", + "integrity": "sha512-FNHLuwh7TeI0F4EzNVIRwUSxSqsGWM5nTv596FK4NfBnEEKFpIcyFeG559DMFGHSTIYA5AY4Fqh2cBrJx0EAwg==", + "dev": true, + "requires": { + "@babel/core": "^7.13.16", + "@babel/parser": "^7.13.16", + "@babel/plugin-proposal-class-properties": "^7.13.0", + "@babel/plugin-proposal-nullish-coalescing-operator": "^7.13.8", + "@babel/plugin-proposal-optional-chaining": "^7.13.12", + "@babel/plugin-transform-modules-commonjs": "^7.13.8", + "@babel/preset-flow": "^7.13.13", + "@babel/preset-typescript": "^7.13.0", + "@babel/register": "^7.13.16", + "babel-core": "^7.0.0-bridge.0", + "colors": "^1.1.2", + "flow-parser": "0.*", + "graceful-fs": "^4.2.4", + "micromatch": "^3.1.10", + "neo-async": "^2.5.0", + "node-dir": "^0.1.17", + "recast": "^0.20.4", + "temp": "^0.8.4", + "write-file-atomic": "^2.3.0" + }, + "dependencies": { + "@babel/code-frame": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.16.0.tgz", + "integrity": "sha512-IF4EOMEV+bfYwOmNxGzSnjR2EmQod7f1UXOpZM3l4i4o4QNwzjtJAu/HxdjHq0aYBvdqMuQEY1eg0nqW9ZPORA==", + "dev": true, + "requires": { + "@babel/highlight": "^7.16.0" + } + }, + "@babel/compat-data": { + "version": "7.16.4", + "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.16.4.tgz", + "integrity": "sha512-1o/jo7D+kC9ZjHX5v+EHrdjl3PhxMrLSOTGsOdHJ+KL8HCaEK6ehrVL2RS6oHDZp+L7xLirLrPmQtEng769J/Q==", + "dev": true + }, + "@babel/core": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.16.0.tgz", + "integrity": "sha512-mYZEvshBRHGsIAiyH5PzCFTCfbWfoYbO/jcSdXQSUQu1/pW0xDZAUP7KEc32heqWTAfAHhV9j1vH8Sav7l+JNQ==", + "dev": true, + "requires": { + "@babel/code-frame": "^7.16.0", + "@babel/generator": "^7.16.0", + "@babel/helper-compilation-targets": "^7.16.0", + "@babel/helper-module-transforms": "^7.16.0", + "@babel/helpers": "^7.16.0", + "@babel/parser": "^7.16.0", + "@babel/template": "^7.16.0", + "@babel/traverse": "^7.16.0", + "@babel/types": "^7.16.0", + "convert-source-map": "^1.7.0", + "debug": "^4.1.0", + "gensync": "^1.0.0-beta.2", + "json5": "^2.1.2", + "semver": "^6.3.0", + "source-map": "^0.5.0" + } + }, + "@babel/generator": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.16.0.tgz", + "integrity": "sha512-RR8hUCfRQn9j9RPKEVXo9LiwoxLPYn6hNZlvUOR8tSnaxlD0p0+la00ZP9/SnRt6HchKr+X0fO2r8vrETiJGew==", + "dev": true, + "requires": { + "@babel/types": "^7.16.0", + "jsesc": "^2.5.1", + "source-map": "^0.5.0" + } + }, + "@babel/helper-compilation-targets": { + "version": "7.16.3", + "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.16.3.tgz", + "integrity": "sha512-vKsoSQAyBmxS35JUOOt+07cLc6Nk/2ljLIHwmq2/NM6hdioUaqEXq/S+nXvbvXbZkNDlWOymPanJGOc4CBjSJA==", + "dev": true, + "requires": { + "@babel/compat-data": "^7.16.0", + "@babel/helper-validator-option": "^7.14.5", + "browserslist": "^4.17.5", + "semver": "^6.3.0" + } + }, + "@babel/helper-function-name": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.16.0.tgz", + "integrity": "sha512-BZh4mEk1xi2h4HFjWUXRQX5AEx4rvaZxHgax9gcjdLWdkjsY7MKt5p0otjsg5noXw+pB+clMCjw+aEVYADMjog==", + "dev": true, + "requires": { + "@babel/helper-get-function-arity": "^7.16.0", + "@babel/template": "^7.16.0", + "@babel/types": "^7.16.0" + } + }, + "@babel/helper-get-function-arity": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.16.0.tgz", + "integrity": "sha512-ASCquNcywC1NkYh/z7Cgp3w31YW8aojjYIlNg4VeJiHkqyP4AzIvr4qx7pYDb4/s8YcsZWqqOSxgkvjUz1kpDQ==", + "dev": true, + "requires": { + "@babel/types": "^7.16.0" + } + }, + "@babel/helper-hoist-variables": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.16.0.tgz", + "integrity": "sha512-1AZlpazjUR0EQZQv3sgRNfM9mEVWPK3M6vlalczA+EECcPz3XPh6VplbErL5UoMpChhSck5wAJHthlj1bYpcmg==", + "dev": true, + "requires": { + "@babel/types": "^7.16.0" + } + }, + "@babel/helper-member-expression-to-functions": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.16.0.tgz", + "integrity": "sha512-bsjlBFPuWT6IWhl28EdrQ+gTvSvj5tqVP5Xeftp07SEuz5pLnsXZuDkDD3Rfcxy0IsHmbZ+7B2/9SHzxO0T+sQ==", + "dev": true, + "requires": { + "@babel/types": "^7.16.0" + } + }, + "@babel/helper-module-imports": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.16.0.tgz", + "integrity": "sha512-kkH7sWzKPq0xt3H1n+ghb4xEMP8k0U7XV3kkB+ZGy69kDk2ySFW1qPi06sjKzFY3t1j6XbJSqr4mF9L7CYVyhg==", + "dev": true, + "requires": { + "@babel/types": "^7.16.0" + } + }, + "@babel/helper-module-transforms": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.16.0.tgz", + "integrity": "sha512-My4cr9ATcaBbmaEa8M0dZNA74cfI6gitvUAskgDtAFmAqyFKDSHQo5YstxPbN+lzHl2D9l/YOEFqb2mtUh4gfA==", + "dev": true, + "requires": { + "@babel/helper-module-imports": "^7.16.0", + "@babel/helper-replace-supers": "^7.16.0", + "@babel/helper-simple-access": "^7.16.0", + "@babel/helper-split-export-declaration": "^7.16.0", + "@babel/helper-validator-identifier": "^7.15.7", + "@babel/template": "^7.16.0", + "@babel/traverse": "^7.16.0", + "@babel/types": "^7.16.0" + } + }, + "@babel/helper-optimise-call-expression": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.16.0.tgz", + "integrity": "sha512-SuI467Gi2V8fkofm2JPnZzB/SUuXoJA5zXe/xzyPP2M04686RzFKFHPK6HDVN6JvWBIEW8tt9hPR7fXdn2Lgpw==", + "dev": true, + "requires": { + "@babel/types": "^7.16.0" + } + }, + "@babel/helper-replace-supers": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.16.0.tgz", + "integrity": "sha512-TQxuQfSCdoha7cpRNJvfaYxxxzmbxXw/+6cS7V02eeDYyhxderSoMVALvwupA54/pZcOTtVeJ0xccp1nGWladA==", + "dev": true, + "requires": { + "@babel/helper-member-expression-to-functions": "^7.16.0", + "@babel/helper-optimise-call-expression": "^7.16.0", + "@babel/traverse": "^7.16.0", + "@babel/types": "^7.16.0" + } + }, + "@babel/helper-simple-access": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.16.0.tgz", + "integrity": "sha512-o1rjBT/gppAqKsYfUdfHq5Rk03lMQrkPHG1OWzHWpLgVXRH4HnMM9Et9CVdIqwkCQlobnGHEJMsgWP/jE1zUiw==", + "dev": true, + "requires": { + "@babel/types": "^7.16.0" + } + }, + "@babel/helper-split-export-declaration": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.16.0.tgz", + "integrity": "sha512-0YMMRpuDFNGTHNRiiqJX19GjNXA4H0E8jZ2ibccfSxaCogbm3am5WN/2nQNj0YnQwGWM1J06GOcQ2qnh3+0paw==", + "dev": true, + "requires": { + "@babel/types": "^7.16.0" + } + }, + "@babel/helper-validator-identifier": { + "version": "7.15.7", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.15.7.tgz", + "integrity": "sha512-K4JvCtQqad9OY2+yTU8w+E82ywk/fe+ELNlt1G8z3bVGlZfn/hOcQQsUhGhW/N+tb3fxK800wLtKOE/aM0m72w==", + "dev": true + }, + "@babel/helper-validator-option": { + "version": "7.14.5", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.14.5.tgz", + "integrity": "sha512-OX8D5eeX4XwcroVW45NMvoYaIuFI+GQpA2a8Gi+X/U/cDUIRsV37qQfF905F0htTRCREQIB4KqPeaveRJUl3Ow==", + "dev": true + }, + "@babel/helpers": { + "version": "7.16.3", + "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.16.3.tgz", + "integrity": "sha512-Xn8IhDlBPhvYTvgewPKawhADichOsbkZuzN7qz2BusOM0brChsyXMDJvldWaYMMUNiCQdQzNEioXTp3sC8Nt8w==", + "dev": true, + "requires": { + "@babel/template": "^7.16.0", + "@babel/traverse": "^7.16.3", + "@babel/types": "^7.16.0" + } + }, + "@babel/highlight": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.16.0.tgz", + "integrity": "sha512-t8MH41kUQylBtu2+4IQA3atqevA2lRgqA2wyVB/YiWmsDSuylZZuXOUy9ric30hfzauEFfdsuk/eXTRrGrfd0g==", + "dev": true, + "requires": { + "@babel/helper-validator-identifier": "^7.15.7", + "chalk": "^2.0.0", + "js-tokens": "^4.0.0" + } + }, + "@babel/parser": { + "version": "7.16.4", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.16.4.tgz", + "integrity": "sha512-6V0qdPUaiVHH3RtZeLIsc+6pDhbYzHR8ogA8w+f+Wc77DuXto19g2QUwveINoS34Uw+W8/hQDGJCx+i4n7xcng==", + "dev": true + }, + "@babel/template": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.16.0.tgz", + "integrity": "sha512-MnZdpFD/ZdYhXwiunMqqgyZyucaYsbL0IrjoGjaVhGilz+x8YB++kRfygSOIj1yOtWKPlx7NBp+9I1RQSgsd5A==", + "dev": true, + "requires": { + "@babel/code-frame": "^7.16.0", + "@babel/parser": "^7.16.0", + "@babel/types": "^7.16.0" + } + }, + "@babel/traverse": { + "version": "7.16.3", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.16.3.tgz", + "integrity": "sha512-eolumr1vVMjqevCpwVO99yN/LoGL0EyHiLO5I043aYQvwOJ9eR5UsZSClHVCzfhBduMAsSzgA/6AyqPjNayJag==", + "dev": true, + "requires": { + "@babel/code-frame": "^7.16.0", + "@babel/generator": "^7.16.0", + "@babel/helper-function-name": "^7.16.0", + "@babel/helper-hoist-variables": "^7.16.0", + "@babel/helper-split-export-declaration": "^7.16.0", + "@babel/parser": "^7.16.3", + "@babel/types": "^7.16.0", + "debug": "^4.1.0", + "globals": "^11.1.0" + } + }, + "@babel/types": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.16.0.tgz", + "integrity": "sha512-PJgg/k3SdLsGb3hhisFvtLOw5ts113klrpLuIPtCJIU+BB24fqq6lf8RWqKJEjzqXR9AEH1rIb5XTqwBHB+kQg==", + "dev": true, + "requires": { + "@babel/helper-validator-identifier": "^7.15.7", + "to-fast-properties": "^2.0.0" + } + }, + "braces": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/braces/-/braces-2.3.2.tgz", + "integrity": "sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==", + "dev": true, + "requires": { + "arr-flatten": "^1.1.0", + "array-unique": "^0.3.2", + "extend-shallow": "^2.0.1", + "fill-range": "^4.0.0", + "isobject": "^3.0.1", + "repeat-element": "^1.1.2", + "snapdragon": "^0.8.1", + "snapdragon-node": "^2.0.1", + "split-string": "^3.0.2", + "to-regex": "^3.0.1" + }, + "dependencies": { + "extend-shallow": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz", + "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=", + "dev": true, + "requires": { + "is-extendable": "^0.1.0" + } + } + } + }, + "browserslist": { + "version": "4.18.1", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.18.1.tgz", + "integrity": "sha512-8ScCzdpPwR2wQh8IT82CA2VgDwjHyqMovPBZSNH54+tm4Jk2pCuv90gmAdH6J84OCRWi0b4gMe6O6XPXuJnjgQ==", + "dev": true, + "requires": { + "caniuse-lite": "^1.0.30001280", + "electron-to-chromium": "^1.3.896", + "escalade": "^3.1.1", + "node-releases": "^2.0.1", + "picocolors": "^1.0.0" + } + }, + "caniuse-lite": { + "version": "1.0.30001282", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001282.tgz", + "integrity": "sha512-YhF/hG6nqBEllymSIjLtR2iWDDnChvhnVJqp+vloyt2tEHFG1yBR+ac2B/rOw0qOK0m0lEXU2dv4E/sMk5P9Kg==", + "dev": true + }, + "electron-to-chromium": { + "version": "1.3.906", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.906.tgz", + "integrity": "sha512-UjoECdcOYIVzWmrbtNnYpPrDuu+RtiO5W08Vdbid9ydGQMSdnqtJUtvOqQEAVQqpoXN9kSW9YnQufvzLQMYQOw==", + "dev": true + }, + "fill-range": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz", + "integrity": "sha1-1USBHUKPmOsGpj3EAtJAPDKMOPc=", + "dev": true, + "requires": { + "extend-shallow": "^2.0.1", + "is-number": "^3.0.0", + "repeat-string": "^1.6.1", + "to-regex-range": "^2.1.0" + }, + "dependencies": { + "extend-shallow": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz", + "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=", + "dev": true, + "requires": { + "is-extendable": "^0.1.0" + } + } + } + }, + "is-number": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz", + "integrity": "sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=", + "dev": true, + "requires": { + "kind-of": "^3.0.2" + }, + "dependencies": { + "kind-of": { + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz", + "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=", + "dev": true, + "requires": { + "is-buffer": "^1.1.5" + } + } + } + }, + "micromatch": { + "version": "3.1.10", + "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz", + "integrity": "sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==", + "dev": true, + "requires": { + "arr-diff": "^4.0.0", + "array-unique": "^0.3.2", + "braces": "^2.3.1", + "define-property": "^2.0.2", + "extend-shallow": "^3.0.2", + "extglob": "^2.0.4", + "fragment-cache": "^0.2.1", + "kind-of": "^6.0.2", + "nanomatch": "^1.2.9", + "object.pick": "^1.3.0", + "regex-not": "^1.0.0", + "snapdragon": "^0.8.1", + "to-regex": "^3.0.2" + } + }, + "node-releases": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.1.tgz", + "integrity": "sha512-CqyzN6z7Q6aMeF/ktcMVTzhAHCEpf8SOarwpzpf8pNBY2k5/oM34UHldUwp8VKI7uxct2HxSRdJjBaZeESzcxA==", + "dev": true + }, + "semver": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", + "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", + "dev": true + }, + "to-regex-range": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-2.1.1.tgz", + "integrity": "sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=", + "dev": true, + "requires": { + "is-number": "^3.0.0", + "repeat-string": "^1.6.1" + } + } + } + }, "jsdom": { "version": "11.12.0", "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-11.12.0.tgz", @@ -23196,9 +23668,9 @@ "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=" }, "picocolors": { - "version": "0.2.1", - "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz", - "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==", + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", + "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==", "dev": true }, "picomatch": { @@ -23392,6 +23864,12 @@ "source-map": "^0.6.1" }, "dependencies": { + "picocolors": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz", + "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==", + "dev": true + }, "source-map": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", @@ -28737,6 +29215,26 @@ } } }, + "temp": { + "version": "0.8.4", + "resolved": "https://registry.npmjs.org/temp/-/temp-0.8.4.tgz", + "integrity": "sha512-s0ZZzd0BzYv5tLSptZooSjK8oj6C+c19p7Vqta9+6NPOf7r+fxq0cJe6/oN4LTC79sy5NY8ucOJNgwsKCSbfqg==", + "dev": true, + "requires": { + "rimraf": "~2.6.2" + }, + "dependencies": { + "rimraf": { + "version": "2.6.3", + "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.3.tgz", + "integrity": "sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==", + "dev": true, + "requires": { + "glob": "^7.1.3" + } + } + } + }, "temp-dir": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/temp-dir/-/temp-dir-2.0.0.tgz", diff --git a/package.json b/package.json index 98135bf2c..92dc521c8 100644 --- a/package.json +++ b/package.json @@ -28,7 +28,7 @@ "@material-ui/icons": "^4.11.2", "@material-ui/lab": "^4.0.0-alpha.58", "@material-ui/styles": "^4.11.4", - "@saleor/macaw-ui": "^0.2.7", + "@saleor/macaw-ui": "^0.3.1-0", "@saleor/sdk": "^0.4.1", "@sentry/react": "^6.0.0", "@types/faker": "^5.1.6", @@ -119,6 +119,7 @@ "@types/enzyme": "^3.10.8", "@types/fuzzaldrin": "^2.1.2", "@types/jest": "^24.0.24", + "@types/jscodeshift": "^0.11.3", "@types/lodash-es": "^4.17.3", "@types/pollyjs__adapter-node-http": "^2.0.1", "@types/pollyjs__persister-fs": "^2.0.1", @@ -163,11 +164,13 @@ "eslint-plugin-simple-import-sort": "^5.0.3", "file-loader": "^5.0.2", "fork-ts-checker-webpack-plugin": "^3.1.1", + "graphql-request": "^3.5.0", "html-webpack-plugin": "^3.2.0", "husky": "^4.3.0", "jest": "^24.8.0", "jest-file": "^1.0.0", "jest-localstorage-mock": "^2.4.3", + "jscodeshift": "^0.13.0", "lint-staged": "^10.5.1", "mock-apollo-client": "^0.4.0", "prettier": "^1.19.1", diff --git a/src/apps/components/AppActivateDialog/AppActivateDialog.tsx b/src/apps/components/AppActivateDialog/AppActivateDialog.tsx index cc5bbaa4a..334912d07 100644 --- a/src/apps/components/AppActivateDialog/AppActivateDialog.tsx +++ b/src/apps/components/AppActivateDialog/AppActivateDialog.tsx @@ -1,6 +1,6 @@ import { DialogContentText } from "@material-ui/core"; import ActionDialog from "@saleor/components/ActionDialog"; -import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton"; +import { ConfirmButtonTransitionState } from "@saleor/macaw-ui"; import { getStringOrPlaceholder } from "@saleor/misc"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; diff --git a/src/apps/components/AppDeactivateDialog/AppDeactivateDialog.tsx b/src/apps/components/AppDeactivateDialog/AppDeactivateDialog.tsx index c8805c0aa..4259cc65d 100644 --- a/src/apps/components/AppDeactivateDialog/AppDeactivateDialog.tsx +++ b/src/apps/components/AppDeactivateDialog/AppDeactivateDialog.tsx @@ -1,6 +1,6 @@ import { DialogContentText } from "@material-ui/core"; import ActionDialog from "@saleor/components/ActionDialog"; -import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton"; +import { ConfirmButtonTransitionState } from "@saleor/macaw-ui"; import { getStringOrPlaceholder } from "@saleor/misc"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; diff --git a/src/apps/components/AppDeleteDialog/AppDeleteDialog.tsx b/src/apps/components/AppDeleteDialog/AppDeleteDialog.tsx index 49cb73296..717f9f34d 100644 --- a/src/apps/components/AppDeleteDialog/AppDeleteDialog.tsx +++ b/src/apps/components/AppDeleteDialog/AppDeleteDialog.tsx @@ -1,6 +1,6 @@ import { DialogContentText } from "@material-ui/core"; import ActionDialog from "@saleor/components/ActionDialog"; -import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton"; +import { ConfirmButtonTransitionState } from "@saleor/macaw-ui"; import { getStringOrPlaceholder } from "@saleor/misc"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; diff --git a/src/apps/components/AppDetailsPage/AppDetailsPage.tsx b/src/apps/components/AppDetailsPage/AppDetailsPage.tsx index 98531f69a..1b46ea55b 100644 --- a/src/apps/components/AppDetailsPage/AppDetailsPage.tsx +++ b/src/apps/components/AppDetailsPage/AppDetailsPage.tsx @@ -1,4 +1,4 @@ -import { Button, Card, CardContent, Typography } from "@material-ui/core"; +import { ButtonBase, Card, CardContent, Typography } from "@material-ui/core"; import CardSpacer from "@saleor/components/CardSpacer"; import CardTitle from "@saleor/components/CardTitle"; import Container from "@saleor/components/Container"; @@ -6,8 +6,9 @@ import ExternalLink from "@saleor/components/ExternalLink"; import PageHeader from "@saleor/components/PageHeader"; import Skeleton from "@saleor/components/Skeleton"; import { sectionNames } from "@saleor/intl"; -import { Backlink } from "@saleor/macaw-ui"; +import { Backlink, Button } from "@saleor/macaw-ui"; import React from "react"; +import SVG from "react-inlinesvg"; import { FormattedMessage, useIntl } from "react-intl"; import ReactMarkdown from "react-markdown"; @@ -51,9 +52,9 @@ export const AppDetailsPage: React.FC = ({ } > + - - + ) : ( diff --git a/src/apps/components/AppDetailsSettingsPage/AppDetailsSettingsPage.tsx b/src/apps/components/AppDetailsSettingsPage/AppDetailsSettingsPage.tsx index cd9755c7e..12546132b 100644 --- a/src/apps/components/AppDetailsSettingsPage/AppDetailsSettingsPage.tsx +++ b/src/apps/components/AppDetailsSettingsPage/AppDetailsSettingsPage.tsx @@ -1,10 +1,10 @@ -import { Button, Typography } from "@material-ui/core"; +import { Typography } from "@material-ui/core"; import CardSpacer from "@saleor/components/CardSpacer"; import Container from "@saleor/components/Container"; import Grid from "@saleor/components/Grid"; import Hr from "@saleor/components/Hr"; import { sectionNames } from "@saleor/intl"; -import { Backlink } from "@saleor/macaw-ui"; +import { Backlink, Button } from "@saleor/macaw-ui"; import classNames from "classnames"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; @@ -61,26 +61,22 @@ export const AppDetailsSettingsPage: React.FC = ({
- - diff --git a/src/apps/components/AppsInProgress/AppsInProgress.tsx b/src/apps/components/AppsInProgress/AppsInProgress.tsx index a6baf331d..3c075bdbf 100644 --- a/src/apps/components/AppsInProgress/AppsInProgress.tsx +++ b/src/apps/components/AppsInProgress/AppsInProgress.tsx @@ -1,16 +1,16 @@ import { - Button, + Card, CircularProgress as Progress, - IconButton, TableBody, TableCell, TableRow, Tooltip, Typography } from "@material-ui/core"; -import DeleteIcon from "@material-ui/icons/Delete"; import ErrorIcon from "@material-ui/icons/Error"; import CardTitle from "@saleor/components/CardTitle"; +import { DeleteIcon, ResponsiveTable } from "@saleor/macaw-ui"; +import { Button, IconButton } from "@saleor/macaw-ui"; import { renderCollection, stopPropagation } from "@saleor/misc"; import classNames from "classnames"; import React from "react"; @@ -19,7 +19,6 @@ import { FormattedMessage, useIntl } from "react-intl"; import { JobStatusEnum } from "../../../types/globalTypes"; import { useStyles } from "../../styles"; import { AppsInstallations_appsInstallations } from "../../types/AppsInstallations"; -import CardContainer from "../CardContainer"; export interface AppsInProgressProps { appsList: AppsInstallations_appsInstallations[]; @@ -39,79 +38,79 @@ const AppsInProgress: React.FC = ({ const classes = useStyles(props); return ( - - } - > - - {renderCollection(appsList, ({ status, appName, id, message }) => ( - - - {appName} - - {status === JobStatusEnum.PENDING && ( - - - - -
- -
+ + + + + {renderCollection(appsList, ({ status, appName, id, message }) => ( + + + {appName} - )} - {status === JobStatusEnum.FAILED && ( - - - - {message}} - classes={{ - tooltip: classes.customTooltip - }} - > - - - - - onRemove(id))} + {status === JobStatusEnum.PENDING && ( + - - - - )} - - ))} - -
+ + + +
+ +
+ + )} + {status === JobStatusEnum.FAILED && ( + + + + {message}} + classes={{ + tooltip: classes.customTooltip + }} + > + + + + + onRemove(id))} + > + + + + )} + + ))} + + + ); }; diff --git a/src/apps/components/AppsListPage/AppsListPage.tsx b/src/apps/components/AppsListPage/AppsListPage.tsx index 6b17f4f01..4754cd277 100644 --- a/src/apps/components/AppsListPage/AppsListPage.tsx +++ b/src/apps/components/AppsListPage/AppsListPage.tsx @@ -1,3 +1,4 @@ +import CardSpacer from "@saleor/components/CardSpacer"; import Container from "@saleor/components/Container"; import PageHeader from "@saleor/components/PageHeader"; import { sectionNames } from "@saleor/intl"; @@ -48,12 +49,15 @@ const AppsListPage: React.FC = ({ {!!appsInProgress?.length && ( - + <> + + + )} = ({ onSettingsRowClick={onSettingsRowClick} {...listProps} /> + + ); diff --git a/src/apps/components/AppsSkeleton/AppsSkeleton.tsx b/src/apps/components/AppsSkeleton/AppsSkeleton.tsx index 9f8ee6566..6799db0da 100644 --- a/src/apps/components/AppsSkeleton/AppsSkeleton.tsx +++ b/src/apps/components/AppsSkeleton/AppsSkeleton.tsx @@ -9,7 +9,7 @@ export const AppsSkeleton = () => { return ( - + diff --git a/src/apps/components/CustomAppCreatePage/CustomAppCreatePage.tsx b/src/apps/components/CustomAppCreatePage/CustomAppCreatePage.tsx index 274d3f4b4..2340eb0ac 100644 --- a/src/apps/components/CustomAppCreatePage/CustomAppCreatePage.tsx +++ b/src/apps/components/CustomAppCreatePage/CustomAppCreatePage.tsx @@ -1,5 +1,4 @@ import AccountPermissions from "@saleor/components/AccountPermissions"; -import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton"; import Container from "@saleor/components/Container"; import Form from "@saleor/components/Form"; import Grid from "@saleor/components/Grid"; @@ -8,6 +7,7 @@ import Savebar from "@saleor/components/Savebar"; import { ShopInfo_shop_permissions } from "@saleor/components/Shop/types/ShopInfo"; import { AppErrorFragment } from "@saleor/fragments/types/AppErrorFragment"; import { sectionNames } from "@saleor/intl"; +import { ConfirmButtonTransitionState } from "@saleor/macaw-ui"; import { Backlink } from "@saleor/macaw-ui"; import { PermissionEnum } from "@saleor/types/globalTypes"; import { getFormErrors } from "@saleor/utils/errors"; diff --git a/src/apps/components/CustomAppDefaultToken/CustomAppDefaultToken.tsx b/src/apps/components/CustomAppDefaultToken/CustomAppDefaultToken.tsx index ab12bfad1..b1a2cd17e 100644 --- a/src/apps/components/CustomAppDefaultToken/CustomAppDefaultToken.tsx +++ b/src/apps/components/CustomAppDefaultToken/CustomAppDefaultToken.tsx @@ -1,14 +1,8 @@ -import { - Button, - Card, - CardContent, - IconButton, - Paper, - Typography -} from "@material-ui/core"; +import { Card, CardContent, Paper, Typography } from "@material-ui/core"; import CloseIcon from "@material-ui/icons/Close"; import Link from "@saleor/components/Link"; import useClipboard from "@saleor/hooks/useClipboard"; +import { Button, IconButton } from "@saleor/macaw-ui"; import React from "react"; import { FormattedMessage } from "react-intl"; @@ -48,7 +42,7 @@ const CustomAppDefaultToken: React.FC = props => {
- +
@@ -58,11 +52,7 @@ const CustomAppDefaultToken: React.FC = props => { {token} - + ) + } + title={intl.formatMessage(commonMessages.customApps)} + /> + + + {renderCollection( + appsList, + (app, index) => + app ? ( + - - - ) - } - title={ - - - - } - /> -
- - } - > - - {renderCollection( - appsList, - (app, index) => - app ? ( - + + + {app.node.name} + + {!app.node.isActive && ( +
+ +
+ )} +
+ + onRemove(app.node.id))} + > + + + +
+ ) : ( + + ), + () => ( + - - {app.node.name} - - {!app.node.isActive && ( -
- -
- )} -
- - onRemove(app.node.id))} - > - - + + +
- ) : ( - - ), - () => ( - - - - - - - - ) - )} -
- + ) + )} +
+
+ ); }; diff --git a/src/apps/components/HorizontalSpacer/HorizontalSpacer.stories.tsx b/src/apps/components/HorizontalSpacer/HorizontalSpacer.stories.tsx index 2bc42bab1..753f33766 100644 --- a/src/apps/components/HorizontalSpacer/HorizontalSpacer.stories.tsx +++ b/src/apps/components/HorizontalSpacer/HorizontalSpacer.stories.tsx @@ -15,7 +15,7 @@ const HelperWrapper: React.FC = ({ children }) => ( const Text: React.FC = () => {"<- The spacer is here"}; -storiesOf("Generic / Horizontal Spacer", module) +storiesOf("Generics / Horizontal Spacer", module) .addDecorator(Decorator) .add("without", () => ( diff --git a/src/apps/components/InstalledApps/InstalledApps.tsx b/src/apps/components/InstalledApps/InstalledApps.tsx index 0df7afaa7..451ff8e1d 100644 --- a/src/apps/components/InstalledApps/InstalledApps.tsx +++ b/src/apps/components/InstalledApps/InstalledApps.tsx @@ -1,15 +1,15 @@ import { - Button, - IconButton, + Card, TableBody, TableCell, TableFooter, TableRow, Typography } from "@material-ui/core"; -import DeleteIcon from "@material-ui/icons/Delete"; import CardTitle from "@saleor/components/CardTitle"; import TablePagination from "@saleor/components/TablePagination"; +import { DeleteIcon, ResponsiveTable } from "@saleor/macaw-ui"; +import { Button, IconButton } from "@saleor/macaw-ui"; import { renderCollection, stopPropagation } from "@saleor/misc"; import { ListProps } from "@saleor/types"; import React from "react"; @@ -18,7 +18,6 @@ import { FormattedMessage, useIntl } from "react-intl"; import { useStyles } from "../../styles"; import { AppsList_apps_edges } from "../../types/AppsList"; import AppsSkeleton from "../AppsSkeleton"; -import CardContainer from "../CardContainer"; import DeactivatedText from "../DeactivatedText"; export interface InstalledAppsProps extends ListProps { @@ -45,17 +44,14 @@ const InstalledApps: React.FC = ({ const classes = useStyles(props); return ( - - } - > - <> + + + = ({ )} - onRemove(app.node.id))} > @@ -126,8 +120,8 @@ const InstalledApps: React.FC = ({ ) )} - - + + ); }; diff --git a/src/apps/components/Marketplace/Marketplace.tsx b/src/apps/components/Marketplace/Marketplace.tsx index 55e9afb81..53f0cf983 100644 --- a/src/apps/components/Marketplace/Marketplace.tsx +++ b/src/apps/components/Marketplace/Marketplace.tsx @@ -1,20 +1,18 @@ -import { Button, Card, CardContent, Typography } from "@material-ui/core"; +import { Card, CardContent, Typography } from "@material-ui/core"; import CardTitle from "@saleor/components/CardTitle"; +import { Button } from "@saleor/macaw-ui"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; -import { useStyles } from "../../styles"; - interface MarketplaceProps { link?: () => void; } const Marketplace: React.FC = ({ link }) => { const intl = useIntl(); - const classes = useStyles({}); return ( -
+
= ({ link }) => { description: "section header" })} /> - + {!!link ? ( <> @@ -31,7 +29,7 @@ const Marketplace: React.FC = ({ link }) => { description="marketplace content" /> - + = props => { ) : ( - )} diff --git a/src/apps/components/TokenDeleteDialog/TokenDeleteDialog.tsx b/src/apps/components/TokenDeleteDialog/TokenDeleteDialog.tsx index fe49227e2..7ba19c4ae 100644 --- a/src/apps/components/TokenDeleteDialog/TokenDeleteDialog.tsx +++ b/src/apps/components/TokenDeleteDialog/TokenDeleteDialog.tsx @@ -1,6 +1,6 @@ import { DialogContentText } from "@material-ui/core"; import ActionDialog from "@saleor/components/ActionDialog"; -import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton"; +import { ConfirmButtonTransitionState } from "@saleor/macaw-ui"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; diff --git a/src/apps/styles.ts b/src/apps/styles.ts index 5d02a2252..e55993ec8 100644 --- a/src/apps/styles.ts +++ b/src/apps/styles.ts @@ -12,8 +12,8 @@ export const useStyles = makeStyles( alignRight: { textAlign: "right" }, - appContainer: { - marginBottom: theme.spacing(3) + apps: { + marginBottom: theme.spacing(4) }, appContent: { "&:last-child": { @@ -37,7 +37,7 @@ export const useStyles = makeStyles( }, colAction: { "&&": { - paddingRight: theme.spacing(1), + paddingRight: theme.spacing(3), textAlign: "right" }, textAlign: "right" @@ -58,6 +58,9 @@ export const useStyles = makeStyles( paddingLeft: theme.spacing(3), paddingRight: theme.spacing(2) }, + customApps: { + marginBottom: theme.spacing(4) + }, customTooltip: { "& > div": { backgroundColor: theme.palette.error.main, @@ -77,10 +80,14 @@ export const useStyles = makeStyles( margin: theme.spacing(0, 1, 0.7, 0) }, headerLinkContainer: { + "& svg": { + marginRight: theme.spacing() + }, "& span": { fontWeight: 500 }, alignItems: "center", + color: theme.palette.text.primary, display: "flex", fontSize: theme.spacing(2), fontWeight: 500, @@ -143,7 +150,8 @@ export const useStyles = makeStyles( color: theme.palette.primary.main, textDecoration: "none" }, - color: theme.palette.text.hint + color: theme.palette.text.hint, + marginTop: theme.spacing(1) }, installSaleorIcon: { backgroundColor: theme.palette.secondary.main, @@ -194,11 +202,6 @@ export const useStyles = makeStyles( text: { color: theme.palette.text.secondary }, - title: { - flex: 1, - fontWeight: 500, - lineHeight: 1 - }, activateButton: { "& img": { marginRight: theme.spacing(1) diff --git a/src/attributes/components/AttributeBulkDeleteDialog/AttributeBulkDeleteDialog.tsx b/src/attributes/components/AttributeBulkDeleteDialog/AttributeBulkDeleteDialog.tsx index 8aabc897b..ec79b529d 100644 --- a/src/attributes/components/AttributeBulkDeleteDialog/AttributeBulkDeleteDialog.tsx +++ b/src/attributes/components/AttributeBulkDeleteDialog/AttributeBulkDeleteDialog.tsx @@ -1,6 +1,6 @@ import { DialogContentText } from "@material-ui/core"; import ActionDialog from "@saleor/components/ActionDialog"; -import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton"; +import { ConfirmButtonTransitionState } from "@saleor/macaw-ui"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; diff --git a/src/attributes/components/AttributeDeleteDialog/AttributeDeleteDialog.tsx b/src/attributes/components/AttributeDeleteDialog/AttributeDeleteDialog.tsx index 9369e3c8a..066c7a876 100644 --- a/src/attributes/components/AttributeDeleteDialog/AttributeDeleteDialog.tsx +++ b/src/attributes/components/AttributeDeleteDialog/AttributeDeleteDialog.tsx @@ -1,6 +1,6 @@ import { DialogContentText } from "@material-ui/core"; import ActionDialog from "@saleor/components/ActionDialog"; -import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton"; +import { ConfirmButtonTransitionState } from "@saleor/macaw-ui"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; diff --git a/src/attributes/components/AttributeListPage/AttributeListPage.tsx b/src/attributes/components/AttributeListPage/AttributeListPage.tsx index 6a772b8a8..88fc6c779 100644 --- a/src/attributes/components/AttributeListPage/AttributeListPage.tsx +++ b/src/attributes/components/AttributeListPage/AttributeListPage.tsx @@ -1,8 +1,8 @@ -import { Button, Card } from "@material-ui/core"; +import { Card } from "@material-ui/core"; import { AttributeListUrlSortField } from "@saleor/attributes/urls"; import FilterBar from "@saleor/components/FilterBar"; import { sectionNames } from "@saleor/intl"; -import { Backlink } from "@saleor/macaw-ui"; +import { Backlink, Button } from "@saleor/macaw-ui"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; @@ -60,8 +60,7 @@ const AttributeListPage: React.FC = ({ + diff --git a/src/attributes/components/AttributeValues/AttributeValues.tsx b/src/attributes/components/AttributeValues/AttributeValues.tsx index e3681801e..6f3840d98 100644 --- a/src/attributes/components/AttributeValues/AttributeValues.tsx +++ b/src/attributes/components/AttributeValues/AttributeValues.tsx @@ -1,13 +1,10 @@ import { - Button, Card, - IconButton, TableCell, TableFooter, TableHead, TableRow } from "@material-ui/core"; -import DeleteIcon from "@material-ui/icons/Delete"; import CardTitle from "@saleor/components/CardTitle"; import ResponsiveTable from "@saleor/components/ResponsiveTable"; import Skeleton from "@saleor/components/Skeleton"; @@ -17,7 +14,7 @@ import { } from "@saleor/components/SortableTable"; import TablePagination from "@saleor/components/TablePagination"; import { AttributeValueListFragment_edges_node } from "@saleor/fragments/types/AttributeValueListFragment"; -import { makeStyles } from "@saleor/macaw-ui"; +import { Button, DeleteIcon, IconButton, makeStyles } from "@saleor/macaw-ui"; import { renderCollection, stopPropagation } from "@saleor/misc"; import { ListProps, ReorderAction } from "@saleor/types"; import { AttributeInputTypeEnum } from "@saleor/types/globalTypes"; @@ -53,10 +50,7 @@ const useStyles = makeStyles( cursor: "grab" }, iconCell: { - "&:last-child": { - paddingRight: theme.spacing() - }, - width: 80 + width: 84 }, link: { cursor: "pointer" @@ -101,8 +95,8 @@ const AttributeValues: React.FC = ({ })} toolbar={
- - - - - - ) - }} - /> - {externalAuthentications.length > 0 && ( <> @@ -173,9 +146,8 @@ const LoginCard: React.FC = props => { diff --git a/src/auth/components/ResetPasswordSuccessPage/ResetPasswordSuccessPage.tsx b/src/auth/components/ResetPasswordSuccessPage/ResetPasswordSuccessPage.tsx index 768665c78..fa0923358 100644 --- a/src/auth/components/ResetPasswordSuccessPage/ResetPasswordSuccessPage.tsx +++ b/src/auth/components/ResetPasswordSuccessPage/ResetPasswordSuccessPage.tsx @@ -1,19 +1,10 @@ -import { Button, Typography } from "@material-ui/core"; +import { Typography } from "@material-ui/core"; import FormSpacer from "@saleor/components/FormSpacer"; -import { makeStyles } from "@saleor/macaw-ui"; +import { Button } from "@saleor/macaw-ui"; import React from "react"; import { FormattedMessage } from "react-intl"; -const useStyles = makeStyles( - { - submit: { - width: "100%" - } - }, - { - name: "ResetPasswordSuccessPage" - } -); +import useStyles from "../styles"; export interface ResetPasswordSuccessPageFormData { email: string; @@ -29,14 +20,16 @@ const ResetPasswordSuccessPage: React.FC = props return ( <> + + + = props => { - + = ({ - )} + {showBackButton && } {variant !== "info" && ( diff --git a/src/components/AppLayout/AppChannelSelect.tsx b/src/components/AppLayout/AppChannelSelect.tsx index 023758bc7..9942438ba 100644 --- a/src/components/AppLayout/AppChannelSelect.tsx +++ b/src/components/AppLayout/AppChannelSelect.tsx @@ -8,6 +8,9 @@ import SingleSelectField from "../SingleSelectField"; const useStyles = makeStyles( theme => ({ + input: { + height: 40 + }, root: { "&& fieldset": { borderColor: theme.palette.divider @@ -36,6 +39,9 @@ const AppChannelSelect: React.FC = ({ return (
= ({ children }) => {
{isMdUp && ( @@ -226,6 +226,7 @@ const AppLayout: React.FC = ({ children }) => { window.location.reload()} /> ) : children} diff --git a/src/components/AppLayout/menuStructure.ts b/src/components/AppLayout/menuStructure.ts index 63e47f5a6..68c651e27 100644 --- a/src/components/AppLayout/menuStructure.ts +++ b/src/components/AppLayout/menuStructure.ts @@ -5,6 +5,7 @@ import customerIcon from "@assets/images/menu-customers-icon.svg"; import discountsIcon from "@assets/images/menu-discounts-icon.svg"; import homeIcon from "@assets/images/menu-home-icon.svg"; import ordersIcon from "@assets/images/menu-orders-icon.svg"; +import pagesIcon from "@assets/images/menu-pages-icon.svg"; import translationIcon from "@assets/images/menu-translation-icon.svg"; import { configurationMenuUrl } from "@saleor/configuration"; import { getConfigMenuItemsPermissions } from "@saleor/configuration/utils"; @@ -12,6 +13,7 @@ import { User } from "@saleor/fragments/types/User"; import { giftCardListUrl } from "@saleor/giftCards/urls"; import { commonMessages, sectionNames } from "@saleor/intl"; import { SidebarMenuItem } from "@saleor/macaw-ui"; +import { pageListPath } from "@saleor/pages/urls"; import { IntlShape } from "react-intl"; import { appsListPath } from "../../apps/urls"; @@ -131,6 +133,14 @@ function createMenuStructure(intl: IntlShape, user: User): SidebarMenuItem[] { permissions: [PermissionEnum.MANAGE_DISCOUNTS], id: "discounts" }, + { + ariaLabel: "pages", + iconSrc: pagesIcon, + label: intl.formatMessage(sectionNames.pages), + permissions: [PermissionEnum.MANAGE_PAGES], + id: "pages", + url: pageListPath + }, { ariaLabel: "apps", iconSrc: appsIcon, diff --git a/src/components/AssignAttributeDialog/AssignAttributeDialog.tsx b/src/components/AssignAttributeDialog/AssignAttributeDialog.tsx index a61ab0911..7c4815d9d 100644 --- a/src/components/AssignAttributeDialog/AssignAttributeDialog.tsx +++ b/src/components/AssignAttributeDialog/AssignAttributeDialog.tsx @@ -1,5 +1,4 @@ import { - Button, CircularProgress, Dialog, DialogActions, @@ -13,9 +12,7 @@ import { Typography } from "@material-ui/core"; import Checkbox from "@saleor/components/Checkbox"; -import ConfirmButton, { - ConfirmButtonTransitionState -} from "@saleor/components/ConfirmButton"; +import ConfirmButton from "@saleor/components/ConfirmButton"; import ResponsiveTable from "@saleor/components/ResponsiveTable"; import { AvailableAttributeFragment } from "@saleor/fragments/types/AvailableAttributeFragment"; import useElementScroll, { @@ -24,8 +21,7 @@ import useElementScroll, { import useModalDialogErrors from "@saleor/hooks/useModalDialogErrors"; import useModalDialogOpen from "@saleor/hooks/useModalDialogOpen"; import useSearchQuery from "@saleor/hooks/useSearchQuery"; -import { buttonMessages } from "@saleor/intl"; -import { makeStyles } from "@saleor/macaw-ui"; +import { ConfirmButtonTransitionState, makeStyles } from "@saleor/macaw-ui"; import { maybe, renderCollection } from "@saleor/misc"; import { FetchMoreProps } from "@saleor/types"; import classNames from "classnames"; @@ -33,6 +29,7 @@ import React from "react"; import InfiniteScroll from "react-infinite-scroll-component"; import { FormattedMessage, useIntl } from "react-intl"; +import BackButton from "../BackButton"; import { messages } from "./messages"; const useStyles = makeStyles( @@ -52,6 +49,7 @@ const useStyles = makeStyles( loadMoreLoaderContainer: { alignItems: "center", display: "flex", + marginTop: theme.spacing(2), height: theme.spacing(3), justifyContent: "center" }, @@ -148,7 +146,7 @@ const AssignAttributeDialog: React.FC = ({ id={scrollableTargetId} > = ({ [classes.dropShadow]: !isScrolledToBottom(anchor, position) })} > - + diff --git a/src/components/AssignContainerDialog/AssignContainerDialog.tsx b/src/components/AssignContainerDialog/AssignContainerDialog.tsx index 26584b2b9..969028094 100644 --- a/src/components/AssignContainerDialog/AssignContainerDialog.tsx +++ b/src/components/AssignContainerDialog/AssignContainerDialog.tsx @@ -1,5 +1,4 @@ import { - Button, CircularProgress, Dialog, DialogActions, @@ -12,15 +11,16 @@ import { } from "@material-ui/core"; import ResponsiveTable from "@saleor/components/ResponsiveTable"; import useSearchQuery from "@saleor/hooks/useSearchQuery"; -import { buttonMessages } from "@saleor/intl"; +import { ConfirmButtonTransitionState } from "@saleor/macaw-ui"; import useScrollableDialogStyle from "@saleor/styles/useScrollableDialogStyle"; import { DialogProps, FetchMoreProps, Node } from "@saleor/types"; import React from "react"; import InfiniteScroll from "react-infinite-scroll-component"; import { FormattedMessage } from "react-intl"; +import BackButton from "../BackButton"; import Checkbox from "../Checkbox"; -import ConfirmButton, { ConfirmButtonTransitionState } from "../ConfirmButton"; +import ConfirmButton from "../ConfirmButton"; import { messages } from "./messages"; import { useStyles } from "./styles"; @@ -162,13 +162,9 @@ const AssignContainerDialog: React.FC = props => { - + diff --git a/src/components/AssignProductDialog/AssignProductDialog.tsx b/src/components/AssignProductDialog/AssignProductDialog.tsx index dcc640211..52811292b 100644 --- a/src/components/AssignProductDialog/AssignProductDialog.tsx +++ b/src/components/AssignProductDialog/AssignProductDialog.tsx @@ -1,5 +1,4 @@ import { - Button, CircularProgress, Dialog, DialogActions, @@ -10,13 +9,11 @@ import { TableRow, TextField } from "@material-ui/core"; -import ConfirmButton, { - ConfirmButtonTransitionState -} from "@saleor/components/ConfirmButton"; +import ConfirmButton from "@saleor/components/ConfirmButton"; import ResponsiveTable from "@saleor/components/ResponsiveTable"; import TableCellAvatar from "@saleor/components/TableCellAvatar"; import useSearchQuery from "@saleor/hooks/useSearchQuery"; -import { buttonMessages } from "@saleor/intl"; +import { ConfirmButtonTransitionState } from "@saleor/macaw-ui"; import { maybe } from "@saleor/misc"; import { SearchProducts_search_edges_node } from "@saleor/searches/types/SearchProducts"; import useScrollableDialogStyle from "@saleor/styles/useScrollableDialogStyle"; @@ -25,6 +22,7 @@ import React from "react"; import InfiniteScroll from "react-infinite-scroll-component"; import { FormattedMessage, useIntl } from "react-intl"; +import BackButton from "../BackButton"; import Checkbox from "../Checkbox"; import { messages } from "./messages"; import { useStyles } from "./styles"; @@ -165,14 +163,10 @@ const AssignProductDialog: React.FC = props => { - + diff --git a/src/components/AssignVariantDialog/AssignVariantDialog.tsx b/src/components/AssignVariantDialog/AssignVariantDialog.tsx index 77b57ccd7..9b9d89ded 100644 --- a/src/components/AssignVariantDialog/AssignVariantDialog.tsx +++ b/src/components/AssignVariantDialog/AssignVariantDialog.tsx @@ -1,5 +1,4 @@ import { - Button, CircularProgress, Dialog, DialogActions, @@ -10,14 +9,12 @@ import { TableRow, TextField } from "@material-ui/core"; -import ConfirmButton, { - ConfirmButtonTransitionState -} from "@saleor/components/ConfirmButton"; +import ConfirmButton from "@saleor/components/ConfirmButton"; import Money from "@saleor/components/Money"; import ResponsiveTable from "@saleor/components/ResponsiveTable"; import TableCellAvatar from "@saleor/components/TableCellAvatar"; import useSearchQuery from "@saleor/hooks/useSearchQuery"; -import { buttonMessages } from "@saleor/intl"; +import { ConfirmButtonTransitionState } from "@saleor/macaw-ui"; import { maybe, renderCollection } from "@saleor/misc"; import { getById, @@ -33,6 +30,7 @@ import React from "react"; import InfiniteScroll from "react-infinite-scroll-component"; import { FormattedMessage, useIntl } from "react-intl"; +import BackButton from "../BackButton"; import Checkbox from "../Checkbox"; import { messages } from "./messages"; import { useStyles } from "./styles"; @@ -280,14 +278,10 @@ const AssignVariantDialog: React.FC = props => { - + diff --git a/src/components/AttributeUnassignDialog/AttributeUnassignDialog.tsx b/src/components/AttributeUnassignDialog/AttributeUnassignDialog.tsx index ca4ed6844..0db0de3fa 100644 --- a/src/components/AttributeUnassignDialog/AttributeUnassignDialog.tsx +++ b/src/components/AttributeUnassignDialog/AttributeUnassignDialog.tsx @@ -1,6 +1,6 @@ import { DialogContentText } from "@material-ui/core"; import ActionDialog from "@saleor/components/ActionDialog"; -import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton"; +import { ConfirmButtonTransitionState } from "@saleor/macaw-ui"; import React from "react"; import { FormattedMessage } from "react-intl"; diff --git a/src/components/Attributes/Attributes.tsx b/src/components/Attributes/Attributes.tsx index c5b6812db..3f8c5e367 100644 --- a/src/components/Attributes/Attributes.tsx +++ b/src/components/Attributes/Attributes.tsx @@ -1,4 +1,4 @@ -import { Card, CardContent, IconButton, Typography } from "@material-ui/core"; +import { Card, CardContent, Typography } from "@material-ui/core"; import ArrowDropDownIcon from "@material-ui/icons/ArrowDropDown"; import { AttributeReference } from "@saleor/attributes/utils/data"; import CardTitle from "@saleor/components/CardTitle"; @@ -7,7 +7,7 @@ import { AttributeValueFragment } from "@saleor/fragments/types/AttributeValueFr import { PageErrorWithAttributesFragment } from "@saleor/fragments/types/PageErrorWithAttributesFragment"; import { ProductErrorWithAttributesFragment } from "@saleor/fragments/types/ProductErrorWithAttributesFragment"; import { FormsetAtomicData } from "@saleor/hooks/useFormset"; -import { makeStyles } from "@saleor/macaw-ui"; +import { IconButton, makeStyles } from "@saleor/macaw-ui"; import { FetchMoreProps } from "@saleor/types"; import { AttributeEntityTypeEnum, @@ -65,7 +65,7 @@ const useStyles = makeStyles( }, cardContent: { "&:last-child": { - paddingBottom: theme.spacing(1) + paddingBottom: theme.spacing(2) }, paddingTop: theme.spacing(1) }, @@ -143,6 +143,7 @@ const Attributes: React.FC = ({
= ({
diff --git a/src/components/Attributes/ExtendedAttributeRow.tsx b/src/components/Attributes/ExtendedAttributeRow.tsx index 013741a4f..a6b866cc7 100644 --- a/src/components/Attributes/ExtendedAttributeRow.tsx +++ b/src/components/Attributes/ExtendedAttributeRow.tsx @@ -1,6 +1,6 @@ -import { Button, Typography } from "@material-ui/core"; +import { Typography } from "@material-ui/core"; import Grid from "@saleor/components/Grid"; -import { makeStyles } from "@saleor/macaw-ui"; +import { Button, makeStyles } from "@saleor/macaw-ui"; import React from "react"; const useStyles = makeStyles( @@ -46,8 +46,7 @@ const ExtendedAttributeRow: React.FC = props => { +); + +BackButton.displayName = "BackButton"; +export default BackButton; diff --git a/src/components/BulkAttributeUnassignDialog/BulkAttributeUnassignDialog.tsx b/src/components/BulkAttributeUnassignDialog/BulkAttributeUnassignDialog.tsx index 009233ece..c9799a1a3 100644 --- a/src/components/BulkAttributeUnassignDialog/BulkAttributeUnassignDialog.tsx +++ b/src/components/BulkAttributeUnassignDialog/BulkAttributeUnassignDialog.tsx @@ -1,6 +1,6 @@ import { DialogContentText } from "@material-ui/core"; import ActionDialog from "@saleor/components/ActionDialog"; -import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton"; +import { ConfirmButtonTransitionState } from "@saleor/macaw-ui"; import React from "react"; import { FormattedMessage } from "react-intl"; diff --git a/src/components/CardMenu/CardMenu.tsx b/src/components/CardMenu/CardMenu.tsx index 2075ef5b0..386099524 100644 --- a/src/components/CardMenu/CardMenu.tsx +++ b/src/components/CardMenu/CardMenu.tsx @@ -2,18 +2,15 @@ import { CircularProgress, ClickAwayListener, Grow, - IconButton, MenuItem, MenuList, Paper, Popper, Typography } from "@material-ui/core"; -import MoreVertIcon from "@material-ui/icons/MoreVert"; -import { makeStyles } from "@saleor/macaw-ui"; +import { IconButton, makeStyles, MoreIcon } from "@saleor/macaw-ui"; import classNames from "classnames"; -import * as React from "react"; -import { useEffect, useRef, useState } from "react"; +import React, { useEffect, useRef, useState } from "react"; import { FormattedMessage } from "react-intl"; import { cardMenuMessages as messages } from "./messages"; @@ -33,6 +30,7 @@ export interface CardMenuProps { className?: string; disabled?: boolean; menuItems: CardMenuItem[]; + outlined?: boolean; } const useStyles = makeStyles( @@ -65,7 +63,7 @@ const useStyles = makeStyles( ); const CardMenu: React.FC = props => { - const { className, disabled, menuItems, ...rest } = props; + const { className, disabled, menuItems, outlined, ...rest } = props; const classes = useStyles(props); const anchorRef = useRef(null); @@ -128,13 +126,13 @@ const CardMenu: React.FC = props => { aria-label="More" aria-owns={open ? "long-menu" : null} aria-haspopup="true" - className={classes.iconButton} color="primary" disabled={disabled} ref={anchorRef} onClick={handleToggle} + variant={outlined ? "primary" : "secondary"} > - + = props => { overflowY: "auto" }} > - + ({ spacer: { [theme.breakpoints.down("sm")]: { - marginTop: theme.spacing(1) + marginTop: theme.spacing(2) }, - marginTop: theme.spacing(3) + marginTop: theme.spacing(4) } }), { name: "CardSpacer" } diff --git a/src/components/CardTitle/CardTitle.tsx b/src/components/CardTitle/CardTitle.tsx index f2d77d9b1..2fc69d778 100644 --- a/src/components/CardTitle/CardTitle.tsx +++ b/src/components/CardTitle/CardTitle.tsx @@ -1,42 +1,6 @@ -import { Typography } from "@material-ui/core"; -import { makeStyles } from "@saleor/macaw-ui"; -import classNames from "classnames"; +import { CardHeader } from "@material-ui/core"; import React from "react"; -const useStyles = makeStyles( - theme => ({ - children: theme.mixins.gutters({}), - constantHeight: { - height: 56 - }, - hr: { - border: "none", - borderTop: `1px solid ${theme.palette.divider}`, - height: 0, - marginBottom: 0, - marginTop: 0, - width: "100%" - }, - root: theme.mixins.gutters({ - alignItems: "center", - display: "flex", - minHeight: 56 - }), - title: { - flex: 1, - fontWeight: 500, - lineHeight: 1 - }, - subtitle: { - fontWeight: 400 - }, - toolbar: { - marginRight: theme.spacing(-1) - } - }), - { name: "CardTitle" } -); - interface CardTitleProps { children?: React.ReactNode; className?: string; @@ -47,43 +11,26 @@ interface CardTitleProps { onClick?: (event: React.MouseEvent) => void; } -const CardTitle: React.FC = props => { - const { - className, - children, - height, - title, - subtitle, - toolbar, - onClick, - ...rest - } = props; +const CardTitle: React.FC = ({ + className, + children, + height, + title, + subtitle, + toolbar, + onClick, + ...rest +}) => ( + + {children} + +); - const classes = useStyles(props); - - return ( - <> -
- - {title} - -
{toolbar}
-
-
{children}
-
- - ); -}; CardTitle.displayName = "CardTitle"; export default CardTitle; diff --git a/src/components/ChannelsAvailability/styles.ts b/src/components/ChannelsAvailability/styles.ts index 858759635..783ad89b5 100644 --- a/src/components/ChannelsAvailability/styles.ts +++ b/src/components/ChannelsAvailability/styles.ts @@ -47,14 +47,10 @@ export const useStyles = makeStyles( marginTop: theme.spacing(1) }, hr: { - left: theme.spacing(-3), - position: "relative", - width: `calc(100% + ${theme.spacing(6)}px)` + position: "relative" }, label: { - lineHeight: 1.2, - marginBottom: 5, - marginTop: 0 + lineHeight: 1.2 }, listingLabel: { marginTop: 9 diff --git a/src/components/ChannelsAvailabilityCard/Channel/ChannelAvailabilityItemContent.tsx b/src/components/ChannelsAvailabilityCard/Channel/ChannelAvailabilityItemContent.tsx index 138474313..3def5a23e 100644 --- a/src/components/ChannelsAvailabilityCard/Channel/ChannelAvailabilityItemContent.tsx +++ b/src/components/ChannelsAvailabilityCard/Channel/ChannelAvailabilityItemContent.tsx @@ -73,6 +73,9 @@ const ChannelContent: React.FC = ({ return (
= ({ <>
({ - ...prevVal, - [currVal.id]: { - availableLabel: "Available", - availableSecondLabel: "Will become available", - hiddenSecondLabel: "Will become published" - } - }), - {} as Messages - )} + messages={{ + availableLabel: "Available", + availableSecondLabel: "Will become available", + unavailableLabel: "Lorem Ipsum", + visibleSecondLabel: "Dolor Sit Amet", + hiddenSecondLabel: "Will become published", + hiddenLabel: "Hidden", + visibleLabel: "Visible", + availableDateText: "available from 07/30/2020", + setAvailabilityDateLabel: "xd4" + }} /> )); diff --git a/src/components/ChannelsAvailabilityCard/ChannelsAvailabilityCardWrapper.tsx b/src/components/ChannelsAvailabilityCard/ChannelsAvailabilityCardWrapper.tsx index 63737502b..7b976a627 100644 --- a/src/components/ChannelsAvailabilityCard/ChannelsAvailabilityCardWrapper.tsx +++ b/src/components/ChannelsAvailabilityCard/ChannelsAvailabilityCardWrapper.tsx @@ -1,8 +1,9 @@ -import { Button, Card, CardContent, Typography } from "@material-ui/core"; +import { Card, CardContent, Typography } from "@material-ui/core"; import { useUser } from "@saleor/auth"; import CardTitle from "@saleor/components/CardTitle"; import Hr from "@saleor/components/Hr"; import RequirePermissions from "@saleor/components/RequirePermissions"; +import { Button } from "@saleor/macaw-ui"; import { PermissionEnum } from "@saleor/types/globalTypes"; import React from "react"; import { useIntl } from "react-intl"; @@ -55,7 +56,6 @@ export const ChannelsAvailabilityWrapper: React.FC
-
diff --git a/src/components/ConfirmButton.tsx b/src/components/ConfirmButton.tsx index 7f117d6db..d31bed0e9 100644 --- a/src/components/ConfirmButton.tsx +++ b/src/components/ConfirmButton.tsx @@ -6,7 +6,6 @@ import { } from "@saleor/macaw-ui"; import React from "react"; import { useIntl } from "react-intl"; -export { ConfirmButtonTransitionState } from "@saleor/macaw-ui"; export interface ConfirmButtonProps extends Omit { diff --git a/src/components/CountryList/CountryList.tsx b/src/components/CountryList/CountryList.tsx index 0903d5006..8f89ce6e4 100644 --- a/src/components/CountryList/CountryList.tsx +++ b/src/components/CountryList/CountryList.tsx @@ -1,19 +1,10 @@ -import { - Button, - Card, - CardContent, - IconButton, - TableBody, - TableCell, - TableRow -} from "@material-ui/core"; +import { Card, TableBody, TableCell, TableRow } from "@material-ui/core"; import ArrowDropDownIcon from "@material-ui/icons/ArrowDropDown"; -import DeleteIcon from "@material-ui/icons/Delete"; import CardTitle from "@saleor/components/CardTitle"; import ResponsiveTable from "@saleor/components/ResponsiveTable"; import Skeleton from "@saleor/components/Skeleton"; import { CountryFragment } from "@saleor/fragments/types/CountryFragment"; -import { makeStyles } from "@saleor/macaw-ui"; +import { Button, DeleteIcon, IconButton, makeStyles } from "@saleor/macaw-ui"; import classNames from "classnames"; import React from "react"; import { FormattedMessage } from "react-intl"; @@ -33,9 +24,9 @@ const useStyles = makeStyles( theme => ({ iconCell: { "&:last-child": { - paddingRight: 0 + paddingRight: theme.spacing(2) }, - width: `calc(48px + ${theme.spacing(2)})` + width: `calc(48px + ${theme.spacing(4)})` }, indicator: { color: theme.palette.text.disabled, @@ -101,7 +92,6 @@ const CountryList: React.FC = props => { title={title} toolbar={ } /> - - - - - - + + + + + + + + - - - - - - - - {!isCollapsed && - renderCollection( - sortCountries(countries), - (country, countryIndex) => ( - - - {maybe( - () => ( - <> - {(countryIndex === 0 || - countries[countryIndex].country[0] !== - countries[countryIndex - 1].country[0]) && ( - - {country.country[0]} - - )} - {country.country} - - ), - - )} - - + + + {!isCollapsed && + renderCollection( + sortCountries(countries), + (country, countryIndex) => ( + + + {maybe( + () => ( + <> + {(countryIndex === 0 || + countries[countryIndex].country[0] !== + countries[countryIndex - 1].country[0]) && ( + + {country.country[0]} + + )} + {country.country} + + ), + + )} + + + onCountryUnassign(country.code)} > - onCountryUnassign(country.code)} - > - - - - - ), - () => ( - - - {emptyText} - - - ) - )} - - - + + + + + ), + () => ( + + + {emptyText} + + + ) + )} + + ); }; diff --git a/src/components/DeletableItem/DeletableItem.tsx b/src/components/DeletableItem/DeletableItem.tsx index ed28b6a11..317f78da9 100644 --- a/src/components/DeletableItem/DeletableItem.tsx +++ b/src/components/DeletableItem/DeletableItem.tsx @@ -1,34 +1,18 @@ -import { makeStyles } from "@material-ui/core/styles"; -import TrashIcon from "@saleor/icons/Trash"; +import { DeleteIcon, IconButton } from "@saleor/macaw-ui"; import React from "react"; -const useStyles = makeStyles( - theme => ({ - container: { - cursor: "pointer", - padding: theme.spacing(3), - display: "flex", - justifyContent: "center", - alignItems: "center" - } - }), - { name: "DeletableItem" } -); - interface DeletableItemProps { onDelete: (id: string) => void; id: string; } const DeletableItem: React.FC = ({ onDelete, id }) => { - const classes = useStyles({}); - const handleDelete = () => onDelete(id); return ( -
- -
+ + + ); }; diff --git a/src/components/DeleteButton/DeleteButton.tsx b/src/components/DeleteButton/DeleteButton.tsx index 406f6e900..f46b3b09f 100644 --- a/src/components/DeleteButton/DeleteButton.tsx +++ b/src/components/DeleteButton/DeleteButton.tsx @@ -1,6 +1,5 @@ -import { Button } from "@material-ui/core"; import { buttonMessages } from "@saleor/intl"; -import { makeStyles } from "@saleor/macaw-ui"; +import { Button, makeStyles } from "@saleor/macaw-ui"; import React from "react"; import { useIntl } from "react-intl"; @@ -33,7 +32,7 @@ const DeleteButton: React.FC = ({ return ( +
+ +
+
-
- -
); diff --git a/src/components/ErrorPage/messages.ts b/src/components/ErrorPage/messages.ts new file mode 100644 index 000000000..07db51225 --- /dev/null +++ b/src/components/ErrorPage/messages.ts @@ -0,0 +1,26 @@ +import { defineMessages } from "react-intl"; + +const messages = defineMessages({ + header: { + defaultMessage: "We’ve encountered an unexpected error" + }, + content: { + defaultMessage: + "Don’t worry we will fix it soon. Try to refresh the page or go back to dashboard." + }, + btnDashboard: { + defaultMessage: "Dashboard", + description: "button linking to dashboard" + }, + btnRefresh: { + defaultMessage: "Refresh page", + description: "button refreshing page" + }, + or: { + defaultMessage: "or", + description: + "conjunction, choice between going to dashboard or refreshing page" + } +}); + +export default messages; diff --git a/src/components/ErrorPage/styles.ts b/src/components/ErrorPage/styles.ts new file mode 100644 index 000000000..f0a2f73cb --- /dev/null +++ b/src/components/ErrorPage/styles.ts @@ -0,0 +1,54 @@ +import { makeStyles } from "@saleor/macaw-ui"; + +const useStyles = makeStyles( + theme => ({ + buttonContainer: { + marginTop: theme.spacing(2) + }, + container: { + [theme.breakpoints.down("sm")]: { + gridTemplateColumns: "1fr", + padding: theme.spacing(3), + width: "100%" + }, + display: "grid", + gridTemplateColumns: "1fr 487px", + margin: "0 auto", + gap: theme.spacing(5), + width: `calc(480px * 2 + ${theme.spacing(5)})` + }, + conjunction: { + display: "inline-block", + margin: theme.spacing(0, 1) + }, + errorId: { + marginTop: theme.spacing(3), + letterSpacing: "0.1rem", + textTransform: "uppercase", + fontWeight: 500 + }, + innerContainer: { + [theme.breakpoints.down("sm")]: { + order: 1, + textAlign: "center" + }, + display: "flex", + flexDirection: "column", + justifyContent: "center" + }, + notFoundImage: { + width: "100%" + }, + root: { + alignItems: "center", + display: "flex", + height: "calc(100vh - 180px)" + }, + header: { + marginBottom: theme.spacing(2) + } + }), + { name: "ErrorPage" } +); + +export default useStyles; diff --git a/src/components/FileUploadField/FileUploadField.tsx b/src/components/FileUploadField/FileUploadField.tsx index c3c7760bb..016bbffe9 100644 --- a/src/components/FileUploadField/FileUploadField.tsx +++ b/src/components/FileUploadField/FileUploadField.tsx @@ -1,8 +1,7 @@ -import { Button, IconButton, Typography } from "@material-ui/core"; -import DeleteIcon from "@material-ui/icons/Delete"; +import { Typography } from "@material-ui/core"; import { FileFragment } from "@saleor/fragments/types/FileFragment"; import { commonMessages } from "@saleor/intl"; -import { makeStyles } from "@saleor/macaw-ui"; +import { Button, DeleteIcon, IconButton, makeStyles } from "@saleor/macaw-ui"; import React from "react"; import { useIntl } from "react-intl"; @@ -102,6 +101,7 @@ const FileUploadField: React.FC = props => { )} = props => { - diff --git a/src/components/FilterBar/FilterBar.tsx b/src/components/FilterBar/FilterBar.tsx index 908004090..61cff2f3d 100644 --- a/src/components/FilterBar/FilterBar.tsx +++ b/src/components/FilterBar/FilterBar.tsx @@ -1,5 +1,4 @@ -import { Button } from "@material-ui/core"; -import { makeStyles } from "@saleor/macaw-ui"; +import { Button, makeStyles } from "@saleor/macaw-ui"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; @@ -23,12 +22,12 @@ const useStyles = makeStyles( borderBottom: `1px solid ${theme.palette.divider}`, display: "flex", flexWrap: "wrap", - padding: theme.spacing(1, 3) + padding: theme.spacing(1, 4) }, tabActionButton: { marginLeft: theme.spacing(2), - paddingLeft: theme.spacing(3), - paddingRight: theme.spacing(3) + paddingLeft: theme.spacing(4), + paddingRight: theme.spacing(4) } }), { @@ -100,11 +99,7 @@ const FilterBar: React.FC = props => { /> {displayTabAction && (displayTabAction === "save" ? ( - ) : ( displayTabAction === "delete" && ( - + diff --git a/src/components/SearchBar/SearchBar.tsx b/src/components/SearchBar/SearchBar.tsx index bda926d19..d1304ccd9 100644 --- a/src/components/SearchBar/SearchBar.tsx +++ b/src/components/SearchBar/SearchBar.tsx @@ -1,5 +1,4 @@ -import { Button } from "@material-ui/core"; -import { makeStyles } from "@saleor/macaw-ui"; +import { Button, makeStyles } from "@saleor/macaw-ui"; import { SearchPageProps, TabPageProps } from "@saleor/types"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; @@ -18,7 +17,7 @@ const useStyles = makeStyles( borderBottom: `1px solid ${theme.palette.divider}`, display: "flex", flexWrap: "wrap", - padding: theme.spacing(1, 3) + padding: theme.spacing(1, 4) }, tabActionButton: { marginLeft: theme.spacing(2), @@ -83,11 +82,7 @@ const SearchBar: React.FC = props => { /> {displayTabAction && (displayTabAction === "save" ? ( - ) : ( displayTabAction === "delete" && ( - + diff --git a/src/customers/components/CustomerAddressListPage/CustomerAddressListPage.tsx b/src/customers/components/CustomerAddressListPage/CustomerAddressListPage.tsx index 0fc198d96..dce09bc3c 100644 --- a/src/customers/components/CustomerAddressListPage/CustomerAddressListPage.tsx +++ b/src/customers/components/CustomerAddressListPage/CustomerAddressListPage.tsx @@ -1,7 +1,7 @@ -import { Button, Typography } from "@material-ui/core"; +import { Typography } from "@material-ui/core"; import Container from "@saleor/components/Container"; import PageHeader from "@saleor/components/PageHeader"; -import { Backlink } from "@saleor/macaw-ui"; +import { Backlink, Button } from "@saleor/macaw-ui"; import { makeStyles } from "@saleor/macaw-ui"; import { getStringOrPlaceholder, renderCollection } from "@saleor/misc"; import React from "react"; @@ -110,12 +110,7 @@ const CustomerAddressListPage: React.FC = props => : intl.formatMessage(messages.noNameToShow) } > - @@ -130,8 +125,7 @@ const CustomerAddressListPage: React.FC = props => } @@ -137,13 +135,14 @@ const DiscountCategories: React.FC = props => { { event.stopPropagation(); onCategoryUnassign(category.id); }} > - + diff --git a/src/discounts/components/DiscountCategories/styles.ts b/src/discounts/components/DiscountCategories/styles.ts index 80c0940ad..3b9bc9aa7 100644 --- a/src/discounts/components/DiscountCategories/styles.ts +++ b/src/discounts/components/DiscountCategories/styles.ts @@ -3,10 +3,7 @@ import { makeStyles } from "@saleor/macaw-ui"; export const useStyles = makeStyles( { colActions: { - "&:last-child": { - paddingRight: 0 - }, - width: 80 + width: 84 }, colName: { width: "auto" diff --git a/src/discounts/components/DiscountCollections/DiscountCollections.tsx b/src/discounts/components/DiscountCollections/DiscountCollections.tsx index 36e945409..3da06cd05 100644 --- a/src/discounts/components/DiscountCollections/DiscountCollections.tsx +++ b/src/discounts/components/DiscountCollections/DiscountCollections.tsx @@ -1,19 +1,17 @@ import { - Button, Card, - IconButton, TableBody, TableCell, TableFooter, TableRow } from "@material-ui/core"; -import DeleteIcon from "@material-ui/icons/Delete"; import CardTitle from "@saleor/components/CardTitle"; import Checkbox from "@saleor/components/Checkbox"; import ResponsiveTable from "@saleor/components/ResponsiveTable"; import Skeleton from "@saleor/components/Skeleton"; import TableHead from "@saleor/components/TableHead"; import TablePagination from "@saleor/components/TablePagination"; +import { Button, DeleteIcon, IconButton } from "@saleor/macaw-ui"; import { mapEdgesToItems } from "@saleor/utils/maps"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; @@ -58,7 +56,7 @@ const DiscountCollections: React.FC = props => { + } @@ -138,13 +136,14 @@ const DiscountCollections: React.FC = props => { { event.stopPropagation(); onCollectionUnassign(collection.id); }} > - + diff --git a/src/discounts/components/DiscountCollections/styles.ts b/src/discounts/components/DiscountCollections/styles.ts index 90cbe9be6..62db755e1 100644 --- a/src/discounts/components/DiscountCollections/styles.ts +++ b/src/discounts/components/DiscountCollections/styles.ts @@ -3,10 +3,7 @@ import { makeStyles } from "@saleor/macaw-ui"; export const useStyles = makeStyles( { colActions: { - "&:last-child": { - paddingRight: 0 - }, - width: 80 + width: 84 }, colName: { width: "auto" diff --git a/src/discounts/components/DiscountCountrySelectDialog/DiscountCountrySelectDialog.tsx b/src/discounts/components/DiscountCountrySelectDialog/DiscountCountrySelectDialog.tsx index 58fe83a7e..aabffac84 100644 --- a/src/discounts/components/DiscountCountrySelectDialog/DiscountCountrySelectDialog.tsx +++ b/src/discounts/components/DiscountCountrySelectDialog/DiscountCountrySelectDialog.tsx @@ -1,5 +1,4 @@ import { - Button, Dialog, DialogActions, DialogContent, @@ -10,17 +9,15 @@ import { TextField, Typography } from "@material-ui/core"; +import BackButton from "@saleor/components/BackButton"; import Checkbox from "@saleor/components/Checkbox"; -import ConfirmButton, { - ConfirmButtonTransitionState -} from "@saleor/components/ConfirmButton"; +import ConfirmButton from "@saleor/components/ConfirmButton"; import Form from "@saleor/components/Form"; import FormSpacer from "@saleor/components/FormSpacer"; import Hr from "@saleor/components/Hr"; import ResponsiveTable from "@saleor/components/ResponsiveTable"; -// tslint:disable no-submodule-imports import { ShopInfo_shop_countries } from "@saleor/components/Shop/types/ShopInfo"; -import { buttonMessages } from "@saleor/intl"; +import { ConfirmButtonTransitionState } from "@saleor/macaw-ui"; import useScrollableDialogStyle from "@saleor/styles/useScrollableDialogStyle"; import { filter } from "fuzzaldrin"; import React from "react"; @@ -160,13 +157,9 @@ const DiscountCountrySelectDialog: React.FC = - + = props => { + } @@ -165,13 +159,14 @@ const DiscountProducts: React.FC = props => { { event.stopPropagation(); onProductUnassign(product.id); }} > - + diff --git a/src/discounts/components/DiscountProducts/styles.ts b/src/discounts/components/DiscountProducts/styles.ts index 9bd786e03..3019f34cb 100644 --- a/src/discounts/components/DiscountProducts/styles.ts +++ b/src/discounts/components/DiscountProducts/styles.ts @@ -4,10 +4,7 @@ import { makeStyles } from "@saleor/macaw-ui"; export const useStyles = makeStyles( theme => ({ colActions: { - "&:last-child": { - paddingRight: 0 - }, - width: `calc(76px + ${theme.spacing(0.5)})` + width: `calc(76px + ${theme.spacing(1)})` }, colName: { paddingLeft: 0, diff --git a/src/discounts/components/DiscountVariants/DiscountVariants.tsx b/src/discounts/components/DiscountVariants/DiscountVariants.tsx index cffed9f7e..4d3e53328 100644 --- a/src/discounts/components/DiscountVariants/DiscountVariants.tsx +++ b/src/discounts/components/DiscountVariants/DiscountVariants.tsx @@ -1,13 +1,10 @@ import { - Button, Card, - IconButton, TableBody, TableCell, TableFooter, TableRow } from "@material-ui/core"; -import DeleteIcon from "@material-ui/icons/Delete"; import CardTitle from "@saleor/components/CardTitle"; import Checkbox from "@saleor/components/Checkbox"; import ResponsiveTable from "@saleor/components/ResponsiveTable"; @@ -15,6 +12,7 @@ import Skeleton from "@saleor/components/Skeleton"; import TableCellAvatar from "@saleor/components/TableCellAvatar"; import TableHead from "@saleor/components/TableHead"; import TablePagination from "@saleor/components/TablePagination"; +import { Button, DeleteIcon, IconButton } from "@saleor/macaw-ui"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; @@ -59,11 +57,7 @@ const DiscountVariants: React.FC = props => { + } @@ -160,6 +154,7 @@ const DiscountVariants: React.FC = props => { { event.stopPropagation(); diff --git a/src/discounts/components/SaleCreatePage/SaleCreatePage.tsx b/src/discounts/components/SaleCreatePage/SaleCreatePage.tsx index aef6c9915..cc492c049 100644 --- a/src/discounts/components/SaleCreatePage/SaleCreatePage.tsx +++ b/src/discounts/components/SaleCreatePage/SaleCreatePage.tsx @@ -1,7 +1,6 @@ import { validateSalePrice } from "@saleor/channels/utils"; import CardSpacer from "@saleor/components/CardSpacer"; import ChannelsAvailabilityCard from "@saleor/components/ChannelsAvailabilityCard"; -import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton"; import Container from "@saleor/components/Container"; import Form from "@saleor/components/Form"; import Grid from "@saleor/components/Grid"; @@ -11,6 +10,7 @@ import Savebar from "@saleor/components/Savebar"; import { createSaleChannelsChangeHandler } from "@saleor/discounts/handlers"; import { DiscountErrorFragment } from "@saleor/fragments/types/DiscountErrorFragment"; import { sectionNames } from "@saleor/intl"; +import { ConfirmButtonTransitionState } from "@saleor/macaw-ui"; import { Backlink } from "@saleor/macaw-ui"; import useMetadataChangeTrigger from "@saleor/utils/metadata/useMetadataChangeTrigger"; import React from "react"; diff --git a/src/discounts/components/SaleDetailsPage/SaleDetailsPage.tsx b/src/discounts/components/SaleDetailsPage/SaleDetailsPage.tsx index d7cbb3daf..61abad3c8 100644 --- a/src/discounts/components/SaleDetailsPage/SaleDetailsPage.tsx +++ b/src/discounts/components/SaleDetailsPage/SaleDetailsPage.tsx @@ -1,7 +1,6 @@ import { ChannelSaleData, validateSalePrice } from "@saleor/channels/utils"; import CardSpacer from "@saleor/components/CardSpacer"; import ChannelsAvailabilityCard from "@saleor/components/ChannelsAvailabilityCard"; -import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton"; import Container from "@saleor/components/Container"; import Form from "@saleor/components/Form"; import Grid from "@saleor/components/Grid"; @@ -12,6 +11,7 @@ import { Tab, TabContainer } from "@saleor/components/Tab"; import { createSaleChannelsChangeHandler } from "@saleor/discounts/handlers"; import { DiscountErrorFragment } from "@saleor/fragments/types/DiscountErrorFragment"; import { sectionNames } from "@saleor/intl"; +import { ConfirmButtonTransitionState } from "@saleor/macaw-ui"; import { Backlink } from "@saleor/macaw-ui"; import { mapEdgesToItems } from "@saleor/utils/maps"; import { mapMetadataItemToInput } from "@saleor/utils/maps"; @@ -33,7 +33,6 @@ import DiscountProducts from "../DiscountProducts"; import DiscountVariants from "../DiscountVariants"; import SaleInfo from "../SaleInfo"; import SaleSummary from "../SaleSummary"; -import { useStyles } from "../SaleSummary/styles"; import SaleType from "../SaleType"; import SaleValue from "../SaleValue"; @@ -141,7 +140,6 @@ const SaleDetailsPage: React.FC = ({ toggleAll }) => { const intl = useIntl(); - const classes = useStyles(); const { makeChangeHandler: makeMetadataChangeHandler } = useMetadataChangeTrigger(); @@ -177,7 +175,7 @@ const SaleDetailsPage: React.FC = ({ {intl.formatMessage(sectionNames.sales)} - +
= props => { const { settings, @@ -89,6 +87,7 @@ const SaleList: React.FC = props => { } = props; const classes = useStyles(props); + const numberOfColumns = sales?.length === 0 ? 4 : 5; return ( diff --git a/src/discounts/components/SaleListPage/SaleListPage.tsx b/src/discounts/components/SaleListPage/SaleListPage.tsx index 0488d23f7..8341e66fc 100644 --- a/src/discounts/components/SaleListPage/SaleListPage.tsx +++ b/src/discounts/components/SaleListPage/SaleListPage.tsx @@ -1,9 +1,10 @@ -import { Button, Card } from "@material-ui/core"; +import { Card } from "@material-ui/core"; import Container from "@saleor/components/Container"; import FilterBar from "@saleor/components/FilterBar"; import PageHeader from "@saleor/components/PageHeader"; import { SaleListUrlSortField } from "@saleor/discounts/urls"; import { sectionNames } from "@saleor/intl"; +import { Button } from "@saleor/macaw-ui"; import { ChannelProps, FilterPageProps, @@ -53,12 +54,7 @@ const SaleListPage: React.FC = ({ return ( - diff --git a/src/discounts/components/SaleSummary/SaleSummary.tsx b/src/discounts/components/SaleSummary/SaleSummary.tsx index b470255e9..e1579f685 100644 --- a/src/discounts/components/SaleSummary/SaleSummary.tsx +++ b/src/discounts/components/SaleSummary/SaleSummary.tsx @@ -15,7 +15,8 @@ import { FormattedMessage, useIntl } from "react-intl"; import { maybe } from "../../../misc"; import { SaleType } from "../../../types/globalTypes"; import { SaleDetails_sale } from "../../types/SaleDetails"; -import { useStyles } from "./styles"; +import useStyles from "./styles"; + export interface SaleSummaryProps extends ChannelProps { sale: SaleDetails_sale; } @@ -24,8 +25,8 @@ const SaleSummary: React.FC = ({ selectedChannelId, sale }) => { - const intl = useIntl(); const classes = useStyles(); + const intl = useIntl(); const channel = sale?.channelListings?.find( listing => listing.channel.id === selectedChannelId @@ -37,7 +38,7 @@ const SaleSummary: React.FC = ({ - + {maybe(() => sale.name, )} diff --git a/src/discounts/components/SaleSummary/styles.ts b/src/discounts/components/SaleSummary/styles.ts index a8e97277a..155970a96 100644 --- a/src/discounts/components/SaleSummary/styles.ts +++ b/src/discounts/components/SaleSummary/styles.ts @@ -1,10 +1,14 @@ import { makeStyles } from "@saleor/macaw-ui"; -export const useStyles = makeStyles( - () => ({ - wrapAnywhere: { - overflowWrap: "anywhere" +const useStyles = makeStyles( + { + ellipsis: { + overflow: "hidden", + whiteSpace: "nowrap", + textOverflow: "ellipsis" } - }), + }, { name: "SaleSummary" } ); + +export default useStyles; diff --git a/src/discounts/components/SaleValue/SaleValue.tsx b/src/discounts/components/SaleValue/SaleValue.tsx index 3929f766a..37c27d49c 100644 --- a/src/discounts/components/SaleValue/SaleValue.tsx +++ b/src/discounts/components/SaleValue/SaleValue.tsx @@ -3,13 +3,13 @@ import { CardContent, TableBody, TableCell, + TableHead, TableRow, Typography } from "@material-ui/core"; import CardTitle from "@saleor/components/CardTitle"; import ResponsiveTable from "@saleor/components/ResponsiveTable"; import Skeleton from "@saleor/components/Skeleton"; -import TableHead from "@saleor/components/TableHead"; import { DiscountErrorFragment } from "@saleor/fragments/types/DiscountErrorFragment"; import { renderCollection } from "@saleor/misc"; import { getFormErrors } from "@saleor/utils/errors"; @@ -57,76 +57,75 @@ const SaleValue: React.FC = ({ description="channels sale info" /> -
- - - - - - - - - - - - - - - {renderCollection( - data.channelListings, - (listing, index) => { - const error = formErrors.value?.channels?.find( - id => id === listing.id - ); - return ( - - - {listing?.name || } - - - {listing ? ( - - ) : ( - - )} - - - ); - }, - () => ( - - - - - - ) - )} - - -
+ + + + + + + + + + + + + + + + + + + {renderCollection( + data.channelListings, + (listing, index) => { + const error = formErrors.value?.channels?.find( + id => id === listing.id + ); + return ( + + + {listing?.name || } + + + {listing ? ( + + ) : ( + + )} + + + ); + }, + () => ( + + + + + + ) + )} + + ); }; diff --git a/src/discounts/components/SaleValue/styles.ts b/src/discounts/components/SaleValue/styles.ts index 8ede8e140..2c5d41c78 100644 --- a/src/discounts/components/SaleValue/styles.ts +++ b/src/discounts/components/SaleValue/styles.ts @@ -1,12 +1,15 @@ import { makeStyles } from "@saleor/macaw-ui"; export const useStyles = makeStyles( - theme => ({ + () => ({ card: { "&:last-child": { paddingBottom: 0 } }, + colValue: { + width: 300 + }, colName: { fontSize: 14, paddingLeft: 0, @@ -29,10 +32,6 @@ export const useStyles = makeStyles( }, table: { tableLayout: "fixed" - }, - tableContainer: { - margin: theme.spacing(0, -3), - width: `calc(100% + ${theme.spacing(6)}px)` } }), { diff --git a/src/discounts/components/VoucherCreatePage/VoucherCreatePage.tsx b/src/discounts/components/VoucherCreatePage/VoucherCreatePage.tsx index 6d85cf627..cae55c4fb 100644 --- a/src/discounts/components/VoucherCreatePage/VoucherCreatePage.tsx +++ b/src/discounts/components/VoucherCreatePage/VoucherCreatePage.tsx @@ -1,7 +1,6 @@ import { ChannelVoucherData } from "@saleor/channels/utils"; import CardSpacer from "@saleor/components/CardSpacer"; import ChannelsAvailabilityCard from "@saleor/components/ChannelsAvailabilityCard"; -import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton"; import Container from "@saleor/components/Container"; import Form from "@saleor/components/Form"; import Grid from "@saleor/components/Grid"; @@ -14,6 +13,7 @@ import { } from "@saleor/discounts/handlers"; import { DiscountErrorFragment } from "@saleor/fragments/types/DiscountErrorFragment"; import { sectionNames } from "@saleor/intl"; +import { ConfirmButtonTransitionState } from "@saleor/macaw-ui"; import { Backlink } from "@saleor/macaw-ui"; import { validatePrice } from "@saleor/products/utils/validation"; import useMetadataChangeTrigger from "@saleor/utils/metadata/useMetadataChangeTrigger"; diff --git a/src/discounts/components/VoucherDetailsPage/VoucherDetailsPage.tsx b/src/discounts/components/VoucherDetailsPage/VoucherDetailsPage.tsx index 6e1e86c75..038503377 100644 --- a/src/discounts/components/VoucherDetailsPage/VoucherDetailsPage.tsx +++ b/src/discounts/components/VoucherDetailsPage/VoucherDetailsPage.tsx @@ -2,7 +2,6 @@ import { Typography } from "@material-ui/core"; import { ChannelVoucherData } from "@saleor/channels/utils"; import CardSpacer from "@saleor/components/CardSpacer"; import ChannelsAvailabilityCard from "@saleor/components/ChannelsAvailabilityCard"; -import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton"; import Container from "@saleor/components/Container"; import CountryList from "@saleor/components/CountryList"; import Form from "@saleor/components/Form"; @@ -18,6 +17,7 @@ import { import { DiscountTypeEnum, RequirementsPicker } from "@saleor/discounts/types"; import { DiscountErrorFragment } from "@saleor/fragments/types/DiscountErrorFragment"; import { sectionNames } from "@saleor/intl"; +import { ConfirmButtonTransitionState } from "@saleor/macaw-ui"; import { Backlink } from "@saleor/macaw-ui"; import { validatePrice } from "@saleor/products/utils/validation"; import { mapEdgesToItems } from "@saleor/utils/maps"; @@ -42,7 +42,6 @@ import VoucherInfo from "../VoucherInfo"; import VoucherLimits from "../VoucherLimits"; import VoucherRequirements from "../VoucherRequirements"; import VoucherSummary from "../VoucherSummary"; -import { useStyles } from "../VoucherSummary/styles"; import VoucherTypes from "../VoucherTypes"; import VoucherValue from "../VoucherValue"; @@ -147,7 +146,6 @@ const VoucherDetailsPage: React.FC = ({ productListToolbar }) => { const intl = useIntl(); - const classes = useStyles(); const { makeChangeHandler: makeMetadataChangeHandler } = useMetadataChangeTrigger(); @@ -220,10 +218,7 @@ const VoucherDetailsPage: React.FC = ({ {intl.formatMessage(sectionNames.vouchers)} - +
+ - diff --git a/src/giftCards/GiftCardCreateDialog/GiftCardCreateDialogCodeContent.tsx b/src/giftCards/GiftCardCreateDialog/GiftCardCreateDialogCodeContent.tsx index e25d607b0..a0265691f 100644 --- a/src/giftCards/GiftCardCreateDialog/GiftCardCreateDialogCodeContent.tsx +++ b/src/giftCards/GiftCardCreateDialog/GiftCardCreateDialogCodeContent.tsx @@ -1,9 +1,10 @@ -import { Button, DialogContent, Typography } from "@material-ui/core"; +import { DialogActions, DialogContent, Typography } from "@material-ui/core"; import HorizontalSpacer from "@saleor/apps/components/HorizontalSpacer"; import VerticalSpacer from "@saleor/apps/components/VerticalSpacer"; import useClipboard from "@saleor/hooks/useClipboard"; import useNotifier from "@saleor/hooks/useNotifier"; import { buttonMessages } from "@saleor/intl"; +import { Button } from "@saleor/macaw-ui"; import React from "react"; import { useIntl } from "react-intl"; @@ -33,30 +34,27 @@ const GiftCardCreateDialogCodeContent: React.FC - - {intl.formatMessage(messages.createdGiftCardLabel)} - - - - {cardCode} - - -
+
+ + + {intl.formatMessage(messages.createdGiftCardLabel)} + + + + {cardCode} + + + + - -
- + +
); }; diff --git a/src/giftCards/GiftCardCreateDialog/GiftCardCreateDialogForm.tsx b/src/giftCards/GiftCardCreateDialog/GiftCardCreateDialogForm.tsx index 979823f9f..a2cffb76f 100644 --- a/src/giftCards/GiftCardCreateDialog/GiftCardCreateDialogForm.tsx +++ b/src/giftCards/GiftCardCreateDialog/GiftCardCreateDialogForm.tsx @@ -147,12 +147,7 @@ const GiftCardCreateDialogForm: React.FC = ({ return ( <> - + = ({ amountFieldName={"expiryPeriodAmount"} typeFieldName={"expiryPeriodType"} /> - -
+
diff --git a/src/giftCards/GiftCardCreateDialog/GiftCardCreateExpirySelect/styles.ts b/src/giftCards/GiftCardCreateDialog/GiftCardCreateExpirySelect/styles.ts index 71979fd2b..d8168bd58 100644 --- a/src/giftCards/GiftCardCreateDialog/GiftCardCreateExpirySelect/styles.ts +++ b/src/giftCards/GiftCardCreateDialog/GiftCardCreateExpirySelect/styles.ts @@ -10,10 +10,9 @@ export const useGiftCardCreateExpirySelectStyles = makeStyles( width: 400 }, periodField: { - display: "flex" - }, - dateText: { - marginTop: theme.spacing(0.5) + alignItems: "center", + display: "flex", + gap: theme.spacing(2) } }), { name: "GiftCardExpirySelect" } diff --git a/src/giftCards/GiftCardCreateDialog/styles.ts b/src/giftCards/GiftCardCreateDialog/styles.ts index 53cb126f2..0a0da24a4 100644 --- a/src/giftCards/GiftCardCreateDialog/styles.ts +++ b/src/giftCards/GiftCardCreateDialog/styles.ts @@ -1,11 +1,16 @@ import { makeStyles } from "@saleor/macaw-ui"; +import { CSSProperties } from "react"; + +const contentStyles: CSSProperties = { + maxHeight: "calc(100vh - 230px)", + overflowY: "auto", + overflowX: "hidden" +}; export const useGiftCardCreateDialogCodeContentStyles = makeStyles( () => ({ - buttonsContainer: { - display: "flex", - justifyContent: "flex-end", - minWidth: 450 + content: { + ...contentStyles } }), { name: "GiftCardCreateDialogCodeContent" } @@ -21,9 +26,7 @@ export const useGiftCardCreateFormStyles = makeStyles( }, fullWidthContainer: { width: "100%" }, dialogContent: { - minWidth: 550, - overflowY: "auto", - overflowX: "hidden" + ...contentStyles } }), { name: "GiftCardCreateDialogForm" } diff --git a/src/giftCards/GiftCardExportDialogContent/GiftCardExportDialogContent.tsx b/src/giftCards/GiftCardExportDialogContent/GiftCardExportDialogContent.tsx index 13707b22b..6dd0d5e11 100644 --- a/src/giftCards/GiftCardExportDialogContent/GiftCardExportDialogContent.tsx +++ b/src/giftCards/GiftCardExportDialogContent/GiftCardExportDialogContent.tsx @@ -25,6 +25,7 @@ import useGiftCardListBulkActions from "../GiftCardsList/providers/GiftCardListP import { useGiftCardTotalCountQuery } from "../GiftCardsList/queries"; import { giftCardExportDialogMessages as messages } from "./messages"; import { useGiftCardExportMutation } from "./mutations"; +import useStyles from "./styles"; import { ExportGiftCards } from "./types/ExportGiftCards"; import { getExportGiftCardsInput } from "./utils"; @@ -34,6 +35,7 @@ const GiftCardExportDialog: React.FC & { const intl = useIntl(); const notify = useNotifier(); const { queue } = useBackgroundTask(); + const classes = useStyles(); const hasIdsToExport = !!idsToExport?.length; @@ -135,7 +137,7 @@ const GiftCardExportDialog: React.FC & { all: allGiftCardsCount }} /> - + {intl.formatMessage(messages.exportNote)} @@ -145,7 +147,7 @@ const GiftCardExportDialog: React.FC & { ({ + note: { + marginTop: theme.spacing(3) + } + }), + { name: "GiftCardExportDialogContent" } +); + +export default useStyles; diff --git a/src/giftCards/GiftCardUpdate/GiftCardHistory/GiftCardHistory.tsx b/src/giftCards/GiftCardUpdate/GiftCardHistory/GiftCardHistory.tsx index 302564e9e..c837a4903 100644 --- a/src/giftCards/GiftCardUpdate/GiftCardHistory/GiftCardHistory.tsx +++ b/src/giftCards/GiftCardUpdate/GiftCardHistory/GiftCardHistory.tsx @@ -1,138 +1,28 @@ import { Typography } from "@material-ui/core"; -import { appPath } from "@saleor/apps/urls"; import Form from "@saleor/components/Form"; import Hr from "@saleor/components/Hr"; -import Link from "@saleor/components/Link"; import Skeleton from "@saleor/components/Skeleton"; import Timeline, { TimelineAddNote, - TimelineEvent, TimelineNote } from "@saleor/components/Timeline"; -import { customerPath } from "@saleor/customers/urls"; import useNotifier from "@saleor/hooks/useNotifier"; -import { orderPath } from "@saleor/orders/urls"; -import { staffMemberDetailsPath } from "@saleor/staff/urls"; import { GiftCardEventsEnum } from "@saleor/types/globalTypes"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; -import { IntlShape } from "react-intl"; import { useGiftCardTimelineNoteAddMutation } from "../mutations"; import { GIFT_CARD_DETAILS_QUERY } from "../queries"; import { GiftCardAddNote } from "../types/GiftCardAddNote"; -import { GiftCardDetails_giftCard_events } from "../types/GiftCardDetails"; +import GiftCardTimelineEvent from "./GiftCardTimelineEvent"; import useGiftCardHistoryEvents from "./hooks/useGiftCardHistoryEvents"; -import { - giftCardHistoryMessages as messages, - giftCardHistoryTimelineMessages as timelineMessages -} from "./messages"; +import { giftCardHistoryMessages as messages } from "./messages"; import useStyles from "./styles"; interface FormData { message: string; } -const getEventMessage = ( - event: GiftCardDetails_giftCard_events, - intl: IntlShape -) => { - const getUserOrApp = () => { - if (event.user) { - const { firstName, lastName, email } = event.user; - - if (lastName === "" || firstName === "") { - return email; - } - - return `${firstName} ${lastName}`; - } - - if (event.app) { - return event.app.name; - } - }; - - const getUserOrAppLink = () => { - if (event.user) { - return customerPath(event.user.id); - } - - if (event.app) { - return appPath(event.app.id); - } - }; - - switch (event.type) { - case GiftCardEventsEnum.ACTIVATED: - return intl.formatMessage(timelineMessages.giftCardActivated, { - activatedBy: ( - - {getUserOrApp()} - - ) - }); - case GiftCardEventsEnum.BALANCE_RESET: - return intl.formatMessage(timelineMessages.giftCardBalanceReset, { - resetBy: ( - - {getUserOrApp()} - - ) - }); - case GiftCardEventsEnum.BOUGHT: - return intl.formatMessage(timelineMessages.giftCardBought, { - orderNumber: ( - #{event.orderNumber} - ) - }); - case GiftCardEventsEnum.DEACTIVATED: - return intl.formatMessage(timelineMessages.giftCardDeactivated, { - deactivatedBy: ( - - {getUserOrApp()} - - ) - }); - case GiftCardEventsEnum.EXPIRY_DATE_UPDATED: - return intl.formatMessage(timelineMessages.giftCardExpiryDateUpdate, { - expiryUpdatedBy: ( - - {getUserOrApp()} - - ) - }); - case GiftCardEventsEnum.ISSUED: - return intl.formatMessage(timelineMessages.giftCardIssued, { - issuedBy: ( - - {getUserOrApp()} - - ) - }); - case GiftCardEventsEnum.RESENT: - return intl.formatMessage(timelineMessages.giftCardResent); - case GiftCardEventsEnum.SENT_TO_CUSTOMER: - return intl.formatMessage(timelineMessages.giftCardSentToCustomer); - case GiftCardEventsEnum.TAGS_UPDATED: - return intl.formatMessage(timelineMessages.giftCardTagsUpdated); - case GiftCardEventsEnum.UPDATED: - return intl.formatMessage(timelineMessages.giftCardTagsUpdated); - case GiftCardEventsEnum.USED_IN_ORDER: - return intl.formatMessage(timelineMessages.giftCardUsedInOrder, { - orderLink: ( - #{event.orderNumber} - ), - buyer: content => - getUserOrApp() ? ( - {`${content} ${getUserOrApp()}`} - ) : null - }); - } -}; - const GiftCardHistory: React.FC = () => { const intl = useIntl(); const notify = useNotifier(); @@ -172,52 +62,44 @@ const GiftCardHistory: React.FC = () => {
- - {events && ( - <> - - {({ change, data, reset, submit }) => ( - - )} - - {events - .slice() - .reverse() - .map(event => { - const { id, message, type, date, user } = event; - - if (type === GiftCardEventsEnum.NOTE_ADDED) { - return ( - - ); - } + {events ? ( + <> +
+ {({ change, data, reset, submit }) => ( + + )} + + {events + .slice() + .reverse() + .map(event => { + const { id, message, type, date, user } = event; + if (type === GiftCardEventsEnum.NOTE_ADDED) { return ( - ); - })} - - )} -
+ } + + return ( + + ); + })} + + ) : ( + + )}
); diff --git a/src/giftCards/GiftCardUpdate/GiftCardHistory/GiftCardTimelineEvent.tsx b/src/giftCards/GiftCardUpdate/GiftCardHistory/GiftCardTimelineEvent.tsx new file mode 100644 index 000000000..8932ab247 --- /dev/null +++ b/src/giftCards/GiftCardUpdate/GiftCardHistory/GiftCardTimelineEvent.tsx @@ -0,0 +1,134 @@ +import { appPath } from "@saleor/apps/urls"; +import Link from "@saleor/components/Link"; +import { TimelineEvent } from "@saleor/components/Timeline"; +import { customerPath } from "@saleor/customers/urls"; +import { orderUrl } from "@saleor/orders/urls"; +import { staffMemberDetailsUrl } from "@saleor/staff/urls"; +import { GiftCardEventsEnum } from "@saleor/types/globalTypes"; +import React from "react"; +import { useIntl } from "react-intl"; +import { IntlShape } from "react-intl"; + +import { GiftCardDetails_giftCard_events } from "../types/GiftCardDetails"; +import { giftCardHistoryTimelineMessages as timelineMessages } from "./messages"; + +const getUserOrApp = ( + event: GiftCardDetails_giftCard_events +): string | null => { + if (event.user) { + const { firstName, lastName, email } = event.user; + + if (lastName === "" || firstName === "") { + return email; + } + + return `${firstName} ${lastName}`; + } + + if (event.app) { + return event.app.name; + } + + return null; +}; + +const getEventMessage = ( + event: GiftCardDetails_giftCard_events, + intl: IntlShape +) => { + const user = getUserOrApp(event); + + switch (event.type) { + case GiftCardEventsEnum.ACTIVATED: + return user + ? intl.formatMessage(timelineMessages.activated, { + activatedBy: ( + {user} + ) + }) + : intl.formatMessage(timelineMessages.activatedAnonymous); + case GiftCardEventsEnum.BALANCE_RESET: + return user + ? intl.formatMessage(timelineMessages.balanceReset, { + resetBy: ( + {user} + ) + }) + : intl.formatMessage(timelineMessages.balanceResetAnonymous); + case GiftCardEventsEnum.BOUGHT: + return intl.formatMessage(timelineMessages.bought, { + orderNumber: ( + #{event.orderNumber} + ) + }); + case GiftCardEventsEnum.DEACTIVATED: + return user + ? intl.formatMessage(timelineMessages.deactivated, { + deactivatedBy: ( + {user} + ) + }) + : intl.formatMessage(timelineMessages.deactivatedAnonymous); + case GiftCardEventsEnum.EXPIRY_DATE_UPDATED: + return user + ? intl.formatMessage(timelineMessages.expiryDateUpdate, { + expiryUpdatedBy: ( + {user} + ) + }) + : intl.formatMessage(timelineMessages.expiryDateUpdateAnonymous); + case GiftCardEventsEnum.ISSUED: + return user + ? intl.formatMessage(timelineMessages.issued, { + issuedBy: ( + {user} + ) + }) + : intl.formatMessage(timelineMessages.issuedAnonymous); + case GiftCardEventsEnum.RESENT: + return intl.formatMessage(timelineMessages.resent); + case GiftCardEventsEnum.SENT_TO_CUSTOMER: + return intl.formatMessage(timelineMessages.sentToCustomer); + case GiftCardEventsEnum.TAGS_UPDATED: + return intl.formatMessage(timelineMessages.tagsUpdated); + case GiftCardEventsEnum.UPDATED: + return intl.formatMessage(timelineMessages.tagsUpdated); + case GiftCardEventsEnum.USED_IN_ORDER: + return user + ? intl.formatMessage(timelineMessages.usedInOrder, { + orderLink: ( + #{event.orderNumber} + ), + buyer: content => + !!user && ( + {`${content} ${user}`} + ) + }) + : intl.formatMessage(timelineMessages.usedInOrderAnonymous, { + orderLink: ( + #{event.orderNumber} + ) + }); + } +}; + +export interface GiftCardTimelineEventProps { + date: string; + event: GiftCardDetails_giftCard_events; +} + +const GiftCardTimelineEvent: React.FC = ({ + date, + event +}) => { + const intl = useIntl(); + return ; +}; + +export default GiftCardTimelineEvent; diff --git a/src/giftCards/GiftCardUpdate/GiftCardHistory/messages.ts b/src/giftCards/GiftCardUpdate/GiftCardHistory/messages.ts index 36f5851a4..a2fe453ac 100644 --- a/src/giftCards/GiftCardUpdate/GiftCardHistory/messages.ts +++ b/src/giftCards/GiftCardUpdate/GiftCardHistory/messages.ts @@ -16,46 +16,71 @@ const giftCardHistoryMessages = defineMessages({ }); const giftCardHistoryTimelineMessages = defineMessages({ - giftCardActivated: { + activated: { defaultMessage: "Gift card was activated by {activatedBy}", description: "gift card history message" }, - giftCardBalanceReset: { + activatedAnonymous: { + defaultMessage: "Gift card was activated", + description: "gift card history message" + }, + balanceReset: { defaultMessage: "Gift card balance was reset by {resetBy}", description: "gift card history message" }, - giftCardBought: { + balanceResetAnonymous: { + defaultMessage: "Gift card balance was reset by {resetBy}", + description: "gift card history message" + }, + bought: { defaultMessage: "Gift card was bought in order {orderNumber}", description: "gift card history message" }, - giftCardDeactivated: { + deactivated: { defaultMessage: "Gift card was deactivated by {deactivatedBy}", description: "gift card history message" }, - giftCardExpiryDateUpdate: { + deactivatedAnonymous: { + defaultMessage: "Gift card was deactivated", + description: "gift card history message" + }, + expiryDateUpdate: { defaultMessage: "Gift card expiry date was updated by {expiryUpdatedBy}", description: "gift card history message" }, - giftCardIssued: { - defaultMessage: "Gift card was issued by {issuedBy}", - description: "dsc" + expiryDateUpdateAnonymous: { + defaultMessage: "Gift card expiry date was updated", + description: "gift card history message" }, - giftCardResent: { + issued: { + defaultMessage: "Gift card was issued by {issuedBy}", + description: "gift card history message" + }, + issuedAnonymous: { + defaultMessage: "Gift card was issued", + description: "gift card history message" + }, + resent: { defaultMessage: "Gift card was resent", description: "gift card history message" }, - giftCardSentToCustomer: { + sentToCustomer: { defaultMessage: "Gift card was sent to customer", description: "gift card history message" }, - giftCardTagsUpdated: { + tagsUpdated: { defaultMessage: "Gift card tags were updated", description: "gift card history message" }, - giftCardUsedInOrder: { + usedInOrder: { defaultMessage: "Gift card was used as a payment method on order {orderLink} by", description: "gift card history message" + }, + usedInOrderAnonymous: { + defaultMessage: + "Gift card was used as a payment method on order {orderLink}", + description: "gift card history message" } }); diff --git a/src/giftCards/GiftCardUpdate/GiftCardUpdateDetailsCard/GiftCardUpdateDetailsBalanceSection.tsx b/src/giftCards/GiftCardUpdate/GiftCardUpdateDetailsCard/GiftCardUpdateDetailsBalanceSection.tsx index 6b6470915..147496251 100644 --- a/src/giftCards/GiftCardUpdate/GiftCardUpdateDetailsCard/GiftCardUpdateDetailsBalanceSection.tsx +++ b/src/giftCards/GiftCardUpdate/GiftCardUpdateDetailsCard/GiftCardUpdateDetailsBalanceSection.tsx @@ -28,13 +28,15 @@ const GiftCardUpdateDetailsBalanceSection: React.FC = () => { className={classNames(classes.labelsContainer, classes.wideContainer)} > {intl.formatMessage(messages.cardBalanceLabel)} -
+ / - -
+ + + +
diff --git a/src/giftCards/GiftCardUpdate/GiftCardUpdateDetailsCard/GiftCardUpdateDetailsCard.tsx b/src/giftCards/GiftCardUpdate/GiftCardUpdateDetailsCard/GiftCardUpdateDetailsCard.tsx index 1d499235c..f7c8a5ffd 100644 --- a/src/giftCards/GiftCardUpdate/GiftCardUpdateDetailsCard/GiftCardUpdateDetailsCard.tsx +++ b/src/giftCards/GiftCardUpdate/GiftCardUpdateDetailsCard/GiftCardUpdateDetailsCard.tsx @@ -1,16 +1,11 @@ -import { - Button, - Card, - CardContent, - Divider, - Typography -} from "@material-ui/core"; +import { Card, CardContent, Divider, Typography } from "@material-ui/core"; import VerticalSpacer from "@saleor/apps/components/VerticalSpacer"; import CardSpacer from "@saleor/components/CardSpacer"; import CardTitle from "@saleor/components/CardTitle"; import Skeleton from "@saleor/components/Skeleton"; import GiftCardTagInput from "@saleor/giftCards/components/GiftCardTagInput"; import GiftCardUpdateExpirySelect from "@saleor/giftCards/GiftCardUpdate/GiftCardUpdateExpirySelect"; +import { Button } from "@saleor/macaw-ui"; import React from "react"; import { useIntl } from "react-intl"; @@ -40,7 +35,6 @@ const GiftCardUpdateDetailsCard: React.FC = () => { !giftCard?.isExpired && ( )} diff --git a/src/giftCards/GiftCardsList/GiftCardsListHeader/GiftCardsListHeader.tsx b/src/giftCards/GiftCardsList/GiftCardsListHeader/GiftCardsListHeader.tsx index 57ecae180..03c9975d8 100644 --- a/src/giftCards/GiftCardsList/GiftCardsListHeader/GiftCardsListHeader.tsx +++ b/src/giftCards/GiftCardsList/GiftCardsListHeader/GiftCardsListHeader.tsx @@ -1,10 +1,10 @@ -import { Button } from "@material-ui/core"; import HorizontalSpacer from "@saleor/apps/components/HorizontalSpacer"; import VerticalSpacer from "@saleor/apps/components/VerticalSpacer"; import CardMenu, { CardMenuItem } from "@saleor/components/CardMenu"; import PageHeader from "@saleor/components/PageHeader"; import useNavigator from "@saleor/hooks/useNavigator"; import { sectionNames } from "@saleor/intl"; +import { Button } from "@saleor/macaw-ui"; import React from "react"; import { useIntl } from "react-intl"; @@ -49,8 +49,7 @@ const GiftCardsListHeader: React.FC = () => { - + { - if (isExpired) { - return { - status: StatusType.NEUTRAL, - label: intl.formatMessage(giftCardStatusChipMessages.expiredStatusLabel) - }; - } + if (isExpired) { + return ( + + ); + } - if (!isActive) { - return { - status: StatusType.ERROR, - label: intl.formatMessage( + if (!isActive) { + return ( + + ); + } - return { - status: null, - label: null - }; - }; - - return ; + return null; } export default GiftCardStatusChip; diff --git a/src/giftCards/index.tsx b/src/giftCards/index.tsx index 9ae10ac81..bf424f984 100644 --- a/src/giftCards/index.tsx +++ b/src/giftCards/index.tsx @@ -14,7 +14,7 @@ import { } from "./GiftCardsList/types"; import GiftCardUpdateComponent from "./GiftCardUpdate"; import { GiftCardUpdatePageUrlQueryParams } from "./GiftCardUpdate/types"; -import { giftCardSettingsUrl, giftCardsListPath, giftCardUrl } from "./urls"; +import { giftCardPath, giftCardSettingsUrl, giftCardsListPath } from "./urls"; const GiftCardUpdatePage: React.FC> = ({ match @@ -50,7 +50,7 @@ const Component: React.FC = ({}) => { - + ); diff --git a/src/giftCards/urls.ts b/src/giftCards/urls.ts index db89b2e7b..823f07e55 100644 --- a/src/giftCards/urls.ts +++ b/src/giftCards/urls.ts @@ -11,9 +11,11 @@ export const giftCardsListPath = `${giftCardsSectionUrlName}/`; export const giftCardListUrl = (params?: GiftCardListUrlQueryParams) => giftCardsListPath + "?" + stringifyQs(params); +export const giftCardPath = (id: string) => urlJoin(giftCardsListPath, id); + export const giftCardUrl = ( id: string, params?: GiftCardUpdatePageUrlQueryParams -) => urlJoin(giftCardsListPath, id) + "?" + stringifyQs(params); +) => giftCardPath(encodeURIComponent(id)) + "?" + stringifyQs(params); export const giftCardSettingsUrl = urlJoin(giftCardsListPath, "settings"); diff --git a/src/icons/Attributes.tsx b/src/icons/Attributes.tsx index c14386357..bd222e257 100644 --- a/src/icons/Attributes.tsx +++ b/src/icons/Attributes.tsx @@ -2,15 +2,16 @@ import createSvgIcon from "@material-ui/icons/utils/createSvgIcon"; import React from "react"; const Attributes = createSvgIcon( - <> - - , + , "Attributes" ); +Attributes.defaultProps = { + viewBox: "0 0 32 32" +}; export default Attributes; diff --git a/src/icons/Channels.tsx b/src/icons/Channels.tsx index 182880b4f..0b3f11b2c 100644 --- a/src/icons/Channels.tsx +++ b/src/icons/Channels.tsx @@ -2,15 +2,16 @@ import createSvgIcon from "@material-ui/icons/utils/createSvgIcon"; import React from "react"; const Channels = createSvgIcon( - <> - - , - "StaffMembers" + , + "Channels" ); +Channels.defaultProps = { + viewBox: "0 0 32 32" +}; export default Channels; diff --git a/src/icons/Navigation.tsx b/src/icons/Navigation.tsx index ccd745a76..3571af2d2 100644 --- a/src/icons/Navigation.tsx +++ b/src/icons/Navigation.tsx @@ -2,15 +2,16 @@ import createSvgIcon from "@material-ui/icons/utils/createSvgIcon"; import React from "react"; const Navigation = createSvgIcon( - <> - - , + , "Navigation" ); +Navigation.defaultProps = { + viewBox: "0 0 32 32" +}; export default Navigation; diff --git a/src/icons/PageTypes.tsx b/src/icons/PageTypes.tsx index b36ada619..eb8120605 100644 --- a/src/icons/PageTypes.tsx +++ b/src/icons/PageTypes.tsx @@ -2,15 +2,16 @@ import createSvgIcon from "@material-ui/icons/utils/createSvgIcon"; import React from "react"; const PageTypes = createSvgIcon( - <> - - , + , "PageTypes" ); +PageTypes.defaultProps = { + viewBox: "0 0 24 25" +}; export default PageTypes; diff --git a/src/icons/PermissionGroups.tsx b/src/icons/PermissionGroups.tsx index 80b149abc..ed76ee326 100644 --- a/src/icons/PermissionGroups.tsx +++ b/src/icons/PermissionGroups.tsx @@ -2,15 +2,16 @@ import createSvgIcon from "@material-ui/icons/utils/createSvgIcon"; import React from "react"; const PermissionGroups = createSvgIcon( - <> - - , + , "PermissionGroups" ); +PermissionGroups.defaultProps = { + viewBox: "0 0 32 32" +}; export default PermissionGroups; diff --git a/src/icons/Plugins.tsx b/src/icons/Plugins.tsx index 7f6b74439..ce10a9cd8 100644 --- a/src/icons/Plugins.tsx +++ b/src/icons/Plugins.tsx @@ -8,7 +8,7 @@ const Plugins = createSvgIcon( fillRule="evenodd" clipRule="evenodd" d="M7.12891 6.10352e-05H12.9999V7.80006H18.7418V6.10352e-05H24.6128V7.80006H31.9999V14.6751H29.0967V29.7876H20.7418V33.6876H16.8708V40.0001H14.8708V33.6876H10.9999V29.7876H2.9031V14.6751H-0.00012207V7.80006H7.12891V6.10352e-05ZM9.12891 7.80006H10.9999V2.00006H9.12891V7.80006ZM4.9031 14.6751V27.7876H27.0967V14.6751H4.9031ZM12.9999 29.7876V31.6876H18.7418V29.7876H12.9999ZM22.6128 7.80006V2.00006H20.7418V7.80006H22.6128ZM1.99988 9.80006V12.6751H29.9999V9.80006H1.99988Z" - fill="#06847B" + fill="currentColor" /> , diff --git a/src/icons/ProductTypes.tsx b/src/icons/ProductTypes.tsx index 2c924859f..9a3a5b803 100644 --- a/src/icons/ProductTypes.tsx +++ b/src/icons/ProductTypes.tsx @@ -7,10 +7,13 @@ const ProductTypes = createSvgIcon( fillRule="evenodd" clipRule="evenodd" d="M0 6.5V33L20 40L40 33V6.5L20 0L0 6.5ZM2.5 8.69935V31.2263L18.75 36.9138V14.3869L2.5 8.69935ZM21.25 14.3869V36.9138L37.5 31.2263V8.69935L21.25 14.3869ZM34.1436 7.22539L20 2.62872L5.8564 7.22539L20 12.1756L34.1436 7.22539Z" - fill="#06847B" + fill="currentColor" /> , "ProductTypes" ); +ProductTypes.defaultProps = { + viewBox: "0 0 44 44" +}; export default ProductTypes; diff --git a/src/icons/ShippingMethods.tsx b/src/icons/ShippingMethods.tsx index 62977adb3..f9cae52f0 100644 --- a/src/icons/ShippingMethods.tsx +++ b/src/icons/ShippingMethods.tsx @@ -2,15 +2,16 @@ import createSvgIcon from "@material-ui/icons/utils/createSvgIcon"; import React from "react"; const ShippingMethods = createSvgIcon( - <> - - , + , "ShippingMethods" ); +ShippingMethods.defaultProps = { + viewBox: "0 0 32 32" +}; export default ShippingMethods; diff --git a/src/icons/SiteSettings.tsx b/src/icons/SiteSettings.tsx index 515109666..4dd1d31a5 100644 --- a/src/icons/SiteSettings.tsx +++ b/src/icons/SiteSettings.tsx @@ -6,11 +6,20 @@ const SiteSettings = createSvgIcon( + , "SiteSettings" ); +SiteSettings.defaultProps = { + viewBox: "0 0 32 32" +}; export default SiteSettings; diff --git a/src/icons/StaffMembers.tsx b/src/icons/StaffMembers.tsx index fdffb5071..4f9200798 100644 --- a/src/icons/StaffMembers.tsx +++ b/src/icons/StaffMembers.tsx @@ -2,15 +2,16 @@ import createSvgIcon from "@material-ui/icons/utils/createSvgIcon"; import React from "react"; const StaffMembers = createSvgIcon( - <> - - , + , "StaffMembers" ); +StaffMembers.defaultProps = { + viewBox: "0 0 32 32" +}; export default StaffMembers; diff --git a/src/icons/Taxes.tsx b/src/icons/Taxes.tsx index d2d8d69b1..1d2eb318f 100644 --- a/src/icons/Taxes.tsx +++ b/src/icons/Taxes.tsx @@ -2,15 +2,16 @@ import createSvgIcon from "@material-ui/icons/utils/createSvgIcon"; import React from "react"; const Taxes = createSvgIcon( - <> - - , + , "Taxes" ); +Taxes.defaultProps = { + viewBox: "0 0 32 32" +}; export default Taxes; diff --git a/src/icons/Warehouses.tsx b/src/icons/Warehouses.tsx index 56170523f..8e5d11846 100644 --- a/src/icons/Warehouses.tsx +++ b/src/icons/Warehouses.tsx @@ -2,15 +2,16 @@ import createSvgIcon from "@material-ui/icons/utils/createSvgIcon"; import React from "react"; const Warehouses = createSvgIcon( - <> - - , + , "Warehouses" ); +Warehouses.defaultProps = { + viewBox: "0 0 32 32" +}; export default Warehouses; diff --git a/src/intl.ts b/src/intl.ts index 8162adfbd..f45b6e70c 100644 --- a/src/intl.ts +++ b/src/intl.ts @@ -38,7 +38,7 @@ export const commonMessages = defineMessages({ defaultMessage: "Drafts" }, email: { - defaultMessage: "E-mail Address" + defaultMessage: "Email address" }, endDate: { defaultMessage: "End Date" diff --git a/src/misc.ts b/src/misc.ts index 5dc6d3895..64b0343f3 100644 --- a/src/misc.ts +++ b/src/misc.ts @@ -1,10 +1,9 @@ -import { ThemeType } from "@saleor/macaw-ui"; +import { ConfirmButtonTransitionState, ThemeType } from "@saleor/macaw-ui"; import uniqBy from "lodash/uniqBy"; import moment from "moment-timezone"; import { MutationFunction, MutationResult } from "react-apollo"; import { IntlShape } from "react-intl"; -import { ConfirmButtonTransitionState } from "./components/ConfirmButton"; import { MultiAutocompleteChoiceType } from "./components/MultiAutocompleteSelectField"; import { StatusType } from "./components/StatusChip/types"; import { StatusLabelProps } from "./components/StatusLabel"; diff --git a/src/navigation/components/MenuCreateDialog/MenuCreateDialog.tsx b/src/navigation/components/MenuCreateDialog/MenuCreateDialog.tsx index efdc27163..85837a8e4 100644 --- a/src/navigation/components/MenuCreateDialog/MenuCreateDialog.tsx +++ b/src/navigation/components/MenuCreateDialog/MenuCreateDialog.tsx @@ -1,17 +1,16 @@ import { - Button, Dialog, DialogActions, DialogContent, DialogTitle, TextField } from "@material-ui/core"; -import ConfirmButton, { - ConfirmButtonTransitionState -} from "@saleor/components/ConfirmButton"; +import BackButton from "@saleor/components/BackButton"; +import ConfirmButton from "@saleor/components/ConfirmButton"; import Form from "@saleor/components/Form"; import { MenuErrorFragment } from "@saleor/fragments/types/MenuErrorFragment"; import { buttonMessages } from "@saleor/intl"; +import { ConfirmButtonTransitionState } from "@saleor/macaw-ui"; import { getFormErrors } from "@saleor/utils/errors"; import getMenuErrorMessage from "@saleor/utils/errors/menu"; import React from "react"; @@ -74,13 +73,9 @@ const MenuCreateDialog: React.FC = ({ /> - + diff --git a/src/navigation/components/MenuDetailsPage/MenuDetailsPage.tsx b/src/navigation/components/MenuDetailsPage/MenuDetailsPage.tsx index 2c212b51a..69492490e 100644 --- a/src/navigation/components/MenuDetailsPage/MenuDetailsPage.tsx +++ b/src/navigation/components/MenuDetailsPage/MenuDetailsPage.tsx @@ -1,6 +1,5 @@ import { Typography } from "@material-ui/core"; import CardSpacer from "@saleor/components/CardSpacer"; -import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton"; import Container from "@saleor/components/Container"; import Form from "@saleor/components/Form"; import Grid from "@saleor/components/Grid"; @@ -8,6 +7,7 @@ import Savebar from "@saleor/components/Savebar"; import { MenuErrorFragment } from "@saleor/fragments/types/MenuErrorFragment"; import { SubmitPromise } from "@saleor/hooks/useForm"; import { sectionNames } from "@saleor/intl"; +import { ConfirmButtonTransitionState } from "@saleor/macaw-ui"; import { Backlink } from "@saleor/macaw-ui"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; diff --git a/src/navigation/components/MenuItemDialog/MenuItemDialog.tsx b/src/navigation/components/MenuItemDialog/MenuItemDialog.tsx index cfa88eb4a..d3cea385a 100644 --- a/src/navigation/components/MenuItemDialog/MenuItemDialog.tsx +++ b/src/navigation/components/MenuItemDialog/MenuItemDialog.tsx @@ -1,5 +1,4 @@ import { - Button, Dialog, DialogActions, DialogContent, @@ -8,15 +7,15 @@ import { Typography } from "@material-ui/core"; import AutocompleteSelectMenu from "@saleor/components/AutocompleteSelectMenu"; -import ConfirmButton, { - ConfirmButtonTransitionState -} from "@saleor/components/ConfirmButton"; +import BackButton from "@saleor/components/BackButton"; +import ConfirmButton from "@saleor/components/ConfirmButton"; import FormSpacer from "@saleor/components/FormSpacer"; import { MenuErrorFragment } from "@saleor/fragments/types/MenuErrorFragment"; import useModalDialogErrors from "@saleor/hooks/useModalDialogErrors"; import useModalDialogOpen from "@saleor/hooks/useModalDialogOpen"; import useStateFromProps from "@saleor/hooks/useStateFromProps"; import { buttonMessages, sectionNames } from "@saleor/intl"; +import { ConfirmButtonTransitionState } from "@saleor/macaw-ui"; import { SearchCategories_search_edges_node } from "@saleor/searches/types/SearchCategories"; import { SearchCollections_search_edges_node } from "@saleor/searches/types/SearchCollections"; import { SearchPages_search_edges_node } from "@saleor/searches/types/SearchPages"; @@ -292,14 +291,10 @@ const MenuItemDialog: React.FC = ({ )} - + diff --git a/src/navigation/components/MenuItems/MenuItems.tsx b/src/navigation/components/MenuItems/MenuItems.tsx index 51173c1e3..decd195d0 100644 --- a/src/navigation/components/MenuItems/MenuItems.tsx +++ b/src/navigation/components/MenuItems/MenuItems.tsx @@ -1,17 +1,9 @@ -import { - Button, - Card, - CardActions, - IconButton, - Paper, - Typography -} from "@material-ui/core"; -import DeleteIcon from "@material-ui/icons/Delete"; +import { Card, CardActions, Paper, Typography } from "@material-ui/core"; import EditIcon from "@material-ui/icons/Edit"; import CardTitle from "@saleor/components/CardTitle"; import Skeleton from "@saleor/components/Skeleton"; import { buttonMessages } from "@saleor/intl"; -import { useTheme } from "@saleor/macaw-ui"; +import { Button, DeleteIcon, IconButton, useTheme } from "@saleor/macaw-ui"; import { makeStyles } from "@saleor/macaw-ui"; import classNames from "classnames"; import React from "react"; @@ -39,6 +31,9 @@ export interface MenuItemsProps { const useStyles = makeStyles( theme => ({ actions: { + "&&": { + padding: theme.spacing(2, 4) + }, flexDirection: "row" }, container: { @@ -176,15 +171,15 @@ const Node: React.FC = props => { {node.title}
- - + node.onChange({ id: node.id as any, @@ -224,7 +219,7 @@ const MenuItems: React.FC = props => { id: "menuItemsHeader" })} toolbar={ - } @@ -273,11 +268,7 @@ const MenuItems: React.FC = props => { )}
- + diff --git a/src/orders/components/OrderBulkCancelDialog/OrderBulkCancelDialog.tsx b/src/orders/components/OrderBulkCancelDialog/OrderBulkCancelDialog.tsx index e0f28f86d..891e03122 100644 --- a/src/orders/components/OrderBulkCancelDialog/OrderBulkCancelDialog.tsx +++ b/src/orders/components/OrderBulkCancelDialog/OrderBulkCancelDialog.tsx @@ -1,6 +1,6 @@ import { DialogContentText } from "@material-ui/core"; import ActionDialog from "@saleor/components/ActionDialog"; -import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton"; +import { ConfirmButtonTransitionState } from "@saleor/macaw-ui"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; diff --git a/src/orders/components/OrderCancelDialog/OrderCancelDialog.tsx b/src/orders/components/OrderCancelDialog/OrderCancelDialog.tsx index 52fbdbebc..f85e2b154 100644 --- a/src/orders/components/OrderCancelDialog/OrderCancelDialog.tsx +++ b/src/orders/components/OrderCancelDialog/OrderCancelDialog.tsx @@ -1,18 +1,17 @@ import { - Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle } from "@material-ui/core"; -import ConfirmButton, { - ConfirmButtonTransitionState -} from "@saleor/components/ConfirmButton"; +import BackButton from "@saleor/components/BackButton"; +import ConfirmButton from "@saleor/components/ConfirmButton"; import FormSpacer from "@saleor/components/FormSpacer"; import { OrderErrorFragment } from "@saleor/fragments/types/OrderErrorFragment"; import useModalDialogErrors from "@saleor/hooks/useModalDialogErrors"; import { buttonMessages } from "@saleor/intl"; +import { ConfirmButtonTransitionState } from "@saleor/macaw-ui"; import getOrderErrorMessage from "@saleor/utils/errors/order"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; @@ -70,13 +69,10 @@ const OrderCancelDialog: React.FC = props => { )} - + diff --git a/src/orders/components/OrderCannotCancelOrderDialog/OrderCannotCancelOrderDialog.tsx b/src/orders/components/OrderCannotCancelOrderDialog/OrderCannotCancelOrderDialog.tsx index 7e3b8734c..a66aed282 100644 --- a/src/orders/components/OrderCannotCancelOrderDialog/OrderCannotCancelOrderDialog.tsx +++ b/src/orders/components/OrderCannotCancelOrderDialog/OrderCannotCancelOrderDialog.tsx @@ -1,5 +1,4 @@ import { - Button, Dialog, DialogActions, DialogContent, @@ -7,7 +6,7 @@ import { DialogTitle } from "@material-ui/core"; import { buttonMessages } from "@saleor/intl"; -import { makeStyles } from "@saleor/macaw-ui"; +import { Button, makeStyles } from "@saleor/macaw-ui"; import { DialogProps } from "@saleor/types"; import React from "react"; import { FormattedMessage } from "react-intl"; @@ -43,11 +42,7 @@ const OrderCannotCancelOrderDialog: React.FC = ({ - diff --git a/src/orders/components/OrderCustomer/OrderCustomer.tsx b/src/orders/components/OrderCustomer/OrderCustomer.tsx index 8005c6c82..895dc1762 100644 --- a/src/orders/components/OrderCustomer/OrderCustomer.tsx +++ b/src/orders/components/OrderCustomer/OrderCustomer.tsx @@ -1,4 +1,4 @@ -import { Button, Card, CardContent, Typography } from "@material-ui/core"; +import { Card, CardContent, Typography } from "@material-ui/core"; import CardTitle from "@saleor/components/CardTitle"; import ExternalLink from "@saleor/components/ExternalLink"; import Form from "@saleor/components/Form"; @@ -10,7 +10,7 @@ import SingleAutocompleteSelectField from "@saleor/components/SingleAutocomplete import Skeleton from "@saleor/components/Skeleton"; import useStateFromProps from "@saleor/hooks/useStateFromProps"; import { buttonMessages } from "@saleor/intl"; -import { makeStyles } from "@saleor/macaw-ui"; +import { Button, makeStyles } from "@saleor/macaw-ui"; import { SearchCustomers_search_edges_node } from "@saleor/searches/types/SearchCustomers"; import { FetchMoreProps, UserPermissionProps } from "@saleor/types"; import { PermissionEnum } from "@saleor/types/globalTypes"; @@ -136,8 +136,7 @@ const OrderCustomer: React.FC = props => { > diff --git a/src/orders/components/OrderCustomerChangeDialog/OrderCustomerChangeDialog.tsx b/src/orders/components/OrderCustomerChangeDialog/OrderCustomerChangeDialog.tsx index a1e957970..e20eb6e7a 100644 --- a/src/orders/components/OrderCustomerChangeDialog/OrderCustomerChangeDialog.tsx +++ b/src/orders/components/OrderCustomerChangeDialog/OrderCustomerChangeDialog.tsx @@ -67,12 +67,7 @@ const OrderCustomerChangeDialog: React.FC = prop - + diff --git a/src/orders/components/OrderDetailsPage/OrderDetailsPage.tsx b/src/orders/components/OrderDetailsPage/OrderDetailsPage.tsx index 98f43384e..45c274b09 100644 --- a/src/orders/components/OrderDetailsPage/OrderDetailsPage.tsx +++ b/src/orders/components/OrderDetailsPage/OrderDetailsPage.tsx @@ -1,7 +1,6 @@ import { Typography } from "@material-ui/core"; import CardMenu from "@saleor/components/CardMenu"; import { CardSpacer } from "@saleor/components/CardSpacer"; -import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton"; import { Container } from "@saleor/components/Container"; import { DateTime } from "@saleor/components/Date"; import Form from "@saleor/components/Form"; @@ -13,6 +12,7 @@ import Savebar from "@saleor/components/Savebar"; import Skeleton from "@saleor/components/Skeleton"; import { SubmitPromise } from "@saleor/hooks/useForm"; import { sectionNames } from "@saleor/intl"; +import { ConfirmButtonTransitionState } from "@saleor/macaw-ui"; import { Backlink } from "@saleor/macaw-ui"; import { makeStyles } from "@saleor/macaw-ui"; import OrderChannelSectionCard from "@saleor/orders/components/OrderChannelSectionCard"; @@ -230,7 +230,7 @@ const OrderDetailsPage: React.FC = props => { } > - +
{order && order.created ? ( diff --git a/src/orders/components/OrderDiscountCommonModal/OrderDiscountCommonModal.tsx b/src/orders/components/OrderDiscountCommonModal/OrderDiscountCommonModal.tsx index 0c661504f..4afe5bb97 100644 --- a/src/orders/components/OrderDiscountCommonModal/OrderDiscountCommonModal.tsx +++ b/src/orders/components/OrderDiscountCommonModal/OrderDiscountCommonModal.tsx @@ -8,15 +8,13 @@ import { import { PopperPlacementType } from "@material-ui/core/Popper"; import DialogButtons from "@saleor/components/ActionDialog/DialogButtons"; import CardSpacer from "@saleor/components/CardSpacer"; -import ConfirmButton, { - ConfirmButtonTransitionState -} from "@saleor/components/ConfirmButton"; +import ConfirmButton from "@saleor/components/ConfirmButton"; import PriceField from "@saleor/components/PriceField"; import RadioGroupField from "@saleor/components/RadioGroupField"; import { Money } from "@saleor/fragments/types/Money"; import { useUpdateEffect } from "@saleor/hooks/useUpdateEffect"; import { buttonMessages } from "@saleor/intl"; -import { makeStyles } from "@saleor/macaw-ui"; +import { ConfirmButtonTransitionState, makeStyles } from "@saleor/macaw-ui"; import { DiscountValueTypeEnum } from "@saleor/types/globalTypes"; import React, { ChangeEvent, @@ -324,7 +322,6 @@ const OrderDiscountCommonModal: React.FC = ({ diff --git a/src/orders/components/OrderDraftCancelDialog/OrderDraftCancelDialog.tsx b/src/orders/components/OrderDraftCancelDialog/OrderDraftCancelDialog.tsx index b8a63dd38..70cb94f71 100644 --- a/src/orders/components/OrderDraftCancelDialog/OrderDraftCancelDialog.tsx +++ b/src/orders/components/OrderDraftCancelDialog/OrderDraftCancelDialog.tsx @@ -1,9 +1,9 @@ import { DialogContentText } from "@material-ui/core"; import ActionDialog from "@saleor/components/ActionDialog"; -import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton"; import FormSpacer from "@saleor/components/FormSpacer"; import { OrderErrorFragment } from "@saleor/fragments/types/OrderErrorFragment"; import useModalDialogErrors from "@saleor/hooks/useModalDialogErrors"; +import { ConfirmButtonTransitionState } from "@saleor/macaw-ui"; import getOrderErrorMessage from "@saleor/utils/errors/order"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; diff --git a/src/orders/components/OrderDraftDetails/OrderDraftDetails.tsx b/src/orders/components/OrderDraftDetails/OrderDraftDetails.tsx index 65e40a50a..bc8df6305 100644 --- a/src/orders/components/OrderDraftDetails/OrderDraftDetails.tsx +++ b/src/orders/components/OrderDraftDetails/OrderDraftDetails.tsx @@ -1,5 +1,6 @@ -import { Button, Card, CardContent } from "@material-ui/core"; +import { Card, CardContent } from "@material-ui/core"; import CardTitle from "@saleor/components/CardTitle"; +import { Button } from "@saleor/macaw-ui"; import { OrderDiscountContext, OrderDiscountContextConsumerProps @@ -44,8 +45,7 @@ const OrderDraftDetails: React.FC = ({ toolbar={ order?.channel.isActive && ( @@ -57,7 +61,7 @@ const ActionButtons: React.FC = ({ if (status === FulfillmentStatus.RETURNED) { return ( - @@ -65,14 +69,14 @@ const ActionButtons: React.FC = ({ } return hasTrackingNumber ? ( - - ) : ( - - diff --git a/src/orders/components/OrderFulfilledProductsCard/ExtraInfoLines.tsx b/src/orders/components/OrderFulfilledProductsCard/ExtraInfoLines.tsx index f7c40fed8..c7166b593 100644 --- a/src/orders/components/OrderFulfilledProductsCard/ExtraInfoLines.tsx +++ b/src/orders/components/OrderFulfilledProductsCard/ExtraInfoLines.tsx @@ -1,5 +1,4 @@ import { TableCell, TableRow, Typography } from "@material-ui/core"; -import { makeStyles } from "@saleor/macaw-ui"; import { getStringOrPlaceholder } from "@saleor/misc"; import { FulfillmentStatus } from "@saleor/types/globalTypes"; import classNames from "classnames"; @@ -9,21 +8,7 @@ import { FormattedMessage } from "react-intl"; import { OrderDetails_order_fulfillments } from "../../types/OrderDetails"; import { extraInfoMessages } from "./messages"; - -const useStyles = makeStyles( - theme => ({ - infoLabel: { - display: "inline-block" - }, - infoLabelWithMargin: { - marginBottom: theme.spacing() - }, - infoRow: { - padding: theme.spacing(2, 3) - } - }), - { name: "ExtraInfoLines" } -); +import useStyles from "./styles"; const NUMBER_OF_COLUMNS = 5; diff --git a/src/orders/components/OrderFulfilledProductsCard/OrderFulfilledProductsCard.tsx b/src/orders/components/OrderFulfilledProductsCard/OrderFulfilledProductsCard.tsx index f2b52e042..d3fcccf16 100644 --- a/src/orders/components/OrderFulfilledProductsCard/OrderFulfilledProductsCard.tsx +++ b/src/orders/components/OrderFulfilledProductsCard/OrderFulfilledProductsCard.tsx @@ -1,9 +1,9 @@ -import { Card, IconButton, TableBody } from "@material-ui/core"; +import { Card, TableBody } from "@material-ui/core"; import CardSpacer from "@saleor/components/CardSpacer"; import ResponsiveTable from "@saleor/components/ResponsiveTable"; import { OrderDetailsFragment } from "@saleor/fragments/types/OrderDetailsFragment"; import TrashIcon from "@saleor/icons/Trash"; -import { makeStyles } from "@saleor/macaw-ui"; +import { IconButton } from "@saleor/macaw-ui"; import { mergeRepeatedOrderLines } from "@saleor/orders/utils/data"; import React from "react"; @@ -15,21 +15,7 @@ import TableLine from "../OrderProductsCardElements/OrderProductsTableRow"; import CardTitle from "../OrderReturnPage/OrderReturnRefundItemsCard/CardTitle"; import ActionButtons from "./ActionButtons"; import ExtraInfoLines from "./ExtraInfoLines"; - -const useStyles = makeStyles( - theme => ({ - table: { - tableLayout: "fixed" - }, - deleteIcon: { - height: 40, - paddingRight: 0, - paddingLeft: theme.spacing(1), - width: 40 - } - }), - { name: "OrderFulfillment" } -); +import useStyles from "./styles"; interface OrderFulfilledProductsCardProps { fulfillment: OrderDetails_order_fulfillments; @@ -89,6 +75,7 @@ const OrderFulfilledProductsCard: React.FC = pr toolbar={ cancelableStatuses.includes(fulfillment?.status) && ( ({ + actions: { + flexDirection: "row-reverse", + padding: theme.spacing(2, 4) + }, + deleteIcon: { + height: 40, + paddingRight: 0, + paddingLeft: theme.spacing(1), + width: 40 + }, + table: { + tableLayout: "fixed" + }, + infoLabel: { + display: "inline-block" + }, + infoLabelWithMargin: { + marginBottom: theme.spacing() + }, + infoRow: { + padding: theme.spacing(2, 3) + } + }), + { name: "OrderFulfilledProductsCard" } +); + +export default useStyles; diff --git a/src/orders/components/OrderFulfillmentApproveDialog/OrderFulfillmentApproveDialog.tsx b/src/orders/components/OrderFulfillmentApproveDialog/OrderFulfillmentApproveDialog.tsx index 17af5ec33..84e5457e2 100644 --- a/src/orders/components/OrderFulfillmentApproveDialog/OrderFulfillmentApproveDialog.tsx +++ b/src/orders/components/OrderFulfillmentApproveDialog/OrderFulfillmentApproveDialog.tsx @@ -1,19 +1,17 @@ import { - Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle } from "@material-ui/core"; -import ConfirmButton, { - ConfirmButtonTransitionState -} from "@saleor/components/ConfirmButton"; +import ConfirmButton from "@saleor/components/ConfirmButton"; import ControlledCheckbox from "@saleor/components/ControlledCheckbox"; import Form from "@saleor/components/Form"; import FormSpacer from "@saleor/components/FormSpacer"; import { OrderErrorFragment } from "@saleor/fragments/types/OrderErrorFragment"; import { buttonMessages } from "@saleor/intl"; +import { Button, ConfirmButtonTransitionState } from "@saleor/macaw-ui"; import getOrderErrorMessage from "@saleor/utils/errors/order"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; @@ -28,8 +26,8 @@ export interface OrderFulfillmentAcceptDialogProps { confirmButtonState: ConfirmButtonTransitionState; errors: OrderErrorFragment[]; open: boolean; - onClose(); - onConfirm(data: OrderFulfillmentAcceptDialogFormData); + onClose(): void; + onConfirm(data: OrderFulfillmentAcceptDialogFormData): void; } const OrderFulfillmentAcceptDialog: React.FC = props => { @@ -76,7 +74,6 @@ const OrderFulfillmentAcceptDialog: React.FC diff --git a/src/orders/components/OrderFulfillmentCancelDialog/OrderFulfillmentCancelDialog.tsx b/src/orders/components/OrderFulfillmentCancelDialog/OrderFulfillmentCancelDialog.tsx index 701c3e493..4adf543c2 100644 --- a/src/orders/components/OrderFulfillmentCancelDialog/OrderFulfillmentCancelDialog.tsx +++ b/src/orders/components/OrderFulfillmentCancelDialog/OrderFulfillmentCancelDialog.tsx @@ -1,21 +1,19 @@ import { - Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle } from "@material-ui/core"; -import ConfirmButton, { - ConfirmButtonTransitionState -} from "@saleor/components/ConfirmButton"; +import BackButton from "@saleor/components/BackButton"; +import ConfirmButton from "@saleor/components/ConfirmButton"; import Form from "@saleor/components/Form"; import FormSpacer from "@saleor/components/FormSpacer"; import SingleAutocompleteSelectField from "@saleor/components/SingleAutocompleteSelectField"; import { OrderErrorFragment } from "@saleor/fragments/types/OrderErrorFragment"; import { WarehouseFragment } from "@saleor/fragments/types/WarehouseFragment"; import { buttonMessages } from "@saleor/intl"; -import { makeStyles } from "@saleor/macaw-ui"; +import { ConfirmButtonTransitionState, makeStyles } from "@saleor/macaw-ui"; import getOrderErrorMessage from "@saleor/utils/errors/order"; import createSingleAutocompleteSelectHandler from "@saleor/utils/handlers/singleAutocompleteSelectChangeHandler"; import React from "react"; @@ -125,14 +123,11 @@ const OrderFulfillmentCancelDialog: React.FC )} - + diff --git a/src/orders/components/OrderFulfillmentTrackingDialog/OrderFulfillmentTrackingDialog.tsx b/src/orders/components/OrderFulfillmentTrackingDialog/OrderFulfillmentTrackingDialog.tsx index ad290fba7..df7b2776e 100644 --- a/src/orders/components/OrderFulfillmentTrackingDialog/OrderFulfillmentTrackingDialog.tsx +++ b/src/orders/components/OrderFulfillmentTrackingDialog/OrderFulfillmentTrackingDialog.tsx @@ -1,5 +1,4 @@ import { - Button, Dialog, DialogActions, DialogContent, @@ -7,14 +6,14 @@ import { DialogTitle, TextField } from "@material-ui/core"; -import ConfirmButton, { - ConfirmButtonTransitionState -} from "@saleor/components/ConfirmButton"; +import BackButton from "@saleor/components/BackButton"; +import ConfirmButton from "@saleor/components/ConfirmButton"; import Form from "@saleor/components/Form"; import FormSpacer from "@saleor/components/FormSpacer"; import { OrderErrorFragment } from "@saleor/fragments/types/OrderErrorFragment"; import useModalDialogErrors from "@saleor/hooks/useModalDialogErrors"; import { buttonMessages } from "@saleor/intl"; +import { ConfirmButtonTransitionState } from "@saleor/macaw-ui"; import { getFormErrors } from "@saleor/utils/errors"; import getOrderErrorMessage from "@saleor/utils/errors/order"; import React from "react"; @@ -87,13 +86,9 @@ const OrderFulfillmentTrackingDialog: React.FC - + diff --git a/src/orders/components/OrderInvoiceEmailSendDialog/OrderInvoiceEmailSendDialog.tsx b/src/orders/components/OrderInvoiceEmailSendDialog/OrderInvoiceEmailSendDialog.tsx index 188dbd688..f0b66117b 100644 --- a/src/orders/components/OrderInvoiceEmailSendDialog/OrderInvoiceEmailSendDialog.tsx +++ b/src/orders/components/OrderInvoiceEmailSendDialog/OrderInvoiceEmailSendDialog.tsx @@ -1,18 +1,17 @@ import { - Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle } from "@material-ui/core"; -import ConfirmButton, { - ConfirmButtonTransitionState -} from "@saleor/components/ConfirmButton"; +import BackButton from "@saleor/components/BackButton"; +import ConfirmButton from "@saleor/components/ConfirmButton"; import FormSpacer from "@saleor/components/FormSpacer"; import { InvoiceErrorFragment } from "@saleor/fragments/types/InvoiceErrorFragment"; import { InvoiceFragment } from "@saleor/fragments/types/InvoiceFragment"; import { buttonMessages } from "@saleor/intl"; +import { ConfirmButtonTransitionState } from "@saleor/macaw-ui"; import { DialogProps } from "@saleor/types"; import getInvoiceErrorMessage from "@saleor/utils/errors/invoice"; import React from "react"; @@ -64,15 +63,8 @@ const OrderInvoiceEmailSendDialog: React.FC = )} - - + + diff --git a/src/orders/components/OrderInvoiceList/OrderInvoiceList.tsx b/src/orders/components/OrderInvoiceList/OrderInvoiceList.tsx index d9df179a0..c277d84f0 100644 --- a/src/orders/components/OrderInvoiceList/OrderInvoiceList.tsx +++ b/src/orders/components/OrderInvoiceList/OrderInvoiceList.tsx @@ -1,5 +1,4 @@ import { - Button, Card, CardContent, TableBody, @@ -13,7 +12,7 @@ import ResponsiveTable from "@saleor/components/ResponsiveTable"; import Skeleton from "@saleor/components/Skeleton"; import { InvoiceFragment } from "@saleor/fragments/types/InvoiceFragment"; import { buttonMessages } from "@saleor/intl"; -import { makeStyles } from "@saleor/macaw-ui"; +import { Button, makeStyles } from "@saleor/macaw-ui"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; @@ -77,7 +76,7 @@ const OrderInvoiceList: React.FC = props => { })} toolbar={ onInvoiceGenerate && ( - diff --git a/src/orders/components/OrderList/OrderList.tsx b/src/orders/components/OrderList/OrderList.tsx index c891f47a6..35c58d622 100644 --- a/src/orders/components/OrderList/OrderList.tsx +++ b/src/orders/components/OrderList/OrderList.tsx @@ -246,9 +246,9 @@ export const OrderList: React.FC = props => { )} - + {maybe(() => order.total.gross) ? ( - + ) : ( )} diff --git a/src/orders/components/OrderListPage/OrderListPage.tsx b/src/orders/components/OrderListPage/OrderListPage.tsx index 38d280147..c69537bbc 100644 --- a/src/orders/components/OrderListPage/OrderListPage.tsx +++ b/src/orders/components/OrderListPage/OrderListPage.tsx @@ -1,11 +1,11 @@ -import { Button, Card } from "@material-ui/core"; +import { Card } from "@material-ui/core"; import CardMenu from "@saleor/components/CardMenu"; import Container from "@saleor/components/Container"; import FilterBar from "@saleor/components/FilterBar"; import PageHeader from "@saleor/components/PageHeader"; import { RefreshLimits_shop_limits } from "@saleor/components/Shop/types/RefreshLimits"; import { sectionNames } from "@saleor/intl"; -import { makeStyles } from "@saleor/macaw-ui"; +import { Button, makeStyles } from "@saleor/macaw-ui"; import { OrderListUrlSortField } from "@saleor/orders/urls"; import { FilterPageProps, PageListProps, SortPage } from "@saleor/types"; import { hasLimits, isLimitReached } from "@saleor/utils/limits"; @@ -94,8 +94,7 @@ const OrderListPage: React.FC = ({ )} + )} + {canRefund && ( + + )} + {canVoid && ( + + )} + {canMarkAsPaid && ( + + )} +
+ )} +
) } /> @@ -309,51 +355,6 @@ const OrderPayment: React.FC = props => { - {maybe(() => order.status) !== OrderStatus.CANCELED && - (canCapture || canRefund || canVoid || canMarkAsPaid) && ( - <> -
- - {canCapture && ( - - )} - {canRefund && ( - - )} - {canVoid && ( - - )} - {canMarkAsPaid && ( - - )} - - - )} ); }; diff --git a/src/orders/components/OrderPaymentDialog/OrderPaymentDialog.tsx b/src/orders/components/OrderPaymentDialog/OrderPaymentDialog.tsx index b5637afb4..bdd965210 100644 --- a/src/orders/components/OrderPaymentDialog/OrderPaymentDialog.tsx +++ b/src/orders/components/OrderPaymentDialog/OrderPaymentDialog.tsx @@ -1,5 +1,4 @@ import { - Button, Dialog, DialogActions, DialogContent, @@ -7,13 +6,13 @@ import { DialogTitle, TextField } from "@material-ui/core"; -import ConfirmButton, { - ConfirmButtonTransitionState -} from "@saleor/components/ConfirmButton"; +import BackButton from "@saleor/components/BackButton"; +import ConfirmButton from "@saleor/components/ConfirmButton"; import Form from "@saleor/components/Form"; import FormSpacer from "@saleor/components/FormSpacer"; import { OrderErrorFragment } from "@saleor/fragments/types/OrderErrorFragment"; import { buttonMessages } from "@saleor/intl"; +import { ConfirmButtonTransitionState } from "@saleor/macaw-ui"; import { getFormErrors } from "@saleor/utils/errors"; import getOrderErrorMessage from "@saleor/utils/errors/order"; import React from "react"; @@ -92,13 +91,9 @@ const OrderPaymentDialog: React.FC = ({ )}
- + diff --git a/src/orders/components/OrderPaymentVoidDialog/OrderPaymentVoidDialog.tsx b/src/orders/components/OrderPaymentVoidDialog/OrderPaymentVoidDialog.tsx index e852d4d27..64136ab8b 100644 --- a/src/orders/components/OrderPaymentVoidDialog/OrderPaymentVoidDialog.tsx +++ b/src/orders/components/OrderPaymentVoidDialog/OrderPaymentVoidDialog.tsx @@ -1,17 +1,16 @@ import { - Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle } from "@material-ui/core"; -import ConfirmButton, { - ConfirmButtonTransitionState -} from "@saleor/components/ConfirmButton"; +import BackButton from "@saleor/components/BackButton"; +import ConfirmButton from "@saleor/components/ConfirmButton"; import FormSpacer from "@saleor/components/FormSpacer"; import { OrderErrorFragment } from "@saleor/fragments/types/OrderErrorFragment"; import { buttonMessages } from "@saleor/intl"; +import { ConfirmButtonTransitionState } from "@saleor/macaw-ui"; import getOrderErrorMessage from "@saleor/utils/errors/order"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; @@ -57,15 +56,8 @@ const OrderPaymentVoidDialog: React.FC = ({ )}
- - + + diff --git a/src/orders/components/OrderPriceLabel/OrderPriceLabel.tsx b/src/orders/components/OrderPriceLabel/OrderPriceLabel.tsx index 345285482..1177b6f97 100644 --- a/src/orders/components/OrderPriceLabel/OrderPriceLabel.tsx +++ b/src/orders/components/OrderPriceLabel/OrderPriceLabel.tsx @@ -1,3 +1,4 @@ +import { Typography } from "@material-ui/core"; import DiscountedPrice from "@saleor/components/DiscountedPrice/DiscountedPrice"; import Money from "@saleor/components/Money"; import { SearchOrderVariant_search_edges_node_variants_pricing } from "@saleor/orders/types/SearchOrderVariant"; @@ -24,7 +25,11 @@ const OrderPriceLabel: React.FC = ({ pricing }) => { ); } - return ; + return ( + + + + ); }; export default OrderPriceLabel; diff --git a/src/orders/components/OrderProductAddDialog/OrderProductAddDialog.tsx b/src/orders/components/OrderProductAddDialog/OrderProductAddDialog.tsx index a0565becd..37c9629c7 100644 --- a/src/orders/components/OrderProductAddDialog/OrderProductAddDialog.tsx +++ b/src/orders/components/OrderProductAddDialog/OrderProductAddDialog.tsx @@ -1,5 +1,4 @@ import { - Button, CircularProgress, Dialog, DialogActions, @@ -11,10 +10,9 @@ import { TableRow, TextField } from "@material-ui/core"; +import BackButton from "@saleor/components/BackButton"; import Checkbox from "@saleor/components/Checkbox"; -import ConfirmButton, { - ConfirmButtonTransitionState -} from "@saleor/components/ConfirmButton"; +import ConfirmButton from "@saleor/components/ConfirmButton"; import FormSpacer from "@saleor/components/FormSpacer"; import ResponsiveTable from "@saleor/components/ResponsiveTable"; import TableCellAvatar from "@saleor/components/TableCellAvatar"; @@ -23,7 +21,7 @@ import useModalDialogErrors from "@saleor/hooks/useModalDialogErrors"; import useModalDialogOpen from "@saleor/hooks/useModalDialogOpen"; import useSearchQuery from "@saleor/hooks/useSearchQuery"; import { buttonMessages } from "@saleor/intl"; -import { makeStyles } from "@saleor/macaw-ui"; +import { ConfirmButtonTransitionState, makeStyles } from "@saleor/macaw-ui"; import { maybe, renderCollection } from "@saleor/misc"; import { ChannelProps, FetchMoreProps } from "@saleor/types"; import getOrderErrorMessage from "@saleor/utils/errors/order"; @@ -394,13 +392,9 @@ const OrderProductAddDialog: React.FC = props => { )} - + diff --git a/src/orders/components/OrderProductsCardElements/OrderProductsTableRow.tsx b/src/orders/components/OrderProductsCardElements/OrderProductsTableRow.tsx index 942a753be..f3faf42ba 100644 --- a/src/orders/components/OrderProductsCardElements/OrderProductsTableRow.tsx +++ b/src/orders/components/OrderProductsCardElements/OrderProductsTableRow.tsx @@ -96,20 +96,19 @@ const TableLine: React.FC = ({ {quantityToDisplay || } - + {maybe(() => line.orderLine.unitPrice.gross) ? ( - + ) : ( )} - + diff --git a/src/orders/components/OrderRefundFulfilledProducts/OrderRefundFulfilledProducts.tsx b/src/orders/components/OrderRefundFulfilledProducts/OrderRefundFulfilledProducts.tsx index 482e27cc1..b99fadd93 100644 --- a/src/orders/components/OrderRefundFulfilledProducts/OrderRefundFulfilledProducts.tsx +++ b/src/orders/components/OrderRefundFulfilledProducts/OrderRefundFulfilledProducts.tsx @@ -1,5 +1,4 @@ import { - Button, Card, CardContent, Table, @@ -15,7 +14,7 @@ import Money from "@saleor/components/Money"; import Skeleton from "@saleor/components/Skeleton"; import TableCellAvatar from "@saleor/components/TableCellAvatar"; import { FormsetChange } from "@saleor/hooks/useFormset"; -import { makeStyles } from "@saleor/macaw-ui"; +import { Button, makeStyles } from "@saleor/macaw-ui"; import { renderCollection } from "@saleor/misc"; import { OrderRefundData_order_fulfillments } from "@saleor/orders/types/OrderRefundData"; import React from "react"; @@ -105,7 +104,6 @@ const OrderRefundFulfilledProducts: React.FC + diff --git a/src/orders/components/OrderUnfulfilledProductsCard/OrderUnfulfilledProductsCard.tsx b/src/orders/components/OrderUnfulfilledProductsCard/OrderUnfulfilledProductsCard.tsx index 1f4400d42..fb32f6755 100644 --- a/src/orders/components/OrderUnfulfilledProductsCard/OrderUnfulfilledProductsCard.tsx +++ b/src/orders/components/OrderUnfulfilledProductsCard/OrderUnfulfilledProductsCard.tsx @@ -1,14 +1,8 @@ -import { - Button, - Card, - CardActions, - TableBody, - Typography -} from "@material-ui/core"; +import { Card, CardActions, TableBody, Typography } from "@material-ui/core"; import CardSpacer from "@saleor/components/CardSpacer"; import ResponsiveTable from "@saleor/components/ResponsiveTable"; import { commonMessages } from "@saleor/intl"; -import { makeStyles } from "@saleor/macaw-ui"; +import { Button, makeStyles } from "@saleor/macaw-ui"; import { renderCollection } from "@saleor/misc"; import React from "react"; import { FormattedMessage } from "react-intl"; @@ -19,7 +13,11 @@ import TableLine from "../OrderProductsCardElements/OrderProductsTableRow"; import CardTitle from "../OrderReturnPage/OrderReturnRefundItemsCard/CardTitle"; const useStyles = makeStyles( - () => ({ + theme => ({ + actions: { + flexDirection: "row-reverse", + padding: theme.spacing(2, 3) + }, table: { tableLayout: "fixed" } @@ -62,8 +60,7 @@ const OrderUnfulfilledProductsCard: React.FC {showFulfillmentAction && ( diff --git a/src/pageTypes/views/PageTypeDetails.tsx b/src/pageTypes/views/PageTypeDetails.tsx index d6787a316..57515717d 100644 --- a/src/pageTypes/views/PageTypeDetails.tsx +++ b/src/pageTypes/views/PageTypeDetails.tsx @@ -1,4 +1,3 @@ -import { Button } from "@material-ui/core"; import { attributeUrl } from "@saleor/attributes/urls"; import AssignAttributeDialog from "@saleor/components/AssignAttributeDialog"; import AttributeUnassignDialog from "@saleor/components/AttributeUnassignDialog"; @@ -11,6 +10,7 @@ import useBulkActions from "@saleor/hooks/useBulkActions"; import useNavigator from "@saleor/hooks/useNavigator"; import useNotifier from "@saleor/hooks/useNotifier"; import { commonMessages } from "@saleor/intl"; +import { Button } from "@saleor/macaw-ui"; import { getStringOrPlaceholder } from "@saleor/misc"; import { useAssignPageAttributeMutation, @@ -234,7 +234,6 @@ export const PageTypeDetails: React.FC = ({ toggleAll: attributeListActions.toggleAll, toolbar: ( diff --git a/src/pages/views/PageList/PageList.tsx b/src/pages/views/PageList/PageList.tsx index 6bb5831c7..5189e4a3c 100644 --- a/src/pages/views/PageList/PageList.tsx +++ b/src/pages/views/PageList/PageList.tsx @@ -1,7 +1,5 @@ -import { Button, DialogContentText, IconButton } from "@material-ui/core"; -import DeleteIcon from "@material-ui/icons/Delete"; +import { DialogContentText } from "@material-ui/core"; import ActionDialog from "@saleor/components/ActionDialog"; -import { configurationMenuUrl } from "@saleor/configuration"; import useBulkActions from "@saleor/hooks/useBulkActions"; import useListSettings from "@saleor/hooks/useListSettings"; import useNavigator from "@saleor/hooks/useNavigator"; @@ -10,6 +8,7 @@ import { usePaginationReset } from "@saleor/hooks/usePaginationReset"; import usePaginator, { createPaginationState } from "@saleor/hooks/usePaginator"; +import { Button, DeleteIcon, IconButton } from "@saleor/macaw-ui"; import { maybe } from "@saleor/misc"; import { ListViews } from "@saleor/types"; import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers"; @@ -120,7 +119,6 @@ export const PageList: React.FC = ({ params }) => { pages={mapEdgesToItems(data?.pages)} pageInfo={pageInfo} onAdd={() => navigate(pageCreateUrl())} - onBack={() => navigate(configurationMenuUrl)} onNextPage={loadNextPage} onPreviousPage={loadPreviousPage} onUpdateListSettings={updateListSettings} @@ -129,7 +127,6 @@ export const PageList: React.FC = ({ params }) => { toolbar={ <> openModal("remove", { diff --git a/src/permissionGroups/components/AssignMembersDialog/AssignMembersDialog.tsx b/src/permissionGroups/components/AssignMembersDialog/AssignMembersDialog.tsx index dbb7c7927..734e2eef0 100644 --- a/src/permissionGroups/components/AssignMembersDialog/AssignMembersDialog.tsx +++ b/src/permissionGroups/components/AssignMembersDialog/AssignMembersDialog.tsx @@ -1,5 +1,4 @@ import { - Button, Checkbox, CircularProgress, Dialog, @@ -12,10 +11,9 @@ import { TextField, Typography } from "@material-ui/core"; +import BackButton from "@saleor/components/BackButton"; import CardSpacer from "@saleor/components/CardSpacer"; -import ConfirmButton, { - ConfirmButtonTransitionState -} from "@saleor/components/ConfirmButton"; +import ConfirmButton from "@saleor/components/ConfirmButton"; import ResponsiveTable from "@saleor/components/ResponsiveTable"; import Skeleton from "@saleor/components/Skeleton"; import useElementScroll, { @@ -23,7 +21,7 @@ import useElementScroll, { } from "@saleor/hooks/useElementScroll"; import useSearchQuery from "@saleor/hooks/useSearchQuery"; import { buttonMessages } from "@saleor/intl"; -import { makeStyles } from "@saleor/macaw-ui"; +import { ConfirmButtonTransitionState, makeStyles } from "@saleor/macaw-ui"; import { getUserInitials, getUserName, renderCollection } from "@saleor/misc"; import { SearchStaffMembers_search_edges_node } from "@saleor/searches/types/SearchStaffMembers"; import { DialogProps, FetchMoreProps, SearchPageProps } from "@saleor/types"; @@ -302,13 +300,9 @@ const AssignMembersDialog: React.FC = ({ [classes.dropShadow]: dropShadow })} > - + { diff --git a/src/permissionGroups/components/MembersErrorDialog/MembersErrorDialog.tsx b/src/permissionGroups/components/MembersErrorDialog/MembersErrorDialog.tsx index 10e688c1c..0866479a4 100644 --- a/src/permissionGroups/components/MembersErrorDialog/MembersErrorDialog.tsx +++ b/src/permissionGroups/components/MembersErrorDialog/MembersErrorDialog.tsx @@ -1,6 +1,6 @@ import { DialogContentText } from "@material-ui/core"; import ActionDialog from "@saleor/components/ActionDialog"; -import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton"; +import { ConfirmButtonTransitionState } from "@saleor/macaw-ui"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; diff --git a/src/permissionGroups/components/PermissionGroupCreatePage/PermissionGroupCreatePage.tsx b/src/permissionGroups/components/PermissionGroupCreatePage/PermissionGroupCreatePage.tsx index ac02b1b44..854628f22 100644 --- a/src/permissionGroups/components/PermissionGroupCreatePage/PermissionGroupCreatePage.tsx +++ b/src/permissionGroups/components/PermissionGroupCreatePage/PermissionGroupCreatePage.tsx @@ -1,11 +1,11 @@ import AccountPermissions from "@saleor/components/AccountPermissions"; -import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton"; import Container from "@saleor/components/Container"; import Form from "@saleor/components/Form"; import Grid from "@saleor/components/Grid"; import Savebar from "@saleor/components/Savebar"; import { PermissionGroupErrorFragment } from "@saleor/fragments/types/PermissionGroupErrorFragment"; import { sectionNames } from "@saleor/intl"; +import { ConfirmButtonTransitionState } from "@saleor/macaw-ui"; import { Backlink } from "@saleor/macaw-ui"; import { PermissionEnum } from "@saleor/types/globalTypes"; import { getFormErrors } from "@saleor/utils/errors"; diff --git a/src/permissionGroups/components/PermissionGroupDeleteDialog/PermissionGroupDeleteDialog.tsx b/src/permissionGroups/components/PermissionGroupDeleteDialog/PermissionGroupDeleteDialog.tsx index 1325b665e..117856d4f 100644 --- a/src/permissionGroups/components/PermissionGroupDeleteDialog/PermissionGroupDeleteDialog.tsx +++ b/src/permissionGroups/components/PermissionGroupDeleteDialog/PermissionGroupDeleteDialog.tsx @@ -1,7 +1,7 @@ import { DialogContentText, Typography } from "@material-ui/core"; import ActionDialog from "@saleor/components/ActionDialog"; -import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton"; import { PermissionGroupErrorFragment } from "@saleor/fragments/types/PermissionGroupErrorFragment"; +import { ConfirmButtonTransitionState } from "@saleor/macaw-ui"; import { PermissionGroupErrorCode } from "@saleor/types/globalTypes"; import getPermissionGroupErrorMessage from "@saleor/utils/errors/permissionGroups"; import React from "react"; diff --git a/src/permissionGroups/components/PermissionGroupDetailsPage/PermissionGroupDetailsPage.tsx b/src/permissionGroups/components/PermissionGroupDetailsPage/PermissionGroupDetailsPage.tsx index 09ee4def1..a7ee3ddf6 100644 --- a/src/permissionGroups/components/PermissionGroupDetailsPage/PermissionGroupDetailsPage.tsx +++ b/src/permissionGroups/components/PermissionGroupDetailsPage/PermissionGroupDetailsPage.tsx @@ -1,5 +1,4 @@ import AccountPermissions from "@saleor/components/AccountPermissions"; -import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton"; import Container from "@saleor/components/Container"; import Form from "@saleor/components/Form"; import FormSpacer from "@saleor/components/FormSpacer"; @@ -10,6 +9,7 @@ import { ShopInfo_shop_permissions } from "@saleor/components/Shop/types/ShopInf import { PermissionGroupErrorFragment } from "@saleor/fragments/types/PermissionGroupErrorFragment"; import { SubmitPromise } from "@saleor/hooks/useForm"; import { sectionNames } from "@saleor/intl"; +import { ConfirmButtonTransitionState } from "@saleor/macaw-ui"; import { Backlink } from "@saleor/macaw-ui"; import { MembersListUrlSortField } from "@saleor/permissionGroups/urls"; import { diff --git a/src/permissionGroups/components/PermissionGroupList/PermissionGroupList.tsx b/src/permissionGroups/components/PermissionGroupList/PermissionGroupList.tsx index aa6cf4ac8..777f3143a 100644 --- a/src/permissionGroups/components/PermissionGroupList/PermissionGroupList.tsx +++ b/src/permissionGroups/components/PermissionGroupList/PermissionGroupList.tsx @@ -1,17 +1,15 @@ import { - IconButton, TableBody, TableCell, TableFooter, TableHead, TableRow } from "@material-ui/core"; -import DeleteIcon from "@material-ui/icons/Delete"; import ResponsiveTable from "@saleor/components/ResponsiveTable"; import Skeleton from "@saleor/components/Skeleton"; import TableCellHeader from "@saleor/components/TableCellHeader"; import TablePagination from "@saleor/components/TablePagination"; -import { makeStyles } from "@saleor/macaw-ui"; +import { DeleteIcon, IconButton, makeStyles } from "@saleor/macaw-ui"; import { maybe, renderCollection, stopPropagation } from "@saleor/misc"; import { PermissionGroupList_permissionGroups_edges_node } from "@saleor/permissionGroups/types/PermissionGroupList"; import { PermissionGroupListUrlSortField } from "@saleor/permissionGroups/urls"; @@ -150,6 +148,7 @@ const PermissionGroupList: React.FC = props => { <> {permissionGroup.userCanManage && ( diff --git a/src/permissionGroups/components/PermissionGroupListPage/PermissionGroupListPage.tsx b/src/permissionGroups/components/PermissionGroupListPage/PermissionGroupListPage.tsx index 90b60210d..b0232ff4c 100644 --- a/src/permissionGroups/components/PermissionGroupListPage/PermissionGroupListPage.tsx +++ b/src/permissionGroups/components/PermissionGroupListPage/PermissionGroupListPage.tsx @@ -1,8 +1,8 @@ -import { Button, Card } from "@material-ui/core"; +import { Card } from "@material-ui/core"; import Container from "@saleor/components/Container"; import PageHeader from "@saleor/components/PageHeader"; import { sectionNames } from "@saleor/intl"; -import { Backlink } from "@saleor/macaw-ui"; +import { Backlink, Button } from "@saleor/macaw-ui"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; @@ -34,8 +34,7 @@ const PermissionGroupListPage: React.FC = ({ ) : ( <> - + diff --git a/src/plugins/components/PluginsDetailsPage/PluginsDetailsPage.tsx b/src/plugins/components/PluginsDetailsPage/PluginsDetailsPage.tsx index e76da359c..73ef33b9a 100644 --- a/src/plugins/components/PluginsDetailsPage/PluginsDetailsPage.tsx +++ b/src/plugins/components/PluginsDetailsPage/PluginsDetailsPage.tsx @@ -1,5 +1,4 @@ import CardSpacer from "@saleor/components/CardSpacer"; -import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton"; import Container from "@saleor/components/Container"; import Form from "@saleor/components/Form"; import Grid from "@saleor/components/Grid"; @@ -8,6 +7,7 @@ import Savebar from "@saleor/components/Savebar"; import { PluginErrorFragment } from "@saleor/fragments/types/PluginErrorFragment"; import { ChangeEvent } from "@saleor/hooks/useForm"; import { sectionNames } from "@saleor/intl"; +import { ConfirmButtonTransitionState } from "@saleor/macaw-ui"; import { Backlink } from "@saleor/macaw-ui"; import { getStringOrPlaceholder } from "@saleor/misc"; import { isSecretField } from "@saleor/plugins/utils"; diff --git a/src/plugins/components/PluginsList/PluginAvailabilityStatusPopup/ChannelConfigPluginPopupBody.tsx b/src/plugins/components/PluginsList/PluginAvailabilityStatusPopup/ChannelConfigPluginPopupBody.tsx index dc1efa77b..a9aea82c0 100644 --- a/src/plugins/components/PluginsList/PluginAvailabilityStatusPopup/ChannelConfigPluginPopupBody.tsx +++ b/src/plugins/components/PluginsList/PluginAvailabilityStatusPopup/ChannelConfigPluginPopupBody.tsx @@ -18,7 +18,7 @@ import ScrollableContent from "./ScrollableContent"; const useStyles = makeStyles( theme => ({ itemContainer: { - padding: theme.spacing(0, 1) + padding: theme.spacing(0, 4) } }), { name: "ChannelConfigPluginPopupBody" } diff --git a/src/plugins/components/PluginsList/PluginAvailabilityStatusPopup/PluginAvailabilityStatusPopup.tsx b/src/plugins/components/PluginsList/PluginAvailabilityStatusPopup/PluginAvailabilityStatusPopup.tsx index b3b0ad6fb..cbf437e07 100644 --- a/src/plugins/components/PluginsList/PluginAvailabilityStatusPopup/PluginAvailabilityStatusPopup.tsx +++ b/src/plugins/components/PluginsList/PluginAvailabilityStatusPopup/PluginAvailabilityStatusPopup.tsx @@ -39,7 +39,7 @@ const PluginAvailabilityStatusPopup: React.FC - + {isGlobalPlugin ? ( ) : ( diff --git a/src/plugins/components/PluginsList/PluginsList.tsx b/src/plugins/components/PluginsList/PluginsList.tsx index ba5d1ec1d..db1282758 100644 --- a/src/plugins/components/PluginsList/PluginsList.tsx +++ b/src/plugins/components/PluginsList/PluginsList.tsx @@ -1,9 +1,8 @@ import { TableBody, TableCell, TableFooter, TableRow } from "@material-ui/core"; -import EditIcon from "@material-ui/icons/Edit"; import ResponsiveTable from "@saleor/components/ResponsiveTable"; import Skeleton from "@saleor/components/Skeleton"; import TablePagination from "@saleor/components/TablePagination"; -import { makeStyles } from "@saleor/macaw-ui"; +import { EditIcon, makeStyles } from "@saleor/macaw-ui"; import { renderCollection } from "@saleor/misc"; import { PluginListUrlSortField } from "@saleor/plugins/urls"; import { ListProps, SortPage } from "@saleor/types"; diff --git a/src/productTypes/components/ProductTypeAttributes/ProductTypeAttributes.tsx b/src/productTypes/components/ProductTypeAttributes/ProductTypeAttributes.tsx index 5dbee00ea..1737cdf0d 100644 --- a/src/productTypes/components/ProductTypeAttributes/ProductTypeAttributes.tsx +++ b/src/productTypes/components/ProductTypeAttributes/ProductTypeAttributes.tsx @@ -1,11 +1,4 @@ -import { - Button, - Card, - IconButton, - TableCell, - TableRow -} from "@material-ui/core"; -import DeleteIcon from "@material-ui/icons/Delete"; +import { Card, TableCell, TableRow } from "@material-ui/core"; import CardTitle from "@saleor/components/CardTitle"; import Checkbox from "@saleor/components/Checkbox"; import ResponsiveTable from "@saleor/components/ResponsiveTable"; @@ -15,7 +8,7 @@ import { SortableTableRow } from "@saleor/components/SortableTable"; import TableHead from "@saleor/components/TableHead"; -import { makeStyles } from "@saleor/macaw-ui"; +import { Button, DeleteIcon, IconButton, makeStyles } from "@saleor/macaw-ui"; import { maybe, renderCollection, stopPropagation } from "@saleor/misc"; import { ListActions, ReorderAction } from "@saleor/types"; import { ProductAttributeType } from "@saleor/types/globalTypes"; @@ -33,7 +26,7 @@ const useStyles = makeStyles( "&:last-child": { paddingRight: 0 }, - width: 80 + width: 84 }, colGrab: { width: 60 @@ -97,9 +90,9 @@ const ProductTypeAttributes: React.FC = props => { })} toolbar={ )} {step === ProductExportStep.SETTINGS && ( - )} {step === ProductExportStep.INFO && ( - )} {step === ProductExportStep.SETTINGS && ( = ({ - + diff --git a/src/products/components/ProductList/ProductList.tsx b/src/products/components/ProductList/ProductList.tsx index 29af89f0c..a7f98c49f 100644 --- a/src/products/components/ProductList/ProductList.tsx +++ b/src/products/components/ProductList/ProductList.tsx @@ -144,13 +144,14 @@ export const ProductList: React.FC = props => { const gridAttributesFromSettings = settings.columns.filter( isAttributeColumnValue ); - const numberOfColumns = 2 + settings.columns.length; + const numberOfColumns = + (products?.length === 0 ? 1 : 2) + settings.columns.length; return (
- + {products?.length !== 0 && } diff --git a/src/products/components/ProductMedia/ProductMedia.tsx b/src/products/components/ProductMedia/ProductMedia.tsx index ba7de2de8..16cf80a28 100644 --- a/src/products/components/ProductMedia/ProductMedia.tsx +++ b/src/products/components/ProductMedia/ProductMedia.tsx @@ -1,9 +1,9 @@ -import { Button, Card, CardContent } from "@material-ui/core"; +import { Card, CardContent } from "@material-ui/core"; import CardTitle from "@saleor/components/CardTitle"; import ImageUpload from "@saleor/components/ImageUpload"; import MediaTile from "@saleor/components/MediaTile"; import { ProductMediaFragment } from "@saleor/fragments/types/ProductMediaFragment"; -import { makeStyles } from "@saleor/macaw-ui"; +import { Button, makeStyles } from "@saleor/macaw-ui"; import { ProductMediaPopper } from "@saleor/products/components/ProductMediaPopper/ProductMediaPopper"; import { ReorderAction } from "@saleor/types"; import { ProductMediaType } from "@saleor/types/globalTypes"; @@ -227,8 +227,7 @@ const ProductMedia: React.FC = props => { <>
onVariantDelete(variantIndex)} diff --git a/src/products/components/ProductVariantDeleteDialog/ProductVariantDeleteDialog.tsx b/src/products/components/ProductVariantDeleteDialog/ProductVariantDeleteDialog.tsx index 61a780e6a..6e042cd4a 100644 --- a/src/products/components/ProductVariantDeleteDialog/ProductVariantDeleteDialog.tsx +++ b/src/products/components/ProductVariantDeleteDialog/ProductVariantDeleteDialog.tsx @@ -1,16 +1,13 @@ import { - Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle } from "@material-ui/core"; -import ConfirmButton, { - ConfirmButtonTransitionState -} from "@saleor/components/ConfirmButton"; -import { buttonMessages } from "@saleor/intl"; -import { makeStyles } from "@saleor/macaw-ui"; +import BackButton from "@saleor/components/BackButton"; +import ConfirmButton from "@saleor/components/ConfirmButton"; +import { ConfirmButtonTransitionState, makeStyles } from "@saleor/macaw-ui"; import React from "react"; import { FormattedMessage } from "react-intl"; @@ -60,13 +57,10 @@ const ProductVariantDeleteDialog: React.FC = pr - + - + ); diff --git a/src/products/components/ProductVariantMedia/ProductVariantMedia.tsx b/src/products/components/ProductVariantMedia/ProductVariantMedia.tsx index 16810f9b3..02beeafeb 100644 --- a/src/products/components/ProductVariantMedia/ProductVariantMedia.tsx +++ b/src/products/components/ProductVariantMedia/ProductVariantMedia.tsx @@ -1,8 +1,8 @@ -import { Button, Card, CardContent, Typography } from "@material-ui/core"; +import { Card, CardContent, Typography } from "@material-ui/core"; import CardTitle from "@saleor/components/CardTitle"; import Skeleton from "@saleor/components/Skeleton"; import { ProductMediaFragment } from "@saleor/fragments/types/ProductMediaFragment"; -import { makeStyles } from "@saleor/macaw-ui"; +import { Button, makeStyles } from "@saleor/macaw-ui"; import React from "react"; import { defineMessages, useIntl } from "react-intl"; @@ -69,12 +69,7 @@ export const ProductVariantMedia: React.FC = props => + } diff --git a/src/products/components/ProductVariantNavigation/ProductVariantNavigation.tsx b/src/products/components/ProductVariantNavigation/ProductVariantNavigation.tsx index b73f3d0c3..984193fb4 100644 --- a/src/products/components/ProductVariantNavigation/ProductVariantNavigation.tsx +++ b/src/products/components/ProductVariantNavigation/ProductVariantNavigation.tsx @@ -1,4 +1,4 @@ -import { Button, Card, TableCell, TableRow } from "@material-ui/core"; +import { Card, TableCell, TableRow } from "@material-ui/core"; import { fade } from "@material-ui/core/styles/colorManipulator"; import CardTitle from "@saleor/components/CardTitle"; import ResponsiveTable from "@saleor/components/ResponsiveTable"; @@ -8,7 +8,7 @@ import { SortableTableRow } from "@saleor/components/SortableTable"; import TableCellAvatar from "@saleor/components/TableCellAvatar"; -import { makeStyles } from "@saleor/macaw-ui"; +import { Button, makeStyles } from "@saleor/macaw-ui"; import { ReorderAction } from "@saleor/types"; import classNames from "classnames"; import React from "react"; @@ -31,12 +31,15 @@ const useStyles = makeStyles( display: "block" }, firstVariant: { - width: 88 + width: 104 }, link: { cursor: "pointer" }, noHandle: { + "&&&": { + paddingRight: theme.spacing(3) + }, textAlign: "right" }, tabActive: { @@ -131,7 +134,7 @@ const ProductVariantNavigation: React.FC = props {onAdd ? ( - + = ({ onChange={change} /> -
- diff --git a/src/shipping/components/ShippingZoneAddWarehouseDialog/ShippingZoneAddWarehouseDialog.tsx b/src/shipping/components/ShippingZoneAddWarehouseDialog/ShippingZoneAddWarehouseDialog.tsx index 8440eb37b..c80d4538e 100644 --- a/src/shipping/components/ShippingZoneAddWarehouseDialog/ShippingZoneAddWarehouseDialog.tsx +++ b/src/shipping/components/ShippingZoneAddWarehouseDialog/ShippingZoneAddWarehouseDialog.tsx @@ -1,15 +1,13 @@ import { - Button, Dialog, DialogActions, DialogContent, DialogTitle, TextField } from "@material-ui/core"; +import BackButton from "@saleor/components/BackButton"; import CompanyAddressForm from "@saleor/components/CompanyAddressInput/CompanyAddressForm"; -import ConfirmButton, { - ConfirmButtonTransitionState -} from "@saleor/components/ConfirmButton"; +import ConfirmButton from "@saleor/components/ConfirmButton"; import Form from "@saleor/components/Form"; import FormSpacer from "@saleor/components/FormSpacer"; import Hr from "@saleor/components/Hr"; @@ -21,7 +19,7 @@ import useModalDialogErrors from "@saleor/hooks/useModalDialogErrors"; import useModalDialogOpen from "@saleor/hooks/useModalDialogOpen"; import useStateFromProps from "@saleor/hooks/useStateFromProps"; import { buttonMessages } from "@saleor/intl"; -import { makeStyles } from "@saleor/macaw-ui"; +import { ConfirmButtonTransitionState, makeStyles } from "@saleor/macaw-ui"; import { DialogProps } from "@saleor/types"; import createSingleAutocompleteSelectHandler from "@saleor/utils/handlers/singleAutocompleteSelectChangeHandler"; import { mapCountriesToChoices } from "@saleor/utils/maps"; @@ -138,13 +136,9 @@ const ShippingZoneAddWarehouseDialog: React.FC - + diff --git a/src/shipping/components/ShippingZoneCountriesAssignDialog/ShippingZoneCountriesAssignDialog.tsx b/src/shipping/components/ShippingZoneCountriesAssignDialog/ShippingZoneCountriesAssignDialog.tsx index e65d6ed71..41f8df714 100644 --- a/src/shipping/components/ShippingZoneCountriesAssignDialog/ShippingZoneCountriesAssignDialog.tsx +++ b/src/shipping/components/ShippingZoneCountriesAssignDialog/ShippingZoneCountriesAssignDialog.tsx @@ -1,5 +1,4 @@ import { - Button, Dialog, DialogActions, DialogContent, @@ -10,16 +9,15 @@ import { TextField, Typography } from "@material-ui/core"; +import BackButton from "@saleor/components/BackButton"; import Checkbox from "@saleor/components/Checkbox"; -import ConfirmButton, { - ConfirmButtonTransitionState -} from "@saleor/components/ConfirmButton"; +import ConfirmButton from "@saleor/components/ConfirmButton"; import Form from "@saleor/components/Form"; import FormSpacer from "@saleor/components/FormSpacer"; import Hr from "@saleor/components/Hr"; import ResponsiveTable from "@saleor/components/ResponsiveTable"; import { ShopInfo_shop_countries } from "@saleor/components/Shop/types/ShopInfo"; -import { buttonMessages } from "@saleor/intl"; +import { ConfirmButtonTransitionState } from "@saleor/macaw-ui"; import useScrollableDialogStyle from "@saleor/styles/useScrollableDialogStyle"; import { filter } from "fuzzaldrin"; import React from "react"; @@ -192,13 +190,9 @@ const ShippingZoneCountriesAssignDialog: React.FC - + - + = ({ })} toolbar={ + diff --git a/src/staff/components/StaffDetailsPage/StaffDetailsPage.tsx b/src/staff/components/StaffDetailsPage/StaffDetailsPage.tsx index da1f5bfa5..43e2ab708 100644 --- a/src/staff/components/StaffDetailsPage/StaffDetailsPage.tsx +++ b/src/staff/components/StaffDetailsPage/StaffDetailsPage.tsx @@ -2,7 +2,6 @@ import { Card, CardContent, Typography } from "@material-ui/core"; import AccountPermissionGroups from "@saleor/components/AccountPermissionGroups"; import CardSpacer from "@saleor/components/CardSpacer"; import CardTitle from "@saleor/components/CardTitle"; -import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton"; import Container from "@saleor/components/Container"; import Form from "@saleor/components/Form"; import Grid from "@saleor/components/Grid"; @@ -14,6 +13,7 @@ import { SubmitPromise } from "@saleor/hooks/useForm"; import useLocale from "@saleor/hooks/useLocale"; import useStateFromProps from "@saleor/hooks/useStateFromProps"; import { sectionNames } from "@saleor/intl"; +import { ConfirmButtonTransitionState } from "@saleor/macaw-ui"; import { Backlink } from "@saleor/macaw-ui"; import { getUserName } from "@saleor/misc"; import { SearchPermissionGroups_search_edges_node } from "@saleor/searches/types/SearchPermissionGroups"; @@ -28,6 +28,7 @@ import StaffPassword from "../StaffPassword/StaffPassword"; import StaffPreferences from "../StaffPreferences"; import StaffProperties from "../StaffProperties/StaffProperties"; import { staffDetailsPageMessages as messages } from "./messages"; +import useStyles from "./styles"; export interface StaffDetailsFormData { email: string; @@ -77,6 +78,7 @@ const StaffDetailsPage: React.FC = ({ staffMember }: StaffDetailsPageProps) => { const intl = useIntl(); + const classes = useStyles(); const { locale, setLocale } = useLocale(); const [ permissionGroupsDisplayValues, @@ -135,7 +137,7 @@ const StaffDetailsPage: React.FC = ({ )}
-
+
{canEditPreferences && ( ({ + noOverflow: { + "&&": { + overflow: "visible" + } + } + }), + { name: "StaffDetailsPage" } +); + +export default useStyles; diff --git a/src/staff/components/StaffListPage/StaffListPage.tsx b/src/staff/components/StaffListPage/StaffListPage.tsx index 423dd5893..c77a839c7 100644 --- a/src/staff/components/StaffListPage/StaffListPage.tsx +++ b/src/staff/components/StaffListPage/StaffListPage.tsx @@ -1,11 +1,11 @@ -import { Button, Card } from "@material-ui/core"; +import { Card } from "@material-ui/core"; import { Container } from "@saleor/components/Container"; import FilterBar from "@saleor/components/FilterBar"; import LimitReachedAlert from "@saleor/components/LimitReachedAlert"; import PageHeader from "@saleor/components/PageHeader"; import { RefreshLimits_shop_limits } from "@saleor/components/Shop/types/RefreshLimits"; import { sectionNames } from "@saleor/intl"; -import { Backlink } from "@saleor/macaw-ui"; +import { Backlink, Button } from "@saleor/macaw-ui"; import { StaffListUrlSortField } from "@saleor/staff/urls"; import { FilterPageProps, @@ -80,9 +80,8 @@ const StaffListPage: React.FC = ({ > + diff --git a/src/storybook/__snapshots__/Stories.test.ts.snap b/src/storybook/__snapshots__/Stories.test.ts.snap index ee43ffa78..e1e773030 100644 --- a/src/storybook/__snapshots__/Stories.test.ts.snap +++ b/src/storybook/__snapshots__/Stories.test.ts.snap @@ -32,23 +32,18 @@ exports[`Storyshots Attributes / Attributes default 1`] = ` class="MuiPaper-root-id MuiCard-root-id Attributes-card-id MuiPaper-elevation0-id MuiPaper-rounded-id" >
- - Attributes -
+ class="MuiCardHeader-content-id" + > + + Attributes + +
-
-
@@ -65,25 +60,21 @@ exports[`Storyshots Attributes / Attributes default 1`] = `

- @@ -505,7 +505,7 @@ exports[`Storyshots Attributes / Attributes default 1`] = `
- - Attributes -
+ class="MuiCardHeader-content-id" + > + + Attributes + +
-
-
@@ -759,25 +754,21 @@ exports[`Storyshots Attributes / Attributes disabled 1`] = `

- @@ -1206,7 +1206,7 @@ exports[`Storyshots Attributes / Attributes disabled 1`] = `
- - Attributes -
+ class="MuiCardHeader-content-id" + > + + Attributes + +
-
-
@@ -1464,25 +1459,21 @@ exports[`Storyshots Attributes / Attributes selected 1`] = `

@@ -1692,25 +1679,21 @@ exports[`Storyshots Attributes / Attributes selected 1`] = ` Multiselect Second Value
@@ -1734,7 +1717,7 @@ exports[`Storyshots Attributes / Attributes selected 1`] = `
@@ -1806,7 +1789,7 @@ exports[`Storyshots Attributes / Attributes selected 1`] = ` data-test="attribute-selector" >
@@ -3367,24 +3209,20 @@ exports[`Storyshots Generics / Accordion opened 1`] = ` class="Accordion-expandButton-id" >
@@ -3428,24 +3266,20 @@ exports[`Storyshots Generics / Accordion with quick peek 1`] = ` class="Accordion-expandButton-id" >
@@ -3541,26 +3375,22 @@ exports[`Storyshots Generics / Account Permission Groups Widget default 1`] = ` Unmanagable by user
@@ -3576,25 +3406,21 @@ exports[`Storyshots Generics / Account Permission Groups Widget default 1`] = ` Default group
@@ -3680,26 +3506,22 @@ exports[`Storyshots Generics / Account Permission Groups Widget error 1`] = ` Unmanagable by user @@ -3715,25 +3537,21 @@ exports[`Storyshots Generics / Account Permission Groups Widget error 1`] = ` Default group @@ -4501,25 +4319,25 @@ exports[`Storyshots Generics / Card menu default 1`] = ` @@ -4533,18 +4351,22 @@ exports[`Storyshots Generics / Channels availability card default 1`] = ` class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id" >
- - Availability -
+ + Availability + +
+
-
-
@@ -4619,18 +4435,22 @@ exports[`Storyshots Generics / Channels availability card with onChange 1`] = ` class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id" >
- - Availability -
+ + Availability + +
+
-
-
@@ -4681,7 +4495,9 @@ exports[`Storyshots Generics / Channels availability card with onChange 1`] = `
+ > + available from 07/30/2020 +
@@ -4848,7 +4654,7 @@ exports[`Storyshots Generics / Channels availability card with onChange 1`] = ` role="radiogroup" >
+ > + available from 07/30/2020 +
@@ -6459,25 +6319,25 @@ exports[`Storyshots Generics / File upload field with uploaded file 1`] = ` @@ -6502,7 +6362,7 @@ exports[`Storyshots Generics / Filter default 1`] = ` style="margin:auto;width:400px" >
+ + +
+
+
+ +
-
-
+
+ +
-
-
-
-
@@ -9867,23 +9990,46 @@ exports[`Storyshots Generics / Metadata loading 1`] = ` data-test-is-private="true" >
- - Private Metadata -
+ class="MuiCardHeader-content-id" + > + + Private Metadata + + +
-
-
@@ -9909,23 +10055,12 @@ exports[`Storyshots Generics / Money formatting default 1`] = `
-
-
- EUR -
-
-
- 14.00 -
-
+ EUR + + 14.00
@@ -10442,15 +10577,14 @@ exports[`Storyshots Generics / Multiple select with autocomplete can load more 1 class="MuiCardContent-root-id" >
@@ -11668,25 +11991,21 @@ exports[`Storyshots Generics / Multiple select with autocomplete interactive wit Afghanistan
@@ -11786,25 +12105,21 @@ exports[`Storyshots Generics / Multiple select with autocomplete interactive wit Afghanistan
@@ -11826,15 +12141,14 @@ exports[`Storyshots Generics / Multiple select with autocomplete no data 1`] = ` class="MuiCardContent-root-id" >
@@ -11915,14 +12258,24 @@ exports[`Storyshots Generics / NavigatorButton other 1`] = ` style="padding:24px" >
@@ -11938,7 +12291,7 @@ exports[`Storyshots Generics / PageHeader with title 1`] = ` data-test-id="page-header" >
Lorem ipsum
@@ -11962,7 +12315,7 @@ exports[`Storyshots Generics / PageHeader with title icon bar 1`] = ` data-test-id="page-header" >
Lorem ipsum
@@ -11987,7 +12340,10 @@ exports[`Storyshots Generics / PageHeader with title icon bar 1`] = ` viewBox="0 0 24 24" > @@ -12007,7 +12363,7 @@ exports[`Storyshots Generics / PageHeader without title 1`] = ` data-test-id="page-header" >
@@ -13629,15 +13964,14 @@ exports[`Storyshots Generics / Select with autocomplete with add 1`] = ` class="MuiCardContent-root-id" >