= props
order.shippingMethodName !== undefined ? (
order.shippingMethod === null ? (
order.availableShippingMethods &&
- order.availableShippingMethods.length > 0 ? (
+ order.availableShippingMethods.length > 0 &&
+ !disabled ? (
|
= props => {
>
- onSort(OrderDraftListUrlSortField.total)}
- className={classes.colTotal}
- >
+
,
TabPageProps {
orders: OrderDraftList_draftOrders_edges_node[];
+ onSettingsOpen?: () => void;
}
+const useStyles = makeStyles(
+ theme => ({
+ settings: {
+ marginRight: theme.spacing(2)
+ }
+ }),
+ { name: "OrderDraftListPage" }
+);
+
const OrderDraftListPage: React.FC = ({
- currencySymbol,
currentTab,
disabled,
filterOpts,
@@ -42,6 +53,7 @@ const OrderDraftListPage: React.FC = ({
onAll,
onFilterChange,
onSearchChange,
+ onSettingsOpen,
onTabChange,
onTabDelete,
onTabSave,
@@ -49,12 +61,26 @@ const OrderDraftListPage: React.FC = ({
...listProps
}) => {
const intl = useIntl();
-
+ const classes = useStyles({});
const structure = createFilterStructure(intl, filterOpts);
return (
+ {!!onSettingsOpen && (
+
+ )}
- onSort(OrderListUrlSortField.total)}
- className={classes.colTotal}
- >
+
,
SortPage {
orders: OrderList_orders_edges_node[];
+ onSettingsOpen?: () => void;
}
+const useStyles = makeStyles(
+ theme => ({
+ settings: {
+ marginRight: theme.spacing(2)
+ }
+ }),
+ { name: "OrderListPage" }
+);
+
const OrderListPage: React.FC = ({
- currencySymbol,
currentTab,
initialSearch,
filterOpts,
@@ -33,6 +44,7 @@ const OrderListPage: React.FC = ({
onAdd,
onAll,
onSearchChange,
+ onSettingsOpen,
onFilterChange,
onTabChange,
onTabDelete,
@@ -40,12 +52,26 @@ const OrderListPage: React.FC = ({
...listProps
}) => {
const intl = useIntl();
-
+ const classes = useStyles({});
const filterStructure = createFilterStructure(intl, filterOpts);
return (
+ {!!onSettingsOpen && (
+
+ )}
void;
onFetch: (query: string) => void;
onSubmit: (data: SearchOrderVariant_search_edges_node_variants[]) => void;
@@ -168,6 +169,7 @@ const OrderProductAddDialog: React.FC = props => {
loading,
hasMore,
products,
+ selectedChannel,
onFetch,
onFetchMore,
onClose,
@@ -252,84 +254,94 @@ const OrderProductAddDialog: React.FC = props => {
{renderCollection(
productChoices,
- (product, productIndex) => (
-
-
-
-
- onProductAdd(
- product,
- productIndex,
- productsWithAllVariantsSelected,
- variants,
- setVariants
- )
- }
+ (product, productIndex) =>
+ product.variants.some(variant =>
+ variant.channelListings.some(
+ listing => listing.channel.id === selectedChannel
+ )
+ ) ? (
+
+
+
+
+ onProductAdd(
+ product,
+ productIndex,
+ productsWithAllVariantsSelected,
+ variants,
+ setVariants
+ )
+ }
+ />
+
+ product.thumbnail.url)}
/>
-
- product.thumbnail.url)}
- />
-
- {maybe(() => product.name)}
-
-
- {maybe(() => product.variants, []).map(
- (variant, variantIndex) => (
-
-
-
-
- onVariantAdd(
- variant,
- variantIndex,
- productIndex,
- variants,
- selectedVariantsToProductsMap,
- setVariants
- )
- }
- />
-
-
- {variant.name}
-
-
-
-
-
-
-
-
- )
- )}
-
- ),
+
+ {maybe(() => product.name)}
+
+
+ {maybe(() => product.variants, []).map(
+ (variant, variantIndex) =>
+ variant.channelListings.some(
+ listing => listing.channel.id === selectedChannel
+ ) ? (
+
+
+
+
+ onVariantAdd(
+ variant,
+ variantIndex,
+ productIndex,
+ variants,
+ selectedVariantsToProductsMap,
+ setVariants
+ )
+ }
+ />
+
+
+ {variant.name}
+
+
+
+
+
+ {variant?.channelListings[0]?.price && (
+
+ )}
+
+
+ ) : null
+ )}
+
+ ) : null,
() => (
diff --git a/src/orders/fixtures.ts b/src/orders/fixtures.ts
index d6e40b66e..6a0e15d2d 100644
--- a/src/orders/fixtures.ts
+++ b/src/orders/fixtures.ts
@@ -811,6 +811,13 @@ export const order = (placeholder: string): OrderDetails_order => ({
streetAddress2: ""
},
canFinalize: true,
+ channel: {
+ __typename: "Channel",
+ currencyCode: "USD",
+ id: "123454",
+ isActive: true,
+ name: "Default Channel"
+ },
created: "2018-09-11T09:37:28.185874+00:00",
customerNote: "Lorem ipsum dolor sit amet",
discount: null,
@@ -948,12 +955,6 @@ export const order = (placeholder: string): OrderDetails_order => ({
variant: {
__typename: "ProductVariant",
id: "dsfsfuhb",
- product: {
- __typename: "Product",
- id: "345678393",
- isAvailableForPurchase: true,
- isPublished: true
- },
quantityAvailable: 10
}
},
@@ -1000,12 +1001,6 @@ export const order = (placeholder: string): OrderDetails_order => ({
variant: {
__typename: "ProductVariant",
id: "dsfsfuhb",
- product: {
- __typename: "Product",
- id: "345678393",
- isAvailableForPurchase: true,
- isPublished: true
- },
quantityAvailable: 10
}
},
@@ -1057,12 +1052,6 @@ export const order = (placeholder: string): OrderDetails_order => ({
variant: {
__typename: "ProductVariant",
id: "dsfsfuhb",
- product: {
- __typename: "Product",
- id: "345678393",
- isAvailableForPurchase: true,
- isPublished: true
- },
quantityAvailable: 10
}
},
@@ -1094,12 +1083,6 @@ export const order = (placeholder: string): OrderDetails_order => ({
variant: {
__typename: "ProductVariant",
id: "dsfsfuhb",
- product: {
- __typename: "Product",
- id: "345678393",
- isAvailableForPurchase: true,
- isPublished: true
- },
quantityAvailable: 10
}
}
@@ -1184,6 +1167,13 @@ export const draftOrder = (placeholder: string): OrderDetails_order => ({
availableShippingMethods: null,
billingAddress: null,
canFinalize: true,
+ channel: {
+ __typename: "Channel",
+ currencyCode: "USD",
+ id: "123454",
+ isActive: true,
+ name: "Default Channel"
+ },
created: "2018-09-20T23:23:39.811428+00:00",
customerNote: "Lorem ipsum dolor sit",
discount: null,
@@ -1229,12 +1219,6 @@ export const draftOrder = (placeholder: string): OrderDetails_order => ({
variant: {
__typename: "ProductVariant",
id: "dsfsfuhb",
- product: {
- __typename: "Product",
- id: "345678393",
- isAvailableForPurchase: true,
- isPublished: true
- },
quantityAvailable: 10
}
},
@@ -1266,12 +1250,6 @@ export const draftOrder = (placeholder: string): OrderDetails_order => ({
variant: {
__typename: "ProductVariant",
id: "dsfsfuhb",
- product: {
- __typename: "Product",
- id: "345678393",
- isAvailableForPurchase: true,
- isPublished: true
- },
quantityAvailable: 10
}
}
@@ -1362,53 +1340,116 @@ export const orderLineSearch = (
variants: [
{
__typename: "ProductVariant" as "ProductVariant",
- id: "UHJvZHVjdFZhcmlhbnQ6MjAy",
- name: "500ml",
- pricing: {
- __typename: "VariantPricingInfo",
- priceUndiscounted: {
- __typename: "TaxedMoney",
- net: {
- __typename: "Money" as "Money",
- amount: 3.0,
+ channelListings: [
+ {
+ __typename: "ProductVariantChannelListing",
+ channel: {
+ __typename: "Channel",
+ currencyCode: "USD",
+ id: "123",
+ isActive: true,
+ name: "Channel1"
+ },
+ price: {
+ __typename: "Money",
+ amount: 1,
+ currency: "USD"
+ }
+ },
+ {
+ __typename: "ProductVariantChannelListing",
+ channel: {
+ __typename: "Channel",
+ currencyCode: "USD",
+ id: "124",
+ isActive: true,
+ name: "Channel2"
+ },
+ price: {
+ __typename: "Money",
+ amount: 1,
currency: "USD"
}
}
- },
+ ],
+ id: "UHJvZHVjdFZhcmlhbnQ6MjAy",
+ name: "500ml",
sku: "93855755"
},
{
__typename: "ProductVariant" as "ProductVariant",
- id: "UHJvZHVjdFZhcmlhbnQ6MjAz",
- name: "1l",
- pricing: {
- __typename: "VariantPricingInfo",
- priceUndiscounted: {
- __typename: "TaxedMoney",
- net: {
- __typename: "Money" as "Money",
- amount: 5.0,
+ channelListings: [
+ {
+ __typename: "ProductVariantChannelListing",
+ channel: {
+ __typename: "Channel",
+ currencyCode: "USD",
+ id: "123",
+ isActive: true,
+ name: "Channel1"
+ },
+ price: {
+ __typename: "Money",
+ amount: 1,
+ currency: "USD"
+ }
+ },
+ {
+ __typename: "ProductVariantChannelListing",
+ channel: {
+ __typename: "Channel",
+ currencyCode: "USD",
+ id: "124",
+ isActive: true,
+ name: "Channel2"
+ },
+ price: {
+ __typename: "Money",
+ amount: 1,
currency: "USD"
}
}
- },
+ ],
+ id: "UHJvZHVjdFZhcmlhbnQ6MjAz",
+ name: "1l",
sku: "43226647"
},
{
__typename: "ProductVariant" as "ProductVariant",
- id: "UHJvZHVjdFZhcmlhbnQ6MjA0",
- name: "2l",
- pricing: {
- __typename: "VariantPricingInfo",
- priceUndiscounted: {
- __typename: "TaxedMoney",
- net: {
- __typename: "Money" as "Money",
- amount: 7.0,
+ channelListings: [
+ {
+ __typename: "ProductVariantChannelListing",
+ channel: {
+ __typename: "Channel",
+ currencyCode: "USD",
+ id: "123",
+ isActive: true,
+ name: "Channel1"
+ },
+ price: {
+ __typename: "Money",
+ amount: 1,
+ currency: "USD"
+ }
+ },
+ {
+ __typename: "ProductVariantChannelListing",
+ channel: {
+ __typename: "Channel",
+ currencyCode: "USD",
+ id: "124",
+ isActive: true,
+ name: "Channel2"
+ },
+ price: {
+ __typename: "Money",
+ amount: 1,
currency: "USD"
}
}
- },
+ ],
+ id: "UHJvZHVjdFZhcmlhbnQ6MjA0",
+ name: "2l",
sku: "80884671"
}
]
@@ -1424,53 +1465,116 @@ export const orderLineSearch = (
variants: [
{
__typename: "ProductVariant" as "ProductVariant",
- id: "UHJvZHVjdFZhcmlhbnQ6MjEx",
- name: "500ml",
- pricing: {
- __typename: "VariantPricingInfo",
- priceUndiscounted: {
- __typename: "TaxedMoney",
- net: {
- __typename: "Money" as "Money",
- amount: 3.0,
+ channelListings: [
+ {
+ __typename: "ProductVariantChannelListing",
+ channel: {
+ __typename: "Channel",
+ currencyCode: "USD",
+ id: "123",
+ isActive: true,
+ name: "Channel1"
+ },
+ price: {
+ __typename: "Money",
+ amount: 1,
+ currency: "USD"
+ }
+ },
+ {
+ __typename: "ProductVariantChannelListing",
+ channel: {
+ __typename: "Channel",
+ currencyCode: "USD",
+ id: "124",
+ isActive: true,
+ name: "Channel2"
+ },
+ price: {
+ __typename: "Money",
+ amount: 1,
currency: "USD"
}
}
- },
+ ],
+ id: "UHJvZHVjdFZhcmlhbnQ6MjEx",
+ name: "500ml",
sku: "43200242"
},
{
__typename: "ProductVariant" as "ProductVariant",
- id: "UHJvZHVjdFZhcmlhbnQ6MjEy",
- name: "1l",
- pricing: {
- __typename: "VariantPricingInfo",
- priceUndiscounted: {
- __typename: "TaxedMoney",
- net: {
- __typename: "Money" as "Money",
- amount: 5.0,
+ channelListings: [
+ {
+ __typename: "ProductVariantChannelListing",
+ channel: {
+ __typename: "Channel",
+ currencyCode: "USD",
+ id: "123",
+ isActive: true,
+ name: "Channel1"
+ },
+ price: {
+ __typename: "Money",
+ amount: 1,
+ currency: "USD"
+ }
+ },
+ {
+ __typename: "ProductVariantChannelListing",
+ channel: {
+ __typename: "Channel",
+ currencyCode: "USD",
+ id: "124",
+ isActive: true,
+ name: "Channel2"
+ },
+ price: {
+ __typename: "Money",
+ amount: 1,
currency: "USD"
}
}
- },
+ ],
+ id: "UHJvZHVjdFZhcmlhbnQ6MjEy",
+ name: "1l",
sku: "79129513"
},
{
__typename: "ProductVariant" as "ProductVariant",
- id: "UHJvZHVjdFZhcmlhbnQ6MjEz",
- name: "2l",
- pricing: {
- __typename: "VariantPricingInfo",
- priceUndiscounted: {
- __typename: "TaxedMoney",
- net: {
- __typename: "Money" as "Money",
- amount: 7.0,
+ channelListings: [
+ {
+ __typename: "ProductVariantChannelListing",
+ channel: {
+ __typename: "Channel",
+ currencyCode: "USD",
+ id: "123",
+ isActive: true,
+ name: "Channel1"
+ },
+ price: {
+ __typename: "Money",
+ amount: 1,
+ currency: "USD"
+ }
+ },
+ {
+ __typename: "ProductVariantChannelListing",
+ channel: {
+ __typename: "Channel",
+ currencyCode: "USD",
+ id: "124",
+ isActive: true,
+ name: "Channel2"
+ },
+ price: {
+ __typename: "Money",
+ amount: 1,
currency: "USD"
}
}
- },
+ ],
+ id: "UHJvZHVjdFZhcmlhbnQ6MjEz",
+ name: "2l",
sku: "75799450"
}
]
diff --git a/src/orders/mutations.ts b/src/orders/mutations.ts
index 0169ae2f5..1db7240c7 100644
--- a/src/orders/mutations.ts
+++ b/src/orders/mutations.ts
@@ -360,8 +360,8 @@ export const TypedOrderShippingMethodUpdateMutation = TypedMutation<
const orderDraftCreateMutation = gql`
${orderErrorFragment}
- mutation OrderDraftCreate {
- draftOrderCreate(input: {}) {
+ mutation OrderDraftCreate($input: DraftOrderCreateInput!) {
+ draftOrderCreate(input: $input) {
errors: orderErrors {
...OrderErrorFragment
}
diff --git a/src/orders/queries.ts b/src/orders/queries.ts
index 45747bd88..4808d6315 100644
--- a/src/orders/queries.ts
+++ b/src/orders/queries.ts
@@ -161,12 +161,16 @@ export const searchOrderVariant = gql`
id
name
sku
- pricing {
- priceUndiscounted {
- net {
- amount
- currency
- }
+ channelListings {
+ channel {
+ id
+ isActive
+ name
+ currencyCode
+ }
+ price {
+ amount
+ currency
}
}
}
diff --git a/src/orders/types/FulfillOrder.ts b/src/orders/types/FulfillOrder.ts
index 715c9a509..dcc4c359d 100644
--- a/src/orders/types/FulfillOrder.ts
+++ b/src/orders/types/FulfillOrder.ts
@@ -70,17 +70,9 @@ export interface FulfillOrder_orderFulfill_order_events {
user: FulfillOrder_orderFulfill_order_events_user | null;
}
-export interface FulfillOrder_orderFulfill_order_fulfillments_lines_orderLine_variant_product {
- __typename: "Product";
- id: string;
- isAvailableForPurchase: boolean | null;
- isPublished: boolean;
-}
-
export interface FulfillOrder_orderFulfill_order_fulfillments_lines_orderLine_variant {
__typename: "ProductVariant";
id: string;
- product: FulfillOrder_orderFulfill_order_fulfillments_lines_orderLine_variant_product;
quantityAvailable: number;
}
@@ -143,17 +135,9 @@ export interface FulfillOrder_orderFulfill_order_fulfillments {
warehouse: FulfillOrder_orderFulfill_order_fulfillments_warehouse | null;
}
-export interface FulfillOrder_orderFulfill_order_lines_variant_product {
- __typename: "Product";
- id: string;
- isAvailableForPurchase: boolean | null;
- isPublished: boolean;
-}
-
export interface FulfillOrder_orderFulfill_order_lines_variant {
__typename: "ProductVariant";
id: string;
- product: FulfillOrder_orderFulfill_order_lines_variant_product;
quantityAvailable: number;
}
@@ -306,6 +290,14 @@ export interface FulfillOrder_orderFulfill_order_invoices {
status: JobStatusEnum;
}
+export interface FulfillOrder_orderFulfill_order_channel {
+ __typename: "Channel";
+ isActive: boolean;
+ id: string;
+ name: string;
+ currencyCode: string;
+}
+
export interface FulfillOrder_orderFulfill_order {
__typename: "Order";
id: string;
@@ -335,6 +327,7 @@ export interface FulfillOrder_orderFulfill_order {
availableShippingMethods: (FulfillOrder_orderFulfill_order_availableShippingMethods | null)[] | null;
discount: FulfillOrder_orderFulfill_order_discount | null;
invoices: (FulfillOrder_orderFulfill_order_invoices | null)[] | null;
+ channel: FulfillOrder_orderFulfill_order_channel;
}
export interface FulfillOrder_orderFulfill {
diff --git a/src/orders/types/OrderCancel.ts b/src/orders/types/OrderCancel.ts
index a188bbaf8..434ca5214 100644
--- a/src/orders/types/OrderCancel.ts
+++ b/src/orders/types/OrderCancel.ts
@@ -68,17 +68,9 @@ export interface OrderCancel_orderCancel_order_events {
user: OrderCancel_orderCancel_order_events_user | null;
}
-export interface OrderCancel_orderCancel_order_fulfillments_lines_orderLine_variant_product {
- __typename: "Product";
- id: string;
- isAvailableForPurchase: boolean | null;
- isPublished: boolean;
-}
-
export interface OrderCancel_orderCancel_order_fulfillments_lines_orderLine_variant {
__typename: "ProductVariant";
id: string;
- product: OrderCancel_orderCancel_order_fulfillments_lines_orderLine_variant_product;
quantityAvailable: number;
}
@@ -141,17 +133,9 @@ export interface OrderCancel_orderCancel_order_fulfillments {
warehouse: OrderCancel_orderCancel_order_fulfillments_warehouse | null;
}
-export interface OrderCancel_orderCancel_order_lines_variant_product {
- __typename: "Product";
- id: string;
- isAvailableForPurchase: boolean | null;
- isPublished: boolean;
-}
-
export interface OrderCancel_orderCancel_order_lines_variant {
__typename: "ProductVariant";
id: string;
- product: OrderCancel_orderCancel_order_lines_variant_product;
quantityAvailable: number;
}
@@ -304,6 +288,14 @@ export interface OrderCancel_orderCancel_order_invoices {
status: JobStatusEnum;
}
+export interface OrderCancel_orderCancel_order_channel {
+ __typename: "Channel";
+ isActive: boolean;
+ id: string;
+ name: string;
+ currencyCode: string;
+}
+
export interface OrderCancel_orderCancel_order {
__typename: "Order";
id: string;
@@ -333,6 +325,7 @@ export interface OrderCancel_orderCancel_order {
availableShippingMethods: (OrderCancel_orderCancel_order_availableShippingMethods | null)[] | null;
discount: OrderCancel_orderCancel_order_discount | null;
invoices: (OrderCancel_orderCancel_order_invoices | null)[] | null;
+ channel: OrderCancel_orderCancel_order_channel;
}
export interface OrderCancel_orderCancel {
diff --git a/src/orders/types/OrderCapture.ts b/src/orders/types/OrderCapture.ts
index f81eabdd0..536aabda6 100644
--- a/src/orders/types/OrderCapture.ts
+++ b/src/orders/types/OrderCapture.ts
@@ -68,17 +68,9 @@ export interface OrderCapture_orderCapture_order_events {
user: OrderCapture_orderCapture_order_events_user | null;
}
-export interface OrderCapture_orderCapture_order_fulfillments_lines_orderLine_variant_product {
- __typename: "Product";
- id: string;
- isAvailableForPurchase: boolean | null;
- isPublished: boolean;
-}
-
export interface OrderCapture_orderCapture_order_fulfillments_lines_orderLine_variant {
__typename: "ProductVariant";
id: string;
- product: OrderCapture_orderCapture_order_fulfillments_lines_orderLine_variant_product;
quantityAvailable: number;
}
@@ -141,17 +133,9 @@ export interface OrderCapture_orderCapture_order_fulfillments {
warehouse: OrderCapture_orderCapture_order_fulfillments_warehouse | null;
}
-export interface OrderCapture_orderCapture_order_lines_variant_product {
- __typename: "Product";
- id: string;
- isAvailableForPurchase: boolean | null;
- isPublished: boolean;
-}
-
export interface OrderCapture_orderCapture_order_lines_variant {
__typename: "ProductVariant";
id: string;
- product: OrderCapture_orderCapture_order_lines_variant_product;
quantityAvailable: number;
}
@@ -304,6 +288,14 @@ export interface OrderCapture_orderCapture_order_invoices {
status: JobStatusEnum;
}
+export interface OrderCapture_orderCapture_order_channel {
+ __typename: "Channel";
+ isActive: boolean;
+ id: string;
+ name: string;
+ currencyCode: string;
+}
+
export interface OrderCapture_orderCapture_order {
__typename: "Order";
id: string;
@@ -333,6 +325,7 @@ export interface OrderCapture_orderCapture_order {
availableShippingMethods: (OrderCapture_orderCapture_order_availableShippingMethods | null)[] | null;
discount: OrderCapture_orderCapture_order_discount | null;
invoices: (OrderCapture_orderCapture_order_invoices | null)[] | null;
+ channel: OrderCapture_orderCapture_order_channel;
}
export interface OrderCapture_orderCapture {
diff --git a/src/orders/types/OrderDetails.ts b/src/orders/types/OrderDetails.ts
index f9bca7b9a..1ed9adac7 100644
--- a/src/orders/types/OrderDetails.ts
+++ b/src/orders/types/OrderDetails.ts
@@ -62,17 +62,9 @@ export interface OrderDetails_order_events {
user: OrderDetails_order_events_user | null;
}
-export interface OrderDetails_order_fulfillments_lines_orderLine_variant_product {
- __typename: "Product";
- id: string;
- isAvailableForPurchase: boolean | null;
- isPublished: boolean;
-}
-
export interface OrderDetails_order_fulfillments_lines_orderLine_variant {
__typename: "ProductVariant";
id: string;
- product: OrderDetails_order_fulfillments_lines_orderLine_variant_product;
quantityAvailable: number;
}
@@ -135,17 +127,9 @@ export interface OrderDetails_order_fulfillments {
warehouse: OrderDetails_order_fulfillments_warehouse | null;
}
-export interface OrderDetails_order_lines_variant_product {
- __typename: "Product";
- id: string;
- isAvailableForPurchase: boolean | null;
- isPublished: boolean;
-}
-
export interface OrderDetails_order_lines_variant {
__typename: "ProductVariant";
id: string;
- product: OrderDetails_order_lines_variant_product;
quantityAvailable: number;
}
@@ -298,6 +282,14 @@ export interface OrderDetails_order_invoices {
status: JobStatusEnum;
}
+export interface OrderDetails_order_channel {
+ __typename: "Channel";
+ isActive: boolean;
+ id: string;
+ name: string;
+ currencyCode: string;
+}
+
export interface OrderDetails_order {
__typename: "Order";
id: string;
@@ -327,6 +319,7 @@ export interface OrderDetails_order {
availableShippingMethods: (OrderDetails_order_availableShippingMethods | null)[] | null;
discount: OrderDetails_order_discount | null;
invoices: (OrderDetails_order_invoices | null)[] | null;
+ channel: OrderDetails_order_channel;
}
export interface OrderDetails_shop_countries {
diff --git a/src/orders/types/OrderDraftCancel.ts b/src/orders/types/OrderDraftCancel.ts
index 6c47653b8..d6a74c8c8 100644
--- a/src/orders/types/OrderDraftCancel.ts
+++ b/src/orders/types/OrderDraftCancel.ts
@@ -68,17 +68,9 @@ export interface OrderDraftCancel_draftOrderDelete_order_events {
user: OrderDraftCancel_draftOrderDelete_order_events_user | null;
}
-export interface OrderDraftCancel_draftOrderDelete_order_fulfillments_lines_orderLine_variant_product {
- __typename: "Product";
- id: string;
- isAvailableForPurchase: boolean | null;
- isPublished: boolean;
-}
-
export interface OrderDraftCancel_draftOrderDelete_order_fulfillments_lines_orderLine_variant {
__typename: "ProductVariant";
id: string;
- product: OrderDraftCancel_draftOrderDelete_order_fulfillments_lines_orderLine_variant_product;
quantityAvailable: number;
}
@@ -141,17 +133,9 @@ export interface OrderDraftCancel_draftOrderDelete_order_fulfillments {
warehouse: OrderDraftCancel_draftOrderDelete_order_fulfillments_warehouse | null;
}
-export interface OrderDraftCancel_draftOrderDelete_order_lines_variant_product {
- __typename: "Product";
- id: string;
- isAvailableForPurchase: boolean | null;
- isPublished: boolean;
-}
-
export interface OrderDraftCancel_draftOrderDelete_order_lines_variant {
__typename: "ProductVariant";
id: string;
- product: OrderDraftCancel_draftOrderDelete_order_lines_variant_product;
quantityAvailable: number;
}
@@ -304,6 +288,14 @@ export interface OrderDraftCancel_draftOrderDelete_order_invoices {
status: JobStatusEnum;
}
+export interface OrderDraftCancel_draftOrderDelete_order_channel {
+ __typename: "Channel";
+ isActive: boolean;
+ id: string;
+ name: string;
+ currencyCode: string;
+}
+
export interface OrderDraftCancel_draftOrderDelete_order {
__typename: "Order";
id: string;
@@ -333,6 +325,7 @@ export interface OrderDraftCancel_draftOrderDelete_order {
availableShippingMethods: (OrderDraftCancel_draftOrderDelete_order_availableShippingMethods | null)[] | null;
discount: OrderDraftCancel_draftOrderDelete_order_discount | null;
invoices: (OrderDraftCancel_draftOrderDelete_order_invoices | null)[] | null;
+ channel: OrderDraftCancel_draftOrderDelete_order_channel;
}
export interface OrderDraftCancel_draftOrderDelete {
diff --git a/src/orders/types/OrderDraftCreate.ts b/src/orders/types/OrderDraftCreate.ts
index d4b1fcbe1..a0250f872 100644
--- a/src/orders/types/OrderDraftCreate.ts
+++ b/src/orders/types/OrderDraftCreate.ts
@@ -2,7 +2,7 @@
/* eslint-disable */
// This file was automatically generated and should not be edited.
-import { OrderErrorCode } from "./../../types/globalTypes";
+import { DraftOrderCreateInput, OrderErrorCode } from "./../../types/globalTypes";
// ====================================================
// GraphQL mutation operation: OrderDraftCreate
@@ -28,3 +28,7 @@ export interface OrderDraftCreate_draftOrderCreate {
export interface OrderDraftCreate {
draftOrderCreate: OrderDraftCreate_draftOrderCreate | null;
}
+
+export interface OrderDraftCreateVariables {
+ input: DraftOrderCreateInput;
+}
diff --git a/src/orders/types/OrderDraftFinalize.ts b/src/orders/types/OrderDraftFinalize.ts
index 2791df488..b674cd776 100644
--- a/src/orders/types/OrderDraftFinalize.ts
+++ b/src/orders/types/OrderDraftFinalize.ts
@@ -68,17 +68,9 @@ export interface OrderDraftFinalize_draftOrderComplete_order_events {
user: OrderDraftFinalize_draftOrderComplete_order_events_user | null;
}
-export interface OrderDraftFinalize_draftOrderComplete_order_fulfillments_lines_orderLine_variant_product {
- __typename: "Product";
- id: string;
- isAvailableForPurchase: boolean | null;
- isPublished: boolean;
-}
-
export interface OrderDraftFinalize_draftOrderComplete_order_fulfillments_lines_orderLine_variant {
__typename: "ProductVariant";
id: string;
- product: OrderDraftFinalize_draftOrderComplete_order_fulfillments_lines_orderLine_variant_product;
quantityAvailable: number;
}
@@ -141,17 +133,9 @@ export interface OrderDraftFinalize_draftOrderComplete_order_fulfillments {
warehouse: OrderDraftFinalize_draftOrderComplete_order_fulfillments_warehouse | null;
}
-export interface OrderDraftFinalize_draftOrderComplete_order_lines_variant_product {
- __typename: "Product";
- id: string;
- isAvailableForPurchase: boolean | null;
- isPublished: boolean;
-}
-
export interface OrderDraftFinalize_draftOrderComplete_order_lines_variant {
__typename: "ProductVariant";
id: string;
- product: OrderDraftFinalize_draftOrderComplete_order_lines_variant_product;
quantityAvailable: number;
}
@@ -304,6 +288,14 @@ export interface OrderDraftFinalize_draftOrderComplete_order_invoices {
status: JobStatusEnum;
}
+export interface OrderDraftFinalize_draftOrderComplete_order_channel {
+ __typename: "Channel";
+ isActive: boolean;
+ id: string;
+ name: string;
+ currencyCode: string;
+}
+
export interface OrderDraftFinalize_draftOrderComplete_order {
__typename: "Order";
id: string;
@@ -333,6 +325,7 @@ export interface OrderDraftFinalize_draftOrderComplete_order {
availableShippingMethods: (OrderDraftFinalize_draftOrderComplete_order_availableShippingMethods | null)[] | null;
discount: OrderDraftFinalize_draftOrderComplete_order_discount | null;
invoices: (OrderDraftFinalize_draftOrderComplete_order_invoices | null)[] | null;
+ channel: OrderDraftFinalize_draftOrderComplete_order_channel;
}
export interface OrderDraftFinalize_draftOrderComplete {
diff --git a/src/orders/types/OrderDraftUpdate.ts b/src/orders/types/OrderDraftUpdate.ts
index 7245884aa..2e138f858 100644
--- a/src/orders/types/OrderDraftUpdate.ts
+++ b/src/orders/types/OrderDraftUpdate.ts
@@ -68,17 +68,9 @@ export interface OrderDraftUpdate_draftOrderUpdate_order_events {
user: OrderDraftUpdate_draftOrderUpdate_order_events_user | null;
}
-export interface OrderDraftUpdate_draftOrderUpdate_order_fulfillments_lines_orderLine_variant_product {
- __typename: "Product";
- id: string;
- isAvailableForPurchase: boolean | null;
- isPublished: boolean;
-}
-
export interface OrderDraftUpdate_draftOrderUpdate_order_fulfillments_lines_orderLine_variant {
__typename: "ProductVariant";
id: string;
- product: OrderDraftUpdate_draftOrderUpdate_order_fulfillments_lines_orderLine_variant_product;
quantityAvailable: number;
}
@@ -141,17 +133,9 @@ export interface OrderDraftUpdate_draftOrderUpdate_order_fulfillments {
warehouse: OrderDraftUpdate_draftOrderUpdate_order_fulfillments_warehouse | null;
}
-export interface OrderDraftUpdate_draftOrderUpdate_order_lines_variant_product {
- __typename: "Product";
- id: string;
- isAvailableForPurchase: boolean | null;
- isPublished: boolean;
-}
-
export interface OrderDraftUpdate_draftOrderUpdate_order_lines_variant {
__typename: "ProductVariant";
id: string;
- product: OrderDraftUpdate_draftOrderUpdate_order_lines_variant_product;
quantityAvailable: number;
}
@@ -304,6 +288,14 @@ export interface OrderDraftUpdate_draftOrderUpdate_order_invoices {
status: JobStatusEnum;
}
+export interface OrderDraftUpdate_draftOrderUpdate_order_channel {
+ __typename: "Channel";
+ isActive: boolean;
+ id: string;
+ name: string;
+ currencyCode: string;
+}
+
export interface OrderDraftUpdate_draftOrderUpdate_order {
__typename: "Order";
id: string;
@@ -333,6 +325,7 @@ export interface OrderDraftUpdate_draftOrderUpdate_order {
availableShippingMethods: (OrderDraftUpdate_draftOrderUpdate_order_availableShippingMethods | null)[] | null;
discount: OrderDraftUpdate_draftOrderUpdate_order_discount | null;
invoices: (OrderDraftUpdate_draftOrderUpdate_order_invoices | null)[] | null;
+ channel: OrderDraftUpdate_draftOrderUpdate_order_channel;
}
export interface OrderDraftUpdate_draftOrderUpdate {
diff --git a/src/orders/types/OrderFulfillmentCancel.ts b/src/orders/types/OrderFulfillmentCancel.ts
index 4948102da..94c1149dc 100644
--- a/src/orders/types/OrderFulfillmentCancel.ts
+++ b/src/orders/types/OrderFulfillmentCancel.ts
@@ -68,17 +68,9 @@ export interface OrderFulfillmentCancel_orderFulfillmentCancel_order_events {
user: OrderFulfillmentCancel_orderFulfillmentCancel_order_events_user | null;
}
-export interface OrderFulfillmentCancel_orderFulfillmentCancel_order_fulfillments_lines_orderLine_variant_product {
- __typename: "Product";
- id: string;
- isAvailableForPurchase: boolean | null;
- isPublished: boolean;
-}
-
export interface OrderFulfillmentCancel_orderFulfillmentCancel_order_fulfillments_lines_orderLine_variant {
__typename: "ProductVariant";
id: string;
- product: OrderFulfillmentCancel_orderFulfillmentCancel_order_fulfillments_lines_orderLine_variant_product;
quantityAvailable: number;
}
@@ -141,17 +133,9 @@ export interface OrderFulfillmentCancel_orderFulfillmentCancel_order_fulfillment
warehouse: OrderFulfillmentCancel_orderFulfillmentCancel_order_fulfillments_warehouse | null;
}
-export interface OrderFulfillmentCancel_orderFulfillmentCancel_order_lines_variant_product {
- __typename: "Product";
- id: string;
- isAvailableForPurchase: boolean | null;
- isPublished: boolean;
-}
-
export interface OrderFulfillmentCancel_orderFulfillmentCancel_order_lines_variant {
__typename: "ProductVariant";
id: string;
- product: OrderFulfillmentCancel_orderFulfillmentCancel_order_lines_variant_product;
quantityAvailable: number;
}
@@ -304,6 +288,14 @@ export interface OrderFulfillmentCancel_orderFulfillmentCancel_order_invoices {
status: JobStatusEnum;
}
+export interface OrderFulfillmentCancel_orderFulfillmentCancel_order_channel {
+ __typename: "Channel";
+ isActive: boolean;
+ id: string;
+ name: string;
+ currencyCode: string;
+}
+
export interface OrderFulfillmentCancel_orderFulfillmentCancel_order {
__typename: "Order";
id: string;
@@ -333,6 +325,7 @@ export interface OrderFulfillmentCancel_orderFulfillmentCancel_order {
availableShippingMethods: (OrderFulfillmentCancel_orderFulfillmentCancel_order_availableShippingMethods | null)[] | null;
discount: OrderFulfillmentCancel_orderFulfillmentCancel_order_discount | null;
invoices: (OrderFulfillmentCancel_orderFulfillmentCancel_order_invoices | null)[] | null;
+ channel: OrderFulfillmentCancel_orderFulfillmentCancel_order_channel;
}
export interface OrderFulfillmentCancel_orderFulfillmentCancel {
diff --git a/src/orders/types/OrderFulfillmentUpdateTracking.ts b/src/orders/types/OrderFulfillmentUpdateTracking.ts
index 98cbff6ed..7111f736e 100644
--- a/src/orders/types/OrderFulfillmentUpdateTracking.ts
+++ b/src/orders/types/OrderFulfillmentUpdateTracking.ts
@@ -68,17 +68,9 @@ export interface OrderFulfillmentUpdateTracking_orderFulfillmentUpdateTracking_o
user: OrderFulfillmentUpdateTracking_orderFulfillmentUpdateTracking_order_events_user | null;
}
-export interface OrderFulfillmentUpdateTracking_orderFulfillmentUpdateTracking_order_fulfillments_lines_orderLine_variant_product {
- __typename: "Product";
- id: string;
- isAvailableForPurchase: boolean | null;
- isPublished: boolean;
-}
-
export interface OrderFulfillmentUpdateTracking_orderFulfillmentUpdateTracking_order_fulfillments_lines_orderLine_variant {
__typename: "ProductVariant";
id: string;
- product: OrderFulfillmentUpdateTracking_orderFulfillmentUpdateTracking_order_fulfillments_lines_orderLine_variant_product;
quantityAvailable: number;
}
@@ -141,17 +133,9 @@ export interface OrderFulfillmentUpdateTracking_orderFulfillmentUpdateTracking_o
warehouse: OrderFulfillmentUpdateTracking_orderFulfillmentUpdateTracking_order_fulfillments_warehouse | null;
}
-export interface OrderFulfillmentUpdateTracking_orderFulfillmentUpdateTracking_order_lines_variant_product {
- __typename: "Product";
- id: string;
- isAvailableForPurchase: boolean | null;
- isPublished: boolean;
-}
-
export interface OrderFulfillmentUpdateTracking_orderFulfillmentUpdateTracking_order_lines_variant {
__typename: "ProductVariant";
id: string;
- product: OrderFulfillmentUpdateTracking_orderFulfillmentUpdateTracking_order_lines_variant_product;
quantityAvailable: number;
}
@@ -304,6 +288,14 @@ export interface OrderFulfillmentUpdateTracking_orderFulfillmentUpdateTracking_o
status: JobStatusEnum;
}
+export interface OrderFulfillmentUpdateTracking_orderFulfillmentUpdateTracking_order_channel {
+ __typename: "Channel";
+ isActive: boolean;
+ id: string;
+ name: string;
+ currencyCode: string;
+}
+
export interface OrderFulfillmentUpdateTracking_orderFulfillmentUpdateTracking_order {
__typename: "Order";
id: string;
@@ -333,6 +325,7 @@ export interface OrderFulfillmentUpdateTracking_orderFulfillmentUpdateTracking_o
availableShippingMethods: (OrderFulfillmentUpdateTracking_orderFulfillmentUpdateTracking_order_availableShippingMethods | null)[] | null;
discount: OrderFulfillmentUpdateTracking_orderFulfillmentUpdateTracking_order_discount | null;
invoices: (OrderFulfillmentUpdateTracking_orderFulfillmentUpdateTracking_order_invoices | null)[] | null;
+ channel: OrderFulfillmentUpdateTracking_orderFulfillmentUpdateTracking_order_channel;
}
export interface OrderFulfillmentUpdateTracking_orderFulfillmentUpdateTracking {
diff --git a/src/orders/types/OrderLineDelete.ts b/src/orders/types/OrderLineDelete.ts
index 9fce897f0..97208fb37 100644
--- a/src/orders/types/OrderLineDelete.ts
+++ b/src/orders/types/OrderLineDelete.ts
@@ -68,17 +68,9 @@ export interface OrderLineDelete_draftOrderLineDelete_order_events {
user: OrderLineDelete_draftOrderLineDelete_order_events_user | null;
}
-export interface OrderLineDelete_draftOrderLineDelete_order_fulfillments_lines_orderLine_variant_product {
- __typename: "Product";
- id: string;
- isAvailableForPurchase: boolean | null;
- isPublished: boolean;
-}
-
export interface OrderLineDelete_draftOrderLineDelete_order_fulfillments_lines_orderLine_variant {
__typename: "ProductVariant";
id: string;
- product: OrderLineDelete_draftOrderLineDelete_order_fulfillments_lines_orderLine_variant_product;
quantityAvailable: number;
}
@@ -141,17 +133,9 @@ export interface OrderLineDelete_draftOrderLineDelete_order_fulfillments {
warehouse: OrderLineDelete_draftOrderLineDelete_order_fulfillments_warehouse | null;
}
-export interface OrderLineDelete_draftOrderLineDelete_order_lines_variant_product {
- __typename: "Product";
- id: string;
- isAvailableForPurchase: boolean | null;
- isPublished: boolean;
-}
-
export interface OrderLineDelete_draftOrderLineDelete_order_lines_variant {
__typename: "ProductVariant";
id: string;
- product: OrderLineDelete_draftOrderLineDelete_order_lines_variant_product;
quantityAvailable: number;
}
@@ -304,6 +288,14 @@ export interface OrderLineDelete_draftOrderLineDelete_order_invoices {
status: JobStatusEnum;
}
+export interface OrderLineDelete_draftOrderLineDelete_order_channel {
+ __typename: "Channel";
+ isActive: boolean;
+ id: string;
+ name: string;
+ currencyCode: string;
+}
+
export interface OrderLineDelete_draftOrderLineDelete_order {
__typename: "Order";
id: string;
@@ -333,6 +325,7 @@ export interface OrderLineDelete_draftOrderLineDelete_order {
availableShippingMethods: (OrderLineDelete_draftOrderLineDelete_order_availableShippingMethods | null)[] | null;
discount: OrderLineDelete_draftOrderLineDelete_order_discount | null;
invoices: (OrderLineDelete_draftOrderLineDelete_order_invoices | null)[] | null;
+ channel: OrderLineDelete_draftOrderLineDelete_order_channel;
}
export interface OrderLineDelete_draftOrderLineDelete {
diff --git a/src/orders/types/OrderLineUpdate.ts b/src/orders/types/OrderLineUpdate.ts
index 61abff145..d10573fcb 100644
--- a/src/orders/types/OrderLineUpdate.ts
+++ b/src/orders/types/OrderLineUpdate.ts
@@ -68,17 +68,9 @@ export interface OrderLineUpdate_draftOrderLineUpdate_order_events {
user: OrderLineUpdate_draftOrderLineUpdate_order_events_user | null;
}
-export interface OrderLineUpdate_draftOrderLineUpdate_order_fulfillments_lines_orderLine_variant_product {
- __typename: "Product";
- id: string;
- isAvailableForPurchase: boolean | null;
- isPublished: boolean;
-}
-
export interface OrderLineUpdate_draftOrderLineUpdate_order_fulfillments_lines_orderLine_variant {
__typename: "ProductVariant";
id: string;
- product: OrderLineUpdate_draftOrderLineUpdate_order_fulfillments_lines_orderLine_variant_product;
quantityAvailable: number;
}
@@ -141,17 +133,9 @@ export interface OrderLineUpdate_draftOrderLineUpdate_order_fulfillments {
warehouse: OrderLineUpdate_draftOrderLineUpdate_order_fulfillments_warehouse | null;
}
-export interface OrderLineUpdate_draftOrderLineUpdate_order_lines_variant_product {
- __typename: "Product";
- id: string;
- isAvailableForPurchase: boolean | null;
- isPublished: boolean;
-}
-
export interface OrderLineUpdate_draftOrderLineUpdate_order_lines_variant {
__typename: "ProductVariant";
id: string;
- product: OrderLineUpdate_draftOrderLineUpdate_order_lines_variant_product;
quantityAvailable: number;
}
@@ -304,6 +288,14 @@ export interface OrderLineUpdate_draftOrderLineUpdate_order_invoices {
status: JobStatusEnum;
}
+export interface OrderLineUpdate_draftOrderLineUpdate_order_channel {
+ __typename: "Channel";
+ isActive: boolean;
+ id: string;
+ name: string;
+ currencyCode: string;
+}
+
export interface OrderLineUpdate_draftOrderLineUpdate_order {
__typename: "Order";
id: string;
@@ -333,6 +325,7 @@ export interface OrderLineUpdate_draftOrderLineUpdate_order {
availableShippingMethods: (OrderLineUpdate_draftOrderLineUpdate_order_availableShippingMethods | null)[] | null;
discount: OrderLineUpdate_draftOrderLineUpdate_order_discount | null;
invoices: (OrderLineUpdate_draftOrderLineUpdate_order_invoices | null)[] | null;
+ channel: OrderLineUpdate_draftOrderLineUpdate_order_channel;
}
export interface OrderLineUpdate_draftOrderLineUpdate {
diff --git a/src/orders/types/OrderLinesAdd.ts b/src/orders/types/OrderLinesAdd.ts
index 43d71a9be..ae3e7284b 100644
--- a/src/orders/types/OrderLinesAdd.ts
+++ b/src/orders/types/OrderLinesAdd.ts
@@ -68,17 +68,9 @@ export interface OrderLinesAdd_draftOrderLinesCreate_order_events {
user: OrderLinesAdd_draftOrderLinesCreate_order_events_user | null;
}
-export interface OrderLinesAdd_draftOrderLinesCreate_order_fulfillments_lines_orderLine_variant_product {
- __typename: "Product";
- id: string;
- isAvailableForPurchase: boolean | null;
- isPublished: boolean;
-}
-
export interface OrderLinesAdd_draftOrderLinesCreate_order_fulfillments_lines_orderLine_variant {
__typename: "ProductVariant";
id: string;
- product: OrderLinesAdd_draftOrderLinesCreate_order_fulfillments_lines_orderLine_variant_product;
quantityAvailable: number;
}
@@ -141,17 +133,9 @@ export interface OrderLinesAdd_draftOrderLinesCreate_order_fulfillments {
warehouse: OrderLinesAdd_draftOrderLinesCreate_order_fulfillments_warehouse | null;
}
-export interface OrderLinesAdd_draftOrderLinesCreate_order_lines_variant_product {
- __typename: "Product";
- id: string;
- isAvailableForPurchase: boolean | null;
- isPublished: boolean;
-}
-
export interface OrderLinesAdd_draftOrderLinesCreate_order_lines_variant {
__typename: "ProductVariant";
id: string;
- product: OrderLinesAdd_draftOrderLinesCreate_order_lines_variant_product;
quantityAvailable: number;
}
@@ -304,6 +288,14 @@ export interface OrderLinesAdd_draftOrderLinesCreate_order_invoices {
status: JobStatusEnum;
}
+export interface OrderLinesAdd_draftOrderLinesCreate_order_channel {
+ __typename: "Channel";
+ isActive: boolean;
+ id: string;
+ name: string;
+ currencyCode: string;
+}
+
export interface OrderLinesAdd_draftOrderLinesCreate_order {
__typename: "Order";
id: string;
@@ -333,6 +325,7 @@ export interface OrderLinesAdd_draftOrderLinesCreate_order {
availableShippingMethods: (OrderLinesAdd_draftOrderLinesCreate_order_availableShippingMethods | null)[] | null;
discount: OrderLinesAdd_draftOrderLinesCreate_order_discount | null;
invoices: (OrderLinesAdd_draftOrderLinesCreate_order_invoices | null)[] | null;
+ channel: OrderLinesAdd_draftOrderLinesCreate_order_channel;
}
export interface OrderLinesAdd_draftOrderLinesCreate {
diff --git a/src/orders/types/OrderMarkAsPaid.ts b/src/orders/types/OrderMarkAsPaid.ts
index d1c6eec57..d5caa14ba 100644
--- a/src/orders/types/OrderMarkAsPaid.ts
+++ b/src/orders/types/OrderMarkAsPaid.ts
@@ -68,17 +68,9 @@ export interface OrderMarkAsPaid_orderMarkAsPaid_order_events {
user: OrderMarkAsPaid_orderMarkAsPaid_order_events_user | null;
}
-export interface OrderMarkAsPaid_orderMarkAsPaid_order_fulfillments_lines_orderLine_variant_product {
- __typename: "Product";
- id: string;
- isAvailableForPurchase: boolean | null;
- isPublished: boolean;
-}
-
export interface OrderMarkAsPaid_orderMarkAsPaid_order_fulfillments_lines_orderLine_variant {
__typename: "ProductVariant";
id: string;
- product: OrderMarkAsPaid_orderMarkAsPaid_order_fulfillments_lines_orderLine_variant_product;
quantityAvailable: number;
}
@@ -141,17 +133,9 @@ export interface OrderMarkAsPaid_orderMarkAsPaid_order_fulfillments {
warehouse: OrderMarkAsPaid_orderMarkAsPaid_order_fulfillments_warehouse | null;
}
-export interface OrderMarkAsPaid_orderMarkAsPaid_order_lines_variant_product {
- __typename: "Product";
- id: string;
- isAvailableForPurchase: boolean | null;
- isPublished: boolean;
-}
-
export interface OrderMarkAsPaid_orderMarkAsPaid_order_lines_variant {
__typename: "ProductVariant";
id: string;
- product: OrderMarkAsPaid_orderMarkAsPaid_order_lines_variant_product;
quantityAvailable: number;
}
@@ -304,6 +288,14 @@ export interface OrderMarkAsPaid_orderMarkAsPaid_order_invoices {
status: JobStatusEnum;
}
+export interface OrderMarkAsPaid_orderMarkAsPaid_order_channel {
+ __typename: "Channel";
+ isActive: boolean;
+ id: string;
+ name: string;
+ currencyCode: string;
+}
+
export interface OrderMarkAsPaid_orderMarkAsPaid_order {
__typename: "Order";
id: string;
@@ -333,6 +325,7 @@ export interface OrderMarkAsPaid_orderMarkAsPaid_order {
availableShippingMethods: (OrderMarkAsPaid_orderMarkAsPaid_order_availableShippingMethods | null)[] | null;
discount: OrderMarkAsPaid_orderMarkAsPaid_order_discount | null;
invoices: (OrderMarkAsPaid_orderMarkAsPaid_order_invoices | null)[] | null;
+ channel: OrderMarkAsPaid_orderMarkAsPaid_order_channel;
}
export interface OrderMarkAsPaid_orderMarkAsPaid {
diff --git a/src/orders/types/OrderRefund.ts b/src/orders/types/OrderRefund.ts
index 44bc188cb..515ff4984 100644
--- a/src/orders/types/OrderRefund.ts
+++ b/src/orders/types/OrderRefund.ts
@@ -68,17 +68,9 @@ export interface OrderRefund_orderRefund_order_events {
user: OrderRefund_orderRefund_order_events_user | null;
}
-export interface OrderRefund_orderRefund_order_fulfillments_lines_orderLine_variant_product {
- __typename: "Product";
- id: string;
- isAvailableForPurchase: boolean | null;
- isPublished: boolean;
-}
-
export interface OrderRefund_orderRefund_order_fulfillments_lines_orderLine_variant {
__typename: "ProductVariant";
id: string;
- product: OrderRefund_orderRefund_order_fulfillments_lines_orderLine_variant_product;
quantityAvailable: number;
}
@@ -141,17 +133,9 @@ export interface OrderRefund_orderRefund_order_fulfillments {
warehouse: OrderRefund_orderRefund_order_fulfillments_warehouse | null;
}
-export interface OrderRefund_orderRefund_order_lines_variant_product {
- __typename: "Product";
- id: string;
- isAvailableForPurchase: boolean | null;
- isPublished: boolean;
-}
-
export interface OrderRefund_orderRefund_order_lines_variant {
__typename: "ProductVariant";
id: string;
- product: OrderRefund_orderRefund_order_lines_variant_product;
quantityAvailable: number;
}
@@ -304,6 +288,14 @@ export interface OrderRefund_orderRefund_order_invoices {
status: JobStatusEnum;
}
+export interface OrderRefund_orderRefund_order_channel {
+ __typename: "Channel";
+ isActive: boolean;
+ id: string;
+ name: string;
+ currencyCode: string;
+}
+
export interface OrderRefund_orderRefund_order {
__typename: "Order";
id: string;
@@ -333,6 +325,7 @@ export interface OrderRefund_orderRefund_order {
availableShippingMethods: (OrderRefund_orderRefund_order_availableShippingMethods | null)[] | null;
discount: OrderRefund_orderRefund_order_discount | null;
invoices: (OrderRefund_orderRefund_order_invoices | null)[] | null;
+ channel: OrderRefund_orderRefund_order_channel;
}
export interface OrderRefund_orderRefund {
diff --git a/src/orders/types/OrderUpdate.ts b/src/orders/types/OrderUpdate.ts
index e924dac73..f71308c29 100644
--- a/src/orders/types/OrderUpdate.ts
+++ b/src/orders/types/OrderUpdate.ts
@@ -68,17 +68,9 @@ export interface OrderUpdate_orderUpdate_order_events {
user: OrderUpdate_orderUpdate_order_events_user | null;
}
-export interface OrderUpdate_orderUpdate_order_fulfillments_lines_orderLine_variant_product {
- __typename: "Product";
- id: string;
- isAvailableForPurchase: boolean | null;
- isPublished: boolean;
-}
-
export interface OrderUpdate_orderUpdate_order_fulfillments_lines_orderLine_variant {
__typename: "ProductVariant";
id: string;
- product: OrderUpdate_orderUpdate_order_fulfillments_lines_orderLine_variant_product;
quantityAvailable: number;
}
@@ -141,17 +133,9 @@ export interface OrderUpdate_orderUpdate_order_fulfillments {
warehouse: OrderUpdate_orderUpdate_order_fulfillments_warehouse | null;
}
-export interface OrderUpdate_orderUpdate_order_lines_variant_product {
- __typename: "Product";
- id: string;
- isAvailableForPurchase: boolean | null;
- isPublished: boolean;
-}
-
export interface OrderUpdate_orderUpdate_order_lines_variant {
__typename: "ProductVariant";
id: string;
- product: OrderUpdate_orderUpdate_order_lines_variant_product;
quantityAvailable: number;
}
@@ -304,6 +288,14 @@ export interface OrderUpdate_orderUpdate_order_invoices {
status: JobStatusEnum;
}
+export interface OrderUpdate_orderUpdate_order_channel {
+ __typename: "Channel";
+ isActive: boolean;
+ id: string;
+ name: string;
+ currencyCode: string;
+}
+
export interface OrderUpdate_orderUpdate_order {
__typename: "Order";
id: string;
@@ -333,6 +325,7 @@ export interface OrderUpdate_orderUpdate_order {
availableShippingMethods: (OrderUpdate_orderUpdate_order_availableShippingMethods | null)[] | null;
discount: OrderUpdate_orderUpdate_order_discount | null;
invoices: (OrderUpdate_orderUpdate_order_invoices | null)[] | null;
+ channel: OrderUpdate_orderUpdate_order_channel;
}
export interface OrderUpdate_orderUpdate {
diff --git a/src/orders/types/OrderVoid.ts b/src/orders/types/OrderVoid.ts
index 3a60d9c27..f36614923 100644
--- a/src/orders/types/OrderVoid.ts
+++ b/src/orders/types/OrderVoid.ts
@@ -68,17 +68,9 @@ export interface OrderVoid_orderVoid_order_events {
user: OrderVoid_orderVoid_order_events_user | null;
}
-export interface OrderVoid_orderVoid_order_fulfillments_lines_orderLine_variant_product {
- __typename: "Product";
- id: string;
- isAvailableForPurchase: boolean | null;
- isPublished: boolean;
-}
-
export interface OrderVoid_orderVoid_order_fulfillments_lines_orderLine_variant {
__typename: "ProductVariant";
id: string;
- product: OrderVoid_orderVoid_order_fulfillments_lines_orderLine_variant_product;
quantityAvailable: number;
}
@@ -141,17 +133,9 @@ export interface OrderVoid_orderVoid_order_fulfillments {
warehouse: OrderVoid_orderVoid_order_fulfillments_warehouse | null;
}
-export interface OrderVoid_orderVoid_order_lines_variant_product {
- __typename: "Product";
- id: string;
- isAvailableForPurchase: boolean | null;
- isPublished: boolean;
-}
-
export interface OrderVoid_orderVoid_order_lines_variant {
__typename: "ProductVariant";
id: string;
- product: OrderVoid_orderVoid_order_lines_variant_product;
quantityAvailable: number;
}
@@ -304,6 +288,14 @@ export interface OrderVoid_orderVoid_order_invoices {
status: JobStatusEnum;
}
+export interface OrderVoid_orderVoid_order_channel {
+ __typename: "Channel";
+ isActive: boolean;
+ id: string;
+ name: string;
+ currencyCode: string;
+}
+
export interface OrderVoid_orderVoid_order {
__typename: "Order";
id: string;
@@ -333,6 +325,7 @@ export interface OrderVoid_orderVoid_order {
availableShippingMethods: (OrderVoid_orderVoid_order_availableShippingMethods | null)[] | null;
discount: OrderVoid_orderVoid_order_discount | null;
invoices: (OrderVoid_orderVoid_order_invoices | null)[] | null;
+ channel: OrderVoid_orderVoid_order_channel;
}
export interface OrderVoid_orderVoid {
diff --git a/src/orders/types/SearchOrderVariant.ts b/src/orders/types/SearchOrderVariant.ts
index 5934b1625..8cad833fb 100644
--- a/src/orders/types/SearchOrderVariant.ts
+++ b/src/orders/types/SearchOrderVariant.ts
@@ -11,20 +11,24 @@ export interface SearchOrderVariant_search_edges_node_thumbnail {
url: string;
}
-export interface SearchOrderVariant_search_edges_node_variants_pricing_priceUndiscounted_net {
+export interface SearchOrderVariant_search_edges_node_variants_channelListings_channel {
+ __typename: "Channel";
+ id: string;
+ isActive: boolean;
+ name: string;
+ currencyCode: string;
+}
+
+export interface SearchOrderVariant_search_edges_node_variants_channelListings_price {
__typename: "Money";
amount: number;
currency: string;
}
-export interface SearchOrderVariant_search_edges_node_variants_pricing_priceUndiscounted {
- __typename: "TaxedMoney";
- net: SearchOrderVariant_search_edges_node_variants_pricing_priceUndiscounted_net;
-}
-
-export interface SearchOrderVariant_search_edges_node_variants_pricing {
- __typename: "VariantPricingInfo";
- priceUndiscounted: SearchOrderVariant_search_edges_node_variants_pricing_priceUndiscounted | null;
+export interface SearchOrderVariant_search_edges_node_variants_channelListings {
+ __typename: "ProductVariantChannelListing";
+ channel: SearchOrderVariant_search_edges_node_variants_channelListings_channel;
+ price: SearchOrderVariant_search_edges_node_variants_channelListings_price | null;
}
export interface SearchOrderVariant_search_edges_node_variants {
@@ -32,7 +36,7 @@ export interface SearchOrderVariant_search_edges_node_variants {
id: string;
name: string;
sku: string;
- pricing: SearchOrderVariant_search_edges_node_variants_pricing | null;
+ channelListings: SearchOrderVariant_search_edges_node_variants_channelListings[] | null;
}
export interface SearchOrderVariant_search_edges_node {
diff --git a/src/orders/urls.ts b/src/orders/urls.ts
index 0efa7ffde..745a43582 100644
--- a/src/orders/urls.ts
+++ b/src/orders/urls.ts
@@ -28,7 +28,7 @@ export enum OrderListUrlFiltersWithMultipleValuesEnum {
}
export type OrderListUrlFilters = Filters &
FiltersWithMultipleValues;
-export type OrderListUrlDialog = "cancel" | TabActionDialog;
+export type OrderListUrlDialog = "cancel" | "settings" | TabActionDialog;
export enum OrderListUrlSortField {
number = "number",
customer = "customer",
@@ -61,7 +61,7 @@ export enum OrderDraftListUrlFiltersEnum {
query = "query"
}
export type OrderDraftListUrlFilters = Filters;
-export type OrderDraftListUrlDialog = "remove" | TabActionDialog;
+export type OrderDraftListUrlDialog = "remove" | "settings" | TabActionDialog;
export enum OrderDraftListUrlSortField {
number = "number",
customer = "customer",
diff --git a/src/orders/views/OrderDetails/index.tsx b/src/orders/views/OrderDetails/index.tsx
index 4d843b793..8d03bc4c7 100644
--- a/src/orders/views/OrderDetails/index.tsx
+++ b/src/orders/views/OrderDetails/index.tsx
@@ -62,6 +62,7 @@ interface OrderDetailsProps {
export const OrderDetails: React.FC = ({ id, params }) => {
const navigate = useNavigator();
const { user } = useUser();
+
const {
loadMore: loadMoreCustomers,
search: searchUsers,
@@ -102,7 +103,6 @@ export const OrderDetails: React.FC = ({ id, params }) => {
{({ data, loading }) => {
const order = data?.order;
-
if (order === null) {
return ;
}
@@ -561,6 +561,7 @@ export const OrderDetails: React.FC = ({ id, params }) => {
products={variantSearchOpts.data?.search.edges.map(
edge => edge.node
)}
+ selectedChannel={order?.channel?.id}
onClose={closeModal}
onFetch={variantSearch}
onFetchMore={loadMore}
diff --git a/src/orders/views/OrderDraftList/OrderDraftList.tsx b/src/orders/views/OrderDraftList/OrderDraftList.tsx
index a44b38f25..73b37503a 100644
--- a/src/orders/views/OrderDraftList/OrderDraftList.tsx
+++ b/src/orders/views/OrderDraftList/OrderDraftList.tsx
@@ -1,19 +1,20 @@
import DialogContentText from "@material-ui/core/DialogContentText";
import IconButton from "@material-ui/core/IconButton";
import DeleteIcon from "@material-ui/icons/Delete";
+import ChannelSettingsDialog from "@saleor/channels/components/ChannelSettingsDialog";
import ActionDialog from "@saleor/components/ActionDialog";
import DeleteFilterTabDialog from "@saleor/components/DeleteFilterTabDialog";
import SaveFilterTabDialog, {
SaveFilterTabDialogFormData
} from "@saleor/components/SaveFilterTabDialog";
import useBulkActions from "@saleor/hooks/useBulkActions";
+import useChannelsSettings from "@saleor/hooks/useChannelsSettings";
import useListSettings from "@saleor/hooks/useListSettings";
import useNavigator from "@saleor/hooks/useNavigator";
import useNotifier from "@saleor/hooks/useNotifier";
import usePaginator, {
createPaginationState
} from "@saleor/hooks/usePaginator";
-import useShop from "@saleor/hooks/useShop";
import { maybe } from "@saleor/misc";
import { ListViews } from "@saleor/types";
import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
@@ -64,7 +65,6 @@ export const OrderDraftList: React.FC = ({ params }) => {
ListViews.DRAFT_LIST
);
const intl = useIntl();
- const shop = useShop();
const handleCreateOrderCreateSuccess = (data: OrderDraftCreate) => {
notify({
@@ -106,6 +106,12 @@ export const OrderDraftList: React.FC = ({ params }) => {
OrderDraftListUrlQueryParams
>(navigate, orderDraftListUrl, params);
+ const {
+ channelChoices,
+ handleChannelSelectConfirm,
+ selectedChannel
+ } = useChannelsSettings("ordersDraftListChannel", { closeModal, openModal });
+
const handleTabChange = (tab: number) => {
reset();
navigate(
@@ -162,103 +168,126 @@ export const OrderDraftList: React.FC = ({ params }) => {
};
const handleSort = createSortHandler(navigate, orderDraftListUrl, params);
- const currencySymbol = maybe(() => shop.defaultCurrency, "USD");
return (
-
- {(orderDraftBulkDelete, orderDraftBulkDeleteOpts) => {
- const onOrderDraftBulkDelete = () =>
- orderDraftBulkDelete({
- variables: {
- ids: params.ids
- }
- });
-
- return (
- <>
- openModal("delete-search")}
- onTabSave={() => openModal("save-search")}
- tabs={tabs.map(tab => tab.name)}
- disabled={loading}
- settings={settings}
- orders={maybe(() =>
- data.draftOrders.edges.map(edge => edge.node)
- )}
- pageInfo={pageInfo}
- onAdd={createOrder}
- onNextPage={loadNextPage}
- onPreviousPage={loadPreviousPage}
- onRowClick={id => () => navigate(orderUrl(id))}
- onSort={handleSort}
- onUpdateListSettings={updateListSettings}
- isChecked={isSelected}
- selected={listElements.length}
- sort={getSortParams(params)}
- toggle={toggle}
- toggleAll={toggleAll}
- toolbar={
-
- openModal("remove", {
- ids: listElements
- })
- }
- >
-
-
+ <>
+ {!!channelChoices?.length && (
+
+ )}
+
+ {(orderDraftBulkDelete, orderDraftBulkDeleteOpts) => {
+ const onOrderDraftBulkDelete = () =>
+ orderDraftBulkDelete({
+ variables: {
+ ids: params.ids
}
- />
-
-
- params.ids.length),
- displayQuantity: (
- {maybe(() => params.ids.length)}
- )
- }}
- />
-
-
-
- tabs[currentTab - 1].name, "...")}
- />
-
- );
- }}
-
+ });
+
+ return (
+ <>
+ openModal("delete-search")}
+ onTabSave={() => openModal("save-search")}
+ tabs={tabs.map(tab => tab.name)}
+ disabled={loading}
+ settings={settings}
+ orders={maybe(() =>
+ data.draftOrders.edges.map(edge => edge.node)
+ )}
+ pageInfo={pageInfo}
+ onAdd={() =>
+ createOrder({
+ variables: {
+ input: { channel: selectedChannel }
+ }
+ })
+ }
+ onNextPage={loadNextPage}
+ onPreviousPage={loadPreviousPage}
+ onRowClick={id => () => navigate(orderUrl(id))}
+ onSort={handleSort}
+ onUpdateListSettings={updateListSettings}
+ isChecked={isSelected}
+ selected={listElements.length}
+ sort={getSortParams(params)}
+ toggle={toggle}
+ toggleAll={toggleAll}
+ toolbar={
+
+ openModal("remove", {
+ ids: listElements
+ })
+ }
+ >
+
+
+ }
+ onSettingsOpen={
+ !!channelChoices?.length
+ ? () => openModal("settings")
+ : undefined
+ }
+ />
+
+
+ params.ids.length),
+ displayQuantity: (
+ {maybe(() => params.ids.length)}
+ )
+ }}
+ />
+
+
+
+ tabs[currentTab - 1].name, "...")}
+ />
+
+ );
+ }}
+
+
);
};
diff --git a/src/orders/views/OrderDraftList/sort.ts b/src/orders/views/OrderDraftList/sort.ts
index 961bd6b87..faca9d620 100644
--- a/src/orders/views/OrderDraftList/sort.ts
+++ b/src/orders/views/OrderDraftList/sort.ts
@@ -12,8 +12,6 @@ export function getSortQueryField(
return OrderSortField.CREATION_DATE;
case OrderDraftListUrlSortField.customer:
return OrderSortField.CUSTOMER;
- case OrderDraftListUrlSortField.total:
- return OrderSortField.TOTAL;
default:
return undefined;
}
diff --git a/src/orders/views/OrderList/OrderList.tsx b/src/orders/views/OrderList/OrderList.tsx
index 04227b950..88a4b1e7b 100644
--- a/src/orders/views/OrderList/OrderList.tsx
+++ b/src/orders/views/OrderList/OrderList.tsx
@@ -1,14 +1,15 @@
+import ChannelSettingsDialog from "@saleor/channels/components/ChannelSettingsDialog";
import DeleteFilterTabDialog from "@saleor/components/DeleteFilterTabDialog";
import SaveFilterTabDialog, {
SaveFilterTabDialogFormData
} from "@saleor/components/SaveFilterTabDialog";
+import useChannelsSettings from "@saleor/hooks/useChannelsSettings";
import useListSettings from "@saleor/hooks/useListSettings";
import useNavigator from "@saleor/hooks/useNavigator";
import useNotifier from "@saleor/hooks/useNotifier";
import usePaginator, {
createPaginationState
} from "@saleor/hooks/usePaginator";
-import useShop from "@saleor/hooks/useShop";
import { getStringOrPlaceholder, maybe } from "@saleor/misc";
import { ListViews } from "@saleor/types";
import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
@@ -48,7 +49,6 @@ export const OrderList: React.FC = ({ params }) => {
const navigate = useNavigator();
const notify = useNotifier();
const paginate = usePaginator();
- const shop = useShop();
const { updateListSettings, settings } = useListSettings(
ListViews.ORDER_LIST
);
@@ -93,6 +93,12 @@ export const OrderList: React.FC = ({ params }) => {
OrderListUrlQueryParams
>(navigate, orderListUrl, params);
+ const {
+ channelChoices,
+ handleChannelSelectConfirm,
+ selectedChannel
+ } = useChannelsSettings("ordersListChannel", { closeModal, openModal });
+
const handleTabChange = (tab: number) =>
navigate(
orderListUrl({
@@ -112,7 +118,6 @@ export const OrderList: React.FC = ({ params }) => {
};
const paginationState = createPaginationState(settings.rowNumber, params);
- const currencySymbol = maybe(() => shop.defaultCurrency, "USD");
const queryVariables = React.useMemo(
() => ({
@@ -137,8 +142,17 @@ export const OrderList: React.FC = ({ params }) => {
return (
<>
+ {!!channelChoices?.length && (
+
+ )}
= ({ params }) => {
orders={maybe(() => data.orders.edges.map(edge => edge.node))}
pageInfo={pageInfo}
sort={getSortParams(params)}
- onAdd={createOrder}
+ onAdd={() =>
+ createOrder({
+ variables: {
+ input: { channel: selectedChannel }
+ }
+ })
+ }
onNextPage={loadNextPage}
onPreviousPage={loadPreviousPage}
onUpdateListSettings={updateListSettings}
@@ -160,6 +180,9 @@ export const OrderList: React.FC = ({ params }) => {
initialSearch={params.query || ""}
tabs={getFilterTabs().map(tab => tab.name)}
onAll={resetFilters}
+ onSettingsOpen={
+ !!channelChoices?.length ? () => openModal("settings") : undefined
+ }
/>
= ({
- currencySymbol,
currentTab,
initialSearch,
filterOpts,
@@ -59,7 +58,6 @@ const PluginsListPage: React.FC = ({
= ({ params }) => {
const navigate = useNavigator();
const paginate = usePaginator();
- const shop = useShop();
const { updateListSettings, settings } = useListSettings(
ListViews.PLUGINS_LIST
);
@@ -114,12 +112,10 @@ export const PluginsList: React.FC = ({ params }) => {
);
const handleSort = createSortHandler(navigate, pluginListUrl, params);
- const currencySymbol = maybe(() => shop.defaultCurrency, "USD");
return (
<>
= ({
- currencySymbol,
currentTab,
filterOpts,
initialSearch,
@@ -73,7 +72,6 @@ const ProductTypeListPage: React.FC = ({
defaultMessage: "All Product Types",
description: "tab name"
})}
- currencySymbol={currencySymbol}
currentTab={currentTab}
filterStructure={structure}
initialSearch={initialSearch}
diff --git a/src/productTypes/views/ProductTypeList/ProductTypeList.tsx b/src/productTypes/views/ProductTypeList/ProductTypeList.tsx
index 359430b49..e308af9ea 100644
--- a/src/productTypes/views/ProductTypeList/ProductTypeList.tsx
+++ b/src/productTypes/views/ProductTypeList/ProductTypeList.tsx
@@ -13,7 +13,6 @@ import useNotifier from "@saleor/hooks/useNotifier";
import usePaginator, {
createPaginationState
} from "@saleor/hooks/usePaginator";
-import useShop from "@saleor/hooks/useShop";
import { commonMessages } from "@saleor/intl";
import { ListViews } from "@saleor/types";
import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
@@ -56,7 +55,6 @@ export const ProductTypeList: React.FC = ({ params }) => {
const navigate = useNavigator();
const notify = useNotifier();
const paginate = usePaginator();
- const shop = useShop();
const { isSelected, listElements, reset, toggle, toggleAll } = useBulkActions(
params.ids
);
@@ -149,7 +147,6 @@ export const ProductTypeList: React.FC = ({ params }) => {
};
const handleSort = createSortHandler(navigate, productTypeListUrl, params);
- const currencySymbol = maybe(() => shop.defaultCurrency, "USD");
return (
= ({ params }) => {
return (
<>
void;
fetchProductTypes: (data: string) => void;
onWarehouseConfigure: () => void;
+ openChannelsModal: () => void;
+ onChannelsChange: (data: ChannelData[]) => void;
onBack?();
onSubmit?(data: ProductCreateData);
}
export const ProductCreatePage: React.FC = ({
- currency,
+ allChannelsCount,
+ channelsErrors,
+ currentChannels,
disabled,
categories: categoryChoiceList,
collections: collectionChoiceList,
@@ -80,10 +87,11 @@ export const ProductCreatePage: React.FC = ({
fetchProductTypes,
weightUnit,
onSubmit,
- onWarehouseConfigure
+ onChannelsChange,
+ onWarehouseConfigure,
+ openChannelsModal
}: ProductCreatePageProps) => {
const intl = useIntl();
- const localizeDate = useDateLocalize();
// Display values
const [selectedCategory, setSelectedCategory] = useStateFromProps(
@@ -118,10 +126,20 @@ export const ProductCreatePage: React.FC = ({
setSelectedCategory={setSelectedCategory}
setSelectedCollections={setSelectedCollections}
setSelectedTaxType={setSelectedTaxType}
+ setChannels={onChannelsChange}
taxTypes={taxTypeChoices}
warehouses={warehouses}
+ currentChannels={currentChannels}
+ productTypeChoiceList={productTypeChoiceList}
>
- {({ change, data, handlers, hasChanged, submit }) => {
+ {({
+ change,
+ data,
+ disabled: formDisabled,
+ handlers,
+ hasChanged,
+ submit
+ }) => {
// Comparing explicitly to false because `hasVariants` can be undefined
const isSimpleProduct = data.productType?.hasVariants === false;
@@ -161,12 +179,11 @@ export const ProductCreatePage: React.FC = ({
onChange={change}
/>
-
= ({
/>
= ({
onCancel={onBack}
onSave={submit}
state={saveButtonBarState}
- disabled={disabled || !onSubmit || !hasChanged}
+ disabled={disabled || !onSubmit || formDisabled || !hasChanged}
/>
);
diff --git a/src/products/components/ProductCreatePage/form.tsx b/src/products/components/ProductCreatePage/form.tsx
index f24971dbf..e803671ae 100644
--- a/src/products/components/ProductCreatePage/form.tsx
+++ b/src/products/components/ProductCreatePage/form.tsx
@@ -1,4 +1,5 @@
import { OutputData } from "@editorjs/editorjs";
+import { ChannelData, ChannelPriceArgs } from "@saleor/channels/utils";
import { MetadataFormData } from "@saleor/components/Metadata";
import { MultiAutocompleteChoiceType } from "@saleor/components/MultiAutocompleteSelectField";
import { RichTextEditorChange } from "@saleor/components/RichTextEditor";
@@ -13,8 +14,15 @@ import {
import {
createAttributeChangeHandler,
createAttributeMultiChangeHandler,
+ createChannelsChangeHandler,
+ createChannelsPriceChangeHandler,
createProductTypeSelectHandler
} from "@saleor/products/utils/handlers";
+import {
+ validateCostPrice,
+ validatePrice
+} from "@saleor/products/utils/validation";
+import { SearchProductTypes_search_edges_node } from "@saleor/searches/types/SearchProductTypes";
import { SearchWarehouses_search_edges_node } from "@saleor/searches/types/SearchWarehouses";
import createMultiAutocompleteSelectHandler from "@saleor/utils/handlers/multiAutocompleteSelectChangeHandler";
import createSingleAutocompleteSelectHandler from "@saleor/utils/handlers/singleAutocompleteSelectChangeHandler";
@@ -22,7 +30,6 @@ import useMetadataChangeTrigger from "@saleor/utils/metadata/useMetadataChangeTr
import useRichText from "@saleor/utils/richText/useRichText";
import React from "react";
-import { SearchProductTypes_search_edges_node } from "../../../searches/types/SearchProductTypes";
import {
ProductAttributeInput,
ProductAttributeInputData
@@ -30,19 +37,16 @@ import {
import { ProductStockInput } from "../ProductStocks";
export interface ProductCreateFormData extends MetadataFormData {
- availableForPurchase: string;
basePrice: number;
category: string;
changeTaxCode: boolean;
+ channelListings: ChannelData[];
chargeTaxes: boolean;
collections: string[];
description: OutputData;
isAvailable: boolean;
- isAvailableForPurchase: boolean;
- isPublished: boolean;
name: string;
productType: ProductType;
- publicationDate: string;
seoDescription: string;
seoTitle: string;
sku: string;
@@ -50,7 +54,6 @@ export interface ProductCreateFormData extends MetadataFormData {
stockQuantity: number;
taxCode: string;
trackInventory: boolean;
- visibleInListings: boolean;
weight: string;
}
export interface ProductCreateData extends ProductCreateFormData {
@@ -71,12 +74,21 @@ interface ProductCreateHandlers
"changeStock" | "selectAttribute" | "selectAttributeMultiple",
FormsetChange
>,
+ Record<"changeChannelPrice", (id: string, data: ChannelPriceArgs) => void>,
+ Record<
+ "changeChannels",
+ (
+ id: string,
+ data: Omit
+ ) => void
+ >,
Record<"addStock" | "deleteStock", (id: string) => void> {
changeDescription: RichTextEditorChange;
}
export interface UseProductCreateFormResult {
change: FormChange;
data: ProductCreateData;
+ disabled: boolean;
handlers: ProductCreateHandlers;
hasChanged: boolean;
submit: () => Promise;
@@ -92,9 +104,12 @@ export interface UseProductCreateFormOpts
React.SetStateAction
>;
setSelectedTaxType: React.Dispatch>;
+ setChannels: (channels: ChannelData[]) => void;
selectedCollections: MultiAutocompleteChoiceType[];
productTypes: SearchProductTypes_search_edges_node[];
warehouses: SearchWarehouses_search_edges_node[];
+ currentChannels: ChannelData[];
+ productTypeChoiceList: SearchProductTypes_search_edges_node[];
}
export interface ProductCreateFormProps extends UseProductCreateFormOpts {
@@ -103,39 +118,35 @@ export interface ProductCreateFormProps extends UseProductCreateFormOpts {
onSubmit: (data: ProductCreateData) => Promise;
}
-const defaultInitialFormData: ProductCreateFormData &
- Record<"productType", string> = {
- availableForPurchase: "",
- basePrice: 0,
- category: "",
- changeTaxCode: false,
- chargeTaxes: false,
- collections: [],
- description: null,
- isAvailable: false,
- isAvailableForPurchase: false,
- isPublished: false,
- metadata: [],
- name: "",
- privateMetadata: [],
- productType: null,
- publicationDate: "",
- seoDescription: "",
- seoTitle: "",
- sku: "",
- slug: "",
- stockQuantity: null,
- taxCode: null,
- trackInventory: false,
- visibleInListings: false,
- weight: ""
-};
-
function useProductCreateForm(
initial: Partial,
onSubmit: (data: ProductCreateData) => Promise,
opts: UseProductCreateFormOpts
): UseProductCreateFormResult {
+ const defaultInitialFormData: ProductCreateFormData &
+ Record<"productType", string> = {
+ basePrice: 0,
+ category: "",
+ changeTaxCode: false,
+ channelListings: opts.currentChannels,
+ chargeTaxes: false,
+ collections: [],
+ description: null,
+ isAvailable: false,
+ metadata: [],
+ name: "",
+ privateMetadata: [],
+ productType: null,
+ seoDescription: "",
+ seoTitle: "",
+ sku: "",
+ slug: "",
+ stockQuantity: null,
+ taxCode: null,
+ trackInventory: false,
+ weight: ""
+ };
+
const initialProductType =
opts.productTypes?.find(
productType => initial?.productType?.id === productType.id
@@ -219,6 +230,16 @@ function useProductCreateForm(
opts.taxTypes
);
const changeMetadata = makeMetadataChangeHandler(handleChange);
+ const handleChannelsChange = createChannelsChangeHandler(
+ opts.currentChannels,
+ opts.setChannels,
+ triggerChange
+ );
+ const handleChannelPriceChange = createChannelsPriceChangeHandler(
+ opts.currentChannels,
+ opts.setChannels,
+ triggerChange
+ );
const getData = (): ProductCreateData => ({
...form.data,
@@ -227,13 +248,29 @@ function useProductCreateForm(
productType,
stocks: stocks.data
});
- const submit = () => onSubmit(getData());
+ const data = getData();
+ const submit = () => onSubmit(data);
+
+ const productTypeChoice = opts.productTypeChoiceList?.find(
+ choice => choice.id === data.productType?.id
+ );
+
+ const disabled =
+ !productTypeChoice?.hasVariants &&
+ (!data.sku ||
+ data.channelListings.some(
+ channel =>
+ validatePrice(channel.price) || validateCostPrice(channel.costPrice)
+ ));
return {
change: handleChange,
- data: getData(),
+ data,
+ disabled,
handlers: {
addStock: handleStockAdd,
+ changeChannelPrice: handleChannelPriceChange,
+ changeChannels: handleChannelsChange,
changeDescription,
changeMetadata,
changeStock: handleStockChange,
diff --git a/src/products/components/ProductExportDialog/ProductExportDialog.stories.tsx b/src/products/components/ProductExportDialog/ProductExportDialog.stories.tsx
index f81aead66..b1e6f3ca1 100644
--- a/src/products/components/ProductExportDialog/ProductExportDialog.stories.tsx
+++ b/src/products/components/ProductExportDialog/ProductExportDialog.stories.tsx
@@ -1,3 +1,4 @@
+import { channelsList } from "@saleor/channels/fixtures";
import Decorator from "@saleor/storybook/Decorator";
import {
ExportErrorCode,
@@ -18,6 +19,7 @@ const props: ProductExportDialogProps = {
id: attr.id,
name: attr.name
})),
+ channels: channelsList,
confirmButtonState: "default",
errors: [],
hasMore: true,
diff --git a/src/products/components/ProductExportDialog/ProductExportDialog.tsx b/src/products/components/ProductExportDialog/ProductExportDialog.tsx
index 5f9581eeb..d5403ea02 100644
--- a/src/products/components/ProductExportDialog/ProductExportDialog.tsx
+++ b/src/products/components/ProductExportDialog/ProductExportDialog.tsx
@@ -4,6 +4,7 @@ import DialogActions from "@material-ui/core/DialogActions";
import DialogContent from "@material-ui/core/DialogContent";
import DialogTitle from "@material-ui/core/DialogTitle";
import Typography from "@material-ui/core/Typography";
+import { Channels_channels } from "@saleor/channels/types/Channels";
import ConfirmButton, {
ConfirmButtonTransitionState
} from "@saleor/components/ConfirmButton";
@@ -66,6 +67,7 @@ function useSteps(): Array> {
const initialForm: ExportProductsInput = {
exportInfo: {
attributes: [],
+ channels: [],
fields: [],
warehouses: []
},
@@ -77,6 +79,7 @@ const ProductExportSteps = makeCreatorSteps();
export interface ProductExportDialogProps extends DialogProps, FetchMoreProps {
attributes: SearchAttributes_search_edges_node[];
+ channels: Channels_channels[];
confirmButtonState: ConfirmButtonTransitionState;
errors: ExportErrorFragment[];
productQuantity: ProductQuantity;
@@ -88,6 +91,7 @@ export interface ProductExportDialogProps extends DialogProps, FetchMoreProps {
const ProductExportDialog: React.FC = ({
attributes,
+ channels,
confirmButtonState,
errors,
productQuantity,
@@ -109,6 +113,7 @@ const ProductExportDialog: React.FC = ({
const [selectedAttributes, setSelectedAttributes] = React.useState<
MultiAutocompleteChoiceType[]
>([]);
+ const [selectedChannels, setSelectedChannels] = React.useState([]);
const { change, data, reset, submit } = useForm(initialForm, onSubmit);
useModalDialogOpen(open, {
@@ -141,6 +146,45 @@ const ProductExportDialog: React.FC = ({
);
};
+ const handleChannelSelect = (option: Channels_channels) => {
+ change({
+ target: {
+ name: "exportInfo",
+ value: {
+ ...data.exportInfo,
+ channels: toggle(
+ option.id,
+ data.exportInfo.channels,
+ (a, b) => a === b
+ )
+ }
+ }
+ });
+ const choice = channels.find(choice => choice.id === option.id);
+
+ setSelectedChannels(
+ toggle(choice, selectedChannels, (a, b) => a.id === b.id)
+ );
+ };
+
+ const handleToggleAllChannels = (
+ items: Channels_channels[],
+ selected: number
+ ) => {
+ setSelectedChannels(selected === items.length ? [] : channels);
+
+ change({
+ target: {
+ name: "exportInfo",
+ value: {
+ ...data.exportInfo,
+ channels:
+ selected === items.length ? [] : channels.map(channel => channel.id)
+ }
+ }
+ });
+ };
+
const handleWarehouseSelect: FormChange = event =>
change({
target: {
@@ -188,12 +232,16 @@ const ProductExportDialog: React.FC = ({
{step === ProductExportStep.INFO && (
diff --git a/src/products/components/ProductExportDialog/ProductExportDialogInfo.tsx b/src/products/components/ProductExportDialog/ProductExportDialogInfo.tsx
index 14535ad01..e317938bf 100644
--- a/src/products/components/ProductExportDialog/ProductExportDialogInfo.tsx
+++ b/src/products/components/ProductExportDialog/ProductExportDialogInfo.tsx
@@ -4,7 +4,9 @@ import FormControlLabel from "@material-ui/core/FormControlLabel";
import makeStyles from "@material-ui/core/styles/makeStyles";
import TextField from "@material-ui/core/TextField";
import Typography from "@material-ui/core/Typography";
+import { Channels_channels } from "@saleor/channels/types/Channels";
import Accordion, { AccordionProps } from "@saleor/components/Accordion";
+import ChannelsAvailabilityContent from "@saleor/components/ChannelsAvailabilityContent";
import Checkbox from "@saleor/components/Checkbox";
import Chip from "@saleor/components/Chip";
import Hr from "@saleor/components/Hr";
@@ -83,6 +85,7 @@ const useStyles = makeStyles(
marginBottom: theme.spacing()
},
optionLabel: {
+ fontSize: 14,
marginLeft: 0
},
quickPeekContainer: {
@@ -204,6 +207,8 @@ const FieldAccordion: React.FC void;
onSelectAllWarehouses: FormChange;
+ onSelectAllChannels: (items: Channels_channels[], selected: number) => void;
+ onChannelSelect: (option: Channels_channels) => void;
}
const ProductExportDialogInfo: React.FC = ({
attributes,
+ channels,
data,
hasMore,
selectedAttributes,
+ selectedChannels,
loading,
warehouses,
onAttrtibuteSelect,
onWarehouseSelect,
+ onChannelSelect,
onChange,
onFetch,
onFetchMore,
+ onSelectAllChannels,
onSelectAllWarehouses
}) => {
const classes = useStyles({});
@@ -280,6 +291,50 @@ const ProductExportDialogInfo: React.FC = ({
description="select product informations to be exported"
/>
+ 0 && (
+
+ {selectedChannels.slice(0, maxChips).map(channel => (
+ onChannelSelect(channel)}
+ key={channel.id}
+ />
+ ))}
+ {selectedChannels.length > maxChips && (
+
+
+
+ )}
+
+ )
+ }
+ data-test="channels"
+ >
+
+ !!selectedChannels.find(channel => channel.id === option.id)
+ }
+ onChange={onChannelSelect}
+ toggleAll={onSelectAllChannels}
+ />
+
= ({
description: "informations about product prices etc, header"
})}
data={data}
- fields={[
- ProductFieldEnum.CHARGE_TAXES,
- ProductFieldEnum.COST_PRICE,
- ProductFieldEnum.VARIANT_PRICE,
- ProductFieldEnum.VISIBLE,
- ProductFieldEnum.AVAILABLE_FOR_PURCHASE
- ]}
+ fields={[ProductFieldEnum.CHARGE_TAXES]}
onChange={handleFieldChange}
onToggleAll={handleToggleAllFields}
data-test="financial"
diff --git a/src/products/components/ProductExportDialog/messages.ts b/src/products/components/ProductExportDialog/messages.ts
index 3ec171775..e5dd38442 100644
--- a/src/products/components/ProductExportDialog/messages.ts
+++ b/src/products/components/ProductExportDialog/messages.ts
@@ -20,11 +20,6 @@ function useProductExportFieldMessages() {
description: "product field",
id: "productExportFieldCollections"
}),
- [ProductFieldEnum.COST_PRICE]: intl.formatMessage({
- defaultMessage: "Cost Price",
- description: "product field",
- id: "productExportFieldPrice"
- }),
[ProductFieldEnum.DESCRIPTION]: intl.formatMessage({
defaultMessage: "Description",
description: "product field",
@@ -55,11 +50,6 @@ function useProductExportFieldMessages() {
description: "product field",
id: "productExportFieldVariantImages"
}),
- [ProductFieldEnum.VARIANT_PRICE]: intl.formatMessage({
- defaultMessage: "Variant Price",
- description: "product field",
- id: "productExportFieldVariantPrice"
- }),
[ProductFieldEnum.VARIANT_SKU]: intl.formatMessage({
defaultMessage: "Export Variant SKU",
description: "product field",
@@ -74,11 +64,6 @@ function useProductExportFieldMessages() {
defaultMessage: "Visibility",
description: "product field",
id: "productExportFieldVisibility"
- }),
- [ProductFieldEnum.AVAILABLE_FOR_PURCHASE]: intl.formatMessage({
- defaultMessage: "Available for purchase",
- description: "product field",
- id: "productExportFieldAvailability"
})
};
diff --git a/src/products/components/ProductList/ProductList.tsx b/src/products/components/ProductList/ProductList.tsx
index 22113f45f..df16d6f8a 100644
--- a/src/products/components/ProductList/ProductList.tsx
+++ b/src/products/components/ProductList/ProductList.tsx
@@ -4,11 +4,11 @@ import TableCell from "@material-ui/core/TableCell";
import TableFooter from "@material-ui/core/TableFooter";
import TableRow from "@material-ui/core/TableRow";
import Typography from "@material-ui/core/Typography";
+import { ChannelsAvailabilityDropdown } from "@saleor/components/ChannelsAvailabilityDropdown";
import Checkbox from "@saleor/components/Checkbox";
import Money from "@saleor/components/Money";
import ResponsiveTable from "@saleor/components/ResponsiveTable";
import Skeleton from "@saleor/components/Skeleton";
-import StatusLabel from "@saleor/components/StatusLabel";
import TableCellAvatar, {
AVATAR_MARGIN
} from "@saleor/components/TableCellAvatar";
@@ -31,7 +31,7 @@ import TDisplayColumn, {
import { getArrowDirection } from "@saleor/utils/sort";
import classNames from "classnames";
import React from "react";
-import { FormattedMessage, useIntl } from "react-intl";
+import { FormattedMessage } from "react-intl";
const useStyles = makeStyles(
theme => ({
@@ -104,11 +104,14 @@ interface ProductListProps
gridAttributes: GridAttributes_grid_edges_node[];
products: ProductList_products_edges_node[];
loading: boolean;
+ selectedChannel: string;
+ channelsCount: number;
}
export const ProductList: React.FC = props => {
const {
activeAttributeSortId,
+ channelsCount,
settings,
disabled,
isChecked,
@@ -116,7 +119,6 @@ export const ProductList: React.FC = props => {
pageInfo,
products,
selected,
- loading,
sort,
toggle,
toggleAll,
@@ -125,62 +127,16 @@ export const ProductList: React.FC = props => {
onPreviousPage,
onUpdateListSettings,
onRowClick,
- onSort
+ onSort,
+ selectedChannel
} = props;
const classes = useStyles(props);
- const intl = useIntl();
-
const gridAttributesFromSettings = settings.columns.filter(
isAttributeColumnValue
);
const numberOfColumns = 2 + settings.columns.length;
- const getProductPrice = product => {
- const priceRangeUndiscounted = product?.pricing?.priceRangeUndiscounted;
-
- if (!priceRangeUndiscounted) {
- return "-";
- }
-
- const { start, stop } = priceRangeUndiscounted;
- const {
- gross: { amount: startAmount }
- } = start;
- const {
- gross: { amount: stopAmount }
- } = stop;
-
- if (startAmount === stopAmount) {
- return (
-
- );
- } else {
- return (
- <>
-
- {" - "}
-
-
- );
- }
- };
-
return (
@@ -190,7 +146,10 @@ export const ProductList: React.FC = props => {
-
+
{gridAttributesFromSettings.map(gridAttribute => (
@@ -240,7 +199,10 @@ export const ProductList: React.FC = props => {
/>
-
+
= props => {
onClick={() => onSort(ProductListUrlSortField.status)}
>
@@ -323,6 +285,9 @@ export const ProductList: React.FC = props => {
products,
product => {
const isSelected = product ? isChecked(product.id) : false;
+ const channel = product?.channelListings.find(
+ listing => listing.channel.id === selectedChannel
+ );
return (
= props => {
onClick={product && onRowClick(product.id)}
className={classes.link}
data-test="id"
- data-test-id={maybe(() => product.id)}
+ data-test-id={product?.id}
>
= props => {
className={classes.colType}
data-test="product-type"
>
- {product && product.productType ? (
- product.productType.name
- ) : (
-
- )}
+ {product?.productType?.name || }
product.isPublished)}
+ data-test="availability"
+ data-test-availability={
+ !!product?.channelListings?.length
+ }
>
- {product &&
- maybe(() => product.isPublished !== undefined) ? (
-
) : (
@@ -444,7 +401,11 @@ export const ProductList: React.FC = props => {
displayColumns={settings.columns}
>
- {loading ? : getProductPrice(product)}
+ {product?.channelListings ? (
+
+ ) : (
+
+ )}
diff --git a/src/products/components/ProductListPage/ProductListPage.tsx b/src/products/components/ProductListPage/ProductListPage.tsx
index 892ddeceb..f4923e9a8 100644
--- a/src/products/components/ProductListPage/ProductListPage.tsx
+++ b/src/products/components/ProductListPage/ProductListPage.tsx
@@ -41,17 +41,23 @@ export interface ProductListPageProps
SortPage {
activeAttributeSortId: string;
availableInGridAttributes: GridAttributes_availableInGrid_edges_node[];
+ channelsCount: number;
currencySymbol: string;
gridAttributes: GridAttributes_grid_edges_node[];
totalGridAttributes: number;
products: ProductList_products_edges_node[];
onExport: () => void;
+ selectedChannel: string;
+ onSettingsOpen?: () => void;
}
const useStyles = makeStyles(
theme => ({
columnPicker: {
- margin: theme.spacing(0, 3)
+ marginRight: theme.spacing(3)
+ },
+ settings: {
+ marginRight: theme.spacing(2)
}
}),
{ name: "ProductListPage" }
@@ -59,6 +65,7 @@ const useStyles = makeStyles(
export const ProductListPage: React.FC = props => {
const {
+ channelsCount,
currencySymbol,
currentTab,
defaultSettings,
@@ -77,10 +84,12 @@ export const ProductListPage: React.FC = props => {
onFetchMore,
onFilterChange,
onSearchChange,
+ onSettingsOpen,
onTabChange,
onTabDelete,
onTabSave,
onUpdateListSettings,
+ selectedChannel,
...listProps
} = props;
const intl = useIntl();
@@ -92,13 +101,6 @@ export const ProductListPage: React.FC = props => {
const filterStructure = createFilterStructure(intl, filterOpts);
const columns: ColumnPickerChoice[] = [
- {
- label: intl.formatMessage({
- defaultMessage: "Published",
- description: "product status"
- }),
- value: "isPublished" as ProductListColumns
- },
{
label: intl.formatMessage({
defaultMessage: "Price",
@@ -123,6 +125,7 @@ export const ProductListPage: React.FC = props => {
= props => {
}),
onSelect: onExport,
testId: "export"
+ },
+ onSettingsOpen && {
+ label: intl.formatMessage({
+ defaultMessage: "Settings",
+ description: "button"
+ }),
+ onSelect: onSettingsOpen
}
]}
data-test="menu"
@@ -188,6 +198,8 @@ export const ProductListPage: React.FC = props => {
loading={loading}
gridAttributes={gridAttributes}
settings={settings}
+ channelsCount={channelsCount}
+ selectedChannel={selectedChannel}
onUpdateListSettings={onUpdateListSettings}
/>
diff --git a/src/products/components/ProductListPage/filters.ts b/src/products/components/ProductListPage/filters.ts
index 50683be68..fb12b6695 100644
--- a/src/products/components/ProductListPage/filters.ts
+++ b/src/products/components/ProductListPage/filters.ts
@@ -14,7 +14,6 @@ export enum ProductFilterKeys {
attributes = "attributes",
categories = "categories",
collections = "collections",
- status = "status",
price = "price",
productType = "productType",
stock = "stock"
@@ -32,15 +31,9 @@ export interface ProductListFilterOpts {
collections: FilterOpts & AutocompleteFilterOpts;
price: FilterOpts;
productType: FilterOpts & AutocompleteFilterOpts;
- status: FilterOpts;
stockStatus: FilterOpts;
}
-export enum ProductStatus {
- PUBLISHED = "published",
- HIDDEN = "hidden"
-}
-
const messages = defineMessages({
available: {
defaultMessage: "Available",
@@ -76,25 +69,6 @@ export function createFilterStructure(
opts: ProductListFilterOpts
): IFilter {
return [
- {
- ...createOptionsField(
- ProductFilterKeys.status,
- intl.formatMessage(messages.visibility),
- [opts.status.value],
- false,
- [
- {
- label: intl.formatMessage(messages.visible),
- value: ProductStatus.PUBLISHED
- },
- {
- label: intl.formatMessage(messages.hidden),
- value: ProductStatus.HIDDEN
- }
- ]
- ),
- active: opts.status.active
- },
{
...createOptionsField(
ProductFilterKeys.stock,
diff --git a/src/products/components/ProductPricing/ProductPricing.tsx b/src/products/components/ProductPricing/ProductPricing.tsx
deleted file mode 100644
index fb036ba90..000000000
--- a/src/products/components/ProductPricing/ProductPricing.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import Card from "@material-ui/core/Card";
-import CardContent from "@material-ui/core/CardContent";
-import { makeStyles } from "@material-ui/core/styles";
-import CardTitle from "@saleor/components/CardTitle";
-import PriceField from "@saleor/components/PriceField";
-import { ProductErrorFragment } from "@saleor/fragments/types/ProductErrorFragment";
-import { getFormErrors, getProductErrorMessage } from "@saleor/utils/errors";
-import createNonNegativeValueChangeHandler from "@saleor/utils/handlers/nonNegativeValueChangeHandler";
-import React from "react";
-import { useIntl } from "react-intl";
-
-const useStyles = makeStyles(
- theme => ({
- root: {
- display: "grid",
- gridColumnGap: theme.spacing(2),
- gridTemplateColumns: "1fr 1fr"
- }
- }),
- { name: "ProductPricing" }
-);
-
-interface ProductPricingProps {
- currency?: string;
- data: {
- basePrice: number;
- };
- disabled: boolean;
- errors: ProductErrorFragment[];
- onChange: (event: React.ChangeEvent) => void;
-}
-
-const ProductPricing: React.FC = props => {
- const { currency, data, disabled, errors, onChange } = props;
-
- const classes = useStyles(props);
- const intl = useIntl();
-
- const formErrors = getFormErrors(["basePrice"], errors);
-
- const handlePriceChange = createNonNegativeValueChangeHandler(onChange);
-
- return (
-
-
-
-
-
-
- );
-};
-ProductPricing.displayName = "ProductPricing";
-export default ProductPricing;
diff --git a/src/products/components/ProductPricing/index.ts b/src/products/components/ProductPricing/index.ts
deleted file mode 100644
index 4a41ac8e5..000000000
--- a/src/products/components/ProductPricing/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default } from "./ProductPricing";
-export * from "./ProductPricing";
diff --git a/src/products/components/ProductStocks/ProductStocks.tsx b/src/products/components/ProductStocks/ProductStocks.tsx
index 4484b6840..121f80afc 100644
--- a/src/products/components/ProductStocks/ProductStocks.tsx
+++ b/src/products/components/ProductStocks/ProductStocks.tsx
@@ -153,6 +153,7 @@ const ProductStocks: React.FC = ({
defaultMessage: "SKU (Stock Keeping Unit)"
})}
name="sku"
+ required
onChange={onFormDataChange}
value={data.sku}
/>
diff --git a/src/products/components/ProductUpdatePage/ProductUpdatePage.test.tsx b/src/products/components/ProductUpdatePage/ProductUpdatePage.test.tsx
index 96854aaee..8592de84a 100644
--- a/src/products/components/ProductUpdatePage/ProductUpdatePage.test.tsx
+++ b/src/products/components/ProductUpdatePage/ProductUpdatePage.test.tsx
@@ -1,4 +1,6 @@
import placeholderImage from "@assets/images/placeholder255x255.png";
+import { channelsList } from "@saleor/channels/fixtures";
+import { createChannelsData } from "@saleor/channels/utils";
import { collections } from "@saleor/collections/fixtures";
import { fetchMoreProps, listActionsProps } from "@saleor/fixtures";
import { product as productFixture } from "@saleor/products/fixtures";
@@ -11,6 +13,12 @@ import React from "react";
import ProductUpdatePage, { ProductUpdatePageProps } from "./ProductUpdatePage";
const product = productFixture(placeholderImage);
+const channels = createChannelsData(channelsList);
+const channelChoices = product.channelListings.map(listing => ({
+ label: listing.channel.name,
+ value: listing.channel.id
+}));
+
import Adapter from "enzyme-adapter-react-16";
configure({ adapter: new Adapter() });
@@ -18,8 +26,12 @@ const onSubmit = jest.fn();
const props: ProductUpdatePageProps = {
...listActionsProps,
+ allChannelsCount: 5,
categories: [product.category],
+ channelChoices,
+ channelsErrors: [],
collections,
+ currentChannels: channels,
defaultWeightUnit: "kg",
disabled: false,
errors: [],
@@ -27,9 +39,11 @@ const props: ProductUpdatePageProps = {
fetchCollections: () => undefined,
fetchMoreCategories: fetchMoreProps,
fetchMoreCollections: fetchMoreProps,
+ hasChannelChanged: false,
header: product.name,
images: product.images,
onBack: () => undefined,
+ onChannelsChange: () => undefined,
onDelete: () => undefined,
onImageDelete: () => undefined,
onImageUpload: () => undefined,
@@ -40,6 +54,7 @@ const props: ProductUpdatePageProps = {
onVariantShow: () => undefined,
onVariantsAdd: () => undefined,
onWarehouseConfigure: () => undefined,
+ openChannelsModal: () => undefined,
placeholderImage,
product,
saveButtonBarState: "default",
diff --git a/src/products/components/ProductUpdatePage/ProductUpdatePage.tsx b/src/products/components/ProductUpdatePage/ProductUpdatePage.tsx
index 4d51ad9cd..6d27bb746 100644
--- a/src/products/components/ProductUpdatePage/ProductUpdatePage.tsx
+++ b/src/products/components/ProductUpdatePage/ProductUpdatePage.tsx
@@ -1,6 +1,7 @@
import { OutputData } from "@editorjs/editorjs";
+import { ChannelData } from "@saleor/channels/utils";
import AppHeader from "@saleor/components/AppHeader";
-import AvailabilityCard from "@saleor/components/AvailabilityCard";
+import { AvailabilityCard } from "@saleor/components/AvailabilityCard";
import CardSpacer from "@saleor/components/CardSpacer";
import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton";
import Container from "@saleor/components/Container";
@@ -9,14 +10,16 @@ import Metadata from "@saleor/components/Metadata/Metadata";
import PageHeader from "@saleor/components/PageHeader";
import SaveButtonBar from "@saleor/components/SaveButtonBar";
import SeoForm from "@saleor/components/SeoForm";
+import { SingleAutocompleteChoiceType } from "@saleor/components/SingleAutocompleteSelectField";
+import { ProductChannelListingErrorFragment } from "@saleor/fragments/types/ProductChannelListingErrorFragment";
import { ProductErrorWithAttributesFragment } from "@saleor/fragments/types/ProductErrorWithAttributesFragment";
import { TaxTypeFragment } from "@saleor/fragments/types/TaxTypeFragment";
import { WarehouseFragment } from "@saleor/fragments/types/WarehouseFragment";
-import useDateLocalize from "@saleor/hooks/useDateLocalize";
import { SubmitPromise } from "@saleor/hooks/useForm";
import useStateFromProps from "@saleor/hooks/useStateFromProps";
import { sectionNames } from "@saleor/intl";
import { maybe } from "@saleor/misc";
+import ProductVariantPrice from "@saleor/products/components/ProductVariantPrice";
import { SearchCategories_search_edges_node } from "@saleor/searches/types/SearchCategories";
import { SearchCollections_search_edges_node } from "@saleor/searches/types/SearchCollections";
import { FetchMoreProps, ListActions, ReorderAction } from "@saleor/types";
@@ -33,7 +36,6 @@ import ProductAttributes, { ProductAttributeInput } from "../ProductAttributes";
import ProductDetailsForm from "../ProductDetailsForm";
import ProductImages from "../ProductImages";
import ProductOrganization from "../ProductOrganization";
-import ProductPricing from "../ProductPricing";
import ProductShipping from "../ProductShipping/ProductShipping";
import ProductStocks, { ProductStockInput } from "../ProductStocks";
import ProductTaxes from "../ProductTaxes";
@@ -43,6 +45,10 @@ import ProductUpdateForm from "./form";
export interface ProductUpdatePageProps extends ListActions {
defaultWeightUnit: string;
errors: ProductErrorWithAttributesFragment[];
+ channelsErrors: ProductChannelListingErrorFragment[];
+ allChannelsCount: number;
+ currentChannels: ChannelData[];
+ channelChoices: SingleAutocompleteChoiceType[];
placeholderImage: string;
collections: SearchCollections_search_edges_node[];
categories: SearchCategories_search_edges_node[];
@@ -51,6 +57,7 @@ export interface ProductUpdatePageProps extends ListActions {
fetchMoreCollections: FetchMoreProps;
variants: ProductDetails_product_variants[];
images: ProductDetails_product_images[];
+ hasChannelChanged: boolean;
product: ProductDetails_product;
header: string;
saveButtonBarState: ConfirmButtonTransitionState;
@@ -63,6 +70,8 @@ export interface ProductUpdatePageProps extends ListActions {
onVariantReorder: ReorderAction;
onImageDelete: (id: string) => () => void;
onSubmit: (data: ProductUpdatePageSubmitData) => SubmitPromise;
+ openChannelsModal: () => void;
+ onChannelsChange: (data: ChannelData[]) => void;
onBack?();
onDelete();
onImageEdit?(id: string);
@@ -87,6 +96,10 @@ export const ProductUpdatePage: React.FC = ({
defaultWeightUnit,
disabled,
categories: categoryChoiceList,
+ channelChoices,
+ channelsErrors,
+ allChannelsCount,
+ currentChannels = [],
collections: collectionChoiceList,
errors,
fetchCategories,
@@ -94,6 +107,7 @@ export const ProductUpdatePage: React.FC = ({
fetchMoreCategories,
fetchMoreCollections,
images,
+ hasChannelChanged,
header,
placeholderImage,
product,
@@ -107,6 +121,8 @@ export const ProductUpdatePage: React.FC = ({
onImageEdit,
onImageReorder,
onImageUpload,
+ onChannelsChange,
+ openChannelsModal,
onSeoClick,
onSubmit,
onVariantAdd,
@@ -122,7 +138,6 @@ export const ProductUpdatePage: React.FC = ({
toolbar
}) => {
const intl = useIntl();
- const localizeDate = useDateLocalize();
const [selectedCategory, setSelectedCategory] = useStateFromProps(
product?.category?.name || ""
@@ -138,7 +153,6 @@ export const ProductUpdatePage: React.FC = ({
const categories = getChoices(categoryChoiceList);
const collections = getChoices(collectionChoiceList);
- const currency = product?.variants[0]?.price.currency;
const hasVariants = product?.productType?.hasVariants;
const taxTypeChoices =
taxTypes?.map(taxType => ({
@@ -156,10 +170,20 @@ export const ProductUpdatePage: React.FC = ({
setSelectedCategory={setSelectedCategory}
setSelectedCollections={setSelectedCollections}
setSelectedTaxType={setSelectedTaxType}
+ setChannels={onChannelsChange}
taxTypes={taxTypeChoices}
warehouses={warehouses}
+ currentChannels={currentChannels}
+ hasVariants={hasVariants}
>
- {({ change, data, handlers, hasChanged, submit }) => (
+ {({
+ change,
+ data,
+ disabled: formDisabled,
+ handlers,
+ hasChanged,
+ submit
+ }) => (
<>
@@ -197,12 +221,11 @@ export const ProductUpdatePage: React.FC = ({
{!!product?.productType && !hasVariants && (
<>
-
@@ -212,11 +235,7 @@ export const ProductUpdatePage: React.FC = ({
disabled={disabled}
variants={variants}
product={product}
- fallbackPrice={
- product?.variants?.length
- ? product.variants[0].price
- : undefined
- }
+ channelChoices={channelChoices}
onRowClick={onVariantShow}
onVariantAdd={onVariantAdd}
onVariantsAdd={onVariantsAdd}
@@ -293,29 +312,24 @@ export const ProductUpdatePage: React.FC = ({
/>
= ({
onDelete={onDelete}
onSave={submit}
state={saveButtonBarState}
- disabled={disabled || !hasChanged}
+ disabled={
+ disabled || formDisabled || (!hasChanged && !hasChannelChanged)
+ }
/>
diff --git a/src/products/components/ProductUpdatePage/form.tsx b/src/products/components/ProductUpdatePage/form.tsx
index 21e59cd0e..c83e17b4f 100644
--- a/src/products/components/ProductUpdatePage/form.tsx
+++ b/src/products/components/ProductUpdatePage/form.tsx
@@ -1,4 +1,5 @@
import { OutputData } from "@editorjs/editorjs";
+import { ChannelData, ChannelPriceArgs } from "@saleor/channels/utils";
import { MetadataFormData } from "@saleor/components/Metadata";
import { MultiAutocompleteChoiceType } from "@saleor/components/MultiAutocompleteSelectField";
import { RichTextEditorChange } from "@saleor/components/RichTextEditor";
@@ -16,8 +17,14 @@ import {
} from "@saleor/products/utils/data";
import {
createAttributeChangeHandler,
- createAttributeMultiChangeHandler
+ createAttributeMultiChangeHandler,
+ createChannelsChangeHandler,
+ createChannelsPriceChangeHandler
} from "@saleor/products/utils/handlers";
+import {
+ validateCostPrice,
+ validatePrice
+} from "@saleor/products/utils/validation";
import { SearchWarehouses_search_edges_node } from "@saleor/searches/types/SearchWarehouses";
import handleFormSubmit from "@saleor/utils/handlers/handleFormSubmit";
import createMultiAutocompleteSelectHandler from "@saleor/utils/handlers/multiAutocompleteSelectChangeHandler";
@@ -32,24 +39,20 @@ import { ProductAttributeInput } from "../ProductAttributes";
import { ProductStockInput } from "../ProductStocks";
export interface ProductUpdateFormData extends MetadataFormData {
- availableForPurchase: string;
basePrice: number;
category: string | null;
changeTaxCode: boolean;
+ channelListings: ChannelData[];
chargeTaxes: boolean;
collections: string[];
isAvailable: boolean;
- isAvailableForPurchase: boolean;
- isPublished: boolean;
name: string;
slug: string;
- publicationDate: string;
seoDescription: string;
seoTitle: string;
sku: string;
taxCode: string;
trackInventory: boolean;
- visibleInListings: boolean;
weight: string;
}
export interface ProductUpdateData extends ProductUpdateFormData {
@@ -78,6 +81,14 @@ interface ProductUpdateHandlers
"changeStock" | "selectAttribute" | "selectAttributeMultiple",
FormsetChange
>,
+ Record<"changeChannelPrice", (id: string, data: ChannelPriceArgs) => void>,
+ Record<
+ "changeChannels",
+ (
+ id: string,
+ data: Omit
+ ) => void
+ >,
Record<"addStock" | "deleteStock", (id: string) => void> {
changeDescription: RichTextEditorChange;
}
@@ -85,6 +96,7 @@ export interface UseProductUpdateFormResult {
change: FormChange;
data: ProductUpdateData;
+ disabled: boolean;
handlers: ProductUpdateHandlers;
hasChanged: boolean;
submit: () => Promise;
@@ -100,8 +112,11 @@ export interface UseProductUpdateFormOpts
React.SetStateAction
>;
setSelectedTaxType: React.Dispatch>;
+ setChannels: (channels: ChannelData[]) => void;
selectedCollections: MultiAutocompleteChoiceType[];
warehouses: SearchWarehouses_search_edges_node[];
+ currentChannels: ChannelData[];
+ hasVariants: boolean;
}
export interface ProductUpdateFormProps extends UseProductUpdateFormOpts {
@@ -110,16 +125,6 @@ export interface ProductUpdateFormProps extends UseProductUpdateFormOpts {
onSubmit: (data: ProductUpdateSubmitData) => SubmitPromise;
}
-const getAvailabilityData = ({
- availableForPurchase,
- isAvailableForPurchase,
- isPublished,
- publicationDate
-}: ProductUpdateFormData) => ({
- isAvailableForPurchase: isAvailableForPurchase || !!availableForPurchase,
- isPublished: isPublished || !!publicationDate
-});
-
const getStocksData = (
product: ProductDetails_product,
stocks: FormsetData
@@ -153,7 +158,11 @@ function useProductUpdateForm(
const triggerChange = () => setChanged(true);
const form = useForm(
- getProductUpdatePageFormData(product, product?.variants)
+ getProductUpdatePageFormData(
+ product,
+ product?.variants,
+ opts.currentChannels
+ )
);
const attributes = useFormset(getAttributeInputFromProduct(product));
const stocks = useFormset(getStockInputFromProduct(product));
@@ -215,6 +224,16 @@ function useProductUpdateForm(
opts.taxTypes
);
const changeMetadata = makeMetadataChangeHandler(handleChange);
+ const handleChannelsChange = createChannelsChangeHandler(
+ opts.currentChannels,
+ opts.setChannels,
+ triggerChange
+ );
+ const handleChannelPriceChange = createChannelsPriceChangeHandler(
+ opts.currentChannels,
+ opts.setChannels,
+ triggerChange
+ );
const data: ProductUpdateData = {
...form.data,
@@ -225,7 +244,6 @@ function useProductUpdateForm(
// Need to make it function to always have description.current up to date
const getSubmitData = (): ProductUpdateSubmitData => ({
...data,
- ...getAvailabilityData(data),
...getStocksData(product, stocks.data),
...getMetadata(data, isMetadataModified, isPrivateMetadataModified),
addStocks: [],
@@ -235,11 +253,22 @@ function useProductUpdateForm(
const submit = () => handleFormSubmit(getSubmitData(), onSubmit, setChanged);
+ const disabled =
+ !opts.hasVariants &&
+ (!data.sku ||
+ data.channelListings.some(
+ channel =>
+ validatePrice(channel.price) || validateCostPrice(channel.costPrice)
+ ));
+
return {
change: handleChange,
data,
+ disabled,
handlers: {
addStock: handleStockAdd,
+ changeChannelPrice: handleChannelPriceChange,
+ changeChannels: handleChannelsChange,
changeDescription,
changeMetadata,
changeStock: handleStockChange,
diff --git a/src/products/components/ProductVariantCreatePage/ProductVariantCreatePage.tsx b/src/products/components/ProductVariantCreatePage/ProductVariantCreatePage.tsx
index cbe8fa284..f8b45c959 100644
--- a/src/products/components/ProductVariantCreatePage/ProductVariantCreatePage.tsx
+++ b/src/products/components/ProductVariantCreatePage/ProductVariantCreatePage.tsx
@@ -1,3 +1,4 @@
+import { ChannelPriceData } from "@saleor/channels/utils";
import AppHeader from "@saleor/components/AppHeader";
import CardSpacer from "@saleor/components/CardSpacer";
import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton";
@@ -6,6 +7,7 @@ import Grid from "@saleor/components/Grid";
import Metadata from "@saleor/components/Metadata";
import PageHeader from "@saleor/components/PageHeader";
import SaveButtonBar from "@saleor/components/SaveButtonBar";
+import { ProductChannelListingErrorFragment } from "@saleor/fragments/types/ProductChannelListingErrorFragment";
import { ProductErrorWithAttributesFragment } from "@saleor/fragments/types/ProductErrorWithAttributesFragment";
import { SearchWarehouses_search_edges_node } from "@saleor/searches/types/SearchWarehouses";
import { ReorderAction } from "@saleor/types";
@@ -21,7 +23,8 @@ import ProductVariantPrice from "../ProductVariantPrice";
import ProductVariantCreateForm, { ProductVariantCreateData } from "./form";
interface ProductVariantCreatePageProps {
- currencySymbol: string;
+ channels: ChannelPriceData[];
+ channelErrors: ProductChannelListingErrorFragment[] | undefined;
disabled: boolean;
errors: ProductErrorWithAttributesFragment[];
header: string;
@@ -37,7 +40,8 @@ interface ProductVariantCreatePageProps {
}
const ProductVariantCreatePage: React.FC = ({
- currencySymbol,
+ channels,
+ channelErrors = [],
disabled,
errors,
header,
@@ -58,8 +62,16 @@ const ProductVariantCreatePage: React.FC = ({
product={product}
onSubmit={onSubmit}
warehouses={warehouses}
+ currentChannels={channels}
>
- {({ change, data, handlers, hasChanged, submit }) => (
+ {({
+ change,
+ data,
+ disabled: formDisabled,
+ handlers,
+ hasChanged,
+ submit
+ }) => (
{product?.name}
@@ -84,14 +96,6 @@ const ProductVariantCreatePage: React.FC = ({
onChange={handlers.selectAttribute}
/>
-
-
= ({
onChange={change}
/>
+ ({
+ ...channel.data,
+ ...channel.value
+ })
+ )}
+ errors={channelErrors}
+ loading={disabled}
+ onChange={handlers.changeChannels}
+ />
+
= ({
;
+ channelListings: FormsetData;
stocks: ProductStockInput[];
}
export interface UseProductVariantCreateFormOpts {
warehouses: SearchWarehouses_search_edges_node[];
+ currentChannels: ChannelPriceData[];
}
export interface UseProductVariantCreateFormResult {
change: FormChange;
data: ProductVariantCreateData;
+ disabled: boolean;
// TODO: type FormsetChange
- handlers: Record<"changeStock" | "selectAttribute", FormsetChange> &
+ handlers: Record<
+ "changeStock" | "selectAttribute" | "changeChannels",
+ FormsetChange
+ > &
Record<"addStock" | "deleteStock", (id: string) => void> & {
changeMetadata: FormChange;
};
@@ -49,9 +59,7 @@ export interface ProductVariantCreateFormProps
}
const initial: ProductVariantCreateFormData = {
- costPrice: "",
metadata: [],
- price: "",
privateMetadata: [],
sku: "",
trackInventory: true,
@@ -67,10 +75,12 @@ function useProductVariantCreateForm(
const triggerChange = () => setChanged(true);
const attributeInput = getVariantAttributeInputFromProduct(product);
+ const channelsInput = getChannelsInput(opts.currentChannels);
const form = useForm(initial);
const attributes = useFormset(attributeInput);
const stocks = useFormset([]);
+ const channels = useFormset(channelsInput);
const {
makeChangeHandler: makeMetadataChangeHandler
} = useMetadataChangeTrigger();
@@ -101,10 +111,21 @@ function useProductVariantCreateForm(
triggerChange();
stocks.remove(id);
};
+ const handleChannelChange: FormsetChange = (id, value) => {
+ channels.change(id, value);
+ triggerChange();
+ };
+
+ const disabled = channels?.data.some(
+ channelData =>
+ validatePrice(channelData.value.price) ||
+ validateCostPrice(channelData.value.costPrice)
+ );
const data: ProductVariantCreateData = {
...form.data,
attributes: attributes.data,
+ channelListings: channels.data,
stocks: stocks.data
};
@@ -113,8 +134,10 @@ function useProductVariantCreateForm(
return {
change: handleChange,
data,
+ disabled,
handlers: {
addStock: handleStockAdd,
+ changeChannels: handleChannelChange,
changeMetadata,
changeStock: handleStockChange,
deleteStock: handleStockDelete,
diff --git a/src/products/components/ProductVariantCreatorPage/ProductVariantCreator.stories.tsx b/src/products/components/ProductVariantCreatorPage/ProductVariantCreator.stories.tsx
index 806d3bb75..ac44f9042 100644
--- a/src/products/components/ProductVariantCreatorPage/ProductVariantCreator.stories.tsx
+++ b/src/products/components/ProductVariantCreatorPage/ProductVariantCreator.stories.tsx
@@ -1,4 +1,5 @@
import { attributes } from "@saleor/attributes/fixtures";
+import { productChannels } from "@saleor/channels/fixtures";
import Container from "@saleor/components/Container";
import { ProductVariantBulkCreate_productVariantBulkCreate_errors } from "@saleor/products/types/ProductVariantBulkCreate";
import { ProductErrorCode } from "@saleor/types/globalTypes";
@@ -8,7 +9,12 @@ import React from "react";
import Decorator from "../../../storybook/Decorator";
import { createVariants } from "./createVariants";
-import { AllOrAttribute, ProductVariantCreateFormData } from "./form";
+import {
+ ChannelPrice,
+ Price,
+ ProductVariantCreateFormData,
+ Stock
+} from "./form";
import ProductVariantCreatorContent, {
ProductVariantCreatorContentProps
} from "./ProductVariantCreatorContent";
@@ -18,17 +24,22 @@ import { ProductVariantCreatorStep } from "./types";
const selectedAttributes = [1, 4, 5].map(index => attributes[index]);
const selectedWarehouses = [0, 1, 3].map(index => warehouseList[index]);
-const price: AllOrAttribute = {
+const channels: ChannelPrice[] = productChannels.map(channel => ({
+ channelId: channel.channel.id,
+ price: channel.discountedPrice.amount.toString()
+}));
+
+const price: Price = {
attribute: selectedAttributes[0].id,
+ channels,
mode: "attribute",
- value: "2.79",
- values: selectedAttributes[0].values.map((attribute, attributeIndex) => ({
+ values: selectedAttributes[0].values.map(attribute => ({
slug: attribute.slug,
- value: (attributeIndex + 4).toFixed(2)
+ value: channels
}))
};
-const stock: AllOrAttribute = {
+const stock: Stock = {
attribute: selectedAttributes[0].id,
mode: "attribute",
value: selectedWarehouses.map(
@@ -53,6 +64,7 @@ const dataAttributes = selectedAttributes.map(attribute => ({
const errors: ProductVariantBulkCreate_productVariantBulkCreate_errors[] = [
{
__typename: "BulkProductError",
+ channels: [channels[0].channelId],
code: ProductErrorCode.UNIQUE,
field: "sku",
index: 3
@@ -74,7 +86,12 @@ const data: ProductVariantCreateFormData = {
};
const props: ProductVariantCreatorContentProps = {
attributes: [0, 1, 4, 6].map(index => attributes[index]),
- currencySymbol: "USD",
+ channelListings: productChannels.map(listing => ({
+ currency: listing.discountedPrice.currency,
+ id: listing.channel.id,
+ name: listing.channel.name,
+ price: listing.discountedPrice?.amount.toString() || ""
+ })),
data: {
...data,
variants: createVariants(data)
@@ -173,9 +190,5 @@ storiesOf("Views / Products / Create multiple variants / summary", module)
storiesOf("Views / Products / Create multiple variants", module)
.addDecorator(Decorator)
.add("interactive", () => (
- undefined}
- />
+ undefined} />
));
diff --git a/src/products/components/ProductVariantCreatorPage/ProductVariantCreatorContent.tsx b/src/products/components/ProductVariantCreatorPage/ProductVariantCreatorContent.tsx
index 9919e5a3f..07ea7a8b4 100644
--- a/src/products/components/ProductVariantCreatorPage/ProductVariantCreatorContent.tsx
+++ b/src/products/components/ProductVariantCreatorPage/ProductVariantCreatorContent.tsx
@@ -1,3 +1,4 @@
+import { ChannelPriceData } from "@saleor/channels/utils";
import { WarehouseFragment } from "@saleor/fragments/types/WarehouseFragment";
import { ProductDetails_product_productType_variantAttributes } from "@saleor/products/types/ProductDetails";
import { ProductVariantBulkCreate_productVariantBulkCreate_errors } from "@saleor/products/types/ProductVariantBulkCreate";
@@ -16,7 +17,7 @@ import { ProductVariantCreatorStep } from "./types";
export interface ProductVariantCreatorContentProps {
attributes: ProductDetails_product_productType_variantAttributes[];
- currencySymbol: string;
+ channelListings: ChannelPriceData[];
data: ProductVariantCreateFormData;
dispatchFormDataAction: React.Dispatch;
errors: ProductVariantBulkCreate_productVariantBulkCreate_errors[];
@@ -26,7 +27,7 @@ export interface ProductVariantCreatorContentProps {
const ProductVariantCreatorContent: React.FC = ({
attributes,
- currencySymbol,
+ channelListings,
data,
dispatchFormDataAction,
errors,
@@ -61,8 +62,8 @@ const ProductVariantCreatorContent: React.FC
{step === ProductVariantCreatorStep.prices && (
dispatchFormDataAction({
@@ -75,9 +76,10 @@ const ProductVariantCreatorContent: React.FC
: ProductVariantCreateReducerActionType.applyStockToAll
})
}
- onApplyToAllPriceChange={price =>
+ onApplyToAllPriceChange={(channelId, price) =>
dispatchFormDataAction({
changeApplyPriceToAllValue: {
+ channelId,
price
},
type:
@@ -105,9 +107,10 @@ const ProductVariantCreatorContent: React.FC
: ProductVariantCreateReducerActionType.changeApplyStockToAttributeId
})
}
- onAttributePriceChange={(valueId, price) =>
+ onAttributePriceChange={(valueId, price, channelId) =>
dispatchFormDataAction({
changeAttributeValuePrice: {
+ channelId,
price,
valueId
},
@@ -139,17 +142,25 @@ const ProductVariantCreatorContent: React.FC
{step === ProductVariantCreatorStep.summary && (
+ onVariantSkuChange={(variantIndex, value) =>
dispatchFormDataAction({
- changeVariantData: {
- field,
+ changeVariantSku: {
value,
variantIndex
},
- type: ProductVariantCreateReducerActionType.changeVariantData
+ type: ProductVariantCreateReducerActionType.changeVariantSku
+ })
+ }
+ onVariantPriceDataChange={(variantIndex, value) =>
+ dispatchFormDataAction({
+ changeVariantPriceData: {
+ value,
+ variantIndex
+ },
+ type: ProductVariantCreateReducerActionType.changeVariantPriceData
})
}
onVariantStockDataChange={(variantIndex, warehouse, value) =>
diff --git a/src/products/components/ProductVariantCreatorPage/ProductVariantCreatorPage.tsx b/src/products/components/ProductVariantCreatorPage/ProductVariantCreatorPage.tsx
index 011e60b86..7d98048cc 100644
--- a/src/products/components/ProductVariantCreatorPage/ProductVariantCreatorPage.tsx
+++ b/src/products/components/ProductVariantCreatorPage/ProductVariantCreatorPage.tsx
@@ -5,6 +5,7 @@ import Container from "@saleor/components/Container";
import Hr from "@saleor/components/Hr";
import PageHeader from "@saleor/components/PageHeader";
import useWizard from "@saleor/hooks/useWizard";
+import { validatePrice } from "@saleor/products/utils/validation";
import React from "react";
import { FormattedMessage, IntlShape, useIntl } from "react-intl";
@@ -48,13 +49,17 @@ function canHitNext(
return data.attributes.every(attribute => attribute.values.length > 0);
case ProductVariantCreatorStep.prices:
if (data.price.mode === "all") {
- if (data.price.value === "") {
+ if (data.price.channels.some(channel => validatePrice(channel.price))) {
return false;
}
} else if (data.price.mode === "attribute") {
if (
- data.price.attribute === "" ||
- data.price.values.some(attributeValue => attributeValue.value === "")
+ !data.price.attribute ||
+ data.price.values.some(
+ attribute =>
+ attribute.value.length < data.price.channels.length ||
+ attribute.value.some(channel => validatePrice(channel.price))
+ )
) {
return false;
}
@@ -66,7 +71,11 @@ function canHitNext(
return true;
case ProductVariantCreatorStep.summary:
- return data.variants.every(variant => variant.sku !== "");
+ return !data.variants.some(
+ variant =>
+ variant.sku === "" ||
+ variant.channelListings.some(channel => validatePrice(channel.price))
+ );
default:
return false;
@@ -78,7 +87,6 @@ export interface ProductVariantCreatePageProps
ProductVariantCreatorContentProps,
"data" | "dispatchFormDataAction" | "step" | "onStepClick"
> {
- defaultPrice: string;
onSubmit: (data: ProductVariantBulkCreateInput[]) => void;
}
@@ -128,7 +136,7 @@ function getDescription(
const ProductVariantCreatePage: React.FC = props => {
const {
attributes,
- defaultPrice,
+ channelListings,
errors,
onSubmit,
warehouses,
@@ -138,7 +146,7 @@ const ProductVariantCreatePage: React.FC = props
const intl = useIntl();
const [wizardData, dispatchFormDataAction] = React.useReducer(
reduceProductVariantCreateFormData,
- createInitialForm(attributes, defaultPrice, warehouses)
+ createInitialForm(attributes, channelListings, warehouses)
);
const [step, { next: nextStep, prev: prevStep, set: setStep }] = useWizard<
ProductVariantCreatorStep
@@ -162,7 +170,7 @@ const ProductVariantCreatePage: React.FC = props
const reloadForm = () =>
dispatchFormDataAction({
reload: {
- data: createInitialForm(attributes, defaultPrice, warehouses)
+ data: createInitialForm(attributes, channelListings, warehouses)
},
type: ProductVariantCreateReducerActionType.reload
});
@@ -219,6 +227,7 @@ const ProductVariantCreatePage: React.FC = props
void;
- onApplyToAllPriceChange: (value: string) => void;
+ onApplyToAllPriceChange: (channelId: string, value: string) => void;
onApplyToAllStockChange: (quantity: number, warehouseIndex: number) => void;
onAttributeSelect: (id: string, type: PriceOrStock) => void;
- onAttributePriceChange: (id: string, value: string) => void;
+ onAttributePriceChange: (
+ id: string,
+ value: string,
+ channelId: string
+ ) => void;
onAttributeStockChange: (
id: string,
quantity: number,
@@ -34,7 +39,7 @@ export interface ProductVariantCreatorPriceAndSkuProps {
const ProductVariantCreatorPriceAndSku: React.FC = ({
attributes,
- currencySymbol,
+ channelListings,
data,
warehouses,
onApplyToAllChange,
@@ -48,7 +53,7 @@ const ProductVariantCreatorPriceAndSku: React.FC
onApplyToAllChange(value, "price")}
onApplyToAllPriceChange={onApplyToAllPriceChange}
diff --git a/src/products/components/ProductVariantCreatorPage/ProductVariantCreatorPrices.tsx b/src/products/components/ProductVariantCreatorPage/ProductVariantCreatorPrices.tsx
index 31100a0cb..f3dd26612 100644
--- a/src/products/components/ProductVariantCreatorPage/ProductVariantCreatorPrices.tsx
+++ b/src/products/components/ProductVariantCreatorPage/ProductVariantCreatorPrices.tsx
@@ -4,12 +4,13 @@ import FormControlLabel from "@material-ui/core/FormControlLabel";
import Radio from "@material-ui/core/Radio";
import RadioGroup from "@material-ui/core/RadioGroup";
import { makeStyles } from "@material-ui/core/styles";
-import TextField from "@material-ui/core/TextField";
import Typography from "@material-ui/core/Typography";
+import { ChannelPriceData } from "@saleor/channels/utils";
import CardTitle from "@saleor/components/CardTitle";
import FormSpacer from "@saleor/components/FormSpacer";
import Grid from "@saleor/components/Grid";
import Hr from "@saleor/components/Hr";
+import PriceField from "@saleor/components/PriceField";
import SingleSelectField from "@saleor/components/SingleSelectField";
import { ProductDetails_product_productType_variantAttributes } from "@saleor/products/types/ProductDetails";
import React from "react";
@@ -23,6 +24,18 @@ import { getPriceAttributeValues } from "./utils";
const useStyles = makeStyles(
theme => ({
+ attrInputsContainer: {
+ display: "grid",
+ gap: theme.spacing(2) + "px",
+ gridTemplateColumns:
+ "minmax(80px, 150px) repeat(auto-fit, minmax(150px, 250px))"
+ },
+ channelName: {
+ marginBottom: theme.spacing(1)
+ },
+ container: {
+ display: "block"
+ },
hr: {
marginBottom: theme.spacing(),
marginTop: theme.spacing(0.5)
@@ -30,11 +43,13 @@ const useStyles = makeStyles(
hrAttribute: {
marginTop: theme.spacing(2)
},
+ inputsContainer: {
+ display: "grid",
+ gap: theme.spacing(2) + "px",
+ gridTemplateColumns: "repeat(auto-fit, minmax(150px, 250px))"
+ },
label: {
alignSelf: "center"
- },
- shortInput: {
- width: "33%"
}
}),
{ name: "ProductVariantCreatorPrices" }
@@ -42,18 +57,22 @@ const useStyles = makeStyles(
export interface ProductVariantCreatorPricesProps {
attributes: ProductDetails_product_productType_variantAttributes[];
- currencySymbol: string;
+ channelListings: ChannelPriceData[];
data: ProductVariantCreateFormData;
onApplyToAllChange: (applyToAll: VariantCreatorPricesAndSkuMode) => void;
- onApplyToAllPriceChange: (value: string) => void;
+ onApplyToAllPriceChange: (channelId: string, value: string) => void;
onAttributeSelect: (id: string) => void;
- onAttributeValueChange: (id: string, value: string) => void;
+ onAttributeValueChange: (
+ id: string,
+ value: string,
+ channelId: string
+ ) => void;
}
const ProductVariantCreatorPrices: React.FC = props => {
const {
attributes,
- currencySymbol,
+ channelListings,
data,
onApplyToAllChange,
onApplyToAllPriceChange,
@@ -78,7 +97,7 @@ const ProductVariantCreatorPrices: React.FC =
})}
/>
-
+
}
@@ -87,23 +106,40 @@ const ProductVariantCreatorPrices: React.FC =
})}
onChange={() => onApplyToAllChange("all")}
/>
-
- onApplyToAllPriceChange(event.target.value)}
- />
+ {data.price.mode === "all" && (
+ <>
+
+
+ {channelListings?.map(listing => (
+
+
+ {listing.name}
+
+ channel.channelId === listing.id
+ )?.price
+ }
+ label={intl.formatMessage({
+ defaultMessage: "Price",
+ description: "input label",
+ id: "productVariantCreatePricesSetPricePlaceholder"
+ })}
+ currencySymbol={listing.currency}
+ onChange={event =>
+ onApplyToAllPriceChange(listing.id, event.target.value)
+ }
+ />
+
+ ))}
+
-
-
+
+
+
+
+
+
+
+
+ onAttributeSelect(event.target.value)}
/>
-
-
-
- onAttributeSelect(event.target.value)}
- />
-
-
- {priceAttributeValues &&
- priceAttributeValues.map(attributeValue => (
-
-
-
-
-
- {attributeValue.name}
-
-
- value.slug === attributeValue.slug
- ).value
- }
- onChange={event =>
- onAttributeValueChange(
- attributeValue.slug,
- event.target.value
- )
- }
- />
-
-
-
- ))}
-
- )}
+
+
+
+
+ {attributeValue.name}
+
+ {channelListings?.map(listing => (
+
+
+ {listing.name}
+
+
+ attrChannel.channelId === listing.id
+ )?.price || ""
+ }
+ onChange={event =>
+ onAttributeValueChange(
+ attributeValue.slug,
+ event.target.value,
+ listing.id
+ )
+ }
+ />
+
+ ))}
+
-
-
+
+ {channelListings.map(listing => (
+
+
+
+ ))}
+
{data.warehouses.map(warehouseId => (
["price", "quantity", "sku"],
variantErrors
);
-
return (
)
)}
-
- onVariantDataChange(
- variantIndex,
- "price",
- event.target.value
- )
- }
- />
-
+ {channelListings.map(listing => {
+ const error = variantFormErrors.price?.channels?.find(
+ id => id === listing.id
+ );
+ return (
+
+ channel.channelId === listing.id
+ )?.price
+ }
+ required
+ onChange={event =>
+ onVariantPriceDataChange(variantIndex, {
+ channelId: listing.id,
+ price: event.target.value
+ })
+ }
+ />
+
fullWidth
value={variant.sku}
onChange={event =>
- onVariantDataChange(variantIndex, "sku", event.target.value)
+ onVariantSkuChange(variantIndex, event.target.value)
}
/>
diff --git a/src/products/components/ProductVariantCreatorPage/__snapshots__/reducer.test.ts.snap b/src/products/components/ProductVariantCreatorPage/__snapshots__/reducer.test.ts.snap
index 23447aca2..1609ff601 100644
--- a/src/products/components/ProductVariantCreatorPage/__snapshots__/reducer.test.ts.snap
+++ b/src/products/components/ProductVariantCreatorPage/__snapshots__/reducer.test.ts.snap
@@ -27,16 +27,55 @@ Object {
],
"price": Object {
"attribute": "attr-2",
+ "channels": Array [
+ Object {
+ "channelId": "channel-1",
+ "price": "0",
+ },
+ Object {
+ "channelId": "channel-2",
+ "price": "2",
+ },
+ Object {
+ "channelId": "channel-3",
+ "price": "2",
+ },
+ ],
"mode": "attribute",
- "value": "",
"values": Array [
Object {
"slug": "val-2-2",
- "value": "24.99",
+ "value": Array [
+ Object {
+ "channelId": "channel-1",
+ "price": "0",
+ },
+ Object {
+ "channelId": "channel-2",
+ "price": "2",
+ },
+ Object {
+ "channelId": "channel-3",
+ "price": "2",
+ },
+ ],
},
Object {
"slug": "val-2-4",
- "value": "26.99",
+ "value": Array [
+ Object {
+ "channelId": "channel-1",
+ "price": "0",
+ },
+ Object {
+ "channelId": "channel-2",
+ "price": "2",
+ },
+ Object {
+ "channelId": "channel-3",
+ "price": "2",
+ },
+ ],
},
],
},
@@ -87,7 +126,20 @@ Object {
],
},
],
- "price": "24.99",
+ "channelListings": Array [
+ Object {
+ "channelId": "channel-1",
+ "price": "0",
+ },
+ Object {
+ "channelId": "channel-2",
+ "price": "2",
+ },
+ Object {
+ "channelId": "channel-3",
+ "price": "2",
+ },
+ ],
"sku": "",
"stocks": Array [
Object {
@@ -129,7 +181,20 @@ Object {
],
},
],
- "price": "24.99",
+ "channelListings": Array [
+ Object {
+ "channelId": "channel-1",
+ "price": "0",
+ },
+ Object {
+ "channelId": "channel-2",
+ "price": "2",
+ },
+ Object {
+ "channelId": "channel-3",
+ "price": "2",
+ },
+ ],
"sku": "",
"stocks": Array [
Object {
@@ -171,7 +236,20 @@ Object {
],
},
],
- "price": "26.99",
+ "channelListings": Array [
+ Object {
+ "channelId": "channel-1",
+ "price": "0",
+ },
+ Object {
+ "channelId": "channel-2",
+ "price": "2",
+ },
+ Object {
+ "channelId": "channel-3",
+ "price": "2",
+ },
+ ],
"sku": "",
"stocks": Array [
Object {
@@ -213,7 +291,20 @@ Object {
],
},
],
- "price": "49.99",
+ "channelListings": Array [
+ Object {
+ "channelId": "channel-1",
+ "price": "7",
+ },
+ Object {
+ "channelId": "channel-2",
+ "price": "2",
+ },
+ Object {
+ "channelId": "channel-3",
+ "price": "2",
+ },
+ ],
"sku": "",
"stocks": Array [
Object {
@@ -255,7 +346,20 @@ Object {
],
},
],
- "price": "24.99",
+ "channelListings": Array [
+ Object {
+ "channelId": "channel-1",
+ "price": "0",
+ },
+ Object {
+ "channelId": "channel-2",
+ "price": "2",
+ },
+ Object {
+ "channelId": "channel-3",
+ "price": "2",
+ },
+ ],
"sku": "",
"stocks": Array [
Object {
@@ -297,7 +401,20 @@ Object {
],
},
],
- "price": "24.99",
+ "channelListings": Array [
+ Object {
+ "channelId": "channel-1",
+ "price": "0",
+ },
+ Object {
+ "channelId": "channel-2",
+ "price": "2",
+ },
+ Object {
+ "channelId": "channel-3",
+ "price": "2",
+ },
+ ],
"sku": "",
"stocks": Array [
Object {
@@ -339,7 +456,20 @@ Object {
],
},
],
- "price": "26.99",
+ "channelListings": Array [
+ Object {
+ "channelId": "channel-1",
+ "price": "0",
+ },
+ Object {
+ "channelId": "channel-2",
+ "price": "2",
+ },
+ Object {
+ "channelId": "channel-3",
+ "price": "2",
+ },
+ ],
"sku": "",
"stocks": Array [
Object {
@@ -381,7 +511,20 @@ Object {
],
},
],
- "price": "26.99",
+ "channelListings": Array [
+ Object {
+ "channelId": "channel-1",
+ "price": "0",
+ },
+ Object {
+ "channelId": "channel-2",
+ "price": "2",
+ },
+ Object {
+ "channelId": "channel-3",
+ "price": "2",
+ },
+ ],
"sku": "",
"stocks": Array [
Object {
@@ -439,16 +582,55 @@ Object {
],
"price": Object {
"attribute": "attr-2",
+ "channels": Array [
+ Object {
+ "channelId": "channel-1",
+ "price": "0",
+ },
+ Object {
+ "channelId": "channel-2",
+ "price": "2",
+ },
+ Object {
+ "channelId": "channel-3",
+ "price": "2",
+ },
+ ],
"mode": "attribute",
- "value": "",
"values": Array [
Object {
"slug": "val-2-2",
- "value": "24.99",
+ "value": Array [
+ Object {
+ "channelId": "channel-1",
+ "price": "0",
+ },
+ Object {
+ "channelId": "channel-2",
+ "price": "2",
+ },
+ Object {
+ "channelId": "channel-3",
+ "price": "2",
+ },
+ ],
},
Object {
"slug": "val-2-4",
- "value": "26.99",
+ "value": Array [
+ Object {
+ "channelId": "channel-1",
+ "price": "0",
+ },
+ Object {
+ "channelId": "channel-2",
+ "price": "2",
+ },
+ Object {
+ "channelId": "channel-3",
+ "price": "2",
+ },
+ ],
},
],
},
@@ -499,7 +681,20 @@ Object {
],
},
],
- "price": "24.99",
+ "channelListings": Array [
+ Object {
+ "channelId": "channel-1",
+ "price": "0",
+ },
+ Object {
+ "channelId": "channel-2",
+ "price": "2",
+ },
+ Object {
+ "channelId": "channel-3",
+ "price": "2",
+ },
+ ],
"sku": "",
"stocks": Array [
Object {
@@ -541,7 +736,20 @@ Object {
],
},
],
- "price": "24.99",
+ "channelListings": Array [
+ Object {
+ "channelId": "channel-1",
+ "price": "0",
+ },
+ Object {
+ "channelId": "channel-2",
+ "price": "2",
+ },
+ Object {
+ "channelId": "channel-3",
+ "price": "2",
+ },
+ ],
"sku": "",
"stocks": Array [
Object {
@@ -583,7 +791,20 @@ Object {
],
},
],
- "price": "26.99",
+ "channelListings": Array [
+ Object {
+ "channelId": "channel-1",
+ "price": "0",
+ },
+ Object {
+ "channelId": "channel-2",
+ "price": "2",
+ },
+ Object {
+ "channelId": "channel-3",
+ "price": "2",
+ },
+ ],
"sku": "",
"stocks": Array [
Object {
@@ -625,7 +846,20 @@ Object {
],
},
],
- "price": "26.99",
+ "channelListings": Array [
+ Object {
+ "channelId": "channel-1",
+ "price": "0",
+ },
+ Object {
+ "channelId": "channel-2",
+ "price": "2",
+ },
+ Object {
+ "channelId": "channel-3",
+ "price": "2",
+ },
+ ],
"sku": "",
"stocks": Array [
Object {
@@ -667,7 +901,20 @@ Object {
],
},
],
- "price": "24.99",
+ "channelListings": Array [
+ Object {
+ "channelId": "channel-1",
+ "price": "0",
+ },
+ Object {
+ "channelId": "channel-2",
+ "price": "2",
+ },
+ Object {
+ "channelId": "channel-3",
+ "price": "2",
+ },
+ ],
"sku": "",
"stocks": Array [
Object {
@@ -709,7 +956,20 @@ Object {
],
},
],
- "price": "24.99",
+ "channelListings": Array [
+ Object {
+ "channelId": "channel-1",
+ "price": "0",
+ },
+ Object {
+ "channelId": "channel-2",
+ "price": "2",
+ },
+ Object {
+ "channelId": "channel-3",
+ "price": "2",
+ },
+ ],
"sku": "",
"stocks": Array [
Object {
@@ -751,7 +1011,20 @@ Object {
],
},
],
- "price": "26.99",
+ "channelListings": Array [
+ Object {
+ "channelId": "channel-1",
+ "price": "0",
+ },
+ Object {
+ "channelId": "channel-2",
+ "price": "2",
+ },
+ Object {
+ "channelId": "channel-3",
+ "price": "2",
+ },
+ ],
"sku": "",
"stocks": Array [
Object {
@@ -793,7 +1066,20 @@ Object {
],
},
],
- "price": "26.99",
+ "channelListings": Array [
+ Object {
+ "channelId": "channel-1",
+ "price": "0",
+ },
+ Object {
+ "channelId": "channel-2",
+ "price": "2",
+ },
+ Object {
+ "channelId": "channel-3",
+ "price": "2",
+ },
+ ],
"sku": "",
"stocks": Array [
Object {
@@ -851,8 +1137,21 @@ Object {
],
"price": Object {
"attribute": undefined,
+ "channels": Array [
+ Object {
+ "channelId": "channel-1",
+ "price": "1",
+ },
+ Object {
+ "channelId": "channel-2",
+ "price": "2",
+ },
+ Object {
+ "channelId": "channel-3",
+ "price": "3",
+ },
+ ],
"mode": "all",
- "value": "10.99",
"values": Array [],
},
"stock": Object {
@@ -893,8 +1192,21 @@ Object {
],
"price": Object {
"attribute": undefined,
+ "channels": Array [
+ Object {
+ "channelId": "channel-1",
+ "price": "22.99",
+ },
+ Object {
+ "channelId": "channel-2",
+ "price": "2",
+ },
+ Object {
+ "channelId": "channel-3",
+ "price": "3",
+ },
+ ],
"mode": "all",
- "value": "45.99",
"values": Array [],
},
"stock": Object {
@@ -930,7 +1242,20 @@ Object {
],
},
],
- "price": "45.99",
+ "channelListings": Array [
+ Object {
+ "channelId": "channel-1",
+ "price": "22.99",
+ },
+ Object {
+ "channelId": "channel-2",
+ "price": "2",
+ },
+ Object {
+ "channelId": "channel-3",
+ "price": "3",
+ },
+ ],
"sku": "",
"stocks": Array [
Object {
@@ -972,7 +1297,20 @@ Object {
],
},
],
- "price": "45.99",
+ "channelListings": Array [
+ Object {
+ "channelId": "channel-1",
+ "price": "22.99",
+ },
+ Object {
+ "channelId": "channel-2",
+ "price": "2",
+ },
+ Object {
+ "channelId": "channel-3",
+ "price": "3",
+ },
+ ],
"sku": "",
"stocks": Array [
Object {
@@ -1014,7 +1352,20 @@ Object {
],
},
],
- "price": "45.99",
+ "channelListings": Array [
+ Object {
+ "channelId": "channel-1",
+ "price": "22.99",
+ },
+ Object {
+ "channelId": "channel-2",
+ "price": "2",
+ },
+ Object {
+ "channelId": "channel-3",
+ "price": "3",
+ },
+ ],
"sku": "",
"stocks": Array [
Object {
@@ -1056,7 +1407,20 @@ Object {
],
},
],
- "price": "45.99",
+ "channelListings": Array [
+ Object {
+ "channelId": "channel-1",
+ "price": "22.99",
+ },
+ Object {
+ "channelId": "channel-2",
+ "price": "2",
+ },
+ Object {
+ "channelId": "channel-3",
+ "price": "3",
+ },
+ ],
"sku": "",
"stocks": Array [
Object {
@@ -1098,7 +1462,20 @@ Object {
],
},
],
- "price": "45.99",
+ "channelListings": Array [
+ Object {
+ "channelId": "channel-1",
+ "price": "22.99",
+ },
+ Object {
+ "channelId": "channel-2",
+ "price": "2",
+ },
+ Object {
+ "channelId": "channel-3",
+ "price": "3",
+ },
+ ],
"sku": "",
"stocks": Array [
Object {
@@ -1140,7 +1517,20 @@ Object {
],
},
],
- "price": "45.99",
+ "channelListings": Array [
+ Object {
+ "channelId": "channel-1",
+ "price": "22.99",
+ },
+ Object {
+ "channelId": "channel-2",
+ "price": "2",
+ },
+ Object {
+ "channelId": "channel-3",
+ "price": "3",
+ },
+ ],
"sku": "",
"stocks": Array [
Object {
@@ -1182,7 +1572,20 @@ Object {
],
},
],
- "price": "45.99",
+ "channelListings": Array [
+ Object {
+ "channelId": "channel-1",
+ "price": "22.99",
+ },
+ Object {
+ "channelId": "channel-2",
+ "price": "2",
+ },
+ Object {
+ "channelId": "channel-3",
+ "price": "3",
+ },
+ ],
"sku": "",
"stocks": Array [
Object {
@@ -1224,7 +1627,20 @@ Object {
],
},
],
- "price": "45.99",
+ "channelListings": Array [
+ Object {
+ "channelId": "channel-1",
+ "price": "22.99",
+ },
+ Object {
+ "channelId": "channel-2",
+ "price": "2",
+ },
+ Object {
+ "channelId": "channel-3",
+ "price": "3",
+ },
+ ],
"sku": "",
"stocks": Array [
Object {
@@ -1282,16 +1698,39 @@ Object {
],
"price": Object {
"attribute": "attr-1",
+ "channels": Array [
+ Object {
+ "channelId": "channel-1",
+ "price": "1",
+ },
+ Object {
+ "channelId": "channel-2",
+ "price": "2",
+ },
+ Object {
+ "channelId": "channel-3",
+ "price": "3",
+ },
+ ],
"mode": "attribute",
- "value": "10.99",
"values": Array [
Object {
"slug": "val-1-1",
- "value": "45.99",
+ "value": Array [
+ Object {
+ "channelId": "channel-1",
+ "price": "45.99",
+ },
+ ],
},
Object {
"slug": "val-1-7",
- "value": "51.99",
+ "value": Array [
+ Object {
+ "channelId": "channel-2",
+ "price": "51.99",
+ },
+ ],
},
],
},
@@ -1328,7 +1767,12 @@ Object {
],
},
],
- "price": "45.99",
+ "channelListings": Array [
+ Object {
+ "channelId": "channel-1",
+ "price": "45.99",
+ },
+ ],
"sku": "",
"stocks": Array [
Object {
@@ -1370,7 +1814,12 @@ Object {
],
},
],
- "price": "45.99",
+ "channelListings": Array [
+ Object {
+ "channelId": "channel-1",
+ "price": "45.99",
+ },
+ ],
"sku": "",
"stocks": Array [
Object {
@@ -1412,7 +1861,12 @@ Object {
],
},
],
- "price": "45.99",
+ "channelListings": Array [
+ Object {
+ "channelId": "channel-1",
+ "price": "45.99",
+ },
+ ],
"sku": "",
"stocks": Array [
Object {
@@ -1454,7 +1908,12 @@ Object {
],
},
],
- "price": "45.99",
+ "channelListings": Array [
+ Object {
+ "channelId": "channel-1",
+ "price": "45.99",
+ },
+ ],
"sku": "",
"stocks": Array [
Object {
@@ -1496,7 +1955,12 @@ Object {
],
},
],
- "price": "51.99",
+ "channelListings": Array [
+ Object {
+ "channelId": "channel-2",
+ "price": "51.99",
+ },
+ ],
"sku": "",
"stocks": Array [
Object {
@@ -1538,7 +2002,12 @@ Object {
],
},
],
- "price": "51.99",
+ "channelListings": Array [
+ Object {
+ "channelId": "channel-2",
+ "price": "51.99",
+ },
+ ],
"sku": "",
"stocks": Array [
Object {
@@ -1580,7 +2049,12 @@ Object {
],
},
],
- "price": "51.99",
+ "channelListings": Array [
+ Object {
+ "channelId": "channel-2",
+ "price": "51.99",
+ },
+ ],
"sku": "",
"stocks": Array [
Object {
@@ -1622,7 +2096,12 @@ Object {
],
},
],
- "price": "51.99",
+ "channelListings": Array [
+ Object {
+ "channelId": "channel-2",
+ "price": "51.99",
+ },
+ ],
"sku": "",
"stocks": Array [
Object {
@@ -1680,8 +2159,21 @@ Object {
],
"price": Object {
"attribute": undefined,
+ "channels": Array [
+ Object {
+ "channelId": "channel-1",
+ "price": "1",
+ },
+ Object {
+ "channelId": "channel-2",
+ "price": "2",
+ },
+ Object {
+ "channelId": "channel-3",
+ "price": "3",
+ },
+ ],
"mode": "all",
- "value": "10.99",
"values": Array [],
},
"stock": Object {
@@ -1717,7 +2209,20 @@ Object {
],
},
],
- "price": "10.99",
+ "channelListings": Array [
+ Object {
+ "channelId": "channel-1",
+ "price": "1",
+ },
+ Object {
+ "channelId": "channel-2",
+ "price": "2",
+ },
+ Object {
+ "channelId": "channel-3",
+ "price": "3",
+ },
+ ],
"sku": "",
"stocks": Array [
Object {
@@ -1759,7 +2264,20 @@ Object {
],
},
],
- "price": "10.99",
+ "channelListings": Array [
+ Object {
+ "channelId": "channel-1",
+ "price": "1",
+ },
+ Object {
+ "channelId": "channel-2",
+ "price": "2",
+ },
+ Object {
+ "channelId": "channel-3",
+ "price": "3",
+ },
+ ],
"sku": "",
"stocks": Array [
Object {
@@ -1801,7 +2319,20 @@ Object {
],
},
],
- "price": "10.99",
+ "channelListings": Array [
+ Object {
+ "channelId": "channel-1",
+ "price": "1",
+ },
+ Object {
+ "channelId": "channel-2",
+ "price": "2",
+ },
+ Object {
+ "channelId": "channel-3",
+ "price": "3",
+ },
+ ],
"sku": "",
"stocks": Array [
Object {
@@ -1843,7 +2374,20 @@ Object {
],
},
],
- "price": "10.99",
+ "channelListings": Array [
+ Object {
+ "channelId": "channel-1",
+ "price": "1",
+ },
+ Object {
+ "channelId": "channel-2",
+ "price": "2",
+ },
+ Object {
+ "channelId": "channel-3",
+ "price": "3",
+ },
+ ],
"sku": "",
"stocks": Array [
Object {
@@ -1885,7 +2429,20 @@ Object {
],
},
],
- "price": "10.99",
+ "channelListings": Array [
+ Object {
+ "channelId": "channel-1",
+ "price": "1",
+ },
+ Object {
+ "channelId": "channel-2",
+ "price": "2",
+ },
+ Object {
+ "channelId": "channel-3",
+ "price": "3",
+ },
+ ],
"sku": "",
"stocks": Array [
Object {
@@ -1927,7 +2484,20 @@ Object {
],
},
],
- "price": "10.99",
+ "channelListings": Array [
+ Object {
+ "channelId": "channel-1",
+ "price": "1",
+ },
+ Object {
+ "channelId": "channel-2",
+ "price": "2",
+ },
+ Object {
+ "channelId": "channel-3",
+ "price": "3",
+ },
+ ],
"sku": "",
"stocks": Array [
Object {
@@ -1969,7 +2539,20 @@ Object {
],
},
],
- "price": "10.99",
+ "channelListings": Array [
+ Object {
+ "channelId": "channel-1",
+ "price": "1",
+ },
+ Object {
+ "channelId": "channel-2",
+ "price": "2",
+ },
+ Object {
+ "channelId": "channel-3",
+ "price": "3",
+ },
+ ],
"sku": "",
"stocks": Array [
Object {
@@ -2011,7 +2594,20 @@ Object {
],
},
],
- "price": "10.99",
+ "channelListings": Array [
+ Object {
+ "channelId": "channel-1",
+ "price": "1",
+ },
+ Object {
+ "channelId": "channel-2",
+ "price": "2",
+ },
+ Object {
+ "channelId": "channel-3",
+ "price": "3",
+ },
+ ],
"sku": "",
"stocks": Array [
Object {
@@ -2069,8 +2665,21 @@ Object {
],
"price": Object {
"attribute": undefined,
+ "channels": Array [
+ Object {
+ "channelId": "channel-1",
+ "price": "1",
+ },
+ Object {
+ "channelId": "channel-2",
+ "price": "2",
+ },
+ Object {
+ "channelId": "channel-3",
+ "price": "3",
+ },
+ ],
"mode": "all",
- "value": "10.99",
"values": Array [],
},
"stock": Object {
@@ -2119,7 +2728,20 @@ Object {
],
},
],
- "price": "10.99",
+ "channelListings": Array [
+ Object {
+ "channelId": "channel-1",
+ "price": "1",
+ },
+ Object {
+ "channelId": "channel-2",
+ "price": "2",
+ },
+ Object {
+ "channelId": "channel-3",
+ "price": "3",
+ },
+ ],
"sku": "",
"stocks": Array [
Object {
@@ -2149,7 +2771,20 @@ Object {
],
},
],
- "price": "10.99",
+ "channelListings": Array [
+ Object {
+ "channelId": "channel-1",
+ "price": "1",
+ },
+ Object {
+ "channelId": "channel-2",
+ "price": "2",
+ },
+ Object {
+ "channelId": "channel-3",
+ "price": "3",
+ },
+ ],
"sku": "",
"stocks": Array [
Object {
@@ -2179,7 +2814,20 @@ Object {
],
},
],
- "price": "10.99",
+ "channelListings": Array [
+ Object {
+ "channelId": "channel-1",
+ "price": "1",
+ },
+ Object {
+ "channelId": "channel-2",
+ "price": "2",
+ },
+ Object {
+ "channelId": "channel-3",
+ "price": "3",
+ },
+ ],
"sku": "",
"stocks": Array [
Object {
@@ -2209,7 +2857,20 @@ Object {
],
},
],
- "price": "10.99",
+ "channelListings": Array [
+ Object {
+ "channelId": "channel-1",
+ "price": "1",
+ },
+ Object {
+ "channelId": "channel-2",
+ "price": "2",
+ },
+ Object {
+ "channelId": "channel-3",
+ "price": "3",
+ },
+ ],
"sku": "",
"stocks": Array [
Object {
@@ -2239,7 +2900,20 @@ Object {
],
},
],
- "price": "10.99",
+ "channelListings": Array [
+ Object {
+ "channelId": "channel-1",
+ "price": "1",
+ },
+ Object {
+ "channelId": "channel-2",
+ "price": "2",
+ },
+ Object {
+ "channelId": "channel-3",
+ "price": "3",
+ },
+ ],
"sku": "",
"stocks": Array [
Object {
@@ -2269,7 +2943,20 @@ Object {
],
},
],
- "price": "10.99",
+ "channelListings": Array [
+ Object {
+ "channelId": "channel-1",
+ "price": "1",
+ },
+ Object {
+ "channelId": "channel-2",
+ "price": "2",
+ },
+ Object {
+ "channelId": "channel-3",
+ "price": "3",
+ },
+ ],
"sku": "",
"stocks": Array [
Object {
@@ -2299,7 +2986,20 @@ Object {
],
},
],
- "price": "10.99",
+ "channelListings": Array [
+ Object {
+ "channelId": "channel-1",
+ "price": "1",
+ },
+ Object {
+ "channelId": "channel-2",
+ "price": "2",
+ },
+ Object {
+ "channelId": "channel-3",
+ "price": "3",
+ },
+ ],
"sku": "",
"stocks": Array [
Object {
@@ -2329,7 +3029,20 @@ Object {
],
},
],
- "price": "10.99",
+ "channelListings": Array [
+ Object {
+ "channelId": "channel-1",
+ "price": "1",
+ },
+ Object {
+ "channelId": "channel-2",
+ "price": "2",
+ },
+ Object {
+ "channelId": "channel-3",
+ "price": "3",
+ },
+ ],
"sku": "",
"stocks": Array [
Object {
@@ -2375,8 +3088,21 @@ Object {
],
"price": Object {
"attribute": undefined,
+ "channels": Array [
+ Object {
+ "channelId": "channel-1",
+ "price": "1",
+ },
+ Object {
+ "channelId": "channel-2",
+ "price": "2",
+ },
+ Object {
+ "channelId": "channel-3",
+ "price": "3",
+ },
+ ],
"mode": "all",
- "value": "10.99",
"values": Array [],
},
"stock": Object {
diff --git a/src/products/components/ProductVariantCreatorPage/createVariants.test.ts b/src/products/components/ProductVariantCreatorPage/createVariants.test.ts
index e0319c1ab..6eed8d71d 100644
--- a/src/products/components/ProductVariantCreatorPage/createVariants.test.ts
+++ b/src/products/components/ProductVariantCreatorPage/createVariants.test.ts
@@ -2,8 +2,8 @@ import {
createVariantFlatMatrixDimension,
createVariants
} from "./createVariants";
-import { attributes, thirdStep } from "./fixtures";
-import { ProductVariantCreateFormData } from "./form";
+import { attributes, channels, thirdStep } from "./fixtures";
+import { ChannelPrice, ProductVariantCreateFormData } from "./form";
describe("Creates variant matrix", () => {
it("with proper size", () => {
@@ -17,15 +17,15 @@ describe("Creates variant matrix", () => {
});
it("with constant price and stock", () => {
- const price = "49.99";
+ const channels: ChannelPrice[] = [{ channelId: "1", price: "2" }];
const stock = [80, 40, 30];
const data: ProductVariantCreateFormData = {
...thirdStep,
price: {
...thirdStep.price,
- mode: "all",
- value: price
+ channels,
+ mode: "all"
},
stock: {
...thirdStep.stock,
@@ -43,7 +43,7 @@ describe("Creates variant matrix", () => {
);
variants.forEach(variant => {
- expect(variant.price).toBe(price);
+ expect(variant.channelListings[0].price).toBe(channels[0].price);
variant.stocks.forEach((_, stockIndex) => {
expect(variant.stocks[stockIndex].quantity).toBe(stock[stockIndex]);
});
@@ -51,7 +51,6 @@ describe("Creates variant matrix", () => {
});
it("with constant stock and attribute dependent price", () => {
- const price = 49.99;
const stock = [80, 40, 30];
const attribute = attributes.find(
attribute => attribute.id === thirdStep.attributes[0].id
@@ -63,9 +62,12 @@ describe("Creates variant matrix", () => {
...thirdStep.price,
attribute: attribute.id,
mode: "attribute",
- values: attribute.values.map((attributeValue, attributeValueIndex) => ({
+ values: attribute.values.map((attributeValue, index) => ({
slug: attributeValue,
- value: (price * (attributeValueIndex + 1)).toString()
+ value: channels.map(channel => ({
+ channelId: channel.id,
+ price: (channel.price + index).toString()
+ }))
}))
},
stock: {
@@ -98,15 +100,17 @@ describe("Creates variant matrix", () => {
).values[0] === attributeValue
)
.forEach(variant => {
- expect(variant.price).toBe(
- (price * (attributeValueIndex + 1)).toString()
- );
+ variant.channelListings.map((channel, index) => {
+ expect(channel.price).toBe(
+ (channels[index].price + attributeValueIndex).toString()
+ );
+ });
});
});
});
it("with constant price and attribute dependent stock", () => {
- const price = "49.99";
+ const price: ChannelPrice[] = [{ channelId: "1", price: "2" }];
const stock = [80, 40, 30];
const attribute = attributes.find(
attribute => attribute.id === thirdStep.attributes[0].id
@@ -116,8 +120,8 @@ describe("Creates variant matrix", () => {
...thirdStep,
price: {
...thirdStep.price,
- mode: "all",
- value: price
+ channels: price,
+ mode: "all"
},
stock: {
...thirdStep.stock,
@@ -141,7 +145,7 @@ describe("Creates variant matrix", () => {
);
variants.forEach(variant => {
- expect(variant.price).toBe(price);
+ expect(variant.channelListings).toBe(price);
});
attribute.values.forEach((attributeValue, attributeValueIndex) => {
@@ -163,7 +167,6 @@ describe("Creates variant matrix", () => {
});
it("with attribute dependent price and stock", () => {
- const price = 49.99;
const stock = [80, 40, 30];
const attribute = attributes.find(
attribute => attribute.id === thirdStep.attributes[0].id
@@ -175,9 +178,12 @@ describe("Creates variant matrix", () => {
...thirdStep.price,
attribute: attribute.id,
mode: "attribute",
- values: attribute.values.map((attributeValue, attributeValueIndex) => ({
+ values: attribute.values.map((attributeValue, index) => ({
slug: attributeValue,
- value: (price * (attributeValueIndex + 1)).toString()
+ value: channels.map(channel => ({
+ channelId: channel.id,
+ price: (channel.price + index).toString()
+ }))
}))
},
stock: {
@@ -210,9 +216,11 @@ describe("Creates variant matrix", () => {
).values[0] === attributeValue
)
.forEach(variant => {
- expect(variant.price).toBe(
- (price * (attributeValueIndex + 1)).toString()
- );
+ variant.channelListings.map((channel, index) => {
+ expect(channel.price).toBe(
+ (channels[index].price + attributeValueIndex).toString()
+ );
+ });
});
});
diff --git a/src/products/components/ProductVariantCreatorPage/createVariants.ts b/src/products/components/ProductVariantCreatorPage/createVariants.ts
index 462be5760..5d51db996 100644
--- a/src/products/components/ProductVariantCreatorPage/createVariants.ts
+++ b/src/products/components/ProductVariantCreatorPage/createVariants.ts
@@ -1,9 +1,11 @@
import { ProductVariantBulkCreateInput } from "@saleor/types/globalTypes";
import {
- AllOrAttribute,
Attribute,
- ProductVariantCreateFormData
+ ChannelPrice,
+ Price,
+ ProductVariantCreateFormData,
+ Stock
} from "./form";
interface CreateVariantAttributeValueInput {
@@ -12,31 +14,66 @@ interface CreateVariantAttributeValueInput {
}
type CreateVariantInput = CreateVariantAttributeValueInput[];
-function getAttributeValuePriceOrStock(
+function findAttribute(
attributes: CreateVariantInput,
- priceOrStock: AllOrAttribute
-): T {
- const attribute = attributes.find(
- attribute => attribute.attributeId === priceOrStock.attribute
+ stockOrPrice: Stock | Price
+) {
+ return attributes.find(
+ attribute => attribute.attributeId === stockOrPrice.attribute
);
+}
- const attributeValue = priceOrStock.values.find(
+function getAttributeValueStock(
+ attributes: CreateVariantInput,
+ stock: Stock
+): number[] {
+ const attribute = findAttribute(attributes, stock);
+
+ const attributeValue = stock.values.find(
attributeValue => attribute.attributeValueSlug === attributeValue.slug
);
return attributeValue.value;
}
-function getValueFromMode(
+function getAttributeValuePrice(
attributes: CreateVariantInput,
- priceOrStock: AllOrAttribute,
- skipValue: T
-): T {
- switch (priceOrStock.mode) {
+ price: Price
+): ChannelPrice[] {
+ const attribute = findAttribute(attributes, price);
+
+ const attributeValue = price.values.find(
+ attributeValue => attribute.attributeValueSlug === attributeValue.slug
+ );
+
+ return attributeValue.value;
+}
+
+function getStockFromMode(
+ attributes: CreateVariantInput,
+ stock: Stock,
+ skipValue: number[]
+): number[] {
+ switch (stock.mode) {
case "all":
- return priceOrStock.value;
+ return stock.value;
case "attribute":
- return getAttributeValuePriceOrStock(attributes, priceOrStock);
+ return getAttributeValueStock(attributes, stock);
+ case "skip":
+ return skipValue;
+ }
+}
+
+function getPriceFromMode(
+ attributes: CreateVariantInput,
+ price: Price,
+ skipValue: ChannelPrice[]
+): ChannelPrice[] {
+ switch (price.mode) {
+ case "all":
+ return price.channels;
+ case "attribute":
+ return getAttributeValuePrice(attributes, price);
case "skip":
return skipValue;
}
@@ -46,8 +83,12 @@ function createVariant(
data: ProductVariantCreateFormData,
attributes: CreateVariantInput
): ProductVariantBulkCreateInput {
- const price = getValueFromMode(attributes, data.price, "0");
- const stocks = getValueFromMode(
+ const price = getPriceFromMode(
+ attributes,
+ data.price,
+ data.price.channels.map(channel => ({ ...channel, price: "" }))
+ );
+ const stocks = getStockFromMode(
attributes,
data.stock,
data.warehouses.map(() => 0)
@@ -58,7 +99,7 @@ function createVariant(
id: attribute.attributeId,
values: [attribute.attributeValueSlug]
})),
- price,
+ channelListings: price,
sku: "",
stocks: stocks.map((quantity, stockIndex) => ({
quantity,
diff --git a/src/products/components/ProductVariantCreatorPage/fixtures.ts b/src/products/components/ProductVariantCreatorPage/fixtures.ts
index c0878f527..8dcde4aa9 100644
--- a/src/products/components/ProductVariantCreatorPage/fixtures.ts
+++ b/src/products/components/ProductVariantCreatorPage/fixtures.ts
@@ -1,12 +1,20 @@
+import { ChannelPriceData } from "@saleor/channels/utils";
import { WarehouseFragment } from "@saleor/fragments/types/WarehouseFragment";
import { createVariants } from "./createVariants";
import {
- AllOrAttribute,
createInitialForm,
- ProductVariantCreateFormData
+ Price,
+ ProductVariantCreateFormData,
+ Stock
} from "./form";
+export const channels: ChannelPriceData[] = [
+ { currency: "USD", id: "channel-1", name: "Channel1", price: "1" },
+ { currency: "USD", id: "channel-2", name: "Channel2", price: "2" },
+ { currency: "USD", id: "channel-3", name: "Channel3", price: "3" }
+];
+
export const attributes = [
{
id: "attr-1",
@@ -58,7 +66,7 @@ export const warehouses: WarehouseFragment[] = [
];
export const secondStep: ProductVariantCreateFormData = {
- ...createInitialForm([], "10.99", warehouses),
+ ...createInitialForm([], channels, warehouses),
attributes: [
{
id: attributes[0].id,
@@ -98,22 +106,34 @@ export const thirdStep: ProductVariantCreateFormData = {
warehouses: warehouses.map(warehouse => warehouse.id)
};
-const price: AllOrAttribute = {
+const price: Price = {
attribute: thirdStep.attributes[1].id,
+ channels: [
+ { channelId: channels[0].id, price: "0" },
+ { channelId: channels[1].id, price: "2" },
+ { channelId: channels[2].id, price: "2" }
+ ],
mode: "attribute",
- value: "",
values: [
{
slug: thirdStep.attributes[1].values[0],
- value: "24.99"
+ value: [
+ { channelId: channels[0].id, price: "0" },
+ { channelId: channels[1].id, price: "2" },
+ { channelId: channels[2].id, price: "2" }
+ ]
},
{
slug: thirdStep.attributes[1].values[1],
- value: "26.99"
+ value: [
+ { channelId: channels[0].id, price: "0" },
+ { channelId: channels[1].id, price: "2" },
+ { channelId: channels[2].id, price: "2" }
+ ]
}
]
};
-const stock: AllOrAttribute = {
+const stock: Stock = {
attribute: thirdStep.attributes[2].id,
mode: "attribute",
value: [],
diff --git a/src/products/components/ProductVariantCreatorPage/form.ts b/src/products/components/ProductVariantCreatorPage/form.ts
index 1622dd86e..2e3fbf8a5 100644
--- a/src/products/components/ProductVariantCreatorPage/form.ts
+++ b/src/products/components/ProductVariantCreatorPage/form.ts
@@ -1,18 +1,30 @@
+import { ChannelPriceData } from "@saleor/channels/utils";
import { WarehouseFragment } from "@saleor/fragments/types/WarehouseFragment";
import { ProductDetails_product_productType_variantAttributes } from "@saleor/products/types/ProductDetails";
import { ProductVariantBulkCreateInput } from "../../../types/globalTypes";
+export interface ChannelPrice {
+ channelId: string;
+ price: string;
+}
+
export interface AttributeValue {
slug: string;
value: T;
}
export type VariantCreatorPricesAndSkuMode = "all" | "attribute" | "skip";
-export interface AllOrAttribute {
+export interface Price {
mode: VariantCreatorPricesAndSkuMode;
attribute: string;
- value: T;
- values: Array>;
+ channels: ChannelPrice[];
+ values: Array>;
+}
+export interface Stock {
+ mode: VariantCreatorPricesAndSkuMode;
+ attribute: string;
+ value: number[];
+ values: Array>;
}
export interface Attribute {
id: string;
@@ -20,33 +32,40 @@ export interface Attribute {
}
export interface ProductVariantCreateFormData {
attributes: Attribute[];
- price: AllOrAttribute;
- stock: AllOrAttribute;
+ price: Price;
+ stock: Stock;
variants: ProductVariantBulkCreateInput[];
warehouses: string[];
}
export const createInitialForm = (
attributes: ProductDetails_product_productType_variantAttributes[],
- price: string,
+ channels: ChannelPriceData[],
warehouses: WarehouseFragment[]
-): ProductVariantCreateFormData => ({
- attributes: attributes.map(attribute => ({
- id: attribute.id,
- values: []
- })),
- price: {
- attribute: undefined,
- mode: "all",
- value: price || "",
- values: []
- },
- stock: {
- attribute: undefined,
- mode: "all",
- value: warehouses.length === 1 ? [0] : [],
- values: []
- },
- variants: [],
- warehouses: warehouses.length === 1 ? [warehouses[0].id] : []
-});
+): ProductVariantCreateFormData => {
+ const channelListings =
+ channels?.map(channel => ({
+ channelId: channel.id,
+ price: channel.price?.toString() || ""
+ })) || [];
+ return {
+ attributes: attributes.map(attribute => ({
+ id: attribute.id,
+ values: []
+ })),
+ price: {
+ attribute: undefined,
+ channels: channelListings,
+ mode: "all",
+ values: []
+ },
+ stock: {
+ attribute: undefined,
+ mode: "all",
+ value: warehouses.length === 1 ? [0] : [],
+ values: []
+ },
+ variants: [],
+ warehouses: warehouses.length === 1 ? [warehouses[0].id] : []
+ };
+};
diff --git a/src/products/components/ProductVariantCreatorPage/reducer.test.ts b/src/products/components/ProductVariantCreatorPage/reducer.test.ts
index ce6f8debf..42f18d87a 100644
--- a/src/products/components/ProductVariantCreatorPage/reducer.test.ts
+++ b/src/products/components/ProductVariantCreatorPage/reducer.test.ts
@@ -1,14 +1,13 @@
import {
attributes,
+ channels,
fourthStep,
secondStep,
thirdStep,
warehouses
} from "./fixtures";
-import reducer, {
- ProductVariantCreateReducerActionType,
- VariantField
-} from "./reducer";
+import { ChannelPrice } from "./form";
+import reducer, { ProductVariantCreateReducerActionType } from "./reducer";
function execActions(
initialState: TState,
@@ -73,7 +72,7 @@ describe("Reducer is able to", () => {
});
it("select price for all variants", () => {
- const price = "45.99";
+ const price = "22.99";
const state = execActions(thirdStep, reducer, [
{
applyPriceOrStockToAll: {
@@ -83,6 +82,7 @@ describe("Reducer is able to", () => {
},
{
changeApplyPriceToAllValue: {
+ channelId: channels[0].id,
price
},
type: ProductVariantCreateReducerActionType.changeApplyPriceToAllValue
@@ -91,9 +91,8 @@ describe("Reducer is able to", () => {
type: ProductVariantCreateReducerActionType.reload
}
]);
-
expect(state.price.mode).toBe("all");
- expect(state.price.value).toBe(price);
+ expect(state.price.channels[0].price).toBe(price);
expect(state).toMatchSnapshot();
});
@@ -163,6 +162,7 @@ describe("Reducer is able to", () => {
},
{
changeAttributeValuePrice: {
+ channelId: channels[0].id,
price: value.toString(),
valueId: attribute.values[0]
},
@@ -170,6 +170,7 @@ describe("Reducer is able to", () => {
},
{
changeAttributeValuePrice: {
+ channelId: channels[1].id,
price: (value + 6).toString(),
valueId: attribute.values[1]
},
@@ -235,24 +236,24 @@ describe("Reducer is able to", () => {
});
it("modify individual variant price", () => {
- const field: VariantField = "price";
- const value = "49.99";
+ const value: ChannelPrice = { channelId: channels[0].id, price: "7" };
const variantIndex = 3;
const state = execActions(fourthStep, reducer, [
{
- changeVariantData: {
- field,
+ changeVariantPriceData: {
value,
variantIndex
},
- type: ProductVariantCreateReducerActionType.changeVariantData
+ type: ProductVariantCreateReducerActionType.changeVariantPriceData
}
]);
- expect(state.variants[variantIndex].price).toBe(value);
- expect(state.variants[variantIndex - 1].price).toBe(
- fourthStep.variants[variantIndex - 1].price
+ expect(state.variants[variantIndex].channelListings[0].price).toBe(
+ value.price
+ );
+ expect(state.variants[variantIndex - 1].channelListings).toBe(
+ fourthStep.variants[variantIndex - 1].channelListings
);
expect(state).toMatchSnapshot();
});
diff --git a/src/products/components/ProductVariantCreatorPage/reducer.ts b/src/products/components/ProductVariantCreatorPage/reducer.ts
index 5f702218c..bc312763f 100644
--- a/src/products/components/ProductVariantCreatorPage/reducer.ts
+++ b/src/products/components/ProductVariantCreatorPage/reducer.ts
@@ -25,36 +25,40 @@ export enum ProductVariantCreateReducerActionType {
changeApplyStockToAttributeId,
changeAttributeValuePrice,
changeAttributeValueStock,
- changeVariantData,
+ changeVariantSku,
+ changeVariantPriceData,
changeVariantStockData,
changeWarehouses,
deleteVariant,
reload,
selectValue
}
-export type VariantField = "price" | "sku";
export interface ProductVariantCreateReducerAction {
applyPriceOrStockToAll?: {
mode: VariantCreatorPricesAndSkuMode;
};
changeApplyPriceToAllValue?: {
+ channelId: string;
price: string;
};
changeApplyPriceOrStockToAttributeId?: {
attributeId: string;
};
changeApplyStockToAllValue?: Record<"quantity" | "warehouseIndex", number>;
- changeAttributeValuePrice?: Record<"valueId" | "price", string>;
+ changeAttributeValuePrice?: Record<"valueId" | "price" | "channelId", string>;
changeAttributeValueStock?: {
valueId: string;
quantity: number;
warehouseIndex: number;
};
- changeVariantData?: {
- field: VariantField;
+ changeVariantSku?: {
value: string;
variantIndex: number;
};
+ changeVariantPriceData?: {
+ value: { channelId: string; price: string };
+ variantIndex: number;
+ };
changeVariantStockData?: {
stock: StockInput;
variantIndex: number;
@@ -94,7 +98,7 @@ function selectValue(
? toggle(
{
slug: valueSlug,
- value: ""
+ value: []
},
prevState.price.values,
(a, b) => a.slug === b.slug
@@ -156,7 +160,8 @@ function applyStockToAll(
function changeAttributeValuePrice(
state: ProductVariantCreateFormData,
attributeValueSlug: string,
- price: string
+ price: string,
+ channelId: string
): ProductVariantCreateFormData {
const index = state.price.values.findIndex(
value => value.slug === attributeValueSlug
@@ -166,10 +171,15 @@ function changeAttributeValuePrice(
throw new Error(`Value with id ${attributeValueSlug} not found`);
}
+ const channels = state.price.values[index].value;
+ const channelIndex = channels.findIndex(
+ channel => channel.channelId === channelId
+ );
+
const values = updateAtIndex(
{
slug: attributeValueSlug,
- value: price
+ value: updateAtIndex({ channelId, price }, channels, channelIndex)
},
state.price.values,
index
@@ -229,7 +239,7 @@ function changeApplyPriceToAttributeId(
);
const values = attribute.values.map(slug => ({
slug,
- value: ""
+ value: []
}));
return {
@@ -266,13 +276,19 @@ function changeApplyStockToAttributeId(
function changeApplyPriceToAllValue(
state: ProductVariantCreateFormData,
- value: string
+ channelId: string,
+ price: string
): ProductVariantCreateFormData {
+ const prevChannels = [...state.price.channels];
+ const channelIndex = prevChannels?.findIndex(
+ channel => channelId === channel.channelId
+ );
+ prevChannels[channelIndex] = { channelId, price };
return {
...state,
price: {
...state.price,
- value
+ channels: prevChannels
}
};
}
@@ -291,20 +307,15 @@ function changeApplyStockToAllValue(
};
}
-function changeVariantData(
+function changeVariantSku(
state: ProductVariantCreateFormData,
- field: VariantField,
value: string,
variantIndex: number
): ProductVariantCreateFormData {
const variant = {
...state.variants[variantIndex]
};
- if (field === "price") {
- variant.price = value;
- } else if (field === "sku") {
- variant.sku = value;
- }
+ variant.sku = value;
return {
...state,
@@ -332,6 +343,32 @@ function changeVariantStockData(
};
}
+function changeVariantPriceData(
+ state: ProductVariantCreateFormData,
+ value: { channelId: string; price: string },
+ variantIndex: number
+): ProductVariantCreateFormData {
+ const { channelId, price } = value;
+ const variant = {
+ ...state.variants[variantIndex]
+ };
+ const channelIndex = variant.channelListings.findIndex(
+ listing => listing.channelId === channelId
+ );
+ const updatedVariant = {
+ ...variant,
+ channelListings: updateAtIndex(
+ { channelId, price },
+ [...variant.channelListings],
+ channelIndex
+ )
+ };
+ return {
+ ...state,
+ variants: updateAtIndex(updatedVariant, [...state.variants], variantIndex)
+ };
+}
+
function changeWarehouses(
state: ProductVariantCreateFormData,
warehouseId: string
@@ -408,7 +445,8 @@ function reduceProductVariantCreateFormData(
return changeAttributeValuePrice(
prevState,
action.changeAttributeValuePrice.valueId,
- action.changeAttributeValuePrice.price
+ action.changeAttributeValuePrice.price,
+ action.changeAttributeValuePrice.channelId
);
case ProductVariantCreateReducerActionType.changeAttributeValueStock:
return changeAttributeValueStock(
@@ -430,6 +468,7 @@ function reduceProductVariantCreateFormData(
case ProductVariantCreateReducerActionType.changeApplyPriceToAllValue:
return changeApplyPriceToAllValue(
prevState,
+ action.changeApplyPriceToAllValue.channelId,
action.changeApplyPriceToAllValue.price
);
case ProductVariantCreateReducerActionType.changeApplyStockToAllValue:
@@ -438,12 +477,17 @@ function reduceProductVariantCreateFormData(
action.changeApplyStockToAllValue.warehouseIndex,
action.changeApplyStockToAllValue.quantity
);
- case ProductVariantCreateReducerActionType.changeVariantData:
- return changeVariantData(
+ case ProductVariantCreateReducerActionType.changeVariantSku:
+ return changeVariantSku(
prevState,
- action.changeVariantData.field,
- action.changeVariantData.value,
- action.changeVariantData.variantIndex
+ action.changeVariantSku.value,
+ action.changeVariantSku.variantIndex
+ );
+ case ProductVariantCreateReducerActionType.changeVariantPriceData:
+ return changeVariantPriceData(
+ prevState,
+ action.changeVariantPriceData.value,
+ action.changeVariantPriceData.variantIndex
);
case ProductVariantCreateReducerActionType.changeVariantStockData:
return changeVariantStockData(
diff --git a/src/products/components/ProductVariantPage/ProductVariantPage.tsx b/src/products/components/ProductVariantPage/ProductVariantPage.tsx
index 09b9d4497..8fc69efd9 100644
--- a/src/products/components/ProductVariantPage/ProductVariantPage.tsx
+++ b/src/products/components/ProductVariantPage/ProductVariantPage.tsx
@@ -1,48 +1,32 @@
+import { ChannelPriceData } from "@saleor/channels/utils";
import AppHeader from "@saleor/components/AppHeader";
import CardSpacer from "@saleor/components/CardSpacer";
import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton";
import Container from "@saleor/components/Container";
import Grid from "@saleor/components/Grid";
-import { MetadataFormData } from "@saleor/components/Metadata";
import Metadata from "@saleor/components/Metadata/Metadata";
import PageHeader from "@saleor/components/PageHeader";
import SaveButtonBar from "@saleor/components/SaveButtonBar";
+import { ProductChannelListingErrorFragment } from "@saleor/fragments/types/ProductChannelListingErrorFragment";
import { ProductErrorWithAttributesFragment } from "@saleor/fragments/types/ProductErrorWithAttributesFragment";
import { ProductVariant } from "@saleor/fragments/types/ProductVariant";
import { WarehouseFragment } from "@saleor/fragments/types/WarehouseFragment";
-import { FormsetData } from "@saleor/hooks/useFormset";
import { VariantUpdate_productVariantUpdate_errors } from "@saleor/products/types/VariantUpdate";
import { ReorderAction } from "@saleor/types";
import React from "react";
import { maybe } from "../../../misc";
import ProductShipping from "../ProductShipping/ProductShipping";
-import ProductStocks, { ProductStockInput } from "../ProductStocks";
-import ProductVariantAttributes, {
- VariantAttributeInputData
-} from "../ProductVariantAttributes";
+import ProductStocks from "../ProductStocks";
+import ProductVariantAttributes from "../ProductVariantAttributes";
import ProductVariantImages from "../ProductVariantImages";
import ProductVariantImageSelectDialog from "../ProductVariantImageSelectDialog";
import ProductVariantNavigation from "../ProductVariantNavigation";
import ProductVariantPrice from "../ProductVariantPrice";
import ProductVariantSetDefault from "../ProductVariantSetDefault";
-import ProductVariantUpdateForm from "./form";
-
-export interface ProductVariantPageFormData extends MetadataFormData {
- costPrice: string;
- price: string;
- sku: string;
- trackInventory: boolean;
- weight: string;
-}
-
-export interface ProductVariantPageSubmitData
- extends ProductVariantPageFormData {
- attributes: FormsetData;
- addStocks: ProductStockInput[];
- updateStocks: ProductStockInput[];
- removeStocks: string[];
-}
+import ProductVariantUpdateForm, {
+ ProductVariantUpdateSubmitData
+} from "./form";
interface ProductVariantPageProps {
defaultVariantId?: string;
@@ -51,6 +35,8 @@ interface ProductVariantPageProps {
| ProductErrorWithAttributesFragment[]
| VariantUpdate_productVariantUpdate_errors[];
header: string;
+ channels: ChannelPriceData[];
+ channelErrors: ProductChannelListingErrorFragment[];
loading?: boolean;
placeholderImage?: string;
saveButtonBarState: ConfirmButtonTransitionState;
@@ -60,7 +46,7 @@ interface ProductVariantPageProps {
onAdd();
onBack();
onDelete();
- onSubmit(data: ProductVariantPageSubmitData);
+ onSubmit(data: ProductVariantUpdateSubmitData);
onImageSelect(id: string);
onVariantClick(variantId: string);
onSetDefaultVariant();
@@ -68,6 +54,8 @@ interface ProductVariantPageProps {
}
const ProductVariantPage: React.FC = ({
+ channels,
+ channelErrors,
defaultVariantId,
defaultWeightUnit,
errors,
@@ -101,9 +89,7 @@ const ProductVariantPage: React.FC = ({
return (
<>
-
- {maybe(() => variant.product.name)}
-
+ {variant?.product?.name}
{variant?.product?.defaultVariant?.id !== variant?.id && (
= ({
variant={variant}
onSubmit={onSubmit}
warehouses={warehouses}
+ currentChannels={channels}
>
- {({ change, data, handlers, hasChanged, submit }) => (
+ {({
+ change,
+ data,
+ disabled: formDisabled,
+ handlers,
+ hasChanged,
+ submit
+ }) => (
<>
@@ -152,17 +146,15 @@ const ProductVariantPage: React.FC = ({
/>
({
+ ...channel.data,
+ ...channel.value
+ })
+ )}
+ errors={channelErrors}
loading={loading}
- onChange={change}
+ onChange={handlers.changeChannels}
/>
= ({
|