= ({
});
};
+ const isValueChecked = (displayValue: MultiAutocompleteChoiceType) =>
+ filterField.value.includes(displayValue.value);
+
+ const filteredValuesChecked = initialFieldDisplayValues.filter(
+ isValueChecked
+ );
+
+ const filteredValuesUnchecked = fieldDisplayValues.filter(
+ displayValue => !isValueChecked(displayValue)
+ );
+
+ const displayHr = !!filteredValuesChecked.length;
+
return (
= ({
}}
onChange={event => filterField.onSearchChange(event.target.value)}
/>
- {fieldDisplayValues.map(displayValue => (
+ {filteredValuesChecked.map(displayValue => (
= ({
)}
- {availableOptions.map(option => (
+ {filteredValuesUnchecked.map(option => (
{
- filters: IFilter
;
- onFilterPropertyChange: React.Dispatch>;
- onClear: () => void;
- onSubmit: () => void;
- currencySymbol?: string;
-}
-
-const useStyles = makeStyles(
- theme => ({
- actionBar: {
- alignItems: "center",
- display: "flex",
- justifyContent: "space-between",
- padding: theme.spacing(1, 3)
- },
- andLabel: {
- margin: theme.spacing(0, 2)
- },
- arrow: {
- marginRight: theme.spacing(2)
- },
- clear: {
- marginRight: theme.spacing(1)
- },
- filterFieldBar: {
- "&:not(:last-of-type)": {
- borderBottom: `1px solid ${theme.palette.divider}`
- },
- padding: theme.spacing(1, 2.5)
- },
- filterSettings: {
- background: fade(theme.palette.primary.main, 0.2),
- padding: theme.spacing(2, 3)
- },
- input: {
- padding: "12px 0 9px 12px"
- },
- inputRange: {
- alignItems: "center",
- display: "flex"
- },
- label: {
- fontWeight: 600
- },
- option: {
- left: -theme.spacing(0.5),
- position: "relative"
- },
- optionRadio: {
- left: -theme.spacing(0.25)
- }
- }),
- { name: "FilterContent" }
-);
-
-function getIsFilterMultipleChoices(
- intl: IntlShape
-): SingleAutocompleteChoiceType[] {
- return [
- {
- label: intl.formatMessage({
- defaultMessage: "equal to",
- description: "is filter range or value"
- }),
- value: FilterType.SINGULAR
- },
- {
- label: intl.formatMessage({
- defaultMessage: "between",
- description: "is filter range or value"
- }),
- value: FilterType.MULTIPLE
- }
- ];
-}
-
-const filterFieldTestingContext = "filter-field";
-
-const FilterContent: React.FC = ({
- currencySymbol,
- filters,
- onClear,
- onFilterPropertyChange,
- onSubmit
-}) => {
- const intl = useIntl();
- const classes = useStyles({});
- const [
- autocompleteDisplayValues,
- setAutocompleteDisplayValues
- ] = useStateFromProps>(
- filters.reduce((acc, filterField) => {
- if (filterField.type === FieldType.autocomplete) {
- acc[filterField.name] = filterField.displayValues;
- }
-
- return acc;
- }, {})
- );
-
- return (
-
-
-
- );
-};
-FilterContent.displayName = "FilterContent";
-export default FilterContent;
diff --git a/src/components/Filter/FilterContent/FilterContent.tsx b/src/components/Filter/FilterContent/FilterContent.tsx
new file mode 100644
index 000000000..3d587e465
--- /dev/null
+++ b/src/components/Filter/FilterContent/FilterContent.tsx
@@ -0,0 +1,158 @@
+import { Typography } from "@material-ui/core";
+import Paper from "@material-ui/core/Paper";
+import CollectionWithDividers from "@saleor/components/CollectionWithDividers";
+import Hr from "@saleor/components/Hr";
+import useStateFromProps from "@saleor/hooks/useStateFromProps";
+import React from "react";
+
+import { FilterAutocompleteDisplayValues } from "../FilterAutocompleteField";
+import { FilterReducerAction } from "../reducer";
+import {
+ FieldType,
+ FilterErrorMessages,
+ FilterErrors,
+ IFilter,
+ IFilterElement
+} from "../types";
+import FilterContentBody, { FilterContentBodyProps } from "./FilterContentBody";
+import FilterContentBodyNameField from "./FilterContentBodyNameField";
+import FilterContentHeader from "./FilterContentHeader";
+import FilterErrorsList from "./FilterErrorsList";
+
+export interface FilterContentProps {
+ filters: IFilter;
+ onFilterPropertyChange: React.Dispatch>;
+ onClear: () => void;
+ onSubmit: () => void;
+ currencySymbol?: string;
+ dataStructure: IFilter;
+ errors?: FilterErrors;
+ errorMessages?: FilterErrorMessages;
+}
+
+const FilterContent: React.FC = ({
+ currencySymbol,
+ errors,
+ errorMessages,
+ filters,
+ onClear,
+ onFilterPropertyChange,
+ onSubmit,
+ dataStructure
+}) => {
+ const getAutocompleteValuesWithNewValues = (
+ autocompleteDisplayValues: FilterAutocompleteDisplayValues,
+ filterField: IFilterElement
+ ) => {
+ if (filterField.type === FieldType.autocomplete) {
+ return {
+ ...autocompleteDisplayValues,
+ [filterField.name]: filterField.options
+ };
+ }
+
+ return autocompleteDisplayValues;
+ };
+
+ const initialAutocompleteDisplayValues = filters.reduce(
+ (acc, filterField) => {
+ if (filterField.multipleFields) {
+ return filterField.multipleFields.reduce(
+ getAutocompleteValuesWithNewValues,
+ {}
+ );
+ }
+
+ return getAutocompleteValuesWithNewValues(acc, filterField);
+ },
+ {}
+ );
+
+ const [
+ autocompleteDisplayValues,
+ setAutocompleteDisplayValues
+ ] = useStateFromProps(
+ initialAutocompleteDisplayValues
+ );
+
+ const commonFilterBodyProps: Omit<
+ FilterContentBodyProps,
+ "filter" | "onFilterPropertyChange"
+ > = {
+ currencySymbol,
+ autocompleteDisplayValues,
+ setAutocompleteDisplayValues,
+ initialAutocompleteDisplayValues
+ };
+
+ const handleMultipleFieldPropertyChange = function(
+ action: FilterReducerAction
+ ) {
+ const { update } = action.payload;
+
+ onFilterPropertyChange({
+ ...action,
+ payload: { ...action.payload, update: { ...update, active: true } }
+ });
+ };
+
+ const getFilterFromCurrentData = function(
+ filter: IFilterElement
+ ) {
+ return filters.find(({ name }) => filter.name === name);
+ };
+
+ return (
+
+
+
+ );
+};
+FilterContent.displayName = "FilterContent";
+export default FilterContent;
diff --git a/src/components/Filter/FilterContent/FilterContentBody.tsx b/src/components/Filter/FilterContent/FilterContentBody.tsx
new file mode 100644
index 000000000..651e86414
--- /dev/null
+++ b/src/components/Filter/FilterContent/FilterContentBody.tsx
@@ -0,0 +1,298 @@
+import {
+ fade,
+ FormControlLabel,
+ makeStyles,
+ Radio,
+ TextField
+} from "@material-ui/core";
+import FormSpacer from "@saleor/components/FormSpacer";
+import { MultiAutocompleteChoiceType } from "@saleor/components/MultiAutocompleteSelectField";
+import SingleSelectField from "@saleor/components/SingleSelectField";
+import classNames from "classnames";
+import React from "react";
+import { FormattedMessage, useIntl } from "react-intl";
+
+import Arrow from "../Arrow";
+import FilterAutocompleteField, {
+ FilterAutocompleteDisplayValues
+} from "../FilterAutocompleteField";
+import FilterOptionField from "../FilterOptionField";
+import { FilterReducerAction } from "../reducer";
+import { FieldType, FilterType, IFilterElement } from "../types";
+import { getIsFilterMultipleChoices } from "./utils";
+
+const useStyles = makeStyles(
+ theme => ({
+ andLabel: {
+ margin: theme.spacing(0, 2)
+ },
+ arrow: {
+ marginRight: theme.spacing(2)
+ },
+ filterSettings: {
+ background: fade(theme.palette.primary.main, 0.1),
+ padding: theme.spacing(2, 3)
+ },
+ input: {
+ padding: "12px 0 9px 12px"
+ },
+ inputRange: {
+ alignItems: "center",
+ display: "flex"
+ },
+
+ option: {
+ left: -theme.spacing(0.5),
+ position: "relative"
+ },
+ optionRadio: {
+ left: -theme.spacing(0.25)
+ }
+ }),
+ { name: "FilterContentBody" }
+);
+
+const filterTestingContext = "filter-field";
+
+export interface FilterContentBodyProps {
+ children?: React.ReactNode;
+ filter: IFilterElement;
+ currencySymbol?: string;
+ initialAutocompleteDisplayValues: FilterAutocompleteDisplayValues;
+ onFilterPropertyChange: React.Dispatch>;
+ autocompleteDisplayValues: FilterAutocompleteDisplayValues;
+ setAutocompleteDisplayValues: React.Dispatch<
+ React.SetStateAction>
+ >;
+}
+
+const FilterContentBody: React.FC = ({
+ filter,
+ children,
+ currencySymbol,
+ onFilterPropertyChange,
+ autocompleteDisplayValues,
+ setAutocompleteDisplayValues,
+ initialAutocompleteDisplayValues
+}) => {
+ const intl = useIntl();
+ const classes = useStyles({});
+
+ if (!filter?.active) {
+ return null;
+ }
+
+ return (
+
+ {children}
+ {filter.type === FieldType.text && (
+
+ onFilterPropertyChange({
+ payload: {
+ name: filter.name,
+ update: {
+ value: [event.target.value, filter.value[1]]
+ }
+ },
+ type: "set-property"
+ })
+ }
+ />
+ )}
+ {[FieldType.date, FieldType.price, FieldType.number].includes(
+ filter.type
+ ) && (
+ <>
+
+ onFilterPropertyChange({
+ payload: {
+ name: filter.name,
+ update: {
+ multiple: event.target.value === FilterType.MULTIPLE
+ }
+ },
+ type: "set-property"
+ })
+ }
+ />
+
+
+
+ {filter.multiple ? (
+ <>
+
+ onFilterPropertyChange({
+ payload: {
+ name: filter.name,
+ update: {
+ value: [event.target.value, filter.value[1]]
+ }
+ },
+ type: "set-property"
+ })
+ }
+ />
+
+
+
+
+ onFilterPropertyChange({
+ payload: {
+ name: filter.name,
+ update: {
+ value: [filter.value[0], event.target.value]
+ }
+ },
+ type: "set-property"
+ })
+ }
+ />
+
+ ) : (
+
+ onFilterPropertyChange({
+ payload: {
+ name: filter.name,
+ update: {
+ value: [event.target.value, filter.value[1]]
+ }
+ },
+ type: "set-property"
+ })
+ }
+ />
+ )}
+
+
+ }
+ label={option.label}
+ name={filter.name}
+ onChange={() =>
+ onFilterPropertyChange({
+ payload: {
+ name: filter.name,
+ update: {
+ value: [option.value]
+ }
+ },
+ type: "set-property"
+ })
+ }
+ />
+
+ ))}
+ {filter.type === FieldType.autocomplete && filter.multiple && (
+
+ )}
+
+
+ }
+ label={filter.label}
+ onChange={() =>
+ onFilterPropertyChange({
+ payload: {
+ name: filter.name,
+ update: {
+ active: !filter.active
+ }
+ },
+ type: "set-property"
+ })
+ }
+ />
+
+ );
+};
+
+export default FilterContentBodyNameField;
diff --git a/src/components/Filter/FilterContent/FilterContentHeader.tsx b/src/components/Filter/FilterContent/FilterContentHeader.tsx
new file mode 100644
index 000000000..7b704ea95
--- /dev/null
+++ b/src/components/Filter/FilterContent/FilterContentHeader.tsx
@@ -0,0 +1,55 @@
+import { Button, makeStyles, Typography } from "@material-ui/core";
+import { buttonMessages } from "@saleor/intl";
+import React from "react";
+import { FormattedMessage } from "react-intl";
+
+const useStyles = makeStyles(
+ theme => ({
+ container: {
+ alignItems: "center",
+ display: "flex",
+ justifyContent: "space-between",
+ padding: theme.spacing(1, 3)
+ },
+ clear: {
+ marginRight: theme.spacing(1)
+ },
+ label: {
+ fontWeight: 600
+ }
+ }),
+ { name: "FilterContentHeader" }
+);
+
+interface FilterContentHeaderProps {
+ onClear: () => void;
+}
+
+const FilterContentHeader: React.FC = ({
+ onClear
+}) => {
+ const classes = useStyles({});
+
+ return (
+
+ );
+};
+
+export default FilterContentHeader;
diff --git a/src/components/Filter/FilterContent/FilterErrorsList.tsx b/src/components/Filter/FilterContent/FilterErrorsList.tsx
new file mode 100644
index 000000000..1d8e57525
--- /dev/null
+++ b/src/components/Filter/FilterContent/FilterErrorsList.tsx
@@ -0,0 +1,80 @@
+import { fade, makeStyles } from "@material-ui/core/styles";
+import Typography from "@material-ui/core/Typography";
+import InlineAlert from "@saleor/components/Alert/InlineAlert";
+import { useStyles as useDotStyles } from "@saleor/components/StatusLabel";
+import classNames from "classnames";
+import React from "react";
+import { useIntl } from "react-intl";
+
+import { FilterErrorMessages, FilterErrors, IFilterElement } from "../types";
+
+const useStyles = makeStyles(
+ theme => ({
+ container: {
+ backgroundColor: fade(theme.palette.primary.main, 0.1),
+ padding: theme.spacing(3, 3, 0, 3)
+ },
+ listItemTitle: {
+ color: theme.palette.primary.contrastText
+ },
+ dot: {
+ backgroundColor: theme.palette.primary.contrastText,
+ marginRight: theme.spacing(1)
+ },
+ itemContainer: {
+ display: "flex",
+ alignItems: "center"
+ }
+ }),
+ { name: "FilterErrorsList" }
+);
+
+interface FilterErrorsListProps {
+ filter: IFilterElement;
+ errors?: FilterErrors;
+ errorMessages?: FilterErrorMessages;
+}
+
+const FilterErrorsList: React.FC = ({
+ filter: { name, multipleFields },
+ errors = [],
+ errorMessages
+}) => {
+ const classes = useStyles({});
+ const dotClasses = useDotStyles({});
+ const intl = useIntl();
+
+ const hasError = (fieldName: string) =>
+ !!errors.find(errorName => errorName === fieldName);
+
+ const hasErrorsToShow = () => {
+ if (!!multipleFields?.length) {
+ return multipleFields.some(multipleField => hasError(multipleField.name));
+ }
+
+ return hasError(name);
+ };
+
+ if (!errors.length || !hasErrorsToShow()) {
+ return null;
+ }
+
+ return (
+
+ {!!errors.length && (
+
+ {errors.map(fieldName => (
+
+
+
+ {intl.formatMessage(errorMessages?.[fieldName])}
+
+
+ )}
+
{
const dot = {
borderRadius: "100%",
- content: "''",
- display: "block",
height: 8,
- left: -theme.spacing(2),
- position: "absolute" as "absolute",
- top: "calc(50% - 5px)",
width: 8
};
return {
+ dot,
+ container: {
+ display: "flex",
+ flexDirection: "row",
+ alignItems: "center"
+ },
+ containerVertical: {
+ alignItems: "flex-start"
+ },
+ textContainer: {
+ marginLeft: theme.spacing(1),
+ display: "flex",
+ flexDirection: "column"
+ },
+ dotVertical: {
+ marginTop: theme.spacing(1)
+ },
alertDot: {
- "&:before": { backgroundColor: yellow[500], ...dot }
+ backgroundColor: yellow[500],
+ ...dot
},
errorDot: {
- "&:before": { backgroundColor: theme.palette.error.main, ...dot }
+ backgroundColor: theme.palette.error.main,
+ ...dot
},
neutralDot: {
- "&:before": { backgroundColor: grey[300], ...dot }
+ backgroundColor: grey[300],
+ ...dot
},
- root: {
- display: "inline-block",
- marginLeft: theme.spacing(1) + 8,
- position: "relative"
+ successDot: {
+ backgroundColor: theme.palette.primary.main,
+ ...dot
},
span: {
display: "inline"
- },
- successDot: {
- "&:before": { backgroundColor: theme.palette.primary.main, ...dot }
}
};
},
@@ -45,41 +57,43 @@ const useStyles = makeStyles(
);
interface StatusLabelProps {
- className?: string;
label: string | React.ReactNode;
status: "success" | "alert" | "neutral" | "error" | string;
- typographyProps?: TypographyProps;
+ subtitle?: string;
+ className?: string;
}
-const StatusLabel: React.FC = props => {
- const { className, label, status, typographyProps } = props;
-
- const classes = useStyles(props);
+const StatusLabel: React.FC = ({
+ className,
+ label,
+ status,
+ subtitle
+}) => {
+ const classes = useStyles({});
return (
- {typographyProps ? (
-
- {label}
-
- ) : (
- label
- )}
+
+
+ {label}
+ {subtitle && }
+
+
+
+ {isLoading ? (
+
+
+
+ ) : (
+
+ )}
+
+
+ {shouldShowViewAssignedItemsButton && (
+ <>
+
+ {intl.formatMessage(viewAssignedItemsButtonLabel)}
+
+
+
+ )}
+
+
+
+ );
+};
+
+export default TypeDeleteWarningDialogContent;
diff --git a/src/components/TypeDeleteWarningDialog/index.tsx b/src/components/TypeDeleteWarningDialog/index.tsx
new file mode 100644
index 000000000..73ce09808
--- /dev/null
+++ b/src/components/TypeDeleteWarningDialog/index.tsx
@@ -0,0 +1,2 @@
+export * from "./TypeDeleteWarningDialog";
+export { default } from "./TypeDeleteWarningDialog";
diff --git a/src/components/TypeDeleteWarningDialog/styles.ts b/src/components/TypeDeleteWarningDialog/styles.ts
new file mode 100644
index 000000000..0e5e83c14
--- /dev/null
+++ b/src/components/TypeDeleteWarningDialog/styles.ts
@@ -0,0 +1,23 @@
+import { makeStyles } from "@saleor/theme";
+
+export const useTypeDeleteWarningDialogStyles = makeStyles(
+ theme => ({
+ centerContainer: {
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "center",
+ height: "100%"
+ },
+ content: {
+ width: 600
+ },
+ consentLabel: {
+ color: theme.palette.primary.main
+ },
+ buttonsSection: {
+ display: "flex",
+ justifyContent: "flex-end"
+ }
+ }),
+ { name: "ProductTypeDeleteWarningDialog" }
+);
diff --git a/src/components/TypeDeleteWarningDialog/types.ts b/src/components/TypeDeleteWarningDialog/types.ts
new file mode 100644
index 000000000..d5c8cce8b
--- /dev/null
+++ b/src/components/TypeDeleteWarningDialog/types.ts
@@ -0,0 +1,10 @@
+import { MessageDescriptor } from "react-intl";
+
+export type CommonTypeDeleteWarningMessages = Record<
+ "title" | "viewAssignedItemsButtonLabel",
+ MessageDescriptor
+>;
+
+export type TypeDeleteWarningMessages = Partial<
+ Record<"description" | "consentLabel", MessageDescriptor>
+>;
diff --git a/src/fragments/plugins.ts b/src/fragments/plugins.ts
index 3a128af56..d88d0e413 100644
--- a/src/fragments/plugins.ts
+++ b/src/fragments/plugins.ts
@@ -1,11 +1,42 @@
import gql from "graphql-tag";
+export const configurationItemFragment = gql`
+ fragment ConfigurationItemFragment on ConfigurationItem {
+ name
+ value
+ type
+ helpText
+ label
+ }
+`;
+
+export const pluginConfigurationFragment = gql`
+ ${configurationItemFragment}
+ fragment PluginConfigurationFragment on PluginConfiguration {
+ active
+ channel {
+ id
+ name
+ slug
+ }
+ configuration {
+ ...ConfigurationItemFragment
+ }
+ }
+`;
+
export const pluginsFragment = gql`
+ ${pluginConfigurationFragment}
fragment PluginFragment on Plugin {
id
name
description
- active
+ globalConfiguration {
+ ...PluginConfigurationFragment
+ }
+ channelConfigurations {
+ ...PluginConfigurationFragment
+ }
}
`;
@@ -13,12 +44,5 @@ export const pluginsDetailsFragment = gql`
${pluginsFragment}
fragment PluginsDetailsFragment on Plugin {
...PluginFragment
- configuration {
- name
- type
- value
- helpText
- label
- }
}
`;
diff --git a/src/fragments/types/ConfigurationItemFragment.ts b/src/fragments/types/ConfigurationItemFragment.ts
new file mode 100644
index 000000000..81de8d0c1
--- /dev/null
+++ b/src/fragments/types/ConfigurationItemFragment.ts
@@ -0,0 +1,19 @@
+/* tslint:disable */
+/* eslint-disable */
+// @generated
+// This file was automatically generated and should not be edited.
+
+import { ConfigurationTypeFieldEnum } from "./../../types/globalTypes";
+
+// ====================================================
+// GraphQL fragment: ConfigurationItemFragment
+// ====================================================
+
+export interface ConfigurationItemFragment {
+ __typename: "ConfigurationItem";
+ name: string;
+ value: string | null;
+ type: ConfigurationTypeFieldEnum | null;
+ helpText: string | null;
+ label: string | null;
+}
diff --git a/src/fragments/types/PluginConfiguarionFragment.ts b/src/fragments/types/PluginConfiguarionFragment.ts
new file mode 100644
index 000000000..1a16e94dd
--- /dev/null
+++ b/src/fragments/types/PluginConfiguarionFragment.ts
@@ -0,0 +1,33 @@
+/* tslint:disable */
+/* eslint-disable */
+// @generated
+// This file was automatically generated and should not be edited.
+
+import { ConfigurationTypeFieldEnum } from "./../../types/globalTypes";
+
+// ====================================================
+// GraphQL fragment: PluginConfiguarionFragment
+// ====================================================
+
+export interface PluginConfiguarionFragment_channel {
+ __typename: "Channel";
+ id: string;
+ name: string;
+ slug: string;
+}
+
+export interface PluginConfiguarionFragment_configuration {
+ __typename: "ConfigurationItem";
+ name: string;
+ value: string | null;
+ type: ConfigurationTypeFieldEnum | null;
+ helpText: string | null;
+ label: string | null;
+}
+
+export interface PluginConfiguarionFragment {
+ __typename: "PluginConfiguration";
+ active: boolean;
+ channel: PluginConfiguarionFragment_channel | null;
+ configuration: (PluginConfiguarionFragment_configuration | null)[] | null;
+}
diff --git a/src/fragments/types/PluginConfigurationFragment.ts b/src/fragments/types/PluginConfigurationFragment.ts
new file mode 100644
index 000000000..6f75ac9a2
--- /dev/null
+++ b/src/fragments/types/PluginConfigurationFragment.ts
@@ -0,0 +1,33 @@
+/* tslint:disable */
+/* eslint-disable */
+// @generated
+// This file was automatically generated and should not be edited.
+
+import { ConfigurationTypeFieldEnum } from "./../../types/globalTypes";
+
+// ====================================================
+// GraphQL fragment: PluginConfigurationFragment
+// ====================================================
+
+export interface PluginConfigurationFragment_channel {
+ __typename: "Channel";
+ id: string;
+ name: string;
+ slug: string;
+}
+
+export interface PluginConfigurationFragment_configuration {
+ __typename: "ConfigurationItem";
+ name: string;
+ value: string | null;
+ type: ConfigurationTypeFieldEnum | null;
+ helpText: string | null;
+ label: string | null;
+}
+
+export interface PluginConfigurationFragment {
+ __typename: "PluginConfiguration";
+ active: boolean;
+ channel: PluginConfigurationFragment_channel | null;
+ configuration: (PluginConfigurationFragment_configuration | null)[] | null;
+}
diff --git a/src/fragments/types/PluginFragment.ts b/src/fragments/types/PluginFragment.ts
index c4a323dae..d546aed49 100644
--- a/src/fragments/types/PluginFragment.ts
+++ b/src/fragments/types/PluginFragment.ts
@@ -3,14 +3,63 @@
// @generated
// This file was automatically generated and should not be edited.
+import { ConfigurationTypeFieldEnum } from "./../../types/globalTypes";
+
// ====================================================
// GraphQL fragment: PluginFragment
// ====================================================
+export interface PluginFragment_globalConfiguration_channel {
+ __typename: "Channel";
+ id: string;
+ name: string;
+ slug: string;
+}
+
+export interface PluginFragment_globalConfiguration_configuration {
+ __typename: "ConfigurationItem";
+ name: string;
+ value: string | null;
+ type: ConfigurationTypeFieldEnum | null;
+ helpText: string | null;
+ label: string | null;
+}
+
+export interface PluginFragment_globalConfiguration {
+ __typename: "PluginConfiguration";
+ active: boolean;
+ channel: PluginFragment_globalConfiguration_channel | null;
+ configuration: (PluginFragment_globalConfiguration_configuration | null)[] | null;
+}
+
+export interface PluginFragment_channelConfigurations_channel {
+ __typename: "Channel";
+ id: string;
+ name: string;
+ slug: string;
+}
+
+export interface PluginFragment_channelConfigurations_configuration {
+ __typename: "ConfigurationItem";
+ name: string;
+ value: string | null;
+ type: ConfigurationTypeFieldEnum | null;
+ helpText: string | null;
+ label: string | null;
+}
+
+export interface PluginFragment_channelConfigurations {
+ __typename: "PluginConfiguration";
+ active: boolean;
+ channel: PluginFragment_channelConfigurations_channel | null;
+ configuration: (PluginFragment_channelConfigurations_configuration | null)[] | null;
+}
+
export interface PluginFragment {
__typename: "Plugin";
id: string;
name: string;
description: string;
- active: boolean;
+ globalConfiguration: PluginFragment_globalConfiguration | null;
+ channelConfigurations: PluginFragment_channelConfigurations[];
}
diff --git a/src/fragments/types/PluginsDetailsFragment.ts b/src/fragments/types/PluginsDetailsFragment.ts
index 6aeb21c29..2e4b15f59 100644
--- a/src/fragments/types/PluginsDetailsFragment.ts
+++ b/src/fragments/types/PluginsDetailsFragment.ts
@@ -9,20 +9,57 @@ import { ConfigurationTypeFieldEnum } from "./../../types/globalTypes";
// GraphQL fragment: PluginsDetailsFragment
// ====================================================
-export interface PluginsDetailsFragment_configuration {
+export interface PluginsDetailsFragment_globalConfiguration_channel {
+ __typename: "Channel";
+ id: string;
+ name: string;
+ slug: string;
+}
+
+export interface PluginsDetailsFragment_globalConfiguration_configuration {
__typename: "ConfigurationItem";
name: string;
- type: ConfigurationTypeFieldEnum | null;
value: string | null;
+ type: ConfigurationTypeFieldEnum | null;
helpText: string | null;
label: string | null;
}
+export interface PluginsDetailsFragment_globalConfiguration {
+ __typename: "PluginConfiguration";
+ active: boolean;
+ channel: PluginsDetailsFragment_globalConfiguration_channel | null;
+ configuration: (PluginsDetailsFragment_globalConfiguration_configuration | null)[] | null;
+}
+
+export interface PluginsDetailsFragment_channelConfigurations_channel {
+ __typename: "Channel";
+ id: string;
+ name: string;
+ slug: string;
+}
+
+export interface PluginsDetailsFragment_channelConfigurations_configuration {
+ __typename: "ConfigurationItem";
+ name: string;
+ value: string | null;
+ type: ConfigurationTypeFieldEnum | null;
+ helpText: string | null;
+ label: string | null;
+}
+
+export interface PluginsDetailsFragment_channelConfigurations {
+ __typename: "PluginConfiguration";
+ active: boolean;
+ channel: PluginsDetailsFragment_channelConfigurations_channel | null;
+ configuration: (PluginsDetailsFragment_channelConfigurations_configuration | null)[] | null;
+}
+
export interface PluginsDetailsFragment {
__typename: "Plugin";
id: string;
name: string;
description: string;
- active: boolean;
- configuration: (PluginsDetailsFragment_configuration | null)[] | null;
+ globalConfiguration: PluginsDetailsFragment_globalConfiguration | null;
+ channelConfigurations: PluginsDetailsFragment_channelConfigurations[];
}
diff --git a/src/hooks/useChannelsSearch.ts b/src/hooks/useChannelsSearch.ts
new file mode 100644
index 000000000..394c49f4f
--- /dev/null
+++ b/src/hooks/useChannelsSearch.ts
@@ -0,0 +1,21 @@
+import { Channel_channel } from "@saleor/channels/types/Channel";
+import { FetchMoreProps, Search, SearchProps } from "@saleor/types";
+import { filter } from "fuzzaldrin";
+import React from "react";
+
+export const useChannelsSearch = function(
+ channels: T[]
+) {
+ const [query, onQueryChange] = React.useState("");
+ const filteredChannels =
+ filter(channels, query, { key: "name" }) || [];
+
+ return { query, onQueryChange, filteredChannels };
+};
+
+export interface ChannelsWithLoadMoreProps
+ extends FetchMoreProps,
+ Search,
+ SearchProps {
+ channels: Channel_channel[];
+}
diff --git a/src/hooks/useChannelsSearchWithLoadMore.ts b/src/hooks/useChannelsSearchWithLoadMore.ts
new file mode 100644
index 000000000..9100415b1
--- /dev/null
+++ b/src/hooks/useChannelsSearchWithLoadMore.ts
@@ -0,0 +1,66 @@
+import { useBaseChannelsList } from "@saleor/channels/queries";
+import chunk from "lodash-es/chunk";
+import compact from "lodash-es/compact";
+import concat from "lodash-es/concat";
+import { useEffect, useState } from "react";
+
+import {
+ ChannelsWithLoadMoreProps,
+ useChannelsSearch
+} from "./useChannelsSearch";
+
+const DEFAULT_ITEMS_PER_PAGE = 6;
+const INITIAL_INDEX = 0;
+
+export const useChannelsSearchWithLoadMore = (
+ itemsPerPage: number = DEFAULT_ITEMS_PER_PAGE
+): ChannelsWithLoadMoreProps => {
+ const { data, loading } = useBaseChannelsList({});
+
+ const {
+ query,
+ onQueryChange: onSearchChange,
+ filteredChannels
+ } = useChannelsSearch(data?.channels);
+
+ const allChannelsChunks = chunk(filteredChannels, itemsPerPage);
+
+ const [currentIndex, setCurrentIndex] = useState(INITIAL_INDEX);
+ const [currentChannelsChunks, setCurrentChannelsChunks] = useState([]);
+
+ const handleAddInitialChunk = () => {
+ if (data?.channels && !loading) {
+ setCurrentChannelsChunks([allChannelsChunks[INITIAL_INDEX]]);
+ }
+ };
+
+ useEffect(handleAddInitialChunk, [loading, query]);
+
+ const onFetchMore = () => {
+ if (!hasMore) {
+ return;
+ }
+
+ const newIndex = currentIndex + 1;
+ setCurrentIndex(newIndex);
+
+ const newChunk = allChannelsChunks[newIndex];
+ setCurrentChannelsChunks([...currentChannelsChunks, newChunk]);
+ };
+
+ const hasMore = allChannelsChunks.length > currentChannelsChunks.length;
+
+ const channels = compact(concat([], ...currentChannelsChunks));
+
+ const totalCount = data?.channels.length;
+
+ return {
+ query,
+ onSearchChange,
+ channels,
+ hasMore,
+ totalCount,
+ onFetchMore,
+ loading
+ };
+};
diff --git a/src/orders/components/OrderCustomer/OrderCustomer.tsx b/src/orders/components/OrderCustomer/OrderCustomer.tsx
index 4f79e1aeb..55ee02ff8 100644
--- a/src/orders/components/OrderCustomer/OrderCustomer.tsx
+++ b/src/orders/components/OrderCustomer/OrderCustomer.tsx
@@ -184,7 +184,12 @@ const OrderCustomer: React.FC = props => {
)
) : (
<>
- {user.email}
+
+ {user.email}
+
= props => {
{canEditAddresses && (
@@ -5530,16 +5515,16 @@ exports[`Storyshots Generics / Filter default 1`] = `
>
@@ -50195,9 +50325,20 @@ exports[`Storyshots Views / Categories / Update category products 1`] = `
role="button"
>
@@ -50281,9 +50422,20 @@ exports[`Storyshots Views / Categories / Update category products 1`] = `
role="button"
>
@@ -50367,9 +50519,20 @@ exports[`Storyshots Views / Categories / Update category products 1`] = `
role="button"
>
@@ -50453,9 +50616,20 @@ exports[`Storyshots Views / Categories / Update category products 1`] = `
role="button"
>
@@ -55326,9 +55500,20 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details d
role="button"
>
@@ -55431,9 +55616,20 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details d
role="button"
>
@@ -55536,9 +55732,20 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details d
role="button"
>
@@ -55641,9 +55848,20 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details d
role="button"
>
@@ -56778,9 +56996,20 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details f
role="button"
>
@@ -56883,9 +57112,20 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details f
role="button"
>
@@ -56988,9 +57228,20 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details f
role="button"
>
@@ -57093,9 +57344,20 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details f
role="button"
>
@@ -59568,9 +59830,20 @@ exports[`Storyshots Views / Collections / Collection list default 1`] = `
role="button"
>
@@ -70252,9 +70525,20 @@ exports[`Storyshots Views / Customers / Customer details default 1`] = `
class="MuiTableCell-root-id MuiTableCell-body-id"
>
|
|
|
|
|
|
|
@@ -87361,9 +87733,20 @@ exports[`Storyshots Views / Discounts / Sale details products 1`] = `
role="button"
>
@@ -87466,9 +87849,20 @@ exports[`Storyshots Views / Discounts / Sale details products 1`] = `
role="button"
>
@@ -87571,9 +87965,20 @@ exports[`Storyshots Views / Discounts / Sale details products 1`] = `
role="button"
>
@@ -110341,12 +110746,23 @@ exports[`Storyshots Views / Orders / Order details cancelled 1`] = `
class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
>
- Unfulfilled
+
- #9-2
+
+ Unfulfilled
+
+ #9-2
+
+
@@ -110599,13 +111026,24 @@ exports[`Storyshots Views / Orders / Order details cancelled 1`] = `
class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
>
- Unfulfilled
+
- #9-1
+
+ Unfulfilled
+
+ #9-1
+
+
@@ -110760,9 +111198,20 @@ exports[`Storyshots Views / Orders / Order details cancelled 1`] = `
class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
>
- Fulfilled (1)
+
- #9-2
+
+ Fulfilled (1)
+
+ #9-2
+
+
@@ -112294,13 +112765,24 @@ exports[`Storyshots Views / Orders / Order details default 1`] = `
class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
>
- Fulfilled (1)
+
- #9-1
+
+ Fulfilled (1)
+
+ #9-1
+
+
@@ -112495,9 +112977,20 @@ exports[`Storyshots Views / Orders / Order details default 1`] = `
class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
- Partially fulfilled
+
+
+
+ Partially fulfilled
+
+ |
|
- Partially fulfilled
+
+
+
+ Partially fulfilled
+
+ |
|
- Partially fulfilled
+
+
+
+ Partially fulfilled
+
+ |
|
|
|
- Partially fulfilled
+
+
+
+ Partially fulfilled
+
+ |
|
- Partially fulfilled
+
+
+
+ Partially fulfilled
+
+ |
|
- Partially fulfilled
+
+
+
+ Partially fulfilled
+
+ |
|
- Partially fulfilled
+
+
+
+ Partially fulfilled
+
+ |
|
- Partially fulfilled
+
+
+
+ Partially fulfilled
+
+ |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
- Partially fulfilled
+
+
+
+ Partially fulfilled
+
+ |
|
- Partially fulfilled
+
+
+
+ Partially fulfilled
+
+ |
|
- Partially fulfilled
+
+
+
+ Partially fulfilled
+
+ |
|
|
|
- Partially fulfilled
+
+
+
+ Partially fulfilled
+
+ |
|
- Partially fulfilled
+
+
+
+ Partially fulfilled
+
+ |
|
- Partially fulfilled
+
+
+
+ Partially fulfilled
+
+ |
|
- Partially fulfilled
+
+
+
+ Partially fulfilled
+
+ |
|
- Partially fulfilled
+
+
+
+ Partially fulfilled
+
+ |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
- Partially fulfilled
+
+
+
+ Partially fulfilled
+
+ |
|
- Partially fulfilled
+
+
+
+ Partially fulfilled
+
+ |
|
- Partially fulfilled
+
+
+
+ Partially fulfilled
+
+ |
|
|
|
- Partially fulfilled
+
+
+
+ Partially fulfilled
+
+ |
|
- Partially fulfilled
+
+
+
+ Partially fulfilled
+
+ |
|
- Partially fulfilled
+
+
+
+ Partially fulfilled
+
+ |
|
- Partially fulfilled
+
+
+
+ Partially fulfilled
+
+ |
|
- Partially fulfilled
+
+
+
+ Partially fulfilled
+
+ |
|
- Action
+
+ |
+
@@ -158993,7 +160757,7 @@ exports[`Storyshots Views / Plugins / Plugin list default 1`] = `
>