djkato/saleor-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Do not use getMutationState explicitly

Browse source
This commit is contained in:
dominik-zeglen 2019-12-06 18:11:46 +01:00
parent fad6dfe22a
commit 6b62f5cc40
56 changed files with 2127 additions and 2904 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

156
src/attributes/views/AttributeCreate/AttributeCreate.tsx
View file

@ -4,7 +4,7 @@ import slugify from "slugify";
import useNavigator from "@saleor/hooks/useNavigator";
import useNotifier from "@saleor/hooks/useNotifier";
import { getMutationState, maybe } from "@saleor/misc";
import { maybe } from "@saleor/misc";
import { ReorderEvent, UserError } from "@saleor/types";
import {
add,
@ -131,88 +131,80 @@ const AttributeDetails: React.FC<AttributeDetailsProps> = ({ params }) => {
return (
<AttributeCreateMutation onCompleted={handleCreate}>
{(attributeCreate, attributeCreateOpts) => {
const createTransitionState = getMutationState(
attributeCreateOpts.called,
attributeCreateOpts.loading,
maybe(() => attributeCreateOpts.data.attributeCreate.errors)
);
return (
<>
<AttributePage
attribute={null}
disabled={false}
errors={maybe(
() => attributeCreateOpts.data.attributeCreate.errors,
[]
)}
onBack={() => navigate(attributeListUrl())}
onDelete={undefined}
onSubmit={input =>
attributeCreate({
variables: {
input: {
...input,
storefrontSearchPosition: parseInt(
input.storefrontSearchPosition,
0
),
values: values.map(value => ({
name: value.name
}))
}
}
})
}
onValueAdd={() => openModal("add-value")}
onValueDelete={id => openModal("remove-value", id)}
onValueReorder={handleValueReorder}
onValueUpdate={id => openModal("edit-value", id)}
saveButtonBarState={createTransitionState}
values={values.map((value, valueIndex) => ({
__typename: "AttributeValue" as "AttributeValue",
id: valueIndex.toString(),
slug: slugify(value.name).toLowerCase(),
sortOrder: valueIndex,
type: null,
value: null,
...value
}))}
/>
<AttributeValueEditDialog
attributeValue={null}
confirmButtonState="default"
disabled={false}
errors={valueErrors}
open={params.action === "add-value"}
onClose={closeModal}
onSubmit={handleValueCreate}
/>
{values.length > 0 && (
<>
<AttributeValueDeleteDialog
attributeName={undefined}
open={params.action === "remove-value"}
name={maybe(() => values[id].name, "...")}
confirmButtonState="default"
onClose={closeModal}
onConfirm={handleValueDelete}
/>
<AttributeValueEditDialog
attributeValue={maybe(() => values[params.id])}
confirmButtonState="default"
disabled={false}
errors={valueErrors}
open={params.action === "edit-value"}
onClose={closeModal}
onSubmit={handleValueUpdate}
/>
</>
{(attributeCreate, attributeCreateOpts) => (
<>
<AttributePage
attribute={null}
disabled={false}
errors={maybe(
() => attributeCreateOpts.data.attributeCreate.errors,
[]
)}
</>
);
}}
onBack={() => navigate(attributeListUrl())}
onDelete={undefined}
onSubmit={input =>
attributeCreate({
variables: {
input: {
...input,
storefrontSearchPosition: parseInt(
input.storefrontSearchPosition,
0
),
values: values.map(value => ({
name: value.name
}))
}
}
})
}
onValueAdd={() => openModal("add-value")}
onValueDelete={id => openModal("remove-value", id)}
onValueReorder={handleValueReorder}
onValueUpdate={id => openModal("edit-value", id)}
saveButtonBarState={attributeCreateOpts.state}
values={values.map((value, valueIndex) => ({
__typename: "AttributeValue" as "AttributeValue",
id: valueIndex.toString(),
slug: slugify(value.name).toLowerCase(),
sortOrder: valueIndex,
type: null,
value: null,
...value
}))}
/>
<AttributeValueEditDialog
attributeValue={null}
confirmButtonState="default"
disabled={false}
errors={valueErrors}
open={params.action === "add-value"}
onClose={closeModal}
onSubmit={handleValueCreate}
/>
{values.length > 0 && (
<>
<AttributeValueDeleteDialog
attributeName={undefined}
open={params.action === "remove-value"}
name={maybe(() => values[id].name, "...")}
confirmButtonState="default"
onClose={closeModal}
onConfirm={handleValueDelete}
/>
<AttributeValueEditDialog
attributeValue={maybe(() => values[params.id])}
confirmButtonState="default"
disabled={false}
errors={valueErrors}
open={params.action === "edit-value"}
onClose={closeModal}
onSubmit={handleValueUpdate}
/>
</>
)}
</>
)}
</AttributeCreateMutation>
);
};

62
src/attributes/views/AttributeDetails/AttributeDetails.tsx
View file

@ -4,7 +4,7 @@ import { useIntl } from "react-intl";
import useNavigator from "@saleor/hooks/useNavigator";
import useNotifier from "@saleor/hooks/useNotifier";
import { commonMessages } from "@saleor/intl";
import { getMutationState, maybe } from "@saleor/misc";
import { maybe } from "@saleor/misc";
import { ReorderEvent } from "@saleor/types";
import { move } from "@saleor/utils/lists";
import AttributeDeleteDialog from "../../components/AttributeDeleteDialog";
@ -135,52 +135,6 @@ const AttributeDetails: React.FC<AttributeDetailsProps> = ({ id, params }) => {
onCompleted={handleValueReorderMutation}
>
{attributeValueReorder => {
const deleteTransitionState = getMutationState(
attributeDeleteOpts.called,
attributeDeleteOpts.loading,
maybe(
() =>
attributeDeleteOpts.data.attributeDelete
.errors
)
);
const deleteValueTransitionState = getMutationState(
attributeValueDeleteOpts.called,
attributeValueDeleteOpts.loading,
maybe(
() =>
attributeValueDeleteOpts.data
.attributeValueDelete.errors
)
);
const updateTransitionState = getMutationState(
attributeUpdateOpts.called,
attributeUpdateOpts.loading,
maybe(
() =>
attributeUpdateOpts.data.attributeUpdate
.errors
)
);
const updateValueTransitionState = getMutationState(
attributeValueUpdateOpts.called,
attributeValueUpdateOpts.loading,
maybe(
() =>
attributeValueUpdateOpts.data
.attributeValueUpdate.errors
)
);
const createValueTransitionState = getMutationState(
attributeValueCreateOpts.called,
attributeValueCreateOpts.loading,
maybe(
() =>
attributeValueCreateOpts.data
.attributeValueCreate.errors
)
);
const handleValueReorder = ({
newIndex,
oldIndex
@ -252,7 +206,9 @@ const AttributeDetails: React.FC<AttributeDetailsProps> = ({ id, params }) => {
onValueUpdate={id =>
openModal("edit-value", id)
}
saveButtonBarState={updateTransitionState}
saveButtonBarState={
attributeUpdateOpts.state
}
values={maybe(
() => data.attribute.values
)}
@ -263,7 +219,9 @@ const AttributeDetails: React.FC<AttributeDetailsProps> = ({ id, params }) => {
() => data.attribute.name,
"..."
)}
confirmButtonState={deleteTransitionState}
confirmButtonState={
attributeDeleteOpts.state
}
onClose={closeModal}
onConfirm={() =>
attributeDelete({
@ -288,7 +246,7 @@ const AttributeDetails: React.FC<AttributeDetailsProps> = ({ id, params }) => {
)}
useName={true}
confirmButtonState={
deleteValueTransitionState
attributeValueDeleteOpts.state
}
onClose={closeModal}
onConfirm={() =>
@ -302,7 +260,7 @@ const AttributeDetails: React.FC<AttributeDetailsProps> = ({ id, params }) => {
<AttributeValueEditDialog
attributeValue={null}
confirmButtonState={
createValueTransitionState
attributeValueCreateOpts.state
}
disabled={loading}
errors={maybe(
@ -329,7 +287,7 @@ const AttributeDetails: React.FC<AttributeDetailsProps> = ({ id, params }) => {
)
)}
confirmButtonState={
updateValueTransitionState
attributeValueUpdateOpts.state
}
disabled={loading}
errors={maybe(

134
src/attributes/views/AttributeList/AttributeList.tsx
View file

@ -23,7 +23,7 @@ import usePaginator, {
} from "@saleor/hooks/usePaginator";
import { PAGINATE_BY } from "../../../config";
import useBulkActions from "../../../hooks/useBulkActions";
import { getMutationState, maybe } from "../../../misc";
import { maybe } from "../../../misc";
import AttributeBulkDeleteDialog from "../../components/AttributeBulkDeleteDialog";
import AttributeListPage from "../../components/AttributeListPage";
import { AttributeBulkDeleteMutation } from "../../mutations";
@ -145,77 +145,67 @@ const AttributeList: React.FC<AttributeListProps> = ({ params }) => {
return (
<AttributeBulkDeleteMutation onCompleted={handleBulkDelete}>
{(attributeBulkDelete, attributeBulkDeleteOpts) => {
const bulkDeleteMutationState = getMutationState(
attributeBulkDeleteOpts.called,
attributeBulkDeleteOpts.loading,
maybe(
() => attributeBulkDeleteOpts.data.attributeBulkDelete.errors
)
);
return (
<>
<AttributeListPage
attributes={maybe(() =>
data.attributes.edges.map(edge => edge.node)
)}
currentTab={currentTab}
disabled={loading || attributeBulkDeleteOpts.loading}
initialSearch={params.query || ""}
isChecked={isSelected}
onAdd={() => navigate(attributeAddUrl())}
onAll={() => navigate(attributeListUrl())}
onBack={() => navigate(configurationMenuUrl)}
onNextPage={loadNextPage}
onPreviousPage={loadPreviousPage}
onRowClick={id => () => navigate(attributeUrl(id))}
onSearchChange={query => changeFilterField({ query })}
onTabChange={handleTabChange}
onTabDelete={() => openModal("delete-search")}
onTabSave={() => openModal("save-search")}
pageInfo={pageInfo}
selected={listElements.length}
tabs={tabs.map(tab => tab.name)}
toggle={toggle}
toggleAll={toggleAll}
toolbar={
<IconButton
color="primary"
onClick={() => openModal("remove", listElements)}
>
<DeleteIcon />
</IconButton>
}
/>
<AttributeBulkDeleteDialog
confirmButtonState={bulkDeleteMutationState}
open={
params.action === "remove" &&
maybe(() => params.ids.length > 0)
}
onConfirm={() =>
attributeBulkDelete({ variables: { ids: params.ids } })
}
onClose={closeModal}
quantity={maybe(() => params.ids.length)}
/>
<SaveFilterTabDialog
open={params.action === "save-search"}
confirmButtonState="default"
onClose={closeModal}
onSubmit={handleTabSave}
/>
<DeleteFilterTabDialog
open={params.action === "delete-search"}
confirmButtonState="default"
onClose={closeModal}
onSubmit={handleTabDelete}
tabName={maybe(() => tabs[currentTab - 1].name, "...")}
/>
</>
);
}}
{(attributeBulkDelete, attributeBulkDeleteOpts) => (
<>
<AttributeListPage
attributes={maybe(() =>
data.attributes.edges.map(edge => edge.node)
)}
currentTab={currentTab}
disabled={loading || attributeBulkDeleteOpts.loading}
initialSearch={params.query || ""}
isChecked={isSelected}
onAdd={() => navigate(attributeAddUrl())}
onAll={() => navigate(attributeListUrl())}
onBack={() => navigate(configurationMenuUrl)}
onNextPage={loadNextPage}
onPreviousPage={loadPreviousPage}
onRowClick={id => () => navigate(attributeUrl(id))}
onSearchChange={query => changeFilterField({ query })}
onTabChange={handleTabChange}
onTabDelete={() => openModal("delete-search")}
onTabSave={() => openModal("save-search")}
pageInfo={pageInfo}
selected={listElements.length}
tabs={tabs.map(tab => tab.name)}
toggle={toggle}
toggleAll={toggleAll}
toolbar={
<IconButton
color="primary"
onClick={() => openModal("remove", listElements)}
>
<DeleteIcon />
</IconButton>
}
/>
<AttributeBulkDeleteDialog
confirmButtonState={attributeBulkDeleteOpts.state}
open={
params.action === "remove" &&
maybe(() => params.ids.length > 0)
}
onConfirm={() =>
attributeBulkDelete({ variables: { ids: params.ids } })
}
onClose={closeModal}
quantity={maybe(() => params.ids.length)}
/>
<SaveFilterTabDialog
open={params.action === "save-search"}
confirmButtonState="default"
onClose={closeModal}
onSubmit={handleTabSave}
/>
<DeleteFilterTabDialog
open={params.action === "delete-search"}
confirmButtonState="default"
onClose={closeModal}
onSubmit={handleTabDelete}
tabName={maybe(() => tabs[currentTab - 1].name, "...")}
/>
</>
)}
</AttributeBulkDeleteMutation>
);
}}

10
src/categories/views/CategoryCreate.tsx
View file

@ -4,7 +4,7 @@ import { useIntl } from "react-intl";
import { WindowTitle } from "@saleor/components/WindowTitle";
import useNavigator from "@saleor/hooks/useNavigator";
import useNotifier from "@saleor/hooks/useNotifier";
import { getMutationState, maybe } from "../../misc";
import { maybe } from "../../misc";
import CategoryCreatePage from "../components/CategoryCreatePage";
import { useCategoryCreateMutation } from "../mutations";
import { CategoryCreate } from "../types/CategoryCreate";
@ -41,12 +41,6 @@ export const CategoryCreateView: React.FC<CategoryCreateViewProps> = ({
[]
);
const formTransitionState = getMutationState(
createCategoryResult.called,
createCategoryResult.loading,
errors
);
return (
<>
<WindowTitle
@ -56,7 +50,7 @@ export const CategoryCreateView: React.FC<CategoryCreateViewProps> = ({
})}
/>
<CategoryCreatePage
saveButtonBarState={formTransitionState}
saveButtonBarState={createCategoryResult.state}
errors={errors}
disabled={createCategoryResult.loading}
onBack={() =>

372
src/categories/views/CategoryDetails.tsx
View file

@ -14,7 +14,7 @@ import usePaginator, {
} from "@saleor/hooks/usePaginator";
import { commonMessages } from "@saleor/intl";
import { PAGINATE_BY } from "../../config";
import { getMutationState, maybe } from "../../misc";
import { maybe } from "../../misc";
import { TypedProductBulkDeleteMutation } from "../../products/mutations";
import { productBulkDelete } from "../../products/types/productBulkDelete";
import { productAddUrl, productUrl } from "../../products/urls";
@ -147,17 +147,6 @@ export const CategoryDetails: React.FC<CategoryDetailsProps> = ({
})
);
const formTransitionState = getMutationState(
updateResult.called,
updateResult.loading,
maybe(() => updateResult.data.categoryUpdate.errors)
);
const removeDialogTransitionState = getMutationState(
deleteResult.called,
deleteResult.loading,
maybe(() => deleteResult.data.categoryDelete.errors)
);
const handleBulkProductDelete = (data: productBulkDelete) => {
if (data.productBulkDelete.errors.length === 0) {
closeModal();
@ -181,196 +170,181 @@ export const CategoryDetails: React.FC<CategoryDetailsProps> = ({
<>
<WindowTitle title={maybe(() => data.category.name)} />
<TypedProductBulkDeleteMutation onCompleted={handleBulkProductDelete}>
{(productBulkDelete, productBulkDeleteOpts) => {
const categoryBulkDeleteMutationState = getMutationState(
categoryBulkDeleteOpts.called,
categoryBulkDeleteOpts.loading,
maybe(() => categoryBulkDeleteOpts.data.categoryBulkDelete.errors)
);
const productBulkDeleteMutationState = getMutationState(
productBulkDeleteOpts.called,
productBulkDeleteOpts.loading,
maybe(() => productBulkDeleteOpts.data.productBulkDelete.errors)
);
return (
<>
<CategoryUpdatePage
changeTab={changeTab}
currentTab={params.activeTab}
category={maybe(() => data.category)}
disabled={loading}
errors={maybe(() => updateResult.data.categoryUpdate.errors)}
onAddCategory={() => navigate(categoryAddUrl(id))}
onAddProduct={() => navigate(productAddUrl)}
onBack={() =>
navigate(
maybe(
() => categoryUrl(data.category.parent.id),
categoryListUrl()
)
{(productBulkDelete, productBulkDeleteOpts) => (
<>
<CategoryUpdatePage
changeTab={changeTab}
currentTab={params.activeTab}
category={maybe(() => data.category)}
disabled={loading}
errors={maybe(() => updateResult.data.categoryUpdate.errors)}
onAddCategory={() => navigate(categoryAddUrl(id))}
onAddProduct={() => navigate(productAddUrl)}
onBack={() =>
navigate(
maybe(
() => categoryUrl(data.category.parent.id),
categoryListUrl()
)
}
onCategoryClick={id => () => navigate(categoryUrl(id))}
onDelete={() => openModal("delete")}
onImageDelete={() =>
updateCategory({
variables: {
id,
input: {
backgroundImage: null
)
}
onCategoryClick={id => () => navigate(categoryUrl(id))}
onDelete={() => openModal("delete")}
onImageDelete={() =>
updateCategory({
variables: {
id,
input: {
backgroundImage: null
}
}
})
}
onImageUpload={file =>
updateCategory({
variables: {
id,
input: {
backgroundImage: file
}
}
})
}
onNextPage={loadNextPage}
onPreviousPage={loadPreviousPage}
pageInfo={pageInfo}
onProductClick={id => () => navigate(productUrl(id))}
onSubmit={formData =>
updateCategory({
variables: {
id,
input: {
backgroundImageAlt: formData.backgroundImageAlt,
descriptionJson: JSON.stringify(formData.description),
name: formData.name,
seo: {
description: formData.seoDescription,
title: formData.seoTitle
}
}
})
}
onImageUpload={file =>
updateCategory({
variables: {
id,
input: {
backgroundImage: file
}
}
})
}
onNextPage={loadNextPage}
onPreviousPage={loadPreviousPage}
pageInfo={pageInfo}
onProductClick={id => () => navigate(productUrl(id))}
onSubmit={formData =>
updateCategory({
variables: {
id,
input: {
backgroundImageAlt: formData.backgroundImageAlt,
descriptionJson: JSON.stringify(formData.description),
name: formData.name,
seo: {
description: formData.seoDescription,
title: formData.seoTitle
}
}
}
})
}
products={maybe(() =>
data.category.products.edges.map(edge => edge.node)
)}
saveButtonBarState={formTransitionState}
subcategories={maybe(() =>
data.category.children.edges.map(edge => edge.node)
)}
subcategoryListToolbar={
<IconButton
color="primary"
onClick={() => openModal("delete-categories", listElements)}
>
<DeleteIcon />
</IconButton>
}
productListToolbar={
<IconButton
color="primary"
onClick={() => openModal("delete-products", listElements)}
>
<DeleteIcon />
</IconButton>
}
isChecked={isSelected}
selected={listElements.length}
toggle={toggle}
toggleAll={toggleAll}
/>
<ActionDialog
confirmButtonState={removeDialogTransitionState}
onClose={closeModal}
onConfirm={() => deleteCategory({ variables: { id } })}
open={params.action === "delete"}
title={intl.formatMessage({
defaultMessage: "Delete category",
description: "dialog title"
})}
variant="delete"
>
<DialogContentText>
<FormattedMessage
defaultMessage="Are you sure you want to delete {categoryName}?"
values={{
categoryName: (
<strong>
{maybe(() => data.category.name, "...")}
</strong>
)
}}
/>
</DialogContentText>
<DialogContentText>
<FormattedMessage defaultMessage="Remember this will also delete all products assigned to this category." />
</DialogContentText>
</ActionDialog>
<ActionDialog
open={
params.action === "delete-categories" &&
maybe(() => params.ids.length > 0)
}
confirmButtonState={categoryBulkDeleteMutationState}
onClose={closeModal}
onConfirm={() =>
categoryBulkDelete({
variables: { ids: params.ids }
}).then(() => refetch())
}
title={intl.formatMessage({
defaultMessage: "Delete categories",
description: "dialog title"
})}
variant="delete"
>
<DialogContentText>
<FormattedMessage
defaultMessage="Are you sure you want to delete {counter,plural,one{this category} other{{displayQuantity} categories}}?"
values={{
counter: maybe(() => params.ids.length),
displayQuantity: (
<strong>{maybe(() => params.ids.length)}</strong>
)
}}
/>
</DialogContentText>
<DialogContentText>
<FormattedMessage defaultMessage="Remember this will also delete all products assigned to this category." />
</DialogContentText>
</ActionDialog>
<ActionDialog
open={params.action === "delete-products"}
confirmButtonState={productBulkDeleteMutationState}
onClose={closeModal}
onConfirm={() =>
productBulkDelete({
variables: { ids: params.ids }
}).then(() => refetch())
}
title={intl.formatMessage({
defaultMessage: "Delete products",
description: "dialog title"
})}
variant="delete"
>
<DialogContentText>
<FormattedMessage
defaultMessage="Are you sure you want to delete {counter,plural,one{this product} other{{displayQuantity} products}}?"
values={{
counter: maybe(() => params.ids.length),
displayQuantity: (
<strong>{maybe(() => params.ids.length)}</strong>
)
}}
/>
</DialogContentText>
</ActionDialog>
</>
);
}}
}
})
}
products={maybe(() =>
data.category.products.edges.map(edge => edge.node)
)}
saveButtonBarState={updateResult.state}
subcategories={maybe(() =>
data.category.children.edges.map(edge => edge.node)
)}
subcategoryListToolbar={
<IconButton
color="primary"
onClick={() => openModal("delete-categories", listElements)}
>
<DeleteIcon />
</IconButton>
}
productListToolbar={
<IconButton
color="primary"
onClick={() => openModal("delete-products", listElements)}
>
<DeleteIcon />
</IconButton>
}
isChecked={isSelected}
selected={listElements.length}
toggle={toggle}
toggleAll={toggleAll}
/>
<ActionDialog
confirmButtonState={deleteResult.state}
onClose={closeModal}
onConfirm={() => deleteCategory({ variables: { id } })}
open={params.action === "delete"}
title={intl.formatMessage({
defaultMessage: "Delete category",
description: "dialog title"
})}
variant="delete"
>
<DialogContentText>
<FormattedMessage
defaultMessage="Are you sure you want to delete {categoryName}?"
values={{
categoryName: (
<strong>{maybe(() => data.category.name, "...")}</strong>
)
}}
/>
</DialogContentText>
<DialogContentText>
<FormattedMessage defaultMessage="Remember this will also delete all products assigned to this category." />
</DialogContentText>
</ActionDialog>
<ActionDialog
open={
params.action === "delete-categories" &&
maybe(() => params.ids.length > 0)
}
confirmButtonState={categoryBulkDeleteOpts.state}
onClose={closeModal}
onConfirm={() =>
categoryBulkDelete({
variables: { ids: params.ids }
}).then(() => refetch())
}
title={intl.formatMessage({
defaultMessage: "Delete categories",
description: "dialog title"
})}
variant="delete"
>
<DialogContentText>
<FormattedMessage
defaultMessage="Are you sure you want to delete {counter,plural,one{this category} other{{displayQuantity} categories}}?"
values={{
counter: maybe(() => params.ids.length),
displayQuantity: (
<strong>{maybe(() => params.ids.length)}</strong>
)
}}
/>
</DialogContentText>
<DialogContentText>
<FormattedMessage defaultMessage="Remember this will also delete all products assigned to this category." />
</DialogContentText>
</ActionDialog>
<ActionDialog
open={params.action === "delete-products"}
confirmButtonState={productBulkDeleteOpts.state}
onClose={closeModal}
onConfirm={() =>
productBulkDelete({
variables: { ids: params.ids }
}).then(() => refetch())
}
title={intl.formatMessage({
defaultMessage: "Delete products",
description: "dialog title"
})}
variant="delete"
>
<DialogContentText>
<FormattedMessage
defaultMessage="Are you sure you want to delete {counter,plural,one{this product} other{{displayQuantity} products}}?"
values={{
counter: maybe(() => params.ids.length),
displayQuantity: (
<strong>{maybe(() => params.ids.length)}</strong>
)
}}
/>
</DialogContentText>
</ActionDialog>
</>
)}
</TypedProductBulkDeleteMutation>
</>
);

10
src/categories/views/CategoryList/CategoryList.tsx
View file

@ -15,7 +15,7 @@ import useNavigator from "@saleor/hooks/useNavigator";
import usePaginator, {
createPaginationState
} from "@saleor/hooks/usePaginator";
import { getMutationState, maybe } from "@saleor/misc";
import { maybe } from "@saleor/misc";
import { ListViews } from "@saleor/types";
import { CategoryListPage } from "../../components/CategoryListPage/CategoryListPage";
import { useCategoryBulkDeleteMutation } from "../../mutations";
@ -148,12 +148,6 @@ export const CategoryList: React.FC<CategoryListProps> = ({ params }) => {
onCompleted: handleCategoryBulkDelete
});
const bulkDeleteState = getMutationState(
categoryBulkDeleteOpts.called,
categoryBulkDeleteOpts.loading,
maybe(() => categoryBulkDeleteOpts.data.categoryBulkDelete.errors)
);
return (
<>
<CategoryListPage
@ -199,7 +193,7 @@ export const CategoryList: React.FC<CategoryListProps> = ({ params }) => {
}
/>
<ActionDialog
confirmButtonState={bulkDeleteState}
confirmButtonState={categoryBulkDeleteOpts.state}
onClose={() =>
navigate(
categoryListUrl({

74
src/collections/views/CollectionCreate.tsx
View file

@ -4,7 +4,7 @@ import { useIntl } from "react-intl";
import { WindowTitle } from "@saleor/components/WindowTitle";
import useNavigator from "@saleor/hooks/useNavigator";
import useNotifier from "@saleor/hooks/useNotifier";
import { getMutationState, maybe } from "../../misc";
import { maybe } from "../../misc";
import { CollectionCreateInput } from "../../types/globalTypes";
import CollectionCreatePage from "../components/CollectionCreatePage/CollectionCreatePage";
import { TypedCollectionCreateMutation } from "../mutations";
@ -38,46 +38,42 @@ export const CollectionCreate: React.FC = () => {
};
return (
<TypedCollectionCreateMutation onCompleted={handleCollectionCreateSuccess}>
{(createCollection, { called, data, loading }) => {
const formTransitionState = getMutationState(
called,
loading,
maybe(() => data.collectionCreate.errors)
);
return (
<>
<WindowTitle
title={intl.formatMessage({
defaultMessage: "Create collection",
description: "window title"
})}
/>
<CollectionCreatePage
errors={maybe(() => data.collectionCreate.errors, [])}
onBack={() => navigate(collectionListUrl())}
disabled={loading}
onSubmit={formData =>
createCollection({
variables: {
input: {
backgroundImage: formData.backgroundImage.value,
backgroundImageAlt: formData.backgroundImageAlt,
descriptionJson: JSON.stringify(formData.description),
isPublished: formData.isPublished,
name: formData.name,
seo: {
description: formData.seoDescription,
title: formData.seoTitle
}
{(createCollection, createCollectionOpts) => (
<>
<WindowTitle
title={intl.formatMessage({
defaultMessage: "Create collection",
description: "window title"
})}
/>
<CollectionCreatePage
errors={maybe(
() => createCollectionOpts.data.collectionCreate.errors,
[]
)}
onBack={() => navigate(collectionListUrl())}
disabled={createCollectionOpts.loading}
onSubmit={formData =>
createCollection({
variables: {
input: {
backgroundImage: formData.backgroundImage.value,
backgroundImageAlt: formData.backgroundImageAlt,
descriptionJson: JSON.stringify(formData.description),
isPublished: formData.isPublished,
name: formData.name,
seo: {
description: formData.seoDescription,
title: formData.seoTitle
}
}
})
}
saveButtonBarState={formTransitionState}
/>
</>
);
}}
}
})
}
saveButtonBarState={createCollectionOpts.state}
/>
</>
)}
</TypedCollectionCreateMutation>
);
};

33
src/collections/views/CollectionDetails.tsx
View file

@ -195,31 +195,6 @@ export const CollectionDetails: React.FC<CollectionDetailsProps> = ({
.homepageCollectionUpdate.errors
)
);
const assignTransitionState = getMutationState(
assignProduct.opts.called,
assignProduct.opts.loading,
maybe(
() => assignProduct.opts.data.collectionAddProducts.errors
)
);
const unassignTransitionState = getMutationState(
unassignProduct.opts.called,
unassignProduct.opts.loading,
maybe(
() =>
unassignProduct.opts.data.collectionRemoveProducts.errors
)
);
const removeTransitionState = getMutationState(
removeCollection.opts.called,
removeCollection.opts.loading,
maybe(() => removeCollection.opts.data.collectionDelete.errors)
);
const imageRemoveTransitionState = getMutationState(
updateCollection.opts.called,
updateCollection.opts.loading,
maybe(() => updateCollection.opts.data.collectionUpdate.errors)
);
const { loadNextPage, loadPreviousPage, pageInfo } = paginate(
maybe(() => data.collection.products.pageInfo),
@ -288,7 +263,7 @@ export const CollectionDetails: React.FC<CollectionDetailsProps> = ({
toggleAll={toggleAll}
/>
<AssignProductDialog
confirmButtonState={assignTransitionState}
confirmButtonState={assignProduct.opts.state}
open={params.action === "assign"}
onFetch={search}
loading={result.loading}
@ -307,7 +282,7 @@ export const CollectionDetails: React.FC<CollectionDetailsProps> = ({
)}
/>
<ActionDialog
confirmButtonState={removeTransitionState}
confirmButtonState={removeCollection.opts.state}
onClose={closeModal}
onConfirm={() => removeCollection.mutate({ id })}
open={params.action === "remove"}
@ -331,7 +306,7 @@ export const CollectionDetails: React.FC<CollectionDetailsProps> = ({
</DialogContentText>
</ActionDialog>
<ActionDialog
confirmButtonState={unassignTransitionState}
confirmButtonState={unassignProduct.opts.state}
onClose={closeModal}
onConfirm={() =>
unassignProduct.mutate({
@ -359,7 +334,7 @@ export const CollectionDetails: React.FC<CollectionDetailsProps> = ({
</DialogContentText>
</ActionDialog>
<ActionDialog
confirmButtonState={imageRemoveTransitionState}
confirmButtonState={updateCollection.opts.state}
onClose={closeModal}
onConfirm={() =>
updateCollection.mutate({

368
src/collections/views/CollectionList/CollectionList.tsx
View file

@ -18,7 +18,7 @@ import usePaginator, {
createPaginationState
} from "@saleor/hooks/usePaginator";
import { commonMessages } from "@saleor/intl";
import { getMutationState, maybe } from "@saleor/misc";
import { maybe } from "@saleor/misc";
import { ListViews } from "@saleor/types";
import CollectionListPage from "../../components/CollectionListPage/CollectionListPage";
import {
@ -167,204 +167,174 @@ export const CollectionList: React.FC<CollectionListProps> = ({ params }) => {
<TypedCollectionBulkPublish
onCompleted={handleCollectionBulkPublish}
>
{(collectionBulkPublish, collectionBulkPublishOpts) => {
const bulkDeleteTransitionState = getMutationState(
collectionBulkDeleteOpts.called,
collectionBulkDeleteOpts.loading,
maybe(
() =>
collectionBulkDeleteOpts.data.collectionBulkDelete
.errors
)
);
const bulkPublishTransitionState = getMutationState(
collectionBulkPublishOpts.called,
collectionBulkPublishOpts.loading,
maybe(
() =>
collectionBulkPublishOpts.data.collectionBulkPublish
.errors
)
);
return (
<>
<CollectionListPage
currentTab={currentTab}
initialSearch={params.query || ""}
onSearchChange={query => changeFilterField({ query })}
onAdd={() => navigate(collectionAddUrl)}
onAll={() => navigate(collectionListUrl())}
onTabChange={handleTabChange}
onTabDelete={() => openModal("delete-search")}
onTabSave={() => openModal("save-search")}
tabs={tabs.map(tab => tab.name)}
disabled={loading}
collections={maybe(() =>
data.collections.edges.map(edge => edge.node)
)}
settings={settings}
onNextPage={loadNextPage}
onPreviousPage={loadPreviousPage}
onUpdateListSettings={updateListSettings}
pageInfo={pageInfo}
onRowClick={id => () => navigate(collectionUrl(id))}
toolbar={
<>
<Button
color="primary"
onClick={() =>
openModal("unpublish", listElements)
}
>
<FormattedMessage
defaultMessage="Unpublish"
description="unpublish collections"
/>
</Button>
<Button
color="primary"
onClick={() => openModal("publish", listElements)}
>
<FormattedMessage
defaultMessage="Publish"
description="publish collections"
/>
</Button>
<IconButton
color="primary"
onClick={() => openModal("remove", listElements)}
>
<DeleteIcon />
</IconButton>
</>
}
isChecked={isSelected}
selected={listElements.length}
toggle={toggle}
toggleAll={toggleAll}
/>
<ActionDialog
open={
params.action === "publish" &&
maybe(() => params.ids.length > 0)
}
onClose={closeModal}
confirmButtonState={bulkPublishTransitionState}
onConfirm={() =>
collectionBulkPublish({
variables: {
ids: params.ids,
isPublished: true
}
})
}
variant="default"
title={intl.formatMessage({
defaultMessage: "Publish collections",
description: "dialog title"
})}
>
<DialogContentText>
<FormattedMessage
defaultMessage="Are you sure you want to publish {counter,plural,one{this collection} other{{displayQuantity} collections}}?"
values={{
counter: maybe(() => params.ids.length),
displayQuantity: (
<strong>
{maybe(() => params.ids.length)}
</strong>
)
}}
/>
</DialogContentText>
</ActionDialog>
<ActionDialog
open={
params.action === "unpublish" &&
maybe(() => params.ids.length > 0)
}
onClose={closeModal}
confirmButtonState={bulkPublishTransitionState}
onConfirm={() =>
collectionBulkPublish({
variables: {
ids: params.ids,
isPublished: false
}
})
}
variant="default"
title={intl.formatMessage({
defaultMessage: "Unpublish collections",
description: "dialog title"
})}
>
<DialogContentText>
<FormattedMessage
defaultMessage="Are you sure you want to unpublish {counter,plural,one{this collection} other{{displayQuantity} collections}}?"
values={{
counter: maybe(() => params.ids.length),
displayQuantity: (
<strong>
{maybe(() => params.ids.length)}
</strong>
)
}}
/>
</DialogContentText>
</ActionDialog>
<ActionDialog
open={
params.action === "remove" &&
maybe(() => params.ids.length > 0)
}
onClose={closeModal}
confirmButtonState={bulkDeleteTransitionState}
onConfirm={() =>
collectionBulkDelete({
variables: {
ids: params.ids
}
})
}
variant="delete"
title={intl.formatMessage({
defaultMessage: "Delete collections",
description: "dialog title"
})}
>
<DialogContentText>
<FormattedMessage
defaultMessage="Are you sure you want to delete {counter,plural,one{this collection} other{{displayQuantity} collections}}?"
values={{
counter: maybe(() => params.ids.length),
displayQuantity: (
<strong>
{maybe(() => params.ids.length)}
</strong>
)
}}
/>
</DialogContentText>
</ActionDialog>
<SaveFilterTabDialog
open={params.action === "save-search"}
confirmButtonState="default"
onClose={closeModal}
onSubmit={handleTabSave}
/>
<DeleteFilterTabDialog
open={params.action === "delete-search"}
confirmButtonState="default"
onClose={closeModal}
onSubmit={handleTabDelete}
tabName={maybe(() => tabs[currentTab - 1].name, "...")}
/>
</>
);
}}
{(collectionBulkPublish, collectionBulkPublishOpts) => (
<>
<CollectionListPage
currentTab={currentTab}
initialSearch={params.query || ""}
onSearchChange={query => changeFilterField({ query })}
onAdd={() => navigate(collectionAddUrl)}
onAll={() => navigate(collectionListUrl())}
onTabChange={handleTabChange}
onTabDelete={() => openModal("delete-search")}
onTabSave={() => openModal("save-search")}
tabs={tabs.map(tab => tab.name)}
disabled={loading}
collections={maybe(() =>
data.collections.edges.map(edge => edge.node)
)}
settings={settings}
onNextPage={loadNextPage}
onPreviousPage={loadPreviousPage}
onUpdateListSettings={updateListSettings}
pageInfo={pageInfo}
onRowClick={id => () => navigate(collectionUrl(id))}
toolbar={
<>
<Button
color="primary"
onClick={() => openModal("unpublish", listElements)}
>
<FormattedMessage
defaultMessage="Unpublish"
description="unpublish collections"
/>
</Button>
<Button
color="primary"
onClick={() => openModal("publish", listElements)}
>
<FormattedMessage
defaultMessage="Publish"
description="publish collections"
/>
</Button>
<IconButton
color="primary"
onClick={() => openModal("remove", listElements)}
>
<DeleteIcon />
</IconButton>
</>
}
isChecked={isSelected}
selected={listElements.length}
toggle={toggle}
toggleAll={toggleAll}
/>
<ActionDialog
open={
params.action === "publish" &&
maybe(() => params.ids.length > 0)
}
onClose={closeModal}
confirmButtonState={collectionBulkPublishOpts.state}
onConfirm={() =>
collectionBulkPublish({
variables: {
ids: params.ids,
isPublished: true
}
})
}
variant="default"
title={intl.formatMessage({
defaultMessage: "Publish collections",
description: "dialog title"
})}
>
<DialogContentText>
<FormattedMessage
defaultMessage="Are you sure you want to publish {counter,plural,one{this collection} other{{displayQuantity} collections}}?"
values={{
counter: maybe(() => params.ids.length),
displayQuantity: (
<strong>{maybe(() => params.ids.length)}</strong>
)
}}
/>
</DialogContentText>
</ActionDialog>
<ActionDialog
open={
params.action === "unpublish" &&
maybe(() => params.ids.length > 0)
}
onClose={closeModal}
confirmButtonState={collectionBulkPublishOpts.state}
onConfirm={() =>
collectionBulkPublish({
variables: {
ids: params.ids,
isPublished: false
}
})
}
variant="default"
title={intl.formatMessage({
defaultMessage: "Unpublish collections",
description: "dialog title"
})}
>
<DialogContentText>
<FormattedMessage
defaultMessage="Are you sure you want to unpublish {counter,plural,one{this collection} other{{displayQuantity} collections}}?"
values={{
counter: maybe(() => params.ids.length),
displayQuantity: (
<strong>{maybe(() => params.ids.length)}</strong>
)
}}
/>
</DialogContentText>
</ActionDialog>
<ActionDialog
open={
params.action === "remove" &&
maybe(() => params.ids.length > 0)
}
onClose={closeModal}
confirmButtonState={collectionBulkDeleteOpts.state}
onConfirm={() =>
collectionBulkDelete({
variables: {
ids: params.ids
}
})
}
variant="delete"
title={intl.formatMessage({
defaultMessage: "Delete collections",
description: "dialog title"
})}
>
<DialogContentText>
<FormattedMessage
defaultMessage="Are you sure you want to delete {counter,plural,one{this collection} other{{displayQuantity} collections}}?"
values={{
counter: maybe(() => params.ids.length),
displayQuantity: (
<strong>{maybe(() => params.ids.length)}</strong>
)
}}
/>
</DialogContentText>
</ActionDialog>
<SaveFilterTabDialog
open={params.action === "save-search"}
confirmButtonState="default"
onClose={closeModal}
onSubmit={handleTabSave}
/>
<DeleteFilterTabDialog
open={params.action === "delete-search"}
confirmButtonState="default"
onClose={closeModal}
onSubmit={handleTabDelete}
tabName={maybe(() => tabs[currentTab - 1].name, "...")}
/>
</>
)}
</TypedCollectionBulkPublish>
)}
</TypedCollectionBulkDelete>

47
src/customers/views/CustomerAddresses.tsx
View file

@ -8,7 +8,7 @@ import useNavigator from "@saleor/hooks/useNavigator";
import useNotifier from "@saleor/hooks/useNotifier";
import useShop from "@saleor/hooks/useShop";
import { commonMessages } from "@saleor/intl";
import { getMutationState, maybe } from "../../misc";
import { maybe } from "../../misc";
import CustomerAddressDialog from "../components/CustomerAddressDialog";
import CustomerAddressListPage from "../components/CustomerAddressListPage";
import {
@ -97,39 +97,6 @@ const CustomerAddresses: React.FC<CustomerAddressesProps> = ({
{(removeCustomerAddress, removeCustomerAddressOpts) => (
<TypedCustomerAddressesQuery variables={{ id }}>
{customerData => {
const createAddressTransitionState = getMutationState(
createCustomerAddressOpts.called,
createCustomerAddressOpts.loading,
maybe(
() =>
createCustomerAddressOpts.data.addressCreate
.errors,
[]
)
);
const updateAddressTransitionState = getMutationState(
updateCustomerAddressOpts.called,
updateCustomerAddressOpts.loading,
maybe(
() =>
updateCustomerAddressOpts.data.addressUpdate
.errors,
[]
)
);
const removeAddressTransitionState = getMutationState(
removeCustomerAddressOpts.called,
removeCustomerAddressOpts.loading,
maybe(
() =>
removeCustomerAddressOpts.data.addressDelete
.errors,
[]
)
);
const countryChoices = maybe(
() =>
shop.countries.map(country => ({
@ -161,7 +128,9 @@ const CustomerAddresses: React.FC<CustomerAddressesProps> = ({
/>
<CustomerAddressDialog
address={undefined}
confirmButtonState={createAddressTransitionState}
confirmButtonState={
createCustomerAddressOpts.state
}
countries={countryChoices}
errors={maybe(
() =>
@ -187,7 +156,9 @@ const CustomerAddresses: React.FC<CustomerAddressesProps> = ({
addr => addr.id === params.id
)
)}
confirmButtonState={updateAddressTransitionState}
confirmButtonState={
updateCustomerAddressOpts.state
}
countries={countryChoices}
errors={maybe(
() =>
@ -214,7 +185,9 @@ const CustomerAddresses: React.FC<CustomerAddressesProps> = ({
defaultMessage: "Delete Address",
description: "dialog header"
})}
confirmButtonState={removeAddressTransitionState}
confirmButtonState={
removeCustomerAddressOpts.state
}
onClose={closeModal}
onConfirm={() =>
removeCustomerAddress({

171
src/customers/views/CustomerDetails.tsx
View file

@ -7,7 +7,7 @@ import { WindowTitle } from "@saleor/components/WindowTitle";
import useNavigator from "@saleor/hooks/useNavigator";
import useNotifier from "@saleor/hooks/useNotifier";
import { commonMessages } from "@saleor/intl";
import { getMutationState, maybe } from "../../misc";
import { maybe } from "../../misc";
import { orderListUrl, orderUrl } from "../../orders/urls";
import CustomerDetailsPage from "../components/CustomerDetailsPage/CustomerDetailsPage";
import {
@ -67,99 +67,86 @@ export const CustomerDetailsView: React.FC<CustomerDetailsViewProps> = ({
variables={{ id }}
require={["user"]}
>
{customerDetails => {
const formTransitionState = getMutationState(
updateCustomerOpts.called,
updateCustomerOpts.loading,
maybe(() => updateCustomerOpts.data.customerUpdate.errors)
);
const removeTransitionState = getMutationState(
removeCustomerOpts.called,
removeCustomerOpts.loading,
maybe(() => removeCustomerOpts.data.customerDelete.errors)
);
return (
<>
<WindowTitle
title={maybe(() => customerDetails.data.user.email)}
/>
<CustomerDetailsPage
customer={maybe(() => customerDetails.data.user)}
disabled={
customerDetails.loading ||
updateCustomerOpts.loading ||
removeCustomerOpts.loading
}
errors={maybe(
() => updateCustomerOpts.data.customerUpdate.errors
)}
saveButtonBar={formTransitionState}
onAddressManageClick={() =>
navigate(customerAddressesUrl(id))
}
onBack={() => navigate(customerListUrl())}
onRowClick={id => navigate(orderUrl(id))}
onSubmit={formData =>
updateCustomer({
variables: {
id,
input: {
email: formData.email,
firstName: formData.firstName,
isActive: formData.isActive,
lastName: formData.lastName,
note: formData.note
}
{customerDetails => (
<>
<WindowTitle
title={maybe(() => customerDetails.data.user.email)}
/>
<CustomerDetailsPage
customer={maybe(() => customerDetails.data.user)}
disabled={
customerDetails.loading ||
updateCustomerOpts.loading ||
removeCustomerOpts.loading
}
errors={maybe(
() => updateCustomerOpts.data.customerUpdate.errors
)}
saveButtonBar={updateCustomerOpts.state}
onAddressManageClick={() =>
navigate(customerAddressesUrl(id))
}
onBack={() => navigate(customerListUrl())}
onRowClick={id => navigate(orderUrl(id))}
onSubmit={formData =>
updateCustomer({
variables: {
id,
input: {
email: formData.email,
firstName: formData.firstName,
isActive: formData.isActive,
lastName: formData.lastName,
note: formData.note
}
}
})
}
onDelete={() =>
navigate(
customerUrl(id, {
action: "remove"
})
}
onDelete={() =>
navigate(
customerUrl(id, {
action: "remove"
})
)
}
onViewAllOrdersClick={() =>
navigate(
orderListUrl({
email: maybe(() => customerDetails.data.user.email)
})
)
}
/>
<ActionDialog
confirmButtonState={removeTransitionState}
onClose={() => navigate(customerUrl(id), true)}
onConfirm={() => removeCustomer()}
title={intl.formatMessage({
defaultMessage: "Delete Customer",
description: "dialog header"
})}
variant="delete"
open={params.action === "remove"}
>
<DialogContentText>
<FormattedMessage
defaultMessage="Are you sure you want to delete {email}?"
description="delete customer, dialog content"
values={{
email: (
<strong>
{maybe(
() => customerDetails.data.user.email,
"..."
)}
</strong>
)
}}
/>
</DialogContentText>
</ActionDialog>
</>
);
}}
)
}
onViewAllOrdersClick={() =>
navigate(
orderListUrl({
email: maybe(() => customerDetails.data.user.email)
})
)
}
/>
<ActionDialog
confirmButtonState={removeCustomerOpts.state}
onClose={() => navigate(customerUrl(id), true)}
onConfirm={() => removeCustomer()}
title={intl.formatMessage({
defaultMessage: "Delete Customer",
description: "dialog header"
})}
variant="delete"
open={params.action === "remove"}
>
<DialogContentText>
<FormattedMessage
defaultMessage="Are you sure you want to delete {email}?"
description="delete customer, dialog content"
values={{
email: (
<strong>
{maybe(
() => customerDetails.data.user.email,
"..."
)}
</strong>
)
}}
/>
</DialogContentText>
</ActionDialog>
</>
)}
</TypedCustomerDetailsQuery>
)}
</TypedUpdateCustomerMutation>

190
src/customers/views/CustomerList/CustomerList.tsx
View file

@ -17,7 +17,7 @@ import usePaginator, {
createPaginationState
} from "@saleor/hooks/usePaginator";
import { commonMessages } from "@saleor/intl";
import { getMutationState, maybe } from "@saleor/misc";
import { maybe } from "@saleor/misc";
import { ListViews } from "@saleor/types";
import CustomerListPage from "../../components/CustomerListPage";
import { TypedBulkRemoveCustomers } from "../../mutations";
@ -147,105 +147,95 @@ export const CustomerList: React.FC<CustomerListProps> = ({ params }) => {
return (
<TypedBulkRemoveCustomers onCompleted={handleBulkCustomerDelete}>
{(bulkRemoveCustomers, bulkRemoveCustomersOpts) => {
const removeTransitionState = getMutationState(
bulkRemoveCustomersOpts.called,
bulkRemoveCustomersOpts.loading,
maybe(
() => bulkRemoveCustomersOpts.data.customerBulkDelete.errors
)
);
return (
<>
<CustomerListPage
currentTab={currentTab}
initialSearch={params.query || ""}
onSearchChange={query => changeFilterField({ query })}
onAll={() => navigate(customerListUrl())}
onTabChange={handleTabChange}
onTabDelete={() => openModal("delete-search")}
onTabSave={() => openModal("save-search")}
tabs={tabs.map(tab => tab.name)}
customers={maybe(() =>
data.customers.edges.map(edge => edge.node)
)}
settings={settings}
disabled={loading}
pageInfo={pageInfo}
onAdd={() => navigate(customerAddUrl)}
onNextPage={loadNextPage}
onPreviousPage={loadPreviousPage}
onUpdateListSettings={updateListSettings}
onRowClick={id => () => navigate(customerUrl(id))}
toolbar={
<IconButton
color="primary"
onClick={() =>
navigate(
customerListUrl({
action: "remove",
ids: listElements
})
)
}
>
<DeleteIcon />
</IconButton>
}
isChecked={isSelected}
selected={listElements.length}
toggle={toggle}
toggleAll={toggleAll}
/>
<ActionDialog
open={
params.action === "remove" &&
maybe(() => params.ids.length > 0)
}
onClose={closeModal}
confirmButtonState={removeTransitionState}
onConfirm={() =>
bulkRemoveCustomers({
variables: {
ids: params.ids
}
})
}
variant="delete"
title={intl.formatMessage({
defaultMessage: "Delete Customers",
description: "dialog header"
})}
>
<DialogContentText>
<FormattedMessage
defaultMessage="Are you sure you want to delete {counter,plural,one{this customer} other{{displayQuantity} customers}}?"
values={{
counter: maybe(() => params.ids.length),
displayQuantity: (
<strong>{maybe(() => params.ids.length)}</strong>
)
}}
/>
</DialogContentText>
</ActionDialog>
<SaveFilterTabDialog
open={params.action === "save-search"}
confirmButtonState="default"
onClose={closeModal}
onSubmit={handleTabSave}
/>
<DeleteFilterTabDialog
open={params.action === "delete-search"}
confirmButtonState="default"
onClose={closeModal}
onSubmit={handleTabDelete}
tabName={maybe(() => tabs[currentTab - 1].name, "...")}
/>
</>
);
}}
{(bulkRemoveCustomers, bulkRemoveCustomersOpts) => (
<>
<CustomerListPage
currentTab={currentTab}
initialSearch={params.query || ""}
onSearchChange={query => changeFilterField({ query })}
onAll={() => navigate(customerListUrl())}
onTabChange={handleTabChange}
onTabDelete={() => openModal("delete-search")}
onTabSave={() => openModal("save-search")}
tabs={tabs.map(tab => tab.name)}
customers={maybe(() =>
data.customers.edges.map(edge => edge.node)
)}
settings={settings}
disabled={loading}
pageInfo={pageInfo}
onAdd={() => navigate(customerAddUrl)}
onNextPage={loadNextPage}
onPreviousPage={loadPreviousPage}
onUpdateListSettings={updateListSettings}
onRowClick={id => () => navigate(customerUrl(id))}
toolbar={
<IconButton
color="primary"
onClick={() =>
navigate(
customerListUrl({
action: "remove",
ids: listElements
})
)
}
>
<DeleteIcon />
</IconButton>
}
isChecked={isSelected}
selected={listElements.length}
toggle={toggle}
toggleAll={toggleAll}
/>
<ActionDialog
open={
params.action === "remove" &&
maybe(() => params.ids.length > 0)
}
onClose={closeModal}
confirmButtonState={bulkRemoveCustomersOpts.state}
onConfirm={() =>
bulkRemoveCustomers({
variables: {
ids: params.ids
}
})
}
variant="delete"
title={intl.formatMessage({
defaultMessage: "Delete Customers",
description: "dialog header"
})}
>
<DialogContentText>
<FormattedMessage
defaultMessage="Are you sure you want to delete {counter,plural,one{this customer} other{{displayQuantity} customers}}?"
values={{
counter: maybe(() => params.ids.length),
displayQuantity: (
<strong>{maybe(() => params.ids.length)}</strong>
)
}}
/>
</DialogContentText>
</ActionDialog>
<SaveFilterTabDialog
open={params.action === "save-search"}
confirmButtonState="default"
onClose={closeModal}
onSubmit={handleTabSave}
/>
<DeleteFilterTabDialog
open={params.action === "delete-search"}
confirmButtonState="default"
onClose={closeModal}
onSubmit={handleTabDelete}
tabName={maybe(() => tabs[currentTab - 1].name, "...")}
/>
</>
)}
</TypedBulkRemoveCustomers>
);
}}

68
src/discounts/views/SaleCreate.tsx
View file

@ -6,7 +6,7 @@ import useNavigator from "@saleor/hooks/useNavigator";
import useNotifier from "@saleor/hooks/useNotifier";
import useShop from "@saleor/hooks/useShop";
import { sectionNames } from "@saleor/intl";
import { decimal, getMutationState, joinDateTime, maybe } from "../../misc";
import { decimal, joinDateTime, maybe } from "../../misc";
import { DiscountValueTypeEnum, SaleType } from "../../types/globalTypes";
import SaleCreatePage from "../components/SaleCreatePage";
import { TypedSaleCreate } from "../mutations";
@ -38,44 +38,36 @@ export const SaleDetails: React.FC = () => {
return (
<TypedSaleCreate onCompleted={handleSaleCreate}>
{(saleCreate, saleCreateOpts) => {
const formTransitionState = getMutationState(
saleCreateOpts.called,
saleCreateOpts.loading,
maybe(() => saleCreateOpts.data.saleCreate.errors)
);
return (
<>
<WindowTitle title={intl.formatMessage(sectionNames.sales)} />
<SaleCreatePage
defaultCurrency={maybe(() => shop.defaultCurrency)}
disabled={saleCreateOpts.loading}
errors={maybe(() => saleCreateOpts.data.saleCreate.errors)}
onBack={() => navigate(saleListUrl())}
onSubmit={formData =>
saleCreate({
variables: {
input: {
endDate: formData.hasEndDate
? joinDateTime(formData.endDate, formData.endTime)
: null,
name: formData.name,
startDate: joinDateTime(
formData.startDate,
formData.startTime
),
type: discountValueTypeEnum(formData.type),
value: decimal(formData.value)
}
{(saleCreate, saleCreateOpts) => (
<>
<WindowTitle title={intl.formatMessage(sectionNames.sales)} />
<SaleCreatePage
defaultCurrency={maybe(() => shop.defaultCurrency)}
disabled={saleCreateOpts.loading}
errors={maybe(() => saleCreateOpts.data.saleCreate.errors)}
onBack={() => navigate(saleListUrl())}
onSubmit={formData =>
saleCreate({
variables: {
input: {
endDate: formData.hasEndDate
? joinDateTime(formData.endDate, formData.endTime)
: null,
name: formData.name,
startDate: joinDateTime(
formData.startDate,
formData.startTime
),
type: discountValueTypeEnum(formData.type),
value: decimal(formData.value)
}
})
}
saveButtonBarState={formTransitionState}
/>
</>
);
}}
}
})
}
saveButtonBarState={saleCreateOpts.state}
/>
</>
)}
</TypedSaleCreate>
);
};

52
src/discounts/views/SaleDetails.tsx
View file

@ -22,7 +22,7 @@ import useCollectionSearch from "@saleor/searches/useCollectionSearch";
import useProductSearch from "@saleor/searches/useProductSearch";
import { categoryUrl } from "../../categories/urls";
import { collectionUrl } from "../../collections/urls";
import { decimal, getMutationState, joinDateTime, maybe } from "../../misc";
import { decimal, joinDateTime, maybe } from "../../misc";
import { productUrl } from "../../products/urls";
import { DiscountValueTypeEnum, SaleType } from "../../types/globalTypes";
import SaleDetailsPage, {
@ -169,34 +169,6 @@ export const SaleDetails: React.FC<SaleDetailsProps> = ({ id, params }) => {
SaleDetailsPageTab.collections
? maybe(() => data.sale.collections.pageInfo)
: maybe(() => data.sale.products.pageInfo);
const formTransitionState = getMutationState(
saleUpdateOpts.called,
saleUpdateOpts.loading,
maybe(() => saleUpdateOpts.data.saleUpdate.errors)
);
const assignTransitionState = getMutationState(
saleCataloguesAddOpts.called,
saleCataloguesAddOpts.loading,
maybe(
() =>
saleCataloguesAddOpts.data.saleCataloguesAdd
.errors
)
);
const unassignTransitionState = getMutationState(
saleCataloguesRemoveOpts.called,
saleCataloguesRemoveOpts.loading,
maybe(
() =>
saleCataloguesRemoveOpts.data.saleCataloguesRemove
.errors
)
);
const removeTransitionState = getMutationState(
saleDeleteOpts.called,
saleDeleteOpts.loading,
maybe(() => saleDeleteOpts.data.saleDelete.errors)
);
const handleCategoriesUnassign = (ids: string[]) =>
saleCataloguesRemove({
@ -308,7 +280,7 @@ export const SaleDetails: React.FC<SaleDetailsProps> = ({ id, params }) => {
})
}
onRemove={() => openModal("remove")}
saveButtonBarState={formTransitionState}
saveButtonBarState={saleUpdateOpts.state}
categoryListToolbar={
<Button
color="primary"
@ -360,7 +332,7 @@ export const SaleDetails: React.FC<SaleDetailsProps> = ({ id, params }) => {
toggleAll={toggleAll}
/>
<AssignProductDialog
confirmButtonState={assignTransitionState}
confirmButtonState={saleCataloguesAddOpts.state}
open={params.action === "assign-product"}
onFetch={searchProducts}
loading={searchProductsOpts.loading}
@ -394,7 +366,7 @@ export const SaleDetails: React.FC<SaleDetailsProps> = ({ id, params }) => {
suggestedCategory => suggestedCategory.id
)
)}
confirmButtonState={assignTransitionState}
confirmButtonState={saleCataloguesAddOpts.state}
open={params.action === "assign-category"}
onFetch={searchCategories}
loading={searchCategoriesOpts.loading}
@ -421,7 +393,7 @@ export const SaleDetails: React.FC<SaleDetailsProps> = ({ id, params }) => {
suggestedCategory => suggestedCategory.id
)
)}
confirmButtonState={assignTransitionState}
confirmButtonState={saleCataloguesAddOpts.state}
open={params.action === "assign-collection"}
onFetch={searchCollections}
loading={searchCollectionsOpts.loading}
@ -449,7 +421,9 @@ export const SaleDetails: React.FC<SaleDetailsProps> = ({ id, params }) => {
defaultMessage: "Unassign Categories From Sale",
description: "dialog header"
})}
confirmButtonState={unassignTransitionState}
confirmButtonState={
saleCataloguesRemoveOpts.state
}
onClose={closeModal}
onConfirm={() =>
handleCategoriesUnassign(params.ids)
@ -480,7 +454,9 @@ export const SaleDetails: React.FC<SaleDetailsProps> = ({ id, params }) => {
"Unassign Collections From Sale",
description: "dialog header"
})}
confirmButtonState={unassignTransitionState}
confirmButtonState={
saleCataloguesRemoveOpts.state
}
onClose={closeModal}
onConfirm={() =>
handleCollectionsUnassign(params.ids)
@ -510,7 +486,9 @@ export const SaleDetails: React.FC<SaleDetailsProps> = ({ id, params }) => {
defaultMessage: "Unassign Products From Sale",
description: "dialog header"
})}
confirmButtonState={unassignTransitionState}
confirmButtonState={
saleCataloguesRemoveOpts.state
}
onClose={closeModal}
onConfirm={() =>
handleProductsUnassign(params.ids)
@ -537,7 +515,7 @@ export const SaleDetails: React.FC<SaleDetailsProps> = ({ id, params }) => {
defaultMessage: "Delete Sale",
description: "dialog header"
})}
confirmButtonState={removeTransitionState}
confirmButtonState={saleDeleteOpts.state}
onClose={closeModal}
variant="delete"
onConfirm={() =>

9
src/discounts/views/SaleList/SaleList.tsx
View file

@ -19,7 +19,7 @@ import usePaginator, {
} from "@saleor/hooks/usePaginator";
import useShop from "@saleor/hooks/useShop";
import { commonMessages, sectionNames } from "@saleor/intl";
import { getMutationState, maybe } from "@saleor/misc";
import { maybe } from "@saleor/misc";
import { ListViews } from "@saleor/types";
import SaleListPage from "../../components/SaleListPage";
import { TypedSaleBulkDelete } from "../../mutations";
@ -153,11 +153,6 @@ export const SaleList: React.FC<SaleListProps> = ({ params }) => {
return (
<TypedSaleBulkDelete onCompleted={handleSaleBulkDelete}>
{(saleBulkDelete, saleBulkDeleteOpts) => {
const bulkRemoveTransitionState = getMutationState(
saleBulkDeleteOpts.called,
saleBulkDeleteOpts.loading,
maybe(() => saleBulkDeleteOpts.data.saleBulkDelete.errors)
);
const onSaleBulkDelete = () =>
saleBulkDelete({
variables: {
@ -208,7 +203,7 @@ export const SaleList: React.FC<SaleListProps> = ({ params }) => {
}
/>
<ActionDialog
confirmButtonState={bulkRemoveTransitionState}
confirmButtonState={saleBulkDeleteOpts.state}
onClose={closeModal}
onConfirm={onSaleBulkDelete}
open={params.action === "remove" && canOpenBulkActionDialog}

114
src/discounts/views/VoucherCreate.tsx
View file

@ -6,7 +6,7 @@ import useNavigator from "@saleor/hooks/useNavigator";
import useNotifier from "@saleor/hooks/useNotifier";
import useShop from "@saleor/hooks/useShop";
import { sectionNames } from "@saleor/intl";
import { decimal, getMutationState, joinDateTime, maybe } from "../../misc";
import { decimal, joinDateTime, maybe } from "../../misc";
import {
DiscountValueTypeEnum,
VoucherTypeEnum
@ -36,67 +36,59 @@ export const VoucherDetails: React.FC = () => {
return (
<TypedVoucherCreate onCompleted={handleVoucherCreate}>
{(voucherCreate, voucherCreateOpts) => {
const formTransitionState = getMutationState(
voucherCreateOpts.called,
voucherCreateOpts.loading,
maybe(() => voucherCreateOpts.data.voucherCreate.errors)
);
return (
<>
<WindowTitle title={intl.formatMessage(sectionNames.vouchers)} />
<VoucherCreatePage
defaultCurrency={maybe(() => shop.defaultCurrency)}
disabled={voucherCreateOpts.loading}
errors={maybe(() => voucherCreateOpts.data.voucherCreate.errors)}
onBack={() => navigate(voucherListUrl())}
onSubmit={formData =>
voucherCreate({
variables: {
input: {
applyOncePerCustomer: formData.applyOncePerCustomer,
applyOncePerOrder: formData.applyOncePerOrder,
code: formData.code,
discountValue:
formData.discountType.toString() === "SHIPPING"
? 100
: decimal(formData.value),
discountValueType:
formData.discountType.toString() === "SHIPPING"
? DiscountValueTypeEnum.PERCENTAGE
: formData.discountType,
endDate: formData.hasEndDate
? joinDateTime(formData.endDate, formData.endTime)
: null,
minAmountSpent:
formData.requirementsPicker !== RequirementsPicker.ORDER
? 0
: parseFloat(formData.minAmountSpent),
minCheckoutItemsQuantity:
formData.requirementsPicker !== RequirementsPicker.ITEM
? 0
: parseFloat(formData.minCheckoutItemsQuantity),
startDate: joinDateTime(
formData.startDate,
formData.startTime
),
type:
formData.discountType.toString() === "SHIPPING"
? VoucherTypeEnum.ENTIRE_ORDER
: formData.type,
usageLimit: formData.hasUsageLimit
? parseInt(formData.usageLimit, 10)
: 0
}
{(voucherCreate, voucherCreateOpts) => (
<>
<WindowTitle title={intl.formatMessage(sectionNames.vouchers)} />
<VoucherCreatePage
defaultCurrency={maybe(() => shop.defaultCurrency)}
disabled={voucherCreateOpts.loading}
errors={maybe(() => voucherCreateOpts.data.voucherCreate.errors)}
onBack={() => navigate(voucherListUrl())}
onSubmit={formData =>
voucherCreate({
variables: {
input: {
applyOncePerCustomer: formData.applyOncePerCustomer,
applyOncePerOrder: formData.applyOncePerOrder,
code: formData.code,
discountValue:
formData.discountType.toString() === "SHIPPING"
? 100
: decimal(formData.value),
discountValueType:
formData.discountType.toString() === "SHIPPING"
? DiscountValueTypeEnum.PERCENTAGE
: formData.discountType,
endDate: formData.hasEndDate
? joinDateTime(formData.endDate, formData.endTime)
: null,
minAmountSpent:
formData.requirementsPicker !== RequirementsPicker.ORDER
? 0
: parseFloat(formData.minAmountSpent),
minCheckoutItemsQuantity:
formData.requirementsPicker !== RequirementsPicker.ITEM
? 0
: parseFloat(formData.minCheckoutItemsQuantity),
startDate: joinDateTime(
formData.startDate,
formData.startTime
),
type:
formData.discountType.toString() === "SHIPPING"
? VoucherTypeEnum.ENTIRE_ORDER
: formData.type,
usageLimit: formData.hasUsageLimit
? parseInt(formData.usageLimit, 10)
: 0
}
})
}
saveButtonBarState={formTransitionState}
/>
</>
);
}}
}
})
}
saveButtonBarState={voucherCreateOpts.state}
/>
</>
)}
</TypedVoucherCreate>
);
};

64
src/discounts/views/VoucherDetails.tsx
View file

@ -22,7 +22,7 @@ import useCollectionSearch from "@saleor/searches/useCollectionSearch";
import useProductSearch from "@saleor/searches/useProductSearch";
import { categoryUrl } from "../../categories/urls";
import { collectionUrl } from "../../collections/urls";
import { decimal, getMutationState, joinDateTime, maybe } from "../../misc";
import { decimal, joinDateTime, maybe } from "../../misc";
import { productUrl } from "../../products/urls";
import {
DiscountValueTypeEnum,
@ -171,38 +171,6 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
VoucherDetailsPageTab.collections
? maybe(() => data.voucher.collections.pageInfo)
: maybe(() => data.voucher.products.pageInfo);
const formTransitionState = getMutationState(
voucherUpdateOpts.called,
voucherUpdateOpts.loading,
maybe(
() => voucherUpdateOpts.data.voucherUpdate.errors
)
);
const assignTransitionState = getMutationState(
voucherCataloguesAddOpts.called,
voucherCataloguesAddOpts.loading,
maybe(
() =>
voucherCataloguesAddOpts.data.voucherCataloguesAdd
.errors
)
);
const unassignTransitionState = getMutationState(
voucherCataloguesRemoveOpts.called,
voucherCataloguesRemoveOpts.loading,
maybe(
() =>
voucherCataloguesRemoveOpts.data
.voucherCataloguesRemove.errors
)
);
const removeTransitionState = getMutationState(
voucherDeleteOpts.called,
voucherDeleteOpts.loading,
maybe(
() => voucherDeleteOpts.data.voucherDelete.errors
)
);
const handleCategoriesUnassign = (ids: string[]) =>
voucherCataloguesRemove({
@ -387,7 +355,7 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
})
}
onRemove={() => openModal("remove")}
saveButtonBarState={formTransitionState}
saveButtonBarState={voucherUpdateOpts.state}
categoryListToolbar={
<Button
color="primary"
@ -446,7 +414,9 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
suggestedCategory => suggestedCategory.id
)
)}
confirmButtonState={assignTransitionState}
confirmButtonState={
voucherCataloguesAddOpts.state
}
open={params.action === "assign-category"}
onFetch={searchCategories}
loading={searchCategoriesOpts.loading}
@ -473,7 +443,9 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
suggestedCategory => suggestedCategory.id
)
)}
confirmButtonState={assignTransitionState}
confirmButtonState={
voucherCataloguesAddOpts.state
}
open={params.action === "assign-collection"}
onFetch={searchCollections}
loading={searchCollectionsOpts.loading}
@ -493,7 +465,7 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
}
/>
<DiscountCountrySelectDialog
confirmButtonState={formTransitionState}
confirmButtonState={voucherUpdateOpts.state}
countries={maybe(() => shop.countries, [])}
onClose={() => navigate(voucherUrl(id))}
onConfirm={formData =>
@ -516,7 +488,9 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
)}
/>
<AssignProductDialog
confirmButtonState={assignTransitionState}
confirmButtonState={
voucherCataloguesAddOpts.state
}
open={params.action === "assign-product"}
onFetch={searchProducts}
loading={searchProductsOpts.loading}
@ -552,7 +526,9 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
"Unassign Categories From Voucher",
description: "dialog header"
})}
confirmButtonState={unassignTransitionState}
confirmButtonState={
voucherCataloguesRemoveOpts.state
}
onClose={closeModal}
onConfirm={() =>
handleCategoriesUnassign(params.ids)
@ -583,7 +559,9 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
"Unassign Collections From Voucher",
description: "dialog header"
})}
confirmButtonState={unassignTransitionState}
confirmButtonState={
voucherCataloguesRemoveOpts.state
}
onClose={closeModal}
onConfirm={() =>
handleCollectionsUnassign(params.ids)
@ -614,7 +592,9 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
"Unassign Products From Voucher",
description: "dialog header"
})}
confirmButtonState={unassignTransitionState}
confirmButtonState={
voucherCataloguesRemoveOpts.state
}
onClose={closeModal}
onConfirm={() =>
handleProductsUnassign(params.ids)
@ -641,7 +621,7 @@ export const VoucherDetails: React.FC<VoucherDetailsProps> = ({
defaultMessage: "Delete Voucher",
description: "dialog header"
})}
confirmButtonState={removeTransitionState}
confirmButtonState={voucherDeleteOpts.state}
onClose={closeModal}
variant="delete"
onConfirm={() =>

10
src/discounts/views/VoucherList/VoucherList.tsx
View file

@ -19,7 +19,7 @@ import usePaginator, {
} from "@saleor/hooks/usePaginator";
import useShop from "@saleor/hooks/useShop";
import { commonMessages, sectionNames } from "@saleor/intl";
import { getMutationState, maybe } from "@saleor/misc";
import { maybe } from "@saleor/misc";
import { ListViews } from "@saleor/types";
import VoucherListPage from "../../components/VoucherListPage";
import { TypedVoucherBulkDelete } from "../../mutations";
@ -153,17 +153,13 @@ export const VoucherList: React.FC<VoucherListProps> = ({ params }) => {
return (
<TypedVoucherBulkDelete onCompleted={handleVoucherBulkDelete}>
{(voucherBulkDelete, voucherBulkDeleteOpts) => {
const bulkRemoveTransitionState = getMutationState(
voucherBulkDeleteOpts.called,
voucherBulkDeleteOpts.loading,
maybe(() => voucherBulkDeleteOpts.data.voucherBulkDelete.errors)
);
const onVoucherBulkDelete = () =>
voucherBulkDelete({
variables: {
ids: params.ids
}
});
return (
<>
<WindowTitle
@ -211,7 +207,7 @@ export const VoucherList: React.FC<VoucherListProps> = ({ params }) => {
}
/>
<ActionDialog
confirmButtonState={bulkRemoveTransitionState}
confirmButtonState={voucherBulkDeleteOpts.state}
onClose={closeModal}
onConfirm={onVoucherBulkDelete}
open={params.action === "remove" && canOpenBulkActionDialog}

41
src/navigation/views/MenuDetails/index.tsx
View file

@ -11,7 +11,7 @@ import useCollectionSearch from "@saleor/searches/useCollectionSearch";
import usePageSearch from "@saleor/searches/usePageSearch";
import { categoryUrl } from "../../../categories/urls";
import { collectionUrl } from "../../../collections/urls";
import { getMutationState, maybe } from "../../../misc";
import { maybe } from "../../../misc";
import { pageUrl } from "../../../pages/urls";
import MenuDetailsPage, {
MenuDetailsSubmitData
@ -137,19 +137,6 @@ const MenuDetails: React.FC<MenuDetailsProps> = ({ id, params }) => {
onCompleted={data => handleUpdate(data, notify, refetch, intl)}
>
{(menuUpdate, menuUpdateOpts) => {
const deleteState = getMutationState(
menuDeleteOpts.called,
menuDeleteOpts.loading,
maybe(() => menuDeleteOpts.data.menuDelete.errors)
);
const updateState = getMutationState(
menuUpdateOpts.called,
menuUpdateOpts.loading,
maybe(() => menuUpdateOpts.data.menuUpdate.errors),
maybe(() => menuUpdateOpts.data.menuItemMove.errors)
);
// This is a workaround to let know <MenuDetailsPage />
// that it should clean operation stack if mutations
// were successful
@ -208,12 +195,12 @@ const MenuDetails: React.FC<MenuDetailsProps> = ({ id, params }) => {
)
}
onSubmit={handleSubmit}
saveButtonState={updateState}
saveButtonState={menuUpdateOpts.state}
/>
<ActionDialog
open={params.action === "remove"}
onClose={closeModal}
confirmButtonState={deleteState}
confirmButtonState={menuDeleteOpts.state}
onConfirm={() => menuDelete({ variables: { id } })}
variant="delete"
title={intl.formatMessage({
@ -253,15 +240,6 @@ const MenuDetails: React.FC<MenuDetailsProps> = ({ id, params }) => {
menuItemCreate({ variables });
};
const formTransitionState = getMutationState(
menuItemCreateOpts.called,
menuItemCreateOpts.loading,
maybe(
() =>
menuItemCreateOpts.data.menuItemCreate.errors
)
);
return (
<MenuItemDialog
open={params.action === "add-item"}
@ -277,7 +255,7 @@ const MenuDetails: React.FC<MenuDetailsProps> = ({ id, params }) => {
categorySearch.result.loading ||
collectionSearch.result.loading
}
confirmButtonState={formTransitionState}
confirmButtonState={menuItemCreateOpts.state}
disabled={menuItemCreateOpts.loading}
onClose={closeModal}
onSubmit={handleSubmit}
@ -310,15 +288,6 @@ const MenuDetails: React.FC<MenuDetailsProps> = ({ id, params }) => {
)
);
const formTransitionState = getMutationState(
menuItemUpdateOpts.called,
menuItemUpdateOpts.loading,
maybe(
() =>
menuItemUpdateOpts.data.menuItemUpdate.errors
)
);
const initialFormData: MenuItemDialogFormData = {
id: maybe(() => getItemId(menuItem)),
name: maybe(() => menuItem.name, "..."),
@ -347,7 +316,7 @@ const MenuDetails: React.FC<MenuDetailsProps> = ({ id, params }) => {
categorySearch.result.loading ||
collectionSearch.result.loading
}
confirmButtonState={formTransitionState}
confirmButtonState={menuItemUpdateOpts.state}
disabled={menuItemUpdateOpts.loading}
onClose={closeModal}
onSubmit={handleSubmit}

298
src/navigation/views/MenuList.tsx
View file

@ -13,7 +13,7 @@ import usePaginator, {
createPaginationState
} from "@saleor/hooks/usePaginator";
import { buttonMessages, commonMessages } from "@saleor/intl";
import { getMutationState, maybe } from "@saleor/misc";
import { maybe } from "@saleor/misc";
import { ListViews } from "@saleor/types";
import MenuCreateDialog from "../components/MenuCreateDialog";
import MenuListPage from "../components/MenuListPage";
@ -107,167 +107,145 @@ const MenuList: React.FC<MenuListProps> = ({ params }) => {
<MenuDeleteMutation onCompleted={handleDelete}>
{(menuDelete, menuDeleteOpts) => (
<MenuBulkDeleteMutation onCompleted={handleBulkDelete}>
{(menuBulkDelete, menuBulkDeleteOpts) => {
const createTransitionState = getMutationState(
menuCreateOpts.called,
menuCreateOpts.loading,
maybe(() => menuCreateOpts.data.menuCreate.errors)
);
const deleteTransitionState = getMutationState(
menuDeleteOpts.called,
menuDeleteOpts.loading,
maybe(() => menuDeleteOpts.data.menuDelete.errors)
);
const bulkDeleteTransitionState = getMutationState(
menuBulkDeleteOpts.called,
menuBulkDeleteOpts.loading,
maybe(
() => menuBulkDeleteOpts.data.menuBulkDelete.errors
)
);
return (
<>
<MenuListPage
disabled={loading}
menus={maybe(() =>
data.menus.edges.map(edge => edge.node)
)}
settings={settings}
onAdd={() =>
navigate(
menuListUrl({
action: "add"
})
)
}
onBack={() => navigate(configurationMenuUrl)}
onDelete={id =>
navigate(
menuListUrl({
action: "remove",
id
})
)
}
onNextPage={loadNextPage}
onPreviousPage={loadPreviousPage}
onUpdateListSettings={updateListSettings}
onRowClick={id => () => navigate(menuUrl(id))}
pageInfo={pageInfo}
isChecked={isSelected}
selected={listElements.length}
toggle={toggle}
toggleAll={toggleAll}
toolbar={
<Button
color="primary"
onClick={() =>
navigate(
menuListUrl({
...params,
action: "remove-many",
ids: listElements
})
)
}
>
<FormattedMessage {...buttonMessages.remove} />
</Button>
}
/>
<MenuCreateDialog
open={params.action === "add"}
confirmButtonState={createTransitionState}
disabled={menuCreateOpts.loading}
onClose={closeModal}
onConfirm={formData =>
menuCreate({
variables: { input: formData }
{(menuBulkDelete, menuBulkDeleteOpts) => (
<>
<MenuListPage
disabled={loading}
menus={maybe(() =>
data.menus.edges.map(edge => edge.node)
)}
settings={settings}
onAdd={() =>
navigate(
menuListUrl({
action: "add"
})
}
/>
<ActionDialog
open={params.action === "remove"}
onClose={closeModal}
confirmButtonState={deleteTransitionState}
onConfirm={() =>
menuDelete({
variables: {
id: params.id
}
)
}
onBack={() => navigate(configurationMenuUrl)}
onDelete={id =>
navigate(
menuListUrl({
action: "remove",
id
})
}
variant="delete"
title={intl.formatMessage({
defaultMessage: "Delete Menu",
description: "dialog header",
id: "menuListDeleteMenuHeader"
})}
>
<DialogContentText>
<FormattedMessage
defaultMessage="Are you sure you want to delete {menuName}?"
id="menuListDeleteMenuContent"
values={{
menuName: maybe(
() =>
data.menus.edges.find(
edge => edge.node.id === params.id
).node.name,
"..."
)
}}
/>
</DialogContentText>
</ActionDialog>
<ActionDialog
open={
params.action === "remove-many" &&
maybe(() => params.ids.length > 0)
}
onClose={closeModal}
confirmButtonState={bulkDeleteTransitionState}
onConfirm={() =>
menuBulkDelete({
variables: {
ids: params.ids
}
})
}
variant="delete"
title={intl.formatMessage({
defaultMessage: "Delete Menus",
description: "dialog header",
id: "menuListDeleteMenusHeader"
})}
>
<DialogContentText>
<FormattedMessage
defaultMessage="Are you sure you want to delete {counter,plural,one{this menu} other{{displayQuantity} menus}}?"
id="menuListDeleteMenusContent"
values={{
counter: maybe(
() => params.ids.length.toString(),
"..."
),
displayQuantity: (
<strong>
{maybe(
() => params.ids.length.toString(),
"..."
)}
</strong>
)
}}
/>
</DialogContentText>
</ActionDialog>
</>
);
}}
)
}
onNextPage={loadNextPage}
onPreviousPage={loadPreviousPage}
onUpdateListSettings={updateListSettings}
onRowClick={id => () => navigate(menuUrl(id))}
pageInfo={pageInfo}
isChecked={isSelected}
selected={listElements.length}
toggle={toggle}
toggleAll={toggleAll}
toolbar={
<Button
color="primary"
onClick={() =>
navigate(
menuListUrl({
...params,
action: "remove-many",
ids: listElements
})
)
}
>
<FormattedMessage {...buttonMessages.remove} />
</Button>
}
/>
<MenuCreateDialog
open={params.action === "add"}
confirmButtonState={menuCreateOpts.state}
disabled={menuCreateOpts.loading}
onClose={closeModal}
onConfirm={formData =>
menuCreate({
variables: { input: formData }
})
}
/>
<ActionDialog
open={params.action === "remove"}
onClose={closeModal}
confirmButtonState={menuDeleteOpts.state}
onConfirm={() =>
menuDelete({
variables: {
id: params.id
}
})
}
variant="delete"
title={intl.formatMessage({
defaultMessage: "Delete Menu",
description: "dialog header",
id: "menuListDeleteMenuHeader"
})}
>
<DialogContentText>
<FormattedMessage
defaultMessage="Are you sure you want to delete {menuName}?"
id="menuListDeleteMenuContent"
values={{
menuName: maybe(
() =>
data.menus.edges.find(
edge => edge.node.id === params.id
).node.name,
"..."
)
}}
/>
</DialogContentText>
</ActionDialog>
<ActionDialog
open={
params.action === "remove-many" &&
maybe(() => params.ids.length > 0)
}
onClose={closeModal}
confirmButtonState={menuBulkDeleteOpts.state}
onConfirm={() =>
menuBulkDelete({
variables: {
ids: params.ids
}
})
}
variant="delete"
title={intl.formatMessage({
defaultMessage: "Delete Menus",
description: "dialog header",
id: "menuListDeleteMenusHeader"
})}
>
<DialogContentText>
<FormattedMessage
defaultMessage="Are you sure you want to delete {counter,plural,one{this menu} other{{displayQuantity} menus}}?"
id="menuListDeleteMenusContent"
values={{
counter: maybe(
() => params.ids.length.toString(),
"..."
),
displayQuantity: (
<strong>
{maybe(
() => params.ids.length.toString(),
"..."
)}
</strong>
)
}}
/>
</DialogContentText>
</ActionDialog>
</>
)}
</MenuBulkDeleteMutation>
)}
</MenuDeleteMutation>

887
src/orders/views/OrderDetails/index.tsx
View file

@ -153,464 +153,451 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
orderDraftCancel,
orderDraftFinalize,
orderPaymentMarkAsPaid
}) => {
const finalizeTransitionState = getMutationState(
orderDraftFinalize.opts.called,
orderDraftFinalize.opts.loading,
maybe(
() =>
orderDraftFinalize.opts.data.draftOrderComplete.errors
)
);
return (
<>
{maybe(() => order.status !== OrderStatus.DRAFT) ? (
<>
<WindowTitle
title={maybe(() => "Order #" + data.order.number)}
/>
<OrderDetailsPage
onNoteAdd={variables =>
orderAddNote.mutate({
input: variables,
order: id
}) => (
<>
{maybe(() => order.status !== OrderStatus.DRAFT) ? (
<>
<WindowTitle
title={maybe(() => "Order #" + data.order.number)}
/>
<OrderDetailsPage
onNoteAdd={variables =>
orderAddNote.mutate({
input: variables,
order: id
})
}
onBack={() => navigate(orderListUrl())}
order={order}
shippingMethods={maybe(
() => data.order.availableShippingMethods,
[]
)}
userPermissions={maybe(() => user.permissions, [])}
onOrderCancel={() => openModal("cancel")}
onOrderFulfill={() => openModal("fulfill")}
onFulfillmentCancel={fulfillmentId =>
navigate(
orderUrl(id, {
action: "cancel-fulfillment",
id: fulfillmentId
})
}
onBack={() => navigate(orderListUrl())}
order={order}
shippingMethods={maybe(
() => data.order.availableShippingMethods,
[]
)}
userPermissions={maybe(() => user.permissions, [])}
onOrderCancel={() => openModal("cancel")}
onOrderFulfill={() => openModal("fulfill")}
onFulfillmentCancel={fulfillmentId =>
navigate(
orderUrl(id, {
action: "cancel-fulfillment",
id: fulfillmentId
})
)
}
onFulfillmentTrackingNumberUpdate={fulfillmentId =>
navigate(
orderUrl(id, {
action: "edit-fulfillment",
id: fulfillmentId
})
)
}
onPaymentCapture={() => openModal("capture")}
onPaymentVoid={() => openModal("void")}
onPaymentRefund={() => openModal("refund")}
onProductClick={id => () =>
navigate(productUrl(id))}
onBillingAddressEdit={() =>
openModal("edit-billing-address")
}
onShippingAddressEdit={() =>
openModal("edit-shipping-address")
}
onPaymentPaid={() => openModal("mark-paid")}
onProfileView={() =>
navigate(customerUrl(order.user.id))
}
/>
<OrderCancelDialog
confirmButtonState={getMutationState(
orderCancel.opts.called,
orderCancel.opts.loading,
maybe(
() => orderCancel.opts.data.orderCancel.errors
)
)}
number={maybe(() => order.number)}
open={params.action === "cancel"}
onClose={closeModal}
onSubmit={variables =>
orderCancel.mutate({
id,
...variables
)
}
onFulfillmentTrackingNumberUpdate={fulfillmentId =>
navigate(
orderUrl(id, {
action: "edit-fulfillment",
id: fulfillmentId
})
}
/>
<OrderMarkAsPaidDialog
confirmButtonState={getMutationState(
orderPaymentMarkAsPaid.opts.called,
orderPaymentMarkAsPaid.opts.loading,
maybe(
() =>
orderPaymentMarkAsPaid.opts.data
.orderMarkAsPaid.errors
)
)}
onClose={closeModal}
onConfirm={() =>
orderPaymentMarkAsPaid.mutate({
id
})
}
open={params.action === "mark-paid"}
/>
<OrderPaymentVoidDialog
confirmButtonState={getMutationState(
orderVoid.opts.called,
orderVoid.opts.loading,
maybe(() => orderVoid.opts.data.orderVoid.errors)
)}
open={params.action === "void"}
onClose={closeModal}
onConfirm={() => orderVoid.mutate({ id })}
/>
<OrderPaymentDialog
confirmButtonState={getMutationState(
orderPaymentCapture.opts.called,
orderPaymentCapture.opts.loading,
maybe(
() =>
orderPaymentCapture.opts.data.orderCapture
.errors
)
)}
initial={maybe(() => order.total.gross.amount)}
open={params.action === "capture"}
variant="capture"
onClose={closeModal}
onSubmit={variables =>
orderPaymentCapture.mutate({
)
}
onPaymentCapture={() => openModal("capture")}
onPaymentVoid={() => openModal("void")}
onPaymentRefund={() => openModal("refund")}
onProductClick={id => () => navigate(productUrl(id))}
onBillingAddressEdit={() =>
openModal("edit-billing-address")
}
onShippingAddressEdit={() =>
openModal("edit-shipping-address")
}
onPaymentPaid={() => openModal("mark-paid")}
onProfileView={() =>
navigate(customerUrl(order.user.id))
}
/>
<OrderCancelDialog
confirmButtonState={getMutationState(
orderCancel.opts.called,
orderCancel.opts.loading,
maybe(
() => orderCancel.opts.data.orderCancel.errors
)
)}
number={maybe(() => order.number)}
open={params.action === "cancel"}
onClose={closeModal}
onSubmit={variables =>
orderCancel.mutate({
id,
...variables
})
}
/>
<OrderMarkAsPaidDialog
confirmButtonState={getMutationState(
orderPaymentMarkAsPaid.opts.called,
orderPaymentMarkAsPaid.opts.loading,
maybe(
() =>
orderPaymentMarkAsPaid.opts.data.orderMarkAsPaid
.errors
)
)}
onClose={closeModal}
onConfirm={() =>
orderPaymentMarkAsPaid.mutate({
id
})
}
open={params.action === "mark-paid"}
/>
<OrderPaymentVoidDialog
confirmButtonState={getMutationState(
orderVoid.opts.called,
orderVoid.opts.loading,
maybe(() => orderVoid.opts.data.orderVoid.errors)
)}
open={params.action === "void"}
onClose={closeModal}
onConfirm={() => orderVoid.mutate({ id })}
/>
<OrderPaymentDialog
confirmButtonState={getMutationState(
orderPaymentCapture.opts.called,
orderPaymentCapture.opts.loading,
maybe(
() =>
orderPaymentCapture.opts.data.orderCapture
.errors
)
)}
initial={maybe(() => order.total.gross.amount)}
open={params.action === "capture"}
variant="capture"
onClose={closeModal}
onSubmit={variables =>
orderPaymentCapture.mutate({
...variables,
id
})
}
/>
<OrderPaymentDialog
confirmButtonState={getMutationState(
orderPaymentRefund.opts.called,
orderPaymentRefund.opts.loading,
maybe(
() =>
orderPaymentRefund.opts.data.orderRefund.errors
)
)}
initial={maybe(() => order.total.gross.amount)}
open={params.action === "refund"}
variant="refund"
onClose={closeModal}
onSubmit={variables =>
orderPaymentRefund.mutate({
...variables,
id
})
}
/>
<OrderFulfillmentDialog
confirmButtonState={getMutationState(
orderCreateFulfillment.opts.called,
orderCreateFulfillment.opts.loading,
maybe(
() =>
orderCreateFulfillment.opts.data
.orderFulfillmentCreate.errors
)
)}
open={params.action === "fulfill"}
lines={maybe(() => order.lines, []).filter(
line => line.quantityFulfilled < line.quantity
)}
onClose={closeModal}
onSubmit={variables =>
orderCreateFulfillment.mutate({
input: {
...variables,
id
})
}
/>
<OrderPaymentDialog
confirmButtonState={getMutationState(
orderPaymentRefund.opts.called,
orderPaymentRefund.opts.loading,
maybe(
() =>
orderPaymentRefund.opts.data.orderRefund
.errors
)
)}
initial={maybe(() => order.total.gross.amount)}
open={params.action === "refund"}
variant="refund"
onClose={closeModal}
onSubmit={variables =>
orderPaymentRefund.mutate({
lines: maybe(() => order.lines, [])
.filter(
line =>
line.quantityFulfilled < line.quantity
)
.map((line, lineIndex) => ({
orderLineId: line.id,
quantity: variables.lines[lineIndex]
}))
.filter(line => line.quantity > 0)
},
order: order.id
})
}
/>
<OrderFulfillmentCancelDialog
confirmButtonState={getMutationState(
orderFulfillmentCancel.opts.called,
orderFulfillmentCancel.opts.loading,
maybe(
() =>
orderFulfillmentCancel.opts.data
.orderFulfillmentCancel.errors
)
)}
open={params.action === "cancel-fulfillment"}
onConfirm={variables =>
orderFulfillmentCancel.mutate({
id: params.id,
input: variables
})
}
onClose={closeModal}
/>
<OrderFulfillmentTrackingDialog
confirmButtonState={getMutationState(
orderFulfillmentUpdateTracking.opts.called,
orderFulfillmentUpdateTracking.opts.loading,
maybe(
() =>
orderFulfillmentUpdateTracking.opts.data
.orderFulfillmentUpdateTracking.errors
)
)}
open={params.action === "edit-fulfillment"}
trackingNumber={maybe(
() =>
data.order.fulfillments.find(
fulfillment => fulfillment.id === params.id
).trackingNumber
)}
onConfirm={variables =>
orderFulfillmentUpdateTracking.mutate({
id: params.id,
input: {
...variables,
id
})
}
/>
<OrderFulfillmentDialog
confirmButtonState={getMutationState(
orderCreateFulfillment.opts.called,
orderCreateFulfillment.opts.loading,
maybe(
() =>
orderCreateFulfillment.opts.data
.orderFulfillmentCreate.errors
)
)}
open={params.action === "fulfill"}
lines={maybe(() => order.lines, []).filter(
line => line.quantityFulfilled < line.quantity
)}
onClose={closeModal}
onSubmit={variables =>
orderCreateFulfillment.mutate({
input: {
...variables,
lines: maybe(() => order.lines, [])
.filter(
line =>
line.quantityFulfilled < line.quantity
)
.map((line, lineIndex) => ({
orderLineId: line.id,
quantity: variables.lines[lineIndex]
}))
.filter(line => line.quantity > 0)
},
order: order.id
})
}
/>
<OrderFulfillmentCancelDialog
confirmButtonState={getMutationState(
orderFulfillmentCancel.opts.called,
orderFulfillmentCancel.opts.loading,
maybe(
() =>
orderFulfillmentCancel.opts.data
.orderFulfillmentCancel.errors
)
)}
open={params.action === "cancel-fulfillment"}
onConfirm={variables =>
orderFulfillmentCancel.mutate({
id: params.id,
input: variables
})
}
onClose={closeModal}
/>
<OrderFulfillmentTrackingDialog
confirmButtonState={getMutationState(
orderFulfillmentUpdateTracking.opts.called,
orderFulfillmentUpdateTracking.opts.loading,
maybe(
() =>
orderFulfillmentUpdateTracking.opts.data
.orderFulfillmentUpdateTracking.errors
)
)}
open={params.action === "edit-fulfillment"}
trackingNumber={maybe(
notifyCustomer: true
}
})
}
onClose={closeModal}
/>
</>
) : (
<>
<WindowTitle
title={maybe(
() => "Draft order #" + data.order.number
)}
/>
<OrderDraftPage
disabled={loading}
onNoteAdd={variables =>
orderAddNote.mutate({
input: variables,
order: id
})
}
users={maybe(
() =>
users.data.search.edges.map(edge => edge.node),
[]
)}
hasMore={maybe(
() => users.data.search.pageInfo.hasNextPage,
false
)}
onFetchMore={loadMoreCustomers}
fetchUsers={searchUsers}
loading={users.loading}
usersLoading={users.loading}
onCustomerEdit={data =>
orderDraftUpdate.mutate({
id,
input: data
})
}
onDraftFinalize={() => openModal("finalize")}
onDraftRemove={() => openModal("cancel")}
onOrderLineAdd={() => openModal("add-order-line")}
onBack={() => navigate(orderListUrl())}
order={order}
countries={maybe(() => data.shop.countries, []).map(
country => ({
code: country.code,
label: country.country
})
)}
onProductClick={id => () =>
navigate(productUrl(encodeURIComponent(id)))}
onBillingAddressEdit={() =>
openModal("edit-billing-address")
}
onShippingAddressEdit={() =>
openModal("edit-shipping-address")
}
onShippingMethodEdit={() =>
openModal("edit-shipping")
}
onOrderLineRemove={id =>
orderLineDelete.mutate({ id })
}
onOrderLineChange={(id, data) =>
orderLineUpdate.mutate({
id,
input: data
})
}
saveButtonBarState="default"
onProfileView={() =>
navigate(customerUrl(order.user.id))
}
userPermissions={maybe(() => user.permissions, [])}
/>
<OrderDraftCancelDialog
confirmButtonState={getMutationState(
orderDraftCancel.opts.called,
orderDraftCancel.opts.loading,
maybe(
() =>
data.order.fulfillments.find(
fulfillment => fulfillment.id === params.id
).trackingNumber
)}
onConfirm={variables =>
orderFulfillmentUpdateTracking.mutate({
id: params.id,
input: {
...variables,
notifyCustomer: true
}
})
}
onClose={closeModal}
/>
</>
) : (
<>
<WindowTitle
title={maybe(
() => "Draft order #" + data.order.number
)}
/>
<OrderDraftPage
disabled={loading}
onNoteAdd={variables =>
orderAddNote.mutate({
input: variables,
order: id
})
}
users={maybe(
orderDraftCancel.opts.data.draftOrderDelete
.errors
)
)}
onClose={closeModal}
onConfirm={() => orderDraftCancel.mutate({ id })}
open={params.action === "cancel"}
orderNumber={maybe(() => order.number)}
/>
<OrderDraftFinalizeDialog
confirmButtonState={orderDraftFinalize.opts.state}
onClose={closeModal}
onConfirm={() => orderDraftFinalize.mutate({ id })}
open={params.action === "finalize"}
orderNumber={maybe(() => order.number)}
warnings={orderDraftFinalizeWarnings(order)}
/>
<OrderShippingMethodEditDialog
confirmButtonState={getMutationState(
orderShippingMethodUpdate.opts.called,
orderShippingMethodUpdate.opts.loading,
maybe(
() =>
users.data.search.edges.map(edge => edge.node),
[]
)}
hasMore={maybe(
() => users.data.search.pageInfo.hasNextPage,
false
)}
onFetchMore={loadMoreCustomers}
fetchUsers={searchUsers}
loading={users.loading}
usersLoading={users.loading}
onCustomerEdit={data =>
orderDraftUpdate.mutate({
id,
input: data
})
}
onDraftFinalize={() => openModal("finalize")}
onDraftRemove={() => openModal("cancel")}
onOrderLineAdd={() => openModal("add-order-line")}
onBack={() => navigate(orderListUrl())}
order={order}
countries={maybe(() => data.shop.countries, []).map(
country => ({
code: country.code,
label: country.country
})
)}
onProductClick={id => () =>
navigate(productUrl(encodeURIComponent(id)))}
onBillingAddressEdit={() =>
openModal("edit-billing-address")
}
onShippingAddressEdit={() =>
openModal("edit-shipping-address")
}
onShippingMethodEdit={() =>
openModal("edit-shipping")
}
onOrderLineRemove={id =>
orderLineDelete.mutate({ id })
}
onOrderLineChange={(id, data) =>
orderLineUpdate.mutate({
id,
input: data
})
}
saveButtonBarState="default"
onProfileView={() =>
navigate(customerUrl(order.user.id))
}
userPermissions={maybe(() => user.permissions, [])}
/>
<OrderDraftCancelDialog
confirmButtonState={getMutationState(
orderDraftCancel.opts.called,
orderDraftCancel.opts.loading,
maybe(
() =>
orderDraftCancel.opts.data.draftOrderDelete
.errors
)
)}
onClose={closeModal}
onConfirm={() => orderDraftCancel.mutate({ id })}
open={params.action === "cancel"}
orderNumber={maybe(() => order.number)}
/>
<OrderDraftFinalizeDialog
confirmButtonState={finalizeTransitionState}
onClose={closeModal}
onConfirm={() => orderDraftFinalize.mutate({ id })}
open={params.action === "finalize"}
orderNumber={maybe(() => order.number)}
warnings={orderDraftFinalizeWarnings(order)}
/>
<OrderShippingMethodEditDialog
confirmButtonState={getMutationState(
orderShippingMethodUpdate.opts.called,
orderShippingMethodUpdate.opts.loading,
maybe(
() =>
orderShippingMethodUpdate.opts.data
.orderUpdateShipping.errors
)
)}
open={params.action === "edit-shipping"}
shippingMethod={maybe(
() => order.shippingMethod.id,
"..."
)}
shippingMethods={maybe(
() => order.availableShippingMethods
)}
onClose={closeModal}
onSubmit={variables =>
orderShippingMethodUpdate.mutate({
id,
input: {
shippingMethod: variables.shippingMethod
}
})
}
/>
<OrderProductAddDialog
confirmButtonState={getMutationState(
orderLinesAdd.opts.called,
orderLinesAdd.opts.loading,
maybe(
() =>
orderLinesAdd.opts.data.draftOrderLinesCreate
.errors
)
)}
loading={variantSearchOpts.loading}
open={params.action === "add-order-line"}
hasMore={maybe(
orderShippingMethodUpdate.opts.data
.orderUpdateShipping.errors
)
)}
open={params.action === "edit-shipping"}
shippingMethod={maybe(
() => order.shippingMethod.id,
"..."
)}
shippingMethods={maybe(
() => order.availableShippingMethods
)}
onClose={closeModal}
onSubmit={variables =>
orderShippingMethodUpdate.mutate({
id,
input: {
shippingMethod: variables.shippingMethod
}
})
}
/>
<OrderProductAddDialog
confirmButtonState={getMutationState(
orderLinesAdd.opts.called,
orderLinesAdd.opts.loading,
maybe(
() =>
variantSearchOpts.data.search.pageInfo
.hasNextPage
)}
products={maybe(() =>
variantSearchOpts.data.search.edges.map(
edge => edge.node
)
)}
onClose={closeModal}
onFetch={variantSearch}
onFetchMore={loadMore}
onSubmit={variants =>
orderLinesAdd.mutate({
id,
input: variants.map(variant => ({
quantity: 1,
variantId: variant.id
}))
})
}
/>
</>
orderLinesAdd.opts.data.draftOrderLinesCreate
.errors
)
)}
loading={variantSearchOpts.loading}
open={params.action === "add-order-line"}
hasMore={maybe(
() =>
variantSearchOpts.data.search.pageInfo.hasNextPage
)}
products={maybe(() =>
variantSearchOpts.data.search.edges.map(
edge => edge.node
)
)}
onClose={closeModal}
onFetch={variantSearch}
onFetchMore={loadMore}
onSubmit={variants =>
orderLinesAdd.mutate({
id,
input: variants.map(variant => ({
quantity: 1,
variantId: variant.id
}))
})
}
/>
</>
)}
<OrderAddressEditDialog
confirmButtonState={getMutationState(
orderUpdate.opts.called,
orderUpdate.opts.loading,
maybe(() => orderUpdate.opts.data.orderUpdate.errors)
)}
<OrderAddressEditDialog
confirmButtonState={getMutationState(
orderUpdate.opts.called,
orderUpdate.opts.loading,
maybe(() => orderUpdate.opts.data.orderUpdate.errors)
)}
address={transformAddressToForm(
maybe(() => order.shippingAddress)
)}
countries={maybe(() => data.shop.countries, []).map(
country => ({
code: country.code,
label: country.country
})
)}
errors={maybe(
() => orderUpdate.opts.data.orderUpdate.errors,
[]
)}
open={params.action === "edit-shipping-address"}
variant="shipping"
onClose={closeModal}
onConfirm={shippingAddress =>
orderUpdate.mutate({
id,
input: {
shippingAddress
}
})
}
/>
<OrderAddressEditDialog
confirmButtonState={getMutationState(
orderUpdate.opts.called,
orderUpdate.opts.loading,
maybe(() => orderUpdate.opts.data.orderUpdate.errors)
)}
address={transformAddressToForm(
maybe(() => order.billingAddress)
)}
countries={maybe(() => data.shop.countries, []).map(
country => ({
code: country.code,
label: country.country
})
)}
errors={maybe(
() => orderUpdate.opts.data.orderUpdate.errors,
[]
)}
open={params.action === "edit-billing-address"}
variant="billing"
onClose={closeModal}
onConfirm={billingAddress =>
orderUpdate.mutate({
id,
input: {
billingAddress
}
})
}
/>
</>
);
}}
address={transformAddressToForm(
maybe(() => order.shippingAddress)
)}
countries={maybe(() => data.shop.countries, []).map(
country => ({
code: country.code,
label: country.country
})
)}
errors={maybe(
() => orderUpdate.opts.data.orderUpdate.errors,
[]
)}
open={params.action === "edit-shipping-address"}
variant="shipping"
onClose={closeModal}
onConfirm={shippingAddress =>
orderUpdate.mutate({
id,
input: {
shippingAddress
}
})
}
/>
<OrderAddressEditDialog
confirmButtonState={getMutationState(
orderUpdate.opts.called,
orderUpdate.opts.loading,
maybe(() => orderUpdate.opts.data.orderUpdate.errors)
)}
address={transformAddressToForm(
maybe(() => order.billingAddress)
)}
countries={maybe(() => data.shop.countries, []).map(
country => ({
code: country.code,
label: country.country
})
)}
errors={maybe(
() => orderUpdate.opts.data.orderUpdate.errors,
[]
)}
open={params.action === "edit-billing-address"}
variant="billing"
onClose={closeModal}
onConfirm={billingAddress =>
orderUpdate.mutate({
id,
input: {
billingAddress
}
})
}
/>
</>
)}
</OrderOperations>
)}
</OrderDetailsMessages>

12
src/orders/views/OrderDraftList/OrderDraftList.tsx
View file

@ -16,7 +16,7 @@ import useNotifier from "@saleor/hooks/useNotifier";
import usePaginator, {
createPaginationState
} from "@saleor/hooks/usePaginator";
import { getMutationState, maybe } from "@saleor/misc";
import { maybe } from "@saleor/misc";
import { ListViews } from "@saleor/types";
import OrderDraftListPage from "../../components/OrderDraftListPage";
import {
@ -167,14 +167,6 @@ export const OrderDraftList: React.FC<OrderDraftListProps> = ({ params }) => {
onCompleted={handleOrderDraftBulkCancel}
>
{(orderDraftBulkDelete, orderDraftBulkDeleteOpts) => {
const bulkRemoveTransitionState = getMutationState(
orderDraftBulkDeleteOpts.called,
orderDraftBulkDeleteOpts.loading,
maybe(
() =>
orderDraftBulkDeleteOpts.data.draftOrderBulkDelete.errors
)
);
const onOrderDraftBulkDelete = () =>
orderDraftBulkDelete({
variables: {
@ -225,7 +217,7 @@ export const OrderDraftList: React.FC<OrderDraftListProps> = ({ params }) => {
}
/>
<ActionDialog
confirmButtonState={bulkRemoveTransitionState}
confirmButtonState={orderDraftBulkDeleteOpts.state}
onClose={closeModal}
onConfirm={onOrderDraftBulkDelete}
open={params.action === "remove"}

9
src/orders/views/OrderList/OrderList.tsx
View file

@ -15,7 +15,7 @@ import usePaginator, {
createPaginationState
} from "@saleor/hooks/usePaginator";
import useShop from "@saleor/hooks/useShop";
import { getMutationState, maybe } from "@saleor/misc";
import { maybe } from "@saleor/misc";
import { ListViews } from "@saleor/types";
import OrderBulkCancelDialog from "../../components/OrderBulkCancelDialog";
import OrderListPage from "../../components/OrderListPage/OrderListPage";
@ -176,11 +176,6 @@ export const OrderList: React.FC<OrderListProps> = ({ params }) => {
return (
<TypedOrderBulkCancelMutation onCompleted={handleOrderBulkCancel}>
{(orderBulkCancel, orderBulkCancelOpts) => {
const orderBulkCancelTransitionState = getMutationState(
orderBulkCancelOpts.called,
orderBulkCancelOpts.loading,
maybe(() => orderBulkCancelOpts.data.orderBulkCancel.errors)
);
const onOrderBulkCancel = (restock: boolean) =>
orderBulkCancel({
variables: {
@ -244,7 +239,7 @@ export const OrderList: React.FC<OrderListProps> = ({ params }) => {
}
/>
<OrderBulkCancelDialog
confirmButtonState={orderBulkCancelTransitionState}
confirmButtonState={orderBulkCancelOpts.state}
numberOfOrders={maybe(
() => params.ids.length.toString(),
"..."

86
src/pages/views/PageCreate.tsx
View file

@ -4,7 +4,7 @@ import { useIntl } from "react-intl";
import { WindowTitle } from "@saleor/components/WindowTitle";
import useNavigator from "@saleor/hooks/useNavigator";
import useNotifier from "@saleor/hooks/useNotifier";
import { getMutationState, maybe } from "../../misc";
import { maybe } from "../../misc";
import PageDetailsPage from "../components/PageDetailsPage";
import { TypedPageCreate } from "../mutations";
import { PageCreate as PageCreateData } from "../types/PageCreate";
@ -32,53 +32,45 @@ export const PageCreate: React.FC<PageCreateProps> = () => {
return (
<TypedPageCreate onCompleted={handlePageCreate}>
{(pageCreate, pageCreateOpts) => {
const formTransitionState = getMutationState(
pageCreateOpts.called,
pageCreateOpts.loading,
maybe(() => pageCreateOpts.data.pageCreate.errors)
);
return (
<>
<WindowTitle
title={intl.formatMessage({
defaultMessage: "Create Page",
description: "header"
})}
/>
<PageDetailsPage
disabled={pageCreateOpts.loading}
errors={maybe(() => pageCreateOpts.data.pageCreate.errors, [])}
saveButtonBarState={formTransitionState}
page={null}
onBack={() => navigate(pageListUrl())}
onRemove={() => undefined}
onSubmit={formData =>
pageCreate({
variables: {
input: {
contentJson: JSON.stringify(formData.content),
isPublished: formData.isPublished,
publicationDate: formData.isPublished
? null
: formData.publicationDate === ""
? null
: formData.publicationDate,
seo: {
description: formData.seoDescription,
title: formData.seoTitle
},
slug: formData.slug === "" ? null : formData.slug,
title: formData.title
}
{(pageCreate, pageCreateOpts) => (
<>
<WindowTitle
title={intl.formatMessage({
defaultMessage: "Create Page",
description: "header"
})}
/>
<PageDetailsPage
disabled={pageCreateOpts.loading}
errors={maybe(() => pageCreateOpts.data.pageCreate.errors, [])}
saveButtonBarState={pageCreateOpts.state}
page={null}
onBack={() => navigate(pageListUrl())}
onRemove={() => undefined}
onSubmit={formData =>
pageCreate({
variables: {
input: {
contentJson: JSON.stringify(formData.content),
isPublished: formData.isPublished,
publicationDate: formData.isPublished
? null
: formData.publicationDate === ""
? null
: formData.publicationDate,
seo: {
description: formData.seoDescription,
title: formData.seoTitle
},
slug: formData.slug === "" ? null : formData.slug,
title: formData.title
}
})
}
/>
</>
);
}}
}
})
}
/>
</>
)}
</TypedPageCreate>
);
};

130
src/pages/views/PageDetails.tsx
View file

@ -6,7 +6,7 @@ import ActionDialog from "@saleor/components/ActionDialog";
import { WindowTitle } from "@saleor/components/WindowTitle";
import useNavigator from "@saleor/hooks/useNavigator";
import useNotifier from "@saleor/hooks/useNotifier";
import { getMutationState, maybe } from "../../misc";
import { maybe } from "../../misc";
import { PageInput } from "../../types/globalTypes";
import PageDetailsPage, { FormData } from "../components/PageDetailsPage";
import { TypedPageRemove, TypedPageUpdate } from "../mutations";
@ -56,79 +56,63 @@ export const PageDetails: React.FC<PageDetailsProps> = ({ id, params }) => {
<TypedPageUpdate>
{(pageUpdate, pageUpdateOpts) => (
<TypedPageDetailsQuery variables={{ id }}>
{pageDetails => {
const formTransitionState = getMutationState(
pageUpdateOpts.called,
pageUpdateOpts.loading,
maybe(() => pageUpdateOpts.data.pageUpdate.errors)
);
const removeTransitionState = getMutationState(
pageRemoveOpts.called,
pageRemoveOpts.loading,
maybe(() => pageRemoveOpts.data.pageDelete.errors)
);
return (
<>
<WindowTitle
title={maybe(() => pageDetails.data.page.title)}
/>
<PageDetailsPage
disabled={pageDetails.loading}
errors={maybe(
() => pageUpdateOpts.data.pageUpdate.errors,
[]
)}
saveButtonBarState={formTransitionState}
page={maybe(() => pageDetails.data.page)}
onBack={() => navigate(pageListUrl())}
onRemove={() =>
navigate(
pageUrl(id, {
action: "remove"
})
)
}
onSubmit={formData =>
pageUpdate({
variables: {
id,
input: createPageInput(formData)
}
{pageDetails => (
<>
<WindowTitle
title={maybe(() => pageDetails.data.page.title)}
/>
<PageDetailsPage
disabled={pageDetails.loading}
errors={maybe(
() => pageUpdateOpts.data.pageUpdate.errors,
[]
)}
saveButtonBarState={pageUpdateOpts.state}
page={maybe(() => pageDetails.data.page)}
onBack={() => navigate(pageListUrl())}
onRemove={() =>
navigate(
pageUrl(id, {
action: "remove"
})
}
/>
<ActionDialog
open={params.action === "remove"}
confirmButtonState={removeTransitionState}
title={intl.formatMessage({
defaultMessage: "Delete Page",
description: "dialog header"
})}
onClose={() => navigate(pageUrl(id))}
onConfirm={pageRemove}
variant="delete"
>
<DialogContentText>
<FormattedMessage
defaultMessage="Are you sure you want to delete {title}?"
description="delete page"
values={{
title: (
<strong>
{maybe(
() => pageDetails.data.page.title,
"..."
)}
</strong>
)
}}
/>
</DialogContentText>
</ActionDialog>
</>
);
}}
)
}
onSubmit={formData =>
pageUpdate({
variables: {
id,
input: createPageInput(formData)
}
})
}
/>
<ActionDialog
open={params.action === "remove"}
confirmButtonState={pageRemoveOpts.state}
title={intl.formatMessage({
defaultMessage: "Delete Page",
description: "dialog header"
})}
onClose={() => navigate(pageUrl(id))}
onConfirm={pageRemove}
variant="delete"
>
<DialogContentText>
<FormattedMessage
defaultMessage="Are you sure you want to delete {title}?"
description="delete page"
values={{
title: (
<strong>
{maybe(() => pageDetails.data.page.title, "...")}
</strong>
)
}}
/>
</DialogContentText>
</ActionDialog>
</>
)}
</TypedPageDetailsQuery>
)}
</TypedPageUpdate>

290
src/pages/views/PageList.tsx
View file

@ -14,7 +14,7 @@ import useNotifier from "@saleor/hooks/useNotifier";
import usePaginator, {
createPaginationState
} from "@saleor/hooks/usePaginator";
import { getMutationState, maybe } from "@saleor/misc";
import { maybe } from "@saleor/misc";
import { ListViews } from "@saleor/types";
import PageListPage from "../components/PageListPage/PageListPage";
import { TypedPageBulkPublish, TypedPageBulkRemove } from "../mutations";
@ -107,160 +107,142 @@ export const PageList: React.FC<PageListProps> = ({ params }) => {
<TypedPageBulkRemove onCompleted={handlePageBulkRemove}>
{(bulkPageRemove, bulkPageRemoveOpts) => (
<TypedPageBulkPublish onCompleted={handlePageBulkPublish}>
{(bulkPagePublish, bulkPagePublishOpts) => {
const deleteTransitionState = getMutationState(
bulkPageRemoveOpts.called,
bulkPageRemoveOpts.loading,
maybe(() => bulkPageRemoveOpts.data.pageBulkDelete.errors)
);
const publishTransitionState = getMutationState(
bulkPagePublishOpts.called,
bulkPagePublishOpts.loading,
maybe(() => bulkPagePublishOpts.data.pageBulkPublish.errors)
);
return (
<>
<PageListPage
disabled={loading}
settings={settings}
pages={maybe(() =>
data.pages.edges.map(edge => edge.node)
)}
pageInfo={pageInfo}
onAdd={() => navigate(pageCreateUrl)}
onBack={() => navigate(configurationMenuUrl)}
onNextPage={loadNextPage}
onPreviousPage={loadPreviousPage}
onUpdateListSettings={updateListSettings}
onRowClick={id => () => navigate(pageUrl(id))}
toolbar={
<>
<Button
color="primary"
onClick={() =>
openModal("unpublish", listElements)
}
>
<FormattedMessage
defaultMessage="Unpublish"
description="unpublish page, button"
/>
</Button>
<Button
color="primary"
onClick={() => openModal("publish", listElements)}
>
<FormattedMessage
defaultMessage="Publish"
description="publish page, button"
/>
</Button>
<IconButton
color="primary"
onClick={() => openModal("remove", listElements)}
>
<DeleteIcon />
</IconButton>
</>
}
isChecked={isSelected}
selected={listElements.length}
toggle={toggle}
toggleAll={toggleAll}
{(bulkPagePublish, bulkPagePublishOpts) => (
<>
<PageListPage
disabled={loading}
settings={settings}
pages={maybe(() =>
data.pages.edges.map(edge => edge.node)
)}
pageInfo={pageInfo}
onAdd={() => navigate(pageCreateUrl)}
onBack={() => navigate(configurationMenuUrl)}
onNextPage={loadNextPage}
onPreviousPage={loadPreviousPage}
onUpdateListSettings={updateListSettings}
onRowClick={id => () => navigate(pageUrl(id))}
toolbar={
<>
<Button
color="primary"
onClick={() => openModal("unpublish", listElements)}
>
<FormattedMessage
defaultMessage="Unpublish"
description="unpublish page, button"
/>
</Button>
<Button
color="primary"
onClick={() => openModal("publish", listElements)}
>
<FormattedMessage
defaultMessage="Publish"
description="publish page, button"
/>
</Button>
<IconButton
color="primary"
onClick={() => openModal("remove", listElements)}
>
<DeleteIcon />
</IconButton>
</>
}
isChecked={isSelected}
selected={listElements.length}
toggle={toggle}
toggleAll={toggleAll}
/>
<ActionDialog
open={params.action === "publish"}
onClose={closeModal}
confirmButtonState={bulkPagePublishOpts.state}
onConfirm={() =>
bulkPagePublish({
variables: {
ids: params.ids,
isPublished: true
}
})
}
title={intl.formatMessage({
defaultMessage: "Publish Pages",
description: "dialog header"
})}
>
<DialogContentText>
<FormattedMessage
defaultMessage="Are you sure you want to publish {counter,plural,one{this page} other{{displayQuantity} pages}}?"
description="dialog content"
values={{
counter: maybe(() => params.ids.length),
displayQuantity: (
<strong>{maybe(() => params.ids.length)}</strong>
)
}}
/>
</DialogContentText>
</ActionDialog>
<ActionDialog
open={params.action === "unpublish"}
onClose={closeModal}
confirmButtonState={bulkPagePublishOpts.state}
onConfirm={() =>
bulkPagePublish({
variables: {
ids: params.ids,
isPublished: false
}
})
}
title={intl.formatMessage({
defaultMessage: "Unpublish Pages",
description: "dialog header"
})}
>
<FormattedMessage
defaultMessage="Are you sure you want to unpublish {counter,plural,one{this page} other{{displayQuantity} pages}}?"
description="dialog content"
values={{
counter: maybe(() => params.ids.length),
displayQuantity: (
<strong>{maybe(() => params.ids.length)}</strong>
)
}}
/>
<ActionDialog
open={params.action === "publish"}
onClose={closeModal}
confirmButtonState={publishTransitionState}
onConfirm={() =>
bulkPagePublish({
variables: {
ids: params.ids,
isPublished: true
}
})
}
title={intl.formatMessage({
defaultMessage: "Publish Pages",
description: "dialog header"
})}
>
<DialogContentText>
<FormattedMessage
defaultMessage="Are you sure you want to publish {counter,plural,one{this page} other{{displayQuantity} pages}}?"
description="dialog content"
values={{
counter: maybe(() => params.ids.length),
displayQuantity: (
<strong>
{maybe(() => params.ids.length)}
</strong>
)
}}
/>
</DialogContentText>
</ActionDialog>
<ActionDialog
open={params.action === "unpublish"}
onClose={closeModal}
confirmButtonState={publishTransitionState}
onConfirm={() =>
bulkPagePublish({
variables: {
ids: params.ids,
isPublished: false
}
})
}
title={intl.formatMessage({
defaultMessage: "Unpublish Pages",
description: "dialog header"
})}
>
<FormattedMessage
defaultMessage="Are you sure you want to unpublish {counter,plural,one{this page} other{{displayQuantity} pages}}?"
description="dialog content"
values={{
counter: maybe(() => params.ids.length),
displayQuantity: (
<strong>{maybe(() => params.ids.length)}</strong>
)
}}
/>
</ActionDialog>
<ActionDialog
open={params.action === "remove"}
onClose={closeModal}
confirmButtonState={deleteTransitionState}
onConfirm={() =>
bulkPageRemove({
variables: {
ids: params.ids
}
})
}
variant="delete"
title={intl.formatMessage({
defaultMessage: "Delete Pages",
description: "dialog header"
})}
>
<FormattedMessage
defaultMessage="Are you sure you want to delete {counter,plural,one{this page} other{{displayQuantity} pages}}?"
description="dialog content"
values={{
counter: maybe(() => params.ids.length),
displayQuantity: (
<strong>{maybe(() => params.ids.length)}</strong>
)
}}
/>
</ActionDialog>
</>
);
}}
</ActionDialog>
<ActionDialog
open={params.action === "remove"}
onClose={closeModal}
confirmButtonState={bulkPageRemoveOpts.state}
onConfirm={() =>
bulkPageRemove({
variables: {
ids: params.ids
}
})
}
variant="delete"
title={intl.formatMessage({
defaultMessage: "Delete Pages",
description: "dialog header"
})}
>
<FormattedMessage
defaultMessage="Are you sure you want to delete {counter,plural,one{this page} other{{displayQuantity} pages}}?"
description="dialog content"
values={{
counter: maybe(() => params.ids.length),
displayQuantity: (
<strong>{maybe(() => params.ids.length)}</strong>
)
}}
/>
</ActionDialog>
</>
)}
</TypedPageBulkPublish>
)}
</TypedPageBulkRemove>

14
src/plugins/views/PluginsDetails.tsx
View file

@ -8,7 +8,7 @@ import useNavigator from "@saleor/hooks/useNavigator";
import useNotifier from "@saleor/hooks/useNotifier";
import { commonMessages } from "@saleor/intl";
import { ConfigurationItemInput } from "@saleor/types/globalTypes";
import { getMutationState, maybe } from "../../misc";
import { maybe } from "../../misc";
import PluginsDetailsPage from "../components/PluginsDetailsPage";
import PluginSecretFieldDialog from "../components/PluginSecretFieldDialog";
import { TypedPluginUpdate } from "../mutations";
@ -85,12 +85,6 @@ export const PluginsDetails: React.FC<PluginsDetailsProps> = ({
{pluginDetails => (
<TypedPluginUpdate onCompleted={handleUpdate}>
{(pluginUpdate, pluginUpdateOpts) => {
const formTransitionState = getMutationState(
pluginUpdateOpts.called,
pluginUpdateOpts.loading,
maybe(() => pluginUpdateOpts.data.pluginUpdate.errors)
);
const formErrors = maybe(
() => pluginUpdateOpts.data.pluginUpdate.errors,
[]
@ -120,7 +114,7 @@ export const PluginsDetails: React.FC<PluginsDetailsProps> = ({
disabled={pluginDetails.loading}
errors={formErrors}
saveButtonBarState={
!params.action ? formTransitionState : "default"
!params.action ? pluginUpdateOpts.state : "default"
}
plugin={maybe(() => pluginDetails.data.plugin)}
onBack={() => navigate(pluginsListUrl())}
@ -145,7 +139,7 @@ export const PluginsDetails: React.FC<PluginsDetailsProps> = ({
<>
<ActionDialog
confirmButtonState={
!!params.action ? formTransitionState : "default"
!!params.action ? pluginUpdateOpts.state : "default"
}
onClose={closeModal}
open={params.action === "clear" && !!params.field}
@ -161,7 +155,7 @@ export const PluginsDetails: React.FC<PluginsDetailsProps> = ({
</ActionDialog>
<PluginSecretFieldDialog
confirmButtonState={
!!params.action ? formTransitionState : "default"
!!params.action ? pluginUpdateOpts.state : "default"
}
field={maybe(() =>
pluginDetails.data.plugin.configuration.find(

19
src/productTypes/views/ProductTypeCreate.tsx
View file

@ -4,7 +4,7 @@ import { useIntl } from "react-intl";
import { WindowTitle } from "@saleor/components/WindowTitle";
import useNavigator from "@saleor/hooks/useNavigator";
import useNotifier from "@saleor/hooks/useNotifier";
import { getMutationState, maybe } from "../../misc";
import { maybe } from "../../misc";
import ProductTypeCreatePage, {
ProductTypeForm
} from "../components/ProductTypeCreatePage";
@ -30,11 +30,7 @@ export const ProductTypeCreate: React.FC = () => {
};
return (
<TypedProductTypeCreateMutation onCompleted={handleCreateSuccess}>
{(
createProductType,
{ called, loading, data: createProductTypeData }
) => {
const formTransitionState = getMutationState(loading, called);
{(createProductType, createProductTypeOpts) => {
const handleCreate = (formData: ProductTypeForm) =>
createProductType({
variables: {
@ -61,17 +57,16 @@ export const ProductTypeCreate: React.FC = () => {
<ProductTypeCreatePage
defaultWeightUnit={maybe(() => data.shop.defaultWeightUnit)}
disabled={loading}
errors={
createProductTypeData
? createProductTypeData.productTypeCreate.errors
: undefined
}
errors={maybe(
() => createProductTypeOpts.data.productTypeCreate.errors,
[]
)}
pageTitle={intl.formatMessage({
defaultMessage: "Create Product Type",
description: "header",
id: "productTypeCreatePageHeader"
})}
saveButtonBarState={formTransitionState}
saveButtonBarState={createProductTypeOpts.state}
taxTypes={maybe(() => data.taxTypes, [])}
onBack={() => navigate(productTypeListUrl())}
onSubmit={handleCreate}

13
src/productTypes/views/ProductTypeList/ProductTypeList.tsx
View file

@ -19,7 +19,7 @@ import usePaginator, {
import { commonMessages } from "@saleor/intl";
import { ListViews } from "@saleor/types";
import { configurationMenuUrl } from "../../../configuration";
import { getMutationState, maybe } from "../../../misc";
import { maybe } from "../../../misc";
import ProductTypeListPage from "../../components/ProductTypeListPage";
import { TypedProductTypeBulkDeleteMutation } from "../../mutations";
import { TypedProductTypeListQuery } from "../../queries";
@ -155,15 +155,6 @@ export const ProductTypeList: React.FC<ProductTypeListProps> = ({ params }) => {
onCompleted={handleProductTypeBulkDelete}
>
{(productTypeBulkDelete, productTypeBulkDeleteOpts) => {
const bulkRemoveTransitionState = getMutationState(
productTypeBulkDeleteOpts.called,
productTypeBulkDeleteOpts.loading,
maybe(
() =>
productTypeBulkDeleteOpts.data.productTypeBulkDelete.errors
)
);
const onProductTypeBulkDelete = () =>
productTypeBulkDelete({
variables: {
@ -212,7 +203,7 @@ export const ProductTypeList: React.FC<ProductTypeListProps> = ({ params }) => {
}
/>
<ActionDialog
confirmButtonState={bulkRemoveTransitionState}
confirmButtonState={productTypeBulkDeleteOpts.state}
onClose={closeModal}
onConfirm={onProductTypeBulkDelete}
open={params.action === "remove"}

44
src/productTypes/views/ProductTypeUpdate/index.tsx
View file

@ -9,7 +9,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 { getMutationState, maybe } from "@saleor/misc";
import { maybe } from "@saleor/misc";
import AssignAttributeDialog from "@saleor/productTypes/components/AssignAttributeDialog";
import { ReorderEvent } from "@saleor/types";
import { AttributeTypeEnum } from "@saleor/types/globalTypes";
@ -190,38 +190,6 @@ export const ProductTypeUpdate: React.FC<ProductTypeUpdateProps> = ({
const loading = updateProductType.opts.loading || dataLoading;
const assignTransactionState = getMutationState(
assignAttribute.opts.called,
assignAttribute.opts.loading,
maybe(
() => assignAttribute.opts.data.attributeAssign.errors
)
);
const unassignTransactionState = getMutationState(
unassignAttribute.opts.called,
unassignAttribute.opts.loading,
maybe(
() => unassignAttribute.opts.data.attributeUnassign.errors
)
);
const deleteTransactionState = getMutationState(
deleteProductType.opts.called,
deleteProductType.opts.loading,
maybe(
() => deleteProductType.opts.data.productTypeDelete.errors
)
);
const formTransitionState = getMutationState(
updateProductType.opts.called,
updateProductType.opts.loading,
maybe(
() => updateProductType.opts.data.productTypeUpdate.errors
)
);
const handleAttributeReorder = (
event: ReorderEvent,
type: AttributeTypeEnum
@ -252,7 +220,7 @@ export const ProductTypeUpdate: React.FC<ProductTypeUpdateProps> = ({
errors={errors.formErrors}
pageTitle={maybe(() => data.productType.name)}
productType={maybe(() => data.productType)}
saveButtonBarState={formTransitionState}
saveButtonBarState={updateProductType.opts.state}
taxTypes={maybe(() => data.taxTypes, [])}
onAttributeAdd={type =>
navigate(
@ -345,7 +313,7 @@ export const ProductTypeUpdate: React.FC<ProductTypeUpdateProps> = ({
edge => edge.node
)
)}
confirmButtonState={assignTransactionState}
confirmButtonState={assignAttribute.opts.state}
errors={maybe(
() =>
assignAttribute.opts.data.attributeAssign.errors.map(
@ -387,7 +355,7 @@ export const ProductTypeUpdate: React.FC<ProductTypeUpdateProps> = ({
/>
))}
<ProductTypeDeleteDialog
confirmButtonState={deleteTransactionState}
confirmButtonState={deleteProductType.opts.state}
name={maybe(() => data.productType.name, "...")}
open={params.action === "remove"}
onClose={() => navigate(productTypeUrl(id))}
@ -395,7 +363,7 @@ export const ProductTypeUpdate: React.FC<ProductTypeUpdateProps> = ({
/>
<ProductTypeBulkAttributeUnassignDialog
attributeQuantity={maybe(() => params.ids.length)}
confirmButtonState={unassignTransactionState}
confirmButtonState={unassignAttribute.opts.state}
onClose={closeModal}
onConfirm={handleBulkAttributeUnassign}
open={params.action === "unassign-attributes"}
@ -414,7 +382,7 @@ export const ProductTypeUpdate: React.FC<ProductTypeUpdateProps> = ({
.name,
"..."
)}
confirmButtonState={unassignTransactionState}
confirmButtonState={unassignAttribute.opts.state}
onClose={closeModal}
onConfirm={handleAttributeUnassign}
open={params.action === "unassign-attribute"}

25
src/products/views/ProductCreate.tsx
View file

@ -9,7 +9,7 @@ import useShop from "@saleor/hooks/useShop";
import useCategorySearch from "@saleor/searches/useCategorySearch";
import useCollectionSearch from "@saleor/searches/useCollectionSearch";
import useProductTypeSearch from "@saleor/searches/useProductTypeSearch";
import { decimal, getMutationState, maybe } from "../../misc";
import { decimal, maybe } from "../../misc";
import ProductCreatePage, {
ProductCreatePageSubmitData
} from "../components/ProductCreatePage";
@ -70,14 +70,7 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = () => {
return (
<TypedProductCreateMutation onCompleted={handleSuccess}>
{(
productCreate,
{
called: productCreateCalled,
data: productCreateData,
loading: productCreateDataLoading
}
) => {
{(productCreate, productCreateOpts) => {
const handleSubmit = (formData: ProductCreatePageSubmitData) => {
productCreate({
variables: {
@ -108,11 +101,6 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = () => {
});
};
const formTransitionState = getMutationState(
productCreateCalled,
productCreateDataLoading,
maybe(() => productCreateData.productCreate.errors)
);
return (
<>
<WindowTitle
@ -131,8 +119,11 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = () => {
() => searchCollectionOpts.data.search.edges,
[]
).map(edge => edge.node)}
disabled={productCreateDataLoading}
errors={maybe(() => productCreateData.productCreate.errors, [])}
disabled={productCreateOpts.loading}
errors={maybe(
() => productCreateOpts.data.productCreate.errors,
[]
)}
fetchCategories={searchCategory}
fetchCollections={searchCollection}
fetchProductTypes={searchProductTypes}
@ -145,7 +136,7 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = () => {
)}
onBack={handleBack}
onSubmit={handleSubmit}
saveButtonBarState={formTransitionState}
saveButtonBarState={productCreateOpts.state}
fetchMoreCategories={{
hasMore: maybe(
() => searchCategoryOpts.data.search.pageInfo.hasNextPage

16
src/products/views/ProductImage.tsx
View file

@ -5,7 +5,7 @@ import { FormattedMessage, useIntl } from "react-intl";
import ActionDialog from "@saleor/components/ActionDialog";
import useNavigator from "@saleor/hooks/useNavigator";
import useNotifier from "@saleor/hooks/useNotifier";
import { getMutationState, maybe } from "../../misc";
import { maybe } from "../../misc";
import ProductImagePage from "../components/ProductImagePage";
import {
TypedProductImageDeleteMutation,
@ -68,16 +68,6 @@ export const ProductImage: React.FC<ProductImageProps> = ({
};
const image = data && data.product && data.product.mainImage;
const formTransitionState = getMutationState(
updateResult.called,
updateResult.loading,
maybe(() => updateResult.data.productImageUpdate.errors)
);
const deleteTransitionState = getMutationState(
deleteResult.called,
deleteResult.loading,
[]
);
return (
<>
<ProductImagePage
@ -95,7 +85,7 @@ export const ProductImage: React.FC<ProductImageProps> = ({
}
onRowClick={handleImageClick}
onSubmit={handleUpdate}
saveButtonBarState={formTransitionState}
saveButtonBarState={updateResult.state}
/>
<ActionDialog
onClose={() =>
@ -108,7 +98,7 @@ export const ProductImage: React.FC<ProductImageProps> = ({
description: "dialog header"
})}
variant="delete"
confirmButtonState={deleteTransitionState}
confirmButtonState={deleteResult.state}
>
<DialogContentText>
<FormattedMessage defaultMessage="Are you sure you want to delete this image?" />

519
src/products/views/ProductList/ProductList.tsx
View file

@ -21,7 +21,7 @@ import usePaginator, {
} from "@saleor/hooks/usePaginator";
import useShop from "@saleor/hooks/useShop";
import { commonMessages } from "@saleor/intl";
import { getMutationState, maybe } from "@saleor/misc";
import { maybe } from "@saleor/misc";
import { ProductListVariables } from "@saleor/products/types/ProductList";
import { ListViews } from "@saleor/types";
import { getSortUrlVariables } from "@saleor/utils/sort";
@ -216,281 +216,256 @@ export const ProductList: React.FC<ProductListProps> = ({ params }) => {
<TypedProductBulkPublishMutation
onCompleted={handleBulkPublish}
>
{(productBulkPublish, productBulkPublishOpts) => {
const bulkDeleteMutationState = getMutationState(
productBulkDeleteOpts.called,
productBulkDeleteOpts.loading,
maybe(
() =>
productBulkDeleteOpts.data.productBulkDelete.errors
)
);
const bulkPublishMutationState = getMutationState(
productBulkPublishOpts.called,
productBulkPublishOpts.loading,
maybe(
() =>
productBulkPublishOpts.data.productBulkPublish
.errors
)
);
return (
<>
<ProductListPage
activeAttributeSortId={params.attributeId}
sort={{
asc: params.asc,
sort: params.sort
}}
onSort={handleSort}
availableInGridAttributes={maybe(
() =>
attributes.data.availableInGrid.edges.map(
edge => edge.node
),
[]
)}
currencySymbol={currencySymbol}
currentTab={currentTab}
defaultSettings={
defaultListSettings[ListViews.PRODUCT_LIST]
}
gridAttributes={maybe(
() =>
attributes.data.grid.edges.map(
edge => edge.node
),
[]
)}
totalGridAttributes={maybe(
() => attributes.data.availableInGrid.totalCount,
0
)}
settings={settings}
loading={attributes.loading}
hasMore={maybe(
() =>
attributes.data.availableInGrid.pageInfo
.hasNextPage,
false
)}
filtersList={createFilterChips(
params,
{
currencySymbol,
locale
{(productBulkPublish, productBulkPublishOpts) => (
<>
<ProductListPage
activeAttributeSortId={params.attributeId}
sort={{
asc: params.asc,
sort: params.sort
}}
onSort={handleSort}
availableInGridAttributes={maybe(
() =>
attributes.data.availableInGrid.edges.map(
edge => edge.node
),
[]
)}
currencySymbol={currencySymbol}
currentTab={currentTab}
defaultSettings={
defaultListSettings[ListViews.PRODUCT_LIST]
}
gridAttributes={maybe(
() =>
attributes.data.grid.edges.map(edge => edge.node),
[]
)}
totalGridAttributes={maybe(
() => attributes.data.availableInGrid.totalCount,
0
)}
settings={settings}
loading={attributes.loading}
hasMore={maybe(
() =>
attributes.data.availableInGrid.pageInfo
.hasNextPage,
false
)}
filtersList={createFilterChips(
params,
{
currencySymbol,
locale
},
changeFilterField,
intl
)}
onAdd={() => navigate(productAddUrl)}
disabled={loading}
products={maybe(() =>
data.products.edges.map(edge => edge.node)
)}
onFetchMore={() =>
attributes.loadMore(
(prev, next) => {
if (
prev.availableInGrid.pageInfo.endCursor ===
next.availableInGrid.pageInfo.endCursor
) {
return prev;
}
return {
...prev,
availableInGrid: {
...prev.availableInGrid,
edges: [
...prev.availableInGrid.edges,
...next.availableInGrid.edges
],
pageInfo: next.availableInGrid.pageInfo
}
};
},
changeFilterField,
intl
)}
onAdd={() => navigate(productAddUrl)}
disabled={loading}
products={maybe(() =>
data.products.edges.map(edge => edge.node)
)}
onFetchMore={() =>
attributes.loadMore(
(prev, next) => {
if (
prev.availableInGrid.pageInfo.endCursor ===
next.availableInGrid.pageInfo.endCursor
) {
return prev;
}
return {
...prev,
availableInGrid: {
...prev.availableInGrid,
edges: [
...prev.availableInGrid.edges,
...next.availableInGrid.edges
],
pageInfo: next.availableInGrid.pageInfo
}
};
},
{
after:
attributes.data.availableInGrid.pageInfo
.endCursor
{
after:
attributes.data.availableInGrid.pageInfo
.endCursor
}
)
}
onNextPage={loadNextPage}
onPreviousPage={loadPreviousPage}
onUpdateListSettings={updateListSettings}
pageInfo={pageInfo}
onRowClick={id => () => navigate(productUrl(id))}
onAll={() =>
changeFilters({
status: undefined
})
}
toolbar={
<>
<Button
color="primary"
onClick={() =>
openModal("unpublish", listElements)
}
)
}
onNextPage={loadNextPage}
onPreviousPage={loadPreviousPage}
onUpdateListSettings={updateListSettings}
pageInfo={pageInfo}
onRowClick={id => () => navigate(productUrl(id))}
onAll={() =>
changeFilters({
status: undefined
})
}
toolbar={
<>
<Button
color="primary"
onClick={() =>
openModal("unpublish", listElements)
}
>
<FormattedMessage
defaultMessage="Unpublish"
description="unpublish product, button"
/>
</Button>
<Button
color="primary"
onClick={() =>
openModal("publish", listElements)
}
>
<FormattedMessage
defaultMessage="Publish"
description="publish product, button"
/>
</Button>
<IconButton
color="primary"
onClick={() =>
openModal("delete", listElements)
}
>
<DeleteIcon />
</IconButton>
</>
}
isChecked={isSelected}
selected={listElements.length}
toggle={toggle}
toggleAll={toggleAll}
onSearchChange={query =>
changeFilterField({ query })
}
onFilterAdd={filter =>
changeFilterField(createFilter(filter))
}
onTabSave={() => openModal("save-search")}
onTabDelete={() => openModal("delete-search")}
onTabChange={handleTabChange}
initialSearch={params.query || ""}
tabs={getFilterTabs().map(tab => tab.name)}
/>
<ActionDialog
open={params.action === "delete"}
confirmButtonState={bulkDeleteMutationState}
onClose={closeModal}
onConfirm={() =>
productBulkDelete({
variables: { ids: params.ids }
})
}
title={intl.formatMessage({
defaultMessage: "Delete Products",
description: "dialog header"
})}
variant="delete"
>
<DialogContentText>
<FormattedMessage
defaultMessage="Are you sure you want to delete {counter,plural,one{this product} other{{displayQuantity} products}}?"
description="dialog content"
values={{
counter: maybe(() => params.ids.length),
displayQuantity: (
<strong>
{maybe(() => params.ids.length)}
</strong>
)
}}
/>
</DialogContentText>
</ActionDialog>
<ActionDialog
open={params.action === "publish"}
confirmButtonState={bulkPublishMutationState}
onClose={closeModal}
onConfirm={() =>
productBulkPublish({
variables: {
ids: params.ids,
isPublished: true
>
<FormattedMessage
defaultMessage="Unpublish"
description="unpublish product, button"
/>
</Button>
<Button
color="primary"
onClick={() =>
openModal("publish", listElements)
}
})
}
title={intl.formatMessage({
defaultMessage: "Publish Products",
description: "dialog header"
})}
>
<DialogContentText>
<FormattedMessage
defaultMessage="Are you sure you want to publish {counter,plural,one{this product} other{{displayQuantity} products}}?"
description="dialog content"
values={{
counter: maybe(() => params.ids.length),
displayQuantity: (
<strong>
{maybe(() => params.ids.length)}
</strong>
)
}}
/>
</DialogContentText>
</ActionDialog>
<ActionDialog
open={params.action === "unpublish"}
confirmButtonState={bulkPublishMutationState}
onClose={closeModal}
onConfirm={() =>
productBulkPublish({
variables: {
ids: params.ids,
isPublished: false
>
<FormattedMessage
defaultMessage="Publish"
description="publish product, button"
/>
</Button>
<IconButton
color="primary"
onClick={() =>
openModal("delete", listElements)
}
})
}
title={intl.formatMessage({
defaultMessage: "Unpublish Products",
description: "dialog header"
})}
>
<DialogContentText>
<FormattedMessage
defaultMessage="Are you sure you want to unpublish {counter,plural,one{this product} other{{displayQuantity} products}}?"
description="dialog content"
values={{
counter: maybe(() => params.ids.length),
displayQuantity: (
<strong>
{maybe(() => params.ids.length)}
</strong>
)
}}
/>
</DialogContentText>
</ActionDialog>
<SaveFilterTabDialog
open={params.action === "save-search"}
confirmButtonState="default"
onClose={closeModal}
onSubmit={handleFilterTabSave}
/>
<DeleteFilterTabDialog
open={params.action === "delete-search"}
confirmButtonState="default"
onClose={closeModal}
onSubmit={handleFilterTabDelete}
tabName={maybe(
() => tabs[currentTab - 1].name,
"..."
)}
/>
</>
);
}}
>
<DeleteIcon />
</IconButton>
</>
}
isChecked={isSelected}
selected={listElements.length}
toggle={toggle}
toggleAll={toggleAll}
onSearchChange={query => changeFilterField({ query })}
onFilterAdd={filter =>
changeFilterField(createFilter(filter))
}
onTabSave={() => openModal("save-search")}
onTabDelete={() => openModal("delete-search")}
onTabChange={handleTabChange}
initialSearch={params.query || ""}
tabs={getFilterTabs().map(tab => tab.name)}
/>
<ActionDialog
open={params.action === "delete"}
confirmButtonState={productBulkDeleteOpts.state}
onClose={closeModal}
onConfirm={() =>
productBulkDelete({
variables: { ids: params.ids }
})
}
title={intl.formatMessage({
defaultMessage: "Delete Products",
description: "dialog header"
})}
variant="delete"
>
<DialogContentText>
<FormattedMessage
defaultMessage="Are you sure you want to delete {counter,plural,one{this product} other{{displayQuantity} products}}?"
description="dialog content"
values={{
counter: maybe(() => params.ids.length),
displayQuantity: (
<strong>
{maybe(() => params.ids.length)}
</strong>
)
}}
/>
</DialogContentText>
</ActionDialog>
<ActionDialog
open={params.action === "publish"}
confirmButtonState={productBulkPublishOpts.state}
onClose={closeModal}
onConfirm={() =>
productBulkPublish({
variables: {
ids: params.ids,
isPublished: true
}
})
}
title={intl.formatMessage({
defaultMessage: "Publish Products",
description: "dialog header"
})}
>
<DialogContentText>
<FormattedMessage
defaultMessage="Are you sure you want to publish {counter,plural,one{this product} other{{displayQuantity} products}}?"
description="dialog content"
values={{
counter: maybe(() => params.ids.length),
displayQuantity: (
<strong>
{maybe(() => params.ids.length)}
</strong>
)
}}
/>
</DialogContentText>
</ActionDialog>
<ActionDialog
open={params.action === "unpublish"}
confirmButtonState={productBulkPublishOpts.state}
onClose={closeModal}
onConfirm={() =>
productBulkPublish({
variables: {
ids: params.ids,
isPublished: false
}
})
}
title={intl.formatMessage({
defaultMessage: "Unpublish Products",
description: "dialog header"
})}
>
<DialogContentText>
<FormattedMessage
defaultMessage="Are you sure you want to unpublish {counter,plural,one{this product} other{{displayQuantity} products}}?"
description="dialog content"
values={{
counter: maybe(() => params.ids.length),
displayQuantity: (
<strong>
{maybe(() => params.ids.length)}
</strong>
)
}}
/>
</DialogContentText>
</ActionDialog>
<SaveFilterTabDialog
open={params.action === "save-search"}
confirmButtonState="default"
onClose={closeModal}
onSubmit={handleFilterTabSave}
/>
<DeleteFilterTabDialog
open={params.action === "delete-search"}
confirmButtonState="default"
onClose={closeModal}
onSubmit={handleFilterTabDelete}
tabName={maybe(
() => tabs[currentTab - 1].name,
"..."
)}
/>
</>
)}
</TypedProductBulkPublishMutation>
)}
</TypedProductBulkDeleteMutation>

19
src/products/views/ProductUpdate/ProductUpdate.tsx
View file

@ -206,21 +206,6 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = ({ id, params }) => {
updateSimpleProduct.opts.data.productVariantUpdate.errors
)
);
const deleteTransitionState = getMutationState(
deleteProduct.opts.called,
deleteProduct.opts.loading,
maybe(() => deleteProduct.opts.data.productDelete.errors)
);
const bulkProductVariantDeleteTransitionState = getMutationState(
bulkProductVariantDelete.opts.called,
bulkProductVariantDelete.opts.loading,
maybe(
() =>
bulkProductVariantDelete.opts.data.productVariantBulkDelete
.errors
)
);
const categories = maybe(
() => searchCategoriesOpts.data.search.edges,
@ -308,7 +293,7 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = ({ id, params }) => {
<ActionDialog
open={params.action === "remove"}
onClose={() => navigate(productUrl(id), true)}
confirmButtonState={deleteTransitionState}
confirmButtonState={deleteProduct.opts.state}
onConfirm={() => deleteProduct.mutate({ id })}
variant="delete"
title={intl.formatMessage({
@ -329,7 +314,7 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = ({ id, params }) => {
<ActionDialog
open={params.action === "remove-variants"}
onClose={() => navigate(productUrl(id), true)}
confirmButtonState={bulkProductVariantDeleteTransitionState}
confirmButtonState={bulkProductVariantDelete.opts.state}
onConfirm={() =>
bulkProductVariantDelete.mutate({
ids: params.ids

20
src/products/views/ProductVariant.tsx
View file

@ -6,7 +6,7 @@ import { WindowTitle } from "@saleor/components/WindowTitle";
import useNavigator from "@saleor/hooks/useNavigator";
import useNotifier from "@saleor/hooks/useNotifier";
import { commonMessages } from "@saleor/intl";
import { decimal, getMutationState, maybe } from "../../misc";
import { decimal, maybe } from "../../misc";
import ProductVariantDeleteDialog from "../components/ProductVariantDeleteDialog";
import ProductVariantPage, {
ProductVariantPageSubmitData
@ -77,19 +77,7 @@ export const ProductVariant: React.FC<ProductUpdateProps> = ({
updateVariant.opts.loading ||
assignImage.opts.loading ||
unassignImage.opts.loading;
const formTransitionState = getMutationState(
updateVariant.opts.called,
updateVariant.opts.loading,
maybe(
() =>
updateVariant.opts.data.productVariantUpdate.productErrors
)
);
const removeTransitionState = getMutationState(
deleteVariant.opts.called,
deleteVariant.opts.loading,
maybe(() => deleteVariant.opts.data.productVariantDelete.errors)
);
const handleImageSelect = (id: string) => () => {
if (variant) {
if (
@ -114,7 +102,7 @@ export const ProductVariant: React.FC<ProductUpdateProps> = ({
<WindowTitle title={maybe(() => data.productVariant.name)} />
<ProductVariantPage
errors={errors}
saveButtonBarState={formTransitionState}
saveButtonBarState={updateVariant.opts.state}
loading={disableFormSave}
placeholderImage={placeholderImg}
variant={variant}
@ -150,7 +138,7 @@ export const ProductVariant: React.FC<ProductUpdateProps> = ({
}}
/>
<ProductVariantDeleteDialog
confirmButtonState={removeTransitionState}
confirmButtonState={deleteVariant.opts.state}
onClose={() =>
navigate(productVariantEditUrl(productId, variantId))
}

12
src/products/views/ProductVariantCreate.tsx
View file

@ -5,7 +5,7 @@ import { WindowTitle } from "@saleor/components/WindowTitle";
import useNavigator from "@saleor/hooks/useNavigator";
import useNotifier from "@saleor/hooks/useNotifier";
import useShop from "@saleor/hooks/useShop";
import { decimal, getMutationState, maybe } from "../../misc";
import { decimal, maybe } from "../../misc";
import ProductVariantCreatePage, {
ProductVariantCreatePageSubmitData
} from "../components/ProductVariantCreatePage";
@ -77,14 +77,6 @@ export const ProductVariant: React.FC<ProductUpdateProps> = ({ productId }) => {
const disableForm = productLoading || variantCreateResult.loading;
const formTransitionstate = getMutationState(
variantCreateResult.called,
variantCreateResult.loading,
maybe(
() =>
variantCreateResult.data.productVariantCreate.productErrors
)
);
return (
<>
<WindowTitle
@ -110,7 +102,7 @@ export const ProductVariant: React.FC<ProductUpdateProps> = ({ productId }) => {
onBack={handleBack}
onSubmit={handleSubmit}
onVariantClick={handleVariantClick}
saveButtonBarState={formTransitionstate}
saveButtonBarState={variantCreateResult.state}
/>
</>
);

10
src/services/views/ServiceCreate/ServiceCreate.tsx
View file

@ -6,7 +6,7 @@ import useNavigator from "@saleor/hooks/useNavigator";
import useNotifier from "@saleor/hooks/useNotifier";
import useShop from "@saleor/hooks/useShop";
import { commonMessages } from "@saleor/intl";
import { getMutationState, maybe } from "@saleor/misc";
import { maybe } from "@saleor/misc";
import { ServiceCreateMutation } from "@saleor/services/mutations";
import { ServiceCreate as ServiceCreateData } from "@saleor/services/types/ServiceCreate";
import ServiceCreatePage, {
@ -51,12 +51,6 @@ export const ServiceCreate: React.FC<ServiceCreateProps> = ({ setToken }) => {
}
});
const formTransitionState = getMutationState(
serviceCreateOpts.called,
serviceCreateOpts.loading,
maybe(() => serviceCreateOpts.data.serviceAccountCreate.errors)
);
return (
<>
<WindowTitle
@ -74,7 +68,7 @@ export const ServiceCreate: React.FC<ServiceCreateProps> = ({ setToken }) => {
onBack={handleBack}
onSubmit={handleSubmit}
permissions={maybe(() => shop.permissions)}
saveButtonBarState={formTransitionState}
saveButtonBarState={serviceCreateOpts.state}
/>
</>
);

50
src/services/views/ServiceDetails/ServiceDetails.tsx
View file

@ -7,7 +7,7 @@ import useNavigator from "@saleor/hooks/useNavigator";
import useNotifier from "@saleor/hooks/useNotifier";
import useShop from "@saleor/hooks/useShop";
import { commonMessages } from "@saleor/intl";
import { getMutationState, maybe } from "@saleor/misc";
import { maybe } from "@saleor/misc";
import ServiceDeleteDialog from "@saleor/services/components/ServiceDeleteDialog";
import ServiceTokenCreateDialog from "@saleor/services/components/ServiceTokenCreateDialog";
import ServiceTokenDeleteDialog from "@saleor/services/components/ServiceTokenDeleteDialog";
@ -162,46 +162,6 @@ export const ServiceDetails: React.FC<OrderListProps> = ({
}
});
const formTransitionState = getMutationState(
updateServiceOpts.called,
updateServiceOpts.loading,
maybe(
() =>
updateServiceOpts.data.serviceAccountUpdate
.errors
)
);
const deleteTransitionState = getMutationState(
deleteServiceOpts.called,
deleteServiceOpts.loading,
maybe(
() =>
deleteServiceOpts.data.serviceAccountDelete
.errors
)
);
const createTokenTransitionState = getMutationState(
createTokenOpts.called,
createTokenOpts.loading,
maybe(
() =>
createTokenOpts.data.serviceAccountTokenCreate
.errors
)
);
const deleteTokenTransitionState = getMutationState(
deleteTokenOpts.called,
deleteTokenOpts.loading,
maybe(
() =>
deleteTokenOpts.data.serviceAccountTokenDelete
.errors
)
);
return (
<>
<WindowTitle
@ -223,10 +183,10 @@ export const ServiceDetails: React.FC<OrderListProps> = ({
}
permissions={maybe(() => shop.permissions)}
service={maybe(() => data.serviceAccount)}
saveButtonBarState={formTransitionState}
saveButtonBarState={updateServiceOpts.state}
/>
<ServiceDeleteDialog
confirmButtonState={deleteTransitionState}
confirmButtonState={deleteServiceOpts.state}
name={maybe(
() => data.serviceAccount.name,
"..."
@ -236,7 +196,7 @@ export const ServiceDetails: React.FC<OrderListProps> = ({
open={params.action === "remove"}
/>
<ServiceTokenCreateDialog
confirmButtonState={createTokenTransitionState}
confirmButtonState={createTokenOpts.state}
onClose={closeModal}
onCreate={handleTokenCreate}
open={params.action === "create-token"}
@ -247,7 +207,7 @@ export const ServiceDetails: React.FC<OrderListProps> = ({
)}
/>
<ServiceTokenDeleteDialog
confirmButtonState={deleteTokenTransitionState}
confirmButtonState={deleteTokenOpts.state}
name={maybe(() => {
const token = data.serviceAccount.tokens.find(
token => token.id === params.id

10
src/services/views/ServiceList/ServiceList.tsx
View file

@ -14,7 +14,7 @@ import SaveFilterTabDialog, {
} from "@saleor/components/SaveFilterTabDialog";
import { configurationMenuUrl } from "@saleor/configuration";
import { commonMessages } from "@saleor/intl";
import { getMutationState, maybe } from "@saleor/misc";
import { maybe } from "@saleor/misc";
import { ServiceDeleteMutation } from "@saleor/services/mutations";
import { ServiceDelete } from "@saleor/services/types/ServiceDelete";
import { ListViews } from "@saleor/types";
@ -154,12 +154,6 @@ export const ServiceList: React.FC<ServiceListProps> = ({ params }) => {
}
});
const removeTransitionState = getMutationState(
deleteServiceOpts.called,
deleteServiceOpts.loading,
maybe(() => deleteServiceOpts.data.serviceAccountDelete.errors)
);
return (
<>
<ServiceListPage
@ -186,7 +180,7 @@ export const ServiceList: React.FC<ServiceListProps> = ({ params }) => {
onRemove={handleRemove}
/>
<ServiceDeleteDialog
confirmButtonState={removeTransitionState}
confirmButtonState={deleteServiceOpts.state}
name={maybe(
() =>
data.serviceAccounts.edges.find(

46
src/shipping/views/ShippingZoneCreate.tsx
View file

@ -5,7 +5,7 @@ import useNavigator from "@saleor/hooks/useNavigator";
import useNotifier from "@saleor/hooks/useNotifier";
import useShop from "@saleor/hooks/useShop";
import { commonMessages } from "@saleor/intl";
import { getMutationState, maybe } from "../../misc";
import { maybe } from "../../misc";
import ShippingZoneCreatePage from "../components/ShippingZoneCreatePage";
import { TypedCreateShippingZone } from "../mutations";
import { CreateShippingZone } from "../types/CreateShippingZone";
@ -27,32 +27,24 @@ const ShippingZoneCreate: React.FC<{}> = () => {
};
return (
<TypedCreateShippingZone onCompleted={onShippingZoneCreate}>
{(createShippingZone, createShippingZoneOpts) => {
const formTransitionState = getMutationState(
createShippingZoneOpts.called,
createShippingZoneOpts.loading,
maybe(() => createShippingZoneOpts.data.shippingZoneCreate.errors, [])
);
return (
<ShippingZoneCreatePage
countries={maybe(() => shop.countries, [])}
disabled={createShippingZoneOpts.loading}
errors={maybe(
() => createShippingZoneOpts.data.shippingZoneCreate.errors
)}
onBack={() => navigate(shippingZonesListUrl())}
onSubmit={formData =>
createShippingZone({
variables: {
input: formData
}
})
}
saveButtonBarState={formTransitionState}
/>
);
}}
{(createShippingZone, createShippingZoneOpts) => (
<ShippingZoneCreatePage
countries={maybe(() => shop.countries, [])}
disabled={createShippingZoneOpts.loading}
errors={maybe(
() => createShippingZoneOpts.data.shippingZoneCreate.errors
)}
onBack={() => navigate(shippingZonesListUrl())}
onSubmit={formData =>
createShippingZone({
variables: {
input: formData
}
})
}
saveButtonBarState={createShippingZoneOpts.state}
/>
)}
</TypedCreateShippingZone>
);
};

235
src/shipping/views/ShippingZoneDetails/index.tsx
View file

@ -4,7 +4,7 @@ import { useIntl } from "react-intl";
import useNavigator from "@saleor/hooks/useNavigator";
import useNotifier from "@saleor/hooks/useNotifier";
import { commonMessages } from "@saleor/intl";
import { getMutationState, maybe } from "../../../misc";
import { maybe } from "../../../misc";
import { ShippingMethodTypeEnum } from "../../../types/globalTypes";
import ShippingZoneDetailsPage from "../../components/ShippingZoneDetailsPage";
import { TypedShippingZone } from "../../queries";
@ -91,143 +91,104 @@ const ShippingZoneDetails: React.FC<ShippingZoneDetailsProps> = ({
>
{ops => (
<TypedShippingZone variables={{ id }}>
{({ data, loading }) => {
const formTransitionState = getMutationState(
ops.shippingZoneUpdate.opts.called,
ops.shippingZoneUpdate.opts.loading,
maybe(
() => ops.shippingZoneUpdate.opts.data.shippingZoneUpdate.errors
)
);
const createRateTransitionState = getMutationState(
ops.shippingRateCreate.opts.called,
ops.shippingRateCreate.opts.loading,
maybe(
() =>
ops.shippingRateCreate.opts.data.shippingPriceCreate.errors
)
);
const deleteRateTransitionState = getMutationState(
ops.shippingRateDelete.opts.called,
ops.shippingRateDelete.opts.loading,
maybe(
() =>
ops.shippingRateDelete.opts.data.shippingPriceDelete.errors
)
);
const updateRateTransitionState = getMutationState(
ops.shippingRateUpdate.opts.called,
ops.shippingRateUpdate.opts.loading,
maybe(
() =>
ops.shippingRateUpdate.opts.data.shippingPriceUpdate.errors
)
);
const deleteZoneTransitionState = getMutationState(
ops.shippingZoneDelete.opts.called,
ops.shippingZoneDelete.opts.loading,
maybe(
() => ops.shippingZoneDelete.opts.data.shippingZoneDelete.errors
)
);
return (
<>
<ShippingZoneDetailsPage
disabled={loading}
errors={maybe(
() =>
ops.shippingZoneUpdate.opts.data.shippingZoneUpdate.errors
)}
onBack={() => navigate(shippingZonesListUrl())}
onCountryAdd={() =>
navigate(
shippingZoneUrl(id, {
action: "assign-country"
})
)
}
onCountryRemove={code =>
navigate(
shippingZoneUrl(id, {
action: "unassign-country",
id: code
})
)
}
onDelete={() =>
navigate(
shippingZoneUrl(id, {
action: "remove"
})
)
}
onPriceRateAdd={() =>
navigate(
shippingZoneUrl(id, {
action: "add-rate",
type: ShippingMethodTypeEnum.PRICE
})
)
}
onPriceRateEdit={rateId =>
navigate(
shippingZoneUrl(id, {
action: "edit-rate",
id: rateId
})
)
}
onRateRemove={rateId =>
navigate(
shippingZoneUrl(id, {
action: "remove-rate",
id: rateId
})
)
}
onSubmit={formData =>
ops.shippingZoneUpdate.mutate({
id,
input: {
name: formData.name
}
{({ data, loading }) => (
<>
<ShippingZoneDetailsPage
disabled={loading}
errors={maybe(
() =>
ops.shippingZoneUpdate.opts.data.shippingZoneUpdate.errors
)}
onBack={() => navigate(shippingZonesListUrl())}
onCountryAdd={() =>
navigate(
shippingZoneUrl(id, {
action: "assign-country"
})
}
onWeightRateAdd={() =>
navigate(
shippingZoneUrl(id, {
action: "add-rate",
type: ShippingMethodTypeEnum.WEIGHT
})
)
}
onWeightRateEdit={rateId =>
navigate(
shippingZoneUrl(id, {
action: "edit-rate",
id: rateId
})
)
}
saveButtonBarState={formTransitionState}
shippingZone={maybe(() => data.shippingZone)}
/>
<ShippingZoneDetailsDialogs
assignCountryTransitionState={formTransitionState}
createRateTransitionState={createRateTransitionState}
deleteRateTransitionState={deleteRateTransitionState}
deleteZoneTransitionState={deleteZoneTransitionState}
id={id}
ops={ops}
params={params}
shippingZone={maybe(() => data.shippingZone)}
unassignCountryTransitionState={formTransitionState}
updateRateTransitionState={updateRateTransitionState}
/>
</>
);
}}
)
}
onCountryRemove={code =>
navigate(
shippingZoneUrl(id, {
action: "unassign-country",
id: code
})
)
}
onDelete={() =>
navigate(
shippingZoneUrl(id, {
action: "remove"
})
)
}
onPriceRateAdd={() =>
navigate(
shippingZoneUrl(id, {
action: "add-rate",
type: ShippingMethodTypeEnum.PRICE
})
)
}
onPriceRateEdit={rateId =>
navigate(
shippingZoneUrl(id, {
action: "edit-rate",
id: rateId
})
)
}
onRateRemove={rateId =>
navigate(
shippingZoneUrl(id, {
action: "remove-rate",
id: rateId
})
)
}
onSubmit={formData =>
ops.shippingZoneUpdate.mutate({
id,
input: {
name: formData.name
}
})
}
onWeightRateAdd={() =>
navigate(
shippingZoneUrl(id, {
action: "add-rate",
type: ShippingMethodTypeEnum.WEIGHT
})
)
}
onWeightRateEdit={rateId =>
navigate(
shippingZoneUrl(id, {
action: "edit-rate",
id: rateId
})
)
}
saveButtonBarState={ops.shippingZoneUpdate.opts.state}
shippingZone={maybe(() => data.shippingZone)}
/>
<ShippingZoneDetailsDialogs
assignCountryTransitionState={ops.shippingZoneUpdate.opts.state}
createRateTransitionState={ops.shippingRateCreate.opts.state}
deleteRateTransitionState={ops.shippingRateDelete.opts.state}
deleteZoneTransitionState={ops.shippingZoneDelete.opts.state}
id={id}
ops={ops}
params={params}
shippingZone={maybe(() => data.shippingZone)}
unassignCountryTransitionState={
ops.shippingZoneUpdate.opts.state
}
updateRateTransitionState={ops.shippingRateUpdate.opts.state}
/>
</>
)}
</TypedShippingZone>
)}
</ShippingZoneOperations>

28
src/shipping/views/ShippingZonesList.tsx
View file

@ -16,7 +16,7 @@ import usePaginator, {
import useShop from "@saleor/hooks/useShop";
import useUser from "@saleor/hooks/useUser";
import { commonMessages } from "@saleor/intl";
import { getMutationState, maybe } from "@saleor/misc";
import { maybe } from "@saleor/misc";
import { ListViews } from "@saleor/types";
import ShippingZonesListPage from "../components/ShippingZonesListPage";
import {
@ -111,26 +111,6 @@ export const ShippingZonesList: React.FC<ShippingZonesListProps> = ({
onCompleted={handleBulkDeleteShippingZone}
>
{(bulkDeleteShippingZone, bulkDeleteShippingZoneOpts) => {
const deleteTransitionState = getMutationState(
deleteShippingZoneOpts.called,
deleteShippingZoneOpts.loading,
maybe(
() =>
deleteShippingZoneOpts.data.shippingZoneDelete
.errors
)
);
const bulkDeleteTransitionState = getMutationState(
bulkDeleteShippingZoneOpts.called,
bulkDeleteShippingZoneOpts.loading,
maybe(
() =>
bulkDeleteShippingZoneOpts.data
.shippingZoneBulkDelete.errors
)
);
const {
loadNextPage,
loadPreviousPage,
@ -202,7 +182,7 @@ export const ShippingZonesList: React.FC<ShippingZonesListProps> = ({
<ActionDialog
open={params.action === "remove"}
confirmButtonState={deleteTransitionState}
confirmButtonState={deleteShippingZoneOpts.state}
variant="delete"
title={intl.formatMessage({
defaultMessage: "Delete Shipping Zone",
@ -236,7 +216,9 @@ export const ShippingZonesList: React.FC<ShippingZonesListProps> = ({
</ActionDialog>
<ActionDialog
open={params.action === "remove-many"}
confirmButtonState={bulkDeleteTransitionState}
confirmButtonState={
bulkDeleteShippingZoneOpts.state
}
variant="delete"
title={intl.formatMessage({
defaultMessage: "Delete Shipping Zones",

22
src/siteSettings/views/index.tsx
View file

@ -7,7 +7,7 @@ import { commonMessages, sectionNames } from "@saleor/intl";
import { useIntl } from "react-intl";
import { configurationMenuUrl } from "../../configuration";
import { findInEnum, getMutationState, maybe } from "../../misc";
import { findInEnum, maybe } from "../../misc";
import { AuthorizationKeyType, CountryCode } from "../../types/globalTypes";
import SiteSettingsKeyDialog, {
SiteSettingsKeyDialogForm
@ -166,24 +166,6 @@ export const SiteSettings: React.FC<SiteSettingsProps> = ({ params }) => {
});
};
const formTransitionState = getMutationState(
updateShopSettingsOpts.called,
updateShopSettingsOpts.loading,
[
...maybe(
() =>
updateShopSettingsOpts.data.shopDomainUpdate.errors,
[]
),
...maybe(
() =>
updateShopSettingsOpts.data.shopSettingsUpdate
.errors,
[]
)
]
);
return (
<>
<WindowTitle
@ -207,7 +189,7 @@ export const SiteSettings: React.FC<SiteSettingsProps> = ({ params }) => {
})
}
onSubmit={handleUpdateShopSettings}
saveButtonBarState={formTransitionState}
saveButtonBarState={updateShopSettingsOpts.state}
/>
<SiteSettingsKeyDialog
errors={maybe(

36
src/staff/views/StaffDetails.tsx
View file

@ -9,7 +9,7 @@ import useNotifier from "@saleor/hooks/useNotifier";
import useShop from "@saleor/hooks/useShop";
import useUser from "@saleor/hooks/useUser";
import { commonMessages } from "@saleor/intl";
import { getMutationState, maybe } from "../../misc";
import { maybe } from "../../misc";
import StaffDetailsPage from "../components/StaffDetailsPage/StaffDetailsPage";
import {
TypedStaffAvatarDeleteMutation,
@ -63,12 +63,6 @@ export const StaffDetails: React.FC<OrderListProps> = ({ id, params }) => {
onCompleted: handleChangePassword
});
const changePasswordTransitionState = getMutationState(
changePasswordOpts.called,
changePasswordOpts.loading,
maybe(() => changePasswordOpts.data.passwordChange.errors)
);
return (
<TypedStaffMemberDetailsQuery
displayLoader
@ -122,24 +116,6 @@ export const StaffDetails: React.FC<OrderListProps> = ({ id, params }) => {
onCompleted={handleStaffMemberAvatarDelete}
>
{(deleteStaffAvatar, deleteAvatarResult) => {
const formTransitionState = getMutationState(
updateResult.called,
updateResult.loading,
maybe(() => updateResult.data.staffUpdate.errors)
);
const deleteTransitionState = getMutationState(
deleteResult.called,
deleteResult.loading,
maybe(() => deleteResult.data.staffDelete.errors)
);
const deleteAvatarTransitionState = getMutationState(
deleteAvatarResult.called,
deleteAvatarResult.loading,
maybe(
() =>
deleteAvatarResult.data.userAvatarDelete.errors
)
);
const isUserSameAsViewer = maybe(
() => user.user.id === data.user.id,
true
@ -201,7 +177,7 @@ export const StaffDetails: React.FC<OrderListProps> = ({ id, params }) => {
}
permissions={maybe(() => shop.permissions)}
staffMember={maybe(() => data.user)}
saveButtonBarState={formTransitionState}
saveButtonBarState={updateResult.state}
/>
<ActionDialog
open={params.action === "remove"}
@ -209,7 +185,7 @@ export const StaffDetails: React.FC<OrderListProps> = ({ id, params }) => {
defaultMessage: "delete Staff User",
description: "dialog header"
})}
confirmButtonState={deleteTransitionState}
confirmButtonState={deleteResult.state}
variant="delete"
onClose={closeModal}
onConfirm={deleteStaffMember}
@ -229,7 +205,7 @@ export const StaffDetails: React.FC<OrderListProps> = ({ id, params }) => {
defaultMessage: "Delete Staff User Avatar",
description: "dialog header"
})}
confirmButtonState={deleteAvatarTransitionState}
confirmButtonState={deleteAvatarResult.state}
variant="delete"
onClose={closeModal}
onConfirm={deleteStaffAvatar}
@ -248,9 +224,7 @@ export const StaffDetails: React.FC<OrderListProps> = ({ id, params }) => {
</DialogContentText>
</ActionDialog>
<StaffPasswordResetDialog
confirmButtonState={
changePasswordTransitionState
}
confirmButtonState={changePasswordOpts.state}
errors={maybe(
() =>
changePasswordOpts.data.passwordChange

9
src/staff/views/StaffList/StaffList.tsx
View file

@ -18,7 +18,7 @@ import { APP_MOUNT_URI } from "@saleor/config";
import { configurationMenuUrl } from "@saleor/configuration";
import useShop from "@saleor/hooks/useShop";
import { commonMessages } from "@saleor/intl";
import { getMutationState, maybe } from "@saleor/misc";
import { maybe } from "@saleor/misc";
import { ListViews } from "@saleor/types";
import StaffAddMemberDialog, {
FormData as AddStaffMemberForm
@ -158,11 +158,6 @@ export const StaffList: React.FC<StaffListProps> = ({ params }) => {
}
}
});
const addTransitionState = getMutationState(
addStaffMemberData.called,
addStaffMemberData.loading,
maybe(() => addStaffMemberData.data.staffCreate.errors)
);
const { loadNextPage, loadPreviousPage, pageInfo } = paginate(
maybe(() => data.staffUsers.pageInfo),
@ -201,7 +196,7 @@ export const StaffList: React.FC<StaffListProps> = ({ params }) => {
onRowClick={id => () => navigate(staffMemberDetailsUrl(id))}
/>
<StaffAddMemberDialog
confirmButtonState={addTransitionState}
confirmButtonState={addStaffMemberData.state}
errors={maybe(
() => addStaffMemberData.data.staffCreate.errors,
[]

71
src/taxes/views/CountryList.tsx
View file

@ -5,7 +5,7 @@ import useNavigator from "@saleor/hooks/useNavigator";
import useNotifier from "@saleor/hooks/useNotifier";
import { commonMessages } from "@saleor/intl";
import { configurationMenuUrl } from "../../configuration";
import { getMutationState, maybe } from "../../misc";
import { maybe } from "../../misc";
import CountryListPage from "../components/CountryListPage";
import { TypedFetchTaxes, TypedUpdateTaxSettings } from "../mutations";
import { TypedCountryListQuery } from "../queries";
@ -42,47 +42,36 @@ export const CountryList: React.FC = () => {
<TypedFetchTaxes onCompleted={handleFetchTaxes}>
{(fetchTaxes, fetchTaxesOpts) => (
<TypedCountryListQuery displayLoader={true}>
{({ data, loading }) => {
const updateTaxSettingsTransitionState = getMutationState(
updateTaxSettingsOpts.called,
updateTaxSettingsOpts.loading,
maybe(
() => updateTaxSettingsOpts.data.shopSettingsUpdate.errors
)
);
return (
<CountryListPage
disabled={
loading ||
fetchTaxesOpts.loading ||
updateTaxSettingsOpts.loading
}
onBack={() => navigate(configurationMenuUrl)}
onRowClick={code => navigate(countryTaxRatesUrl(code))}
onSubmit={formData =>
updateTaxSettings({
variables: {
input: {
chargeTaxesOnShipping:
formData.chargeTaxesOnShipping,
displayGrossPrices: formData.showGross,
includeTaxesInPrices: formData.includeTax
}
{({ data, loading }) => (
<CountryListPage
disabled={
loading ||
fetchTaxesOpts.loading ||
updateTaxSettingsOpts.loading
}
onBack={() => navigate(configurationMenuUrl)}
onRowClick={code => navigate(countryTaxRatesUrl(code))}
onSubmit={formData =>
updateTaxSettings({
variables: {
input: {
chargeTaxesOnShipping: formData.chargeTaxesOnShipping,
displayGrossPrices: formData.showGross,
includeTaxesInPrices: formData.includeTax
}
})
}
onTaxFetch={fetchTaxes}
saveButtonBarState={updateTaxSettingsTransitionState}
shop={maybe(() => ({
...data.shop,
countries: data.shop.countries.filter(
country => country.vat
)
}))}
/>
);
}}
}
})
}
onTaxFetch={fetchTaxes}
saveButtonBarState={updateTaxSettingsOpts.state}
shop={maybe(() => ({
...data.shop,
countries: data.shop.countries.filter(
country => country.vat
)
}))}
/>
)}
</TypedCountryListQuery>
)}
</TypedFetchTaxes>

13
src/translations/views/TranslationsCategories.tsx
View file

@ -6,7 +6,7 @@ import useNavigator from "@saleor/hooks/useNavigator";
import useNotifier from "@saleor/hooks/useNotifier";
import useShop from "@saleor/hooks/useShop";
import { commonMessages } from "@saleor/intl";
import { getMutationState, maybe } from "../../misc";
import { maybe } from "../../misc";
import { LanguageCodeEnum, TranslationInput } from "../../types/globalTypes";
import TranslationsCategoriesPage, {
fieldNames
@ -84,15 +84,6 @@ const TranslationsCategories: React.FC<TranslationsCategoriesProps> = ({
});
};
const saveButtonState = getMutationState(
updateTranslationsOpts.called,
updateTranslationsOpts.loading,
maybe(
() => updateTranslationsOpts.data.categoryTranslate.errors,
[]
)
);
return (
<TranslationsCategoriesPage
activeField={params.activeField}
@ -101,7 +92,7 @@ const TranslationsCategories: React.FC<TranslationsCategoriesProps> = ({
}
languageCode={languageCode}
languages={maybe(() => shop.languages, [])}
saveButtonState={saveButtonState}
saveButtonState={updateTranslationsOpts.state}
onBack={() =>
navigate(
languageEntitiesUrl(languageCode, {

13
src/translations/views/TranslationsCollections.tsx
View file

@ -6,7 +6,7 @@ import useNavigator from "@saleor/hooks/useNavigator";
import useNotifier from "@saleor/hooks/useNotifier";
import useShop from "@saleor/hooks/useShop";
import { commonMessages } from "@saleor/intl";
import { getMutationState, maybe } from "../../misc";
import { maybe } from "../../misc";
import { LanguageCodeEnum, TranslationInput } from "../../types/globalTypes";
import TranslationsCollectionsPage, {
fieldNames
@ -86,15 +86,6 @@ const TranslationsCollections: React.FC<TranslationsCollectionsProps> = ({
});
};
const saveButtonState = getMutationState(
updateTranslationsOpts.called,
updateTranslationsOpts.loading,
maybe(
() => updateTranslationsOpts.data.collectionTranslate.errors,
[]
)
);
return (
<TranslationsCollectionsPage
activeField={params.activeField}
@ -104,7 +95,7 @@ const TranslationsCollections: React.FC<TranslationsCollectionsProps> = ({
}
languageCode={languageCode}
languages={maybe(() => shop.languages, [])}
saveButtonState={saveButtonState}
saveButtonState={updateTranslationsOpts.state}
onEdit={onEdit}
onDiscard={onDiscard}
onBack={() =>

10
src/translations/views/TranslationsPages.tsx
View file

@ -6,7 +6,7 @@ import useNavigator from "@saleor/hooks/useNavigator";
import useNotifier from "@saleor/hooks/useNotifier";
import useShop from "@saleor/hooks/useShop";
import { commonMessages } from "@saleor/intl";
import { getMutationState, maybe } from "../../misc";
import { maybe } from "../../misc";
import {
LanguageCodeEnum,
PageTranslationInput
@ -87,12 +87,6 @@ const TranslationsPages: React.FC<TranslationsPagesProps> = ({
});
};
const saveButtonState = getMutationState(
updateTranslationsOpts.called,
updateTranslationsOpts.loading,
maybe(() => updateTranslationsOpts.data.pageTranslate.errors, [])
);
return (
<TranslationsPagesPage
activeField={params.activeField}
@ -101,7 +95,7 @@ const TranslationsPages: React.FC<TranslationsPagesProps> = ({
}
languageCode={languageCode}
languages={maybe(() => shop.languages, [])}
saveButtonState={saveButtonState}
saveButtonState={updateTranslationsOpts.state}
onBack={() =>
navigate(
languageEntitiesUrl(languageCode, {

4
src/translations/views/TranslationsProductTypes.tsx
View file

@ -114,9 +114,9 @@ const TranslationsProductTypes: React.FC<TranslationsProductTypesProps> = ({
const saveButtonState = getMutationState(
updateAttributeTranslationsOpts.called ||
updateAttributeTranslationsOpts.called,
updateAttributeValueTranslationsOpts.called,
updateAttributeTranslationsOpts.loading ||
updateAttributeTranslationsOpts.loading,
updateAttributeValueTranslationsOpts.loading,
maybe(
() =>
updateAttributeTranslationsOpts.data.attributeTranslate

13
src/translations/views/TranslationsProducts.tsx
View file

@ -6,7 +6,7 @@ import useNavigator from "@saleor/hooks/useNavigator";
import useNotifier from "@saleor/hooks/useNotifier";
import useShop from "@saleor/hooks/useShop";
import { commonMessages } from "@saleor/intl";
import { getMutationState, maybe } from "../../misc";
import { maybe } from "../../misc";
import { LanguageCodeEnum, TranslationInput } from "../../types/globalTypes";
import TranslationsProductsPage, {
fieldNames
@ -84,15 +84,6 @@ const TranslationsProducts: React.FC<TranslationsProductsProps> = ({
});
};
const saveButtonState = getMutationState(
updateTranslationsOpts.called,
updateTranslationsOpts.loading,
maybe(
() => updateTranslationsOpts.data.productTranslate.errors,
[]
)
);
return (
<TranslationsProductsPage
activeField={params.activeField}
@ -101,7 +92,7 @@ const TranslationsProducts: React.FC<TranslationsProductsProps> = ({
}
languageCode={languageCode}
languages={maybe(() => shop.languages, [])}
saveButtonState={saveButtonState}
saveButtonState={updateTranslationsOpts.state}
onBack={() =>
navigate(
languageEntitiesUrl(languageCode, {

10
src/translations/views/TranslationsSales.tsx
View file

@ -6,7 +6,7 @@ import useNavigator from "@saleor/hooks/useNavigator";
import useNotifier from "@saleor/hooks/useNotifier";
import useShop from "@saleor/hooks/useShop";
import { commonMessages } from "@saleor/intl";
import { getMutationState, maybe } from "../../misc";
import { maybe } from "../../misc";
import {
LanguageCodeEnum,
NameTranslationInput
@ -81,12 +81,6 @@ const TranslationsSales: React.FC<TranslationsSalesProps> = ({
});
};
const saveButtonState = getMutationState(
updateTranslationsOpts.called,
updateTranslationsOpts.loading,
maybe(() => updateTranslationsOpts.data.saleTranslate.errors, [])
);
return (
<TranslationsSalesPage
activeField={params.activeField}
@ -95,7 +89,7 @@ const TranslationsSales: React.FC<TranslationsSalesProps> = ({
}
languages={maybe(() => shop.languages, [])}
languageCode={languageCode}
saveButtonState={saveButtonState}
saveButtonState={updateTranslationsOpts.state}
onBack={() =>
navigate(
languageEntitiesUrl(languageCode, {

13
src/translations/views/TranslationsVouchers.tsx
View file

@ -6,7 +6,7 @@ import useNavigator from "@saleor/hooks/useNavigator";
import useNotifier from "@saleor/hooks/useNotifier";
import useShop from "@saleor/hooks/useShop";
import { commonMessages } from "@saleor/intl";
import { getMutationState, maybe } from "../../misc";
import { maybe } from "../../misc";
import {
LanguageCodeEnum,
NameTranslationInput
@ -81,15 +81,6 @@ const TranslationsVouchers: React.FC<TranslationsVouchersProps> = ({
});
};
const saveButtonState = getMutationState(
updateTranslationsOpts.called,
updateTranslationsOpts.loading,
maybe(
() => updateTranslationsOpts.data.voucherTranslate.errors,
[]
)
);
return (
<TranslationsVouchersPage
activeField={params.activeField}
@ -98,7 +89,7 @@ const TranslationsVouchers: React.FC<TranslationsVouchersProps> = ({
}
languages={maybe(() => shop.languages, [])}
languageCode={languageCode}
saveButtonState={saveButtonState}
saveButtonState={updateTranslationsOpts.state}
onBack={() =>
navigate(
languageEntitiesUrl(languageCode, {

10
src/webhooks/views/WebhooksCreate.tsx
View file

@ -8,7 +8,7 @@ import { WebhookEventTypeEnum } from "@saleor/types/globalTypes";
import { WebhookCreate as WebhookCreateData } from "@saleor/webhooks/types/WebhookCreate";
import React from "react";
import { useIntl } from "react-intl";
import { getMutationState, maybe } from "../../misc";
import { maybe } from "../../misc";
import WebhookCreatePage, { FormData } from "../components/WebhookCreatePage";
import { TypedWebhookCreate } from "../mutations";
import {
@ -63,12 +63,6 @@ export const WebhooksCreate: React.FC<WebhooksCreateProps> = () => {
}
});
const formTransitionState = getMutationState(
webhookCreateOpts.called,
webhookCreateOpts.loading,
maybe(() => webhookCreateOpts.data.webhookCreate.webhookErrors)
);
return (
<>
<WindowTitle
@ -89,7 +83,7 @@ export const WebhooksCreate: React.FC<WebhooksCreateProps> = () => {
)}
onBack={handleBack}
onSubmit={handleSubmit}
saveButtonBarState={formTransitionState}
saveButtonBarState={webhookCreateOpts.state}
/>
</>
);

20
src/webhooks/views/WebhooksDetails.tsx
View file

@ -11,7 +11,7 @@ import { WebhookEventTypeEnum } from "@saleor/types/globalTypes";
import WebhookDeleteDialog from "@saleor/webhooks/components/WebhookDeleteDialog";
import { WebhookDelete } from "@saleor/webhooks/types/WebhookDelete";
import { WebhookUpdate } from "@saleor/webhooks/types/WebhookUpdate";
import { getMutationState, maybe } from "../../misc";
import { maybe } from "../../misc";
import WebhooksDetailsPage from "../components/WebhooksDetailsPage";
import { TypedWebhookDelete, TypedWebhookUpdate } from "../mutations";
import { TypedWebhooksDetailsQuery } from "../queries";
@ -85,14 +85,6 @@ export const WebhooksDetails: React.FC<WebhooksDetailsProps> = ({
{(webhookDelete, webhookDeleteOpts) => (
<TypedWebhooksDetailsQuery variables={{ id }}>
{webhookDetails => {
const formTransitionState = getMutationState(
webhookUpdateOpts.called,
webhookUpdateOpts.loading,
maybe(
() => webhookUpdateOpts.data.webhookUpdate.webhookErrors
)
);
const handleRemoveConfirm = () =>
webhookDelete({
variables: {
@ -105,12 +97,6 @@ export const WebhooksDetails: React.FC<WebhooksDetailsProps> = ({
[]
);
const deleteTransitionState = getMutationState(
webhookDeleteOpts.called,
webhookDeleteOpts.loading,
maybe(() => webhookDeleteOpts.data.webhookDelete.errors)
);
return (
<>
<WindowTitle
@ -119,7 +105,7 @@ export const WebhooksDetails: React.FC<WebhooksDetailsProps> = ({
<WebhooksDetailsPage
disabled={webhookDetails.loading}
errors={formErrors}
saveButtonBarState={formTransitionState}
saveButtonBarState={webhookUpdateOpts.state}
webhook={maybe(() => webhookDetails.data.webhook)}
fetchServiceAccounts={searchServiceAccount}
services={maybe(() =>
@ -148,7 +134,7 @@ export const WebhooksDetails: React.FC<WebhooksDetailsProps> = ({
}}
/>
<WebhookDeleteDialog
confirmButtonState={deleteTransitionState}
confirmButtonState={webhookDeleteOpts.state}
name={maybe(
() => webhookDetails.data.webhook.name,
"..."

10
src/webhooks/views/WebhooksList.tsx
View file

@ -10,7 +10,7 @@ import usePaginator, {
createPaginationState
} from "@saleor/hooks/usePaginator";
import { commonMessages } from "@saleor/intl";
import { getMutationState, maybe } from "@saleor/misc";
import { maybe } from "@saleor/misc";
import { ListViews } from "@saleor/types";
import WebhookDeleteDialog from "@saleor/webhooks/components/WebhookDeleteDialog";
import { WebhookDelete } from "@saleor/webhooks/types/WebhookDelete";
@ -150,12 +150,6 @@ export const WebhooksList: React.FC<WebhooksListProps> = ({ params }) => {
});
};
const deleteTransitionState = getMutationState(
webhookDeleteOpts.called,
webhookDeleteOpts.loading,
maybe(() => webhookDeleteOpts.data.webhookDelete.errors)
);
return (
<>
<WebhooksListPage
@ -182,7 +176,7 @@ export const WebhooksList: React.FC<WebhooksListProps> = ({ params }) => {
onRowClick={id => () => navigate(webhooksUrl(id))}
/>
<WebhookDeleteDialog
confirmButtonState={deleteTransitionState}
confirmButtonState={webhookDeleteOpts.state}
name={maybe(
() =>
data.webhooks.edges.find(