Add ability to upload video URL to product gallery (#972)

* Create a dropdown and modal for uploading Video URLs

* Add ability to upload video URL to product gallery

* Add support for other video providers, minor UI tweaks

* Extract translations

* Style changes

* Adjust dashboard to fetch media oembed data

* Update codebase to match the schema

* Changes after code review

* Update schema.graphql and fixtures

* Update defaultMessages.json

* Fix failing jest tests

* Update schema and types

locale/defaultMessages.json

@@ -5015,29 +5015,13 @@
     "context": "informations about product prices etc, header",
     "string": "Financial Information"
   },
-  "src_dot_products_dot_components_dot_ProductImageNavigation_dot_3060635772": {
+  "src_dot_products_dot_components_dot_ProductExternalMediaDialog_dot_4146081479": {
-    "context": "section header",
+    "context": "modal header",
-    "string": "All Photos"
+    "string": "Media from the URL you supply will be shown in the media gallery. You will be able to define the order of the gallery."
   },
-  "src_dot_products_dot_components_dot_ProductImagePage_dot_1905082483": {
+  "src_dot_products_dot_components_dot_ProductExternalMediaDialog_dot_buttonMessage": {
-    "context": "field is optional",
+    "context": "modal button",
-    "string": "Optional"
+    "string": "Upload URL"
-  },
-  "src_dot_products_dot_components_dot_ProductImagePage_dot_2546267317": {
-    "context": "header",
-    "string": "Edit Photo"
-  },
-  "src_dot_products_dot_components_dot_ProductImagePage_dot_367472710": {
-    "context": "section header",
-    "string": "Photo View"
-  },
-  "src_dot_products_dot_components_dot_ProductImagePage_dot_3822382625": {
-    "context": "section header",
-    "string": "Photo Information"
-  },
-  "src_dot_products_dot_components_dot_ProductImages_dot_3240888698": {
-    "context": "section header",
-    "string": "Images"
   },
   "src_dot_products_dot_components_dot_ProductListPage_dot_1134347598": {
     "context": "product price",
@@ -5116,6 +5100,42 @@
     "context": "product",
     "string": "Name"
   },
+  "src_dot_products_dot_components_dot_ProductMediaNavigation_dot_allMedia": {
+    "context": "section header",
+    "string": "All Media"
+  },
+  "src_dot_products_dot_components_dot_ProductMediaPage_dot_editMedia": {
+    "context": "header",
+    "string": "Edit Media"
+  },
+  "src_dot_products_dot_components_dot_ProductMediaPage_dot_mediaInformation": {
+    "context": "section header",
+    "string": "Media Information"
+  },
+  "src_dot_products_dot_components_dot_ProductMediaPage_dot_mediaView": {
+    "context": "section header",
+    "string": "Media View"
+  },
+  "src_dot_products_dot_components_dot_ProductMediaPage_dot_optional": {
+    "context": "field is optional",
+    "string": "Optional"
+  },
+  "src_dot_products_dot_components_dot_ProductMediaPopper_dot_uploadImages": {
+    "context": "modal button images upload",
+    "string": "Upload Images"
+  },
+  "src_dot_products_dot_components_dot_ProductMediaPopper_dot_uploadUrl": {
+    "context": "modal button url upload",
+    "string": "Upload URL"
+  },
+  "src_dot_products_dot_components_dot_ProductMedia_dot_media": {
+    "context": "section header",
+    "string": "Media"
+  },
+  "src_dot_products_dot_components_dot_ProductMedia_dot_upload": {
+    "context": "modal button upload",
+    "string": "Upload"
+  },
   "src_dot_products_dot_components_dot_ProductOrganization_dot_150865454": {
     "context": "product is not configurable",
     "string": "Simple"
@@ -5319,20 +5339,21 @@
     "context": "dialog header",
     "string": "Delete Variant"
   },
-  "src_dot_products_dot_components_dot_ProductVariantImageSelectDialog_dot_3196043669": {
+  "src_dot_products_dot_components_dot_ProductVariantImageSelectDialog_dot_2015102342": {
     "context": "dialog header",
-    "string": "Image Selection"
+    "string": "Media Selection"
   },
-  "src_dot_products_dot_components_dot_ProductVariantImages_dot_3240888698": {
+  "src_dot_products_dot_components_dot_ProductVariantMedia_dot_chooseMedia": {
-    "context": "section header",
-    "string": "Images"
-  },
-  "src_dot_products_dot_components_dot_ProductVariantImages_dot_3449133076": {
-    "string": "Select a specific variant image from product images"
-  },
-  "src_dot_products_dot_components_dot_ProductVariantImages_dot_989683980": {
     "context": "button",
-    "string": "Choose photos"
+    "string": "Choose media"
+  },
+  "src_dot_products_dot_components_dot_ProductVariantMedia_dot_media": {
+    "context": "section header",
+    "string": "Media"
+  },
+  "src_dot_products_dot_components_dot_ProductVariantMedia_dot_selectSpecificVariant": {
+    "context": "select variant media",
+    "string": "Select a specific variant media from product media"
   },
   "src_dot_products_dot_components_dot_ProductVariantNavigation_dot_1222345317": {
     "context": "default product variant indicator",
@@ -6721,6 +6742,9 @@
   "src_dot_utils_dot_errors_dot_unknownError": {
     "string": "Unknown error"
   },
+  "src_dot_utils_dot_errors_dot_unsupportedMediaProvider": {
+    "string": "Unsupported media provider or incorrect URL"
+  },
   "src_dot_utils_dot_errors_dot_urlNotSet": {
     "context": "error message",
     "string": "URL not set for an invoice"

schema.graphql

@@ -2328,6 +2328,19 @@ type LanguageDisplay {
   language: String!
 }
 
+type LimitInfo {
+  currentUsage: Limits!
+  allowedUsage: Limits!
+}
+
+type Limits {
+  channels: Int
+  orders: Int
+  productVariants: Int
+  staffUsers: Int
+  warehouses: Int
+}
+
 type Manifest {
   identifier: String!
   version: String!
@@ -2640,12 +2653,12 @@ type Mutation {
   productUpdate(id: ID!, input: ProductInput!): ProductUpdate
   productTranslate(id: ID!, input: TranslationInput!, languageCode: LanguageCodeEnum!): ProductTranslate
   productChannelListingUpdate(id: ID!, input: ProductChannelListingUpdateInput!): ProductChannelListingUpdate
-  productImageCreate(input: ProductImageCreateInput!): ProductImageCreate
+  productMediaCreate(input: ProductMediaCreateInput!): ProductMediaCreate
   productVariantReorder(moves: [ReorderInput]!, productId: ID!): ProductVariantReorder
-  productImageDelete(id: ID!): ProductImageDelete
+  productMediaDelete(id: ID!): ProductMediaDelete
-  productImageBulkDelete(ids: [ID]!): ProductImageBulkDelete
+  productMediaBulkDelete(ids: [ID]!): ProductMediaBulkDelete
-  productImageReorder(imagesIds: [ID]!, productId: ID!): ProductImageReorder
+  productMediaReorder(mediaIds: [ID]!, productId: ID!): ProductMediaReorder
-  productImageUpdate(id: ID!, input: ProductImageUpdateInput!): ProductImageUpdate
+  productMediaUpdate(id: ID!, input: ProductMediaUpdateInput!): ProductMediaUpdate
   productTypeCreate(input: ProductTypeInput!): ProductTypeCreate
   productTypeDelete(id: ID!): ProductTypeDelete
   productTypeBulkDelete(ids: [ID]!): ProductTypeBulkDelete
@@ -2668,8 +2681,8 @@ type Mutation {
   productVariantTranslate(id: ID!, input: NameTranslationInput!, languageCode: LanguageCodeEnum!): ProductVariantTranslate
   productVariantChannelListingUpdate(id: ID!, input: [ProductVariantChannelListingAddInput!]!): ProductVariantChannelListingUpdate
   productVariantReorderAttributeValues(attributeId: ID!, moves: [ReorderInput]!, variantId: ID!): ProductVariantReorderAttributeValues
-  variantImageAssign(imageId: ID!, variantId: ID!): VariantImageAssign
+  variantMediaAssign(mediaId: ID!, variantId: ID!): VariantMediaAssign
-  variantImageUnassign(imageId: ID!, variantId: ID!): VariantImageUnassign
+  variantMediaUnassign(mediaId: ID!, variantId: ID!): VariantMediaUnassign
   paymentCapture(amount: PositiveDecimal, paymentId: ID!): PaymentCapture
   paymentRefund(amount: PositiveDecimal, paymentId: ID!): PaymentRefund
   paymentVoid(paymentId: ID!): PaymentVoid
@@ -3941,9 +3954,11 @@ type Product implements Node & ObjectWithMetadata {
   taxType: TaxType
   attributes: [SelectedAttribute!]!
   channelListings: [ProductChannelListing!]
-  imageById(id: ID): ProductImage
+  mediaById(id: ID): ProductMedia!
+  imageById(id: ID): ProductImage @deprecated(reason: "Will be removed in Saleor 4.0. Use the `mediaById` field instead.")
   variants: [ProductVariant]
-  images: [ProductImage]
+  media: [ProductMedia]
+  images: [ProductImage] @deprecated(reason: "Will be removed in Saleor 4.0. Use the `media` field instead.")
   collections: [Collection]
   translation(languageCode: LanguageCodeEnum!): ProductTranslation
   availableForPurchase: Date
@@ -4039,10 +4054,10 @@ type ProductCreate {
 }
 
 input ProductCreateInput {
-  attributes: [AttributeValueInput]
+  attributes: [AttributeValueInput!]
   category: ID
   chargeTaxes: Boolean
-  collections: [ID]
+  collections: [ID!]
   description: JSONString
   name: String
   slug: String
@@ -4084,6 +4099,7 @@ enum ProductErrorCode {
   VARIANT_NO_DIGITAL_CONTENT
   CANNOT_MANAGE_PRODUCT_WITHOUT_VARIANT
   PRODUCT_NOT_ASSIGNED_TO_CHANNEL
+  UNSUPPORTED_MEDIA_PROVIDER
 }
 
 enum ProductFieldEnum {
@@ -4118,62 +4134,18 @@ input ProductFilterInput {
   channel: String
 }
 
-type ProductImage implements Node {
+type ProductImage {
   id: ID!
+  alt: String
   sortOrder: Int
-  alt: String!
   url(size: Int): String!
 }
 
-type ProductImageBulkDelete {
-  errors: [Error!]! @deprecated(reason: "Use typed errors with error codes. This field will be removed after 2020-07-31.")
-  count: Int!
-  productErrors: [ProductError!]!
-}
-
-type ProductImageCreate {
-  errors: [Error!]! @deprecated(reason: "Use typed errors with error codes. This field will be removed after 2020-07-31.")
-  product: Product
-  image: ProductImage
-  productErrors: [ProductError!]!
-}
-
-input ProductImageCreateInput {
-  alt: String
-  image: Upload!
-  product: ID!
-}
-
-type ProductImageDelete {
-  errors: [Error!]! @deprecated(reason: "Use typed errors with error codes. This field will be removed after 2020-07-31.")
-  product: Product
-  image: ProductImage
-  productErrors: [ProductError!]!
-}
-
-type ProductImageReorder {
-  errors: [Error!]! @deprecated(reason: "Use typed errors with error codes. This field will be removed after 2020-07-31.")
-  product: Product
-  images: [ProductImage]
-  productErrors: [ProductError!]!
-}
-
-type ProductImageUpdate {
-  errors: [Error!]! @deprecated(reason: "Use typed errors with error codes. This field will be removed after 2020-07-31.")
-  product: Product
-  image: ProductImage
-  productErrors: [ProductError!]!
-}
-
-input ProductImageUpdateInput {
-  alt: String
-}
-
 input ProductInput {
-  attributes: [AttributeValueInput]
+  attributes: [AttributeValueInput!]
   category: ID
   chargeTaxes: Boolean
-  collections: [ID]
+  collections: [ID!]
   description: JSONString
   name: String
   slug: String
@@ -4183,6 +4155,65 @@ input ProductInput {
   rating: Float
 }
 
+type ProductMedia implements Node {
+  id: ID!
+  sortOrder: Int
+  alt: String!
+  type: ProductMediaType!
+  oembedData: JSONString!
+  url(size: Int): String!
+}
+
+type ProductMediaBulkDelete {
+  errors: [Error!]! @deprecated(reason: "Use typed errors with error codes. This field will be removed after 2020-07-31.")
+  count: Int!
+  productErrors: [ProductError!]!
+}
+
+type ProductMediaCreate {
+  errors: [Error!]! @deprecated(reason: "Use typed errors with error codes. This field will be removed after 2020-07-31.")
+  product: Product
+  media: ProductMedia
+  productErrors: [ProductError!]!
+}
+
+input ProductMediaCreateInput {
+  alt: String
+  image: Upload
+  product: ID!
+  mediaUrl: String
+}
+
+type ProductMediaDelete {
+  errors: [Error!]! @deprecated(reason: "Use typed errors with error codes. This field will be removed after 2020-07-31.")
+  product: Product
+  media: ProductMedia
+  productErrors: [ProductError!]!
+}
+
+type ProductMediaReorder {
+  errors: [Error!]! @deprecated(reason: "Use typed errors with error codes. This field will be removed after 2020-07-31.")
+  product: Product
+  media: [ProductMedia!]
+  productErrors: [ProductError!]!
+}
+
+enum ProductMediaType {
+  IMAGE
+  VIDEO
+}
+
+type ProductMediaUpdate {
+  errors: [Error!]! @deprecated(reason: "Use typed errors with error codes. This field will be removed after 2020-07-31.")
+  product: Product
+  media: ProductMedia
+  productErrors: [ProductError!]!
+}
+
+input ProductMediaUpdateInput {
+  alt: String
+}
+
 input ProductOrder {
   direction: OrderDirection!
   channel: String
@@ -4370,7 +4401,8 @@ type ProductVariant implements Node & ObjectWithMetadata {
   margin: Int
   quantityOrdered: Int
   revenue(period: ReportingPeriod): TaxedMoney
-  images: [ProductImage]
+  images: [ProductImage] @deprecated(reason: "Will be removed in Saleor 4.0. Use the `media` instead.")
+  media: [ProductMedia!]
   translation(languageCode: LanguageCodeEnum!): ProductVariantTranslation
   digitalContent: DigitalContent
   stocks(address: AddressInput, countryCode: CountryCode): [Stock]
@@ -5049,6 +5081,7 @@ type Shop {
   companyAddress: Address
   customerSetPasswordUrl: String
   staffNotificationRecipients: [StaffNotificationRecipient]
+  limits: LimitInfo!
   version: String!
 }
 
@@ -5531,17 +5564,17 @@ enum VariantAttributeScope {
   NOT_VARIANT_SELECTION
 }
 
-type VariantImageAssign {
+type VariantMediaAssign {
   errors: [Error!]! @deprecated(reason: "Use typed errors with error codes. This field will be removed after 2020-07-31.")
   productVariant: ProductVariant
-  image: ProductImage
+  media: ProductMedia
   productErrors: [ProductError!]!
 }
 
-type VariantImageUnassign {
+type VariantMediaUnassign {
   errors: [Error!]! @deprecated(reason: "Use typed errors with error codes. This field will be removed after 2020-07-31.")
   productVariant: ProductVariant
-  image: ProductImage
+  media: ProductMedia
   productErrors: [ProductError!]!
 }
 
@@ -5974,7 +6007,7 @@ enum WeightUnitsEnum {
 
 scalar _Any
 
-union _Entity = Address | User | Group | App | ProductVariant | Product | ProductType | Collection | Category | ProductImage | PageType
+union _Entity = Address | User | Group | App | ProductVariant | Product | ProductType | Collection | Category | ProductMedia | ProductImage | PageType
 
 type _Service {
   sdl: String

src/categories/components/CategoryBackground/CategoryBackground.tsx

@@ -5,8 +5,8 @@ import makeStyles from "@material-ui/core/styles/makeStyles";
 import TextField from "@material-ui/core/TextField";
 import CardTitle from "@saleor/components/CardTitle";
 import Hr from "@saleor/components/Hr";
-import ImageTile from "@saleor/components/ImageTile";
 import ImageUpload from "@saleor/components/ImageUpload";
+import MediaTile from "@saleor/components/MediaTile";
 import Skeleton from "@saleor/components/Skeleton";
 import { commonMessages } from "@saleor/intl";
 import React from "react";
@@ -97,7 +97,7 @@ const CategoryBackground: React.FC<CategoryBackgroundProps> = props => {
         <ImageUpload onImageUpload={files => onImageUpload(files[0])} />
       ) : (
         <CardContent>
-          <ImageTile image={image} onImageDelete={onImageDelete} />
+          <MediaTile media={image} onDelete={onImageDelete} />
         </CardContent>
       )}
 

src/categories/fixtures.ts

@@ -92,6 +92,7 @@ export const category: (
   backgroundImage: {
     __typename: "Image",
     alt: "Alt text",
+    oembedData: "{}",
     url: placeholderImage
   },
   children: {
@@ -211,7 +212,11 @@ export const category: (
             id: "UHJvZHVjdFR5cGU6Mw==",
             name: "Coffee"
           },
-          thumbnail: { __typename: "Image", url: placeholderImage }
+          thumbnail: {
+            __typename: "Image",
+            oembedData: "{}",
+            url: placeholderImage
+          }
         }
       },
       {
@@ -265,7 +270,11 @@ export const category: (
             id: "UHJvZHVjdFR5cGU6Mw==",
             name: "Coffee"
           },
-          thumbnail: { __typename: "Image", url: placeholderImage }
+          thumbnail: {
+            __typename: "Image",
+            oembedData: "{}",
+            url: placeholderImage
+          }
         }
       },
       {
@@ -319,7 +328,11 @@ export const category: (
             id: "UHJvZHVjdFR5cGU6Mw==",
             name: "Coffee"
           },
-          thumbnail: { __typename: "Image", url: placeholderImage }
+          thumbnail: {
+            __typename: "Image",
+            oembedData: "{}",
+            url: placeholderImage
+          }
         }
       },
       {
@@ -373,7 +386,11 @@ export const category: (
             id: "UHJvZHVjdFR5cGU6Mw==",
             name: "Coffee"
           },
-          thumbnail: { __typename: "Image", url: placeholderImage }
+          thumbnail: {
+            __typename: "Image",
+            oembedData: "{}",
+            url: placeholderImage
+          }
         }
       },
       {
@@ -427,7 +444,11 @@ export const category: (
             id: "UHJvZHVjdFR5cGU6Mw==",
             name: "Coffee"
           },
-          thumbnail: { __typename: "Image", url: placeholderImage }
+          thumbnail: {
+            __typename: "Image",
+            oembedData: "{}",
+            url: placeholderImage
+          }
         }
       },
       {
@@ -481,7 +502,11 @@ export const category: (
             id: "UHJvZHVjdFR5cGU6Mw==",
             name: "Coffee"
           },
-          thumbnail: { __typename: "Image", url: placeholderImage }
+          thumbnail: {
+            __typename: "Image",
+            oembedData: "{}",
+            url: placeholderImage
+          }
         }
       },
       {
@@ -535,7 +560,11 @@ export const category: (
             id: "UHJvZHVjdFR5cGU6Mw==",
             name: "Coffee"
           },
-          thumbnail: { __typename: "Image", url: placeholderImage }
+          thumbnail: {
+            __typename: "Image",
+            oembedData: "{}",
+            url: placeholderImage
+          }
         }
       },
       {
@@ -589,7 +618,11 @@ export const category: (
             id: "UHJvZHVjdFR5cGU6Mw==",
             name: "Coffee"
           },
-          thumbnail: { __typename: "Image", url: placeholderImage }
+          thumbnail: {
+            __typename: "Image",
+            oembedData: "{}",
+            url: placeholderImage
+          }
         }
       },
       {
@@ -643,7 +676,11 @@ export const category: (
             id: "UHJvZHVjdFR5cGU6Mw==",
             name: "Coffee"
           },
-          thumbnail: { __typename: "Image", url: placeholderImage }
+          thumbnail: {
+            __typename: "Image",
+            oembedData: "{}",
+            url: placeholderImage
+          }
         }
       },
       {
@@ -697,7 +734,11 @@ export const category: (
             id: "UHJvZHVjdFR5cGU6Mw==",
             name: "Coffee"
           },
-          thumbnail: { __typename: "Image", url: placeholderImage }
+          thumbnail: {
+            __typename: "Image",
+            oembedData: "{}",
+            url: placeholderImage
+          }
         }
       }
     ],

src/collections/components/CollectionImage/CollectionImage.tsx

@@ -5,8 +5,8 @@ import { makeStyles } from "@material-ui/core/styles";
 import TextField from "@material-ui/core/TextField";
 import CardTitle from "@saleor/components/CardTitle";
 import Hr from "@saleor/components/Hr";
-import ImageTile from "@saleor/components/ImageTile";
 import ImageUpload from "@saleor/components/ImageUpload";
+import MediaTile from "@saleor/components/MediaTile";
 import Skeleton from "@saleor/components/Skeleton";
 import { commonMessages } from "@saleor/intl";
 import React from "react";
@@ -109,7 +109,7 @@ export const CollectionImage: React.FC<CollectionImageProps> = props => {
         <ImageUpload onImageUpload={files => onImageUpload(files[0])} />
       ) : (
         <CardContent>
-          <ImageTile image={image} onImageDelete={onImageDelete} />
+          <MediaTile media={image} onDelete={onImageDelete} />
         </CardContent>
       )}
       {image && (

src/collections/fixtures.ts

@@ -143,6 +143,7 @@ export const collection: (
   backgroundImage: {
     __typename: "Image",
     alt: "Alt text",
+    oembedData: "{}",
     url: placeholderCollectionImage
   },
   channelListings: [

src/components/ImageTile/index.ts

@@ -1,2 +0,0 @@
-export { default } from "./ImageTile";
-export * from "./ImageTile";

src/components/MediaTile/MediaTile.tsx

@@ -8,15 +8,15 @@ import React from "react";
 
 const useStyles = makeStyles(
   theme => ({
-    image: {
+    media: {
       height: "100%",
       objectFit: "contain",
       userSelect: "none",
       width: "100%"
     },
-    imageContainer: {
+    mediaContainer: {
       "&:hover, &.dragged": {
-        "& $imageOverlay": {
+        "& $mediaOverlay": {
           display: "block"
         }
       },
@@ -29,7 +29,7 @@ const useStyles = makeStyles(
       position: "relative",
       width: 148
     },
-    imageOverlay: {
+    mediaOverlay: {
       background: "rgba(0, 0, 0, 0.6)",
       cursor: "move",
       display: "none",
@@ -39,63 +39,68 @@ const useStyles = makeStyles(
       top: 0,
       width: 148
     },
-    imageOverlayShow: {
+    mediaOverlayShadow: {
-      "&$imageOverlay": {
+      "&mediaOverlay": {
         alignItems: "center",
         display: "flex",
         justifyContent: "center"
       }
     },
-    imageOverlayToolbar: {
+    mediaOverlayToolbar: {
       display: "flex",
       justifyContent: "flex-end"
     }
   }),
-  { name: "ImageTile" }
+  { name: "MediaTile" }
 );
 
-interface ImageTileProps {
+interface MediaTileProps {
-  image: {
+  media: {
-    alt?: string;
+    alt: string;
     url: string;
+    type?: string;
+    oembedData?: string;
   };
   loading?: boolean;
-  onImageDelete?: () => void;
+  onDelete?: () => void;
-  onImageEdit?: (event: React.ChangeEvent<any>) => void;
+  onEdit?: (event: React.ChangeEvent<any>) => void;
 }
 
-const ImageTile: React.FC<ImageTileProps> = props => {
+const MediaTile: React.FC<MediaTileProps> = props => {
-  const { loading, onImageDelete, onImageEdit, image } = props;
+  const { loading, onDelete, onEdit, media } = props;
-
   const classes = useStyles(props);
+  const parsedMediaOembedData = media?.oembedData
+    ? JSON.parse(media.oembedData)
+    : null;
+  const mediaUrl = parsedMediaOembedData?.thumbnail_url || media.url;
 
   return (
-    <div className={classes.imageContainer} data-test="product-image">
+    <div className={classes.mediaContainer} data-test="product-image">
       <div
-        className={classNames(classes.imageOverlay, {
+        className={classNames(classes.mediaOverlay, {
-          [classes.imageOverlayShow]: loading
+          [classes.mediaOverlayShadow]: loading
         })}
       >
         {loading ? (
           <CircularProgress size={32} />
         ) : (
-          <div className={classes.imageOverlayToolbar}>
+          <div className={classes.mediaOverlayToolbar}>
-            {onImageEdit && (
+            {onEdit && (
-              <IconButton color="primary" onClick={onImageEdit}>
+              <IconButton color="primary" onClick={onEdit}>
                 <EditIcon />
               </IconButton>
             )}
-            {onImageDelete && (
+            {onDelete && (
-              <IconButton color="primary" onClick={onImageDelete}>
+              <IconButton color="primary" onClick={onDelete}>
                 <DeleteIcon />
               </IconButton>
             )}
           </div>
         )}
       </div>
-      <img className={classes.image} src={image.url} alt={image.alt} />
+      <img className={classes.media} src={mediaUrl} alt={media.alt} />
     </div>
   );
 };
-ImageTile.displayName = "ImageTile";
+MediaTile.displayName = "MediaTile";
-export default ImageTile;
+export default MediaTile;

src/components/MediaTile/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./MediaTile";
+export * from "./MediaTile";

src/fragments/products.ts

@@ -40,12 +40,14 @@ export const priceRangeFragment = gql`
   }
 `;
 
-export const fragmentProductImage = gql`
+export const fragmentProductMedia = gql`
-  fragment ProductImageFragment on ProductImage {
+  fragment ProductMediaFragment on ProductMedia {
     id
     alt
     sortOrder
     url
+    type
+    oembedData
   }
 `;
 
@@ -159,7 +161,7 @@ export const productVariantAttributesFragment = gql`
 `;
 
 export const productFragmentDetails = gql`
-  ${fragmentProductImage}
+  ${fragmentProductMedia}
   ${productVariantAttributesFragment}
   ${stockFragment}
   ${weightFragment}
@@ -191,8 +193,8 @@ export const productFragmentDetails = gql`
     channelListings {
       ...ChannelListingProductFragment
     }
-    images {
+    media {
-      ...ProductImageFragment
+      ...ProductMediaFragment
     }
     isAvailable
     variants {
@@ -256,7 +258,7 @@ export const selectedVariantAttributeFragment = gql`
 export const fragmentVariant = gql`
   ${selectedVariantAttributeFragment}
   ${priceRangeFragment}
-  ${fragmentProductImage}
+  ${fragmentProductMedia}
   ${stockFragment}
   ${weightFragment}
   ${metadataFragment}
@@ -272,9 +274,11 @@ export const fragmentVariant = gql`
     ) {
       ...SelectedVariantAttributeFragment
     }
-    images {
+    media {
       id
       url
+      type
+      oembedData
     }
     name
     product {
@@ -282,8 +286,8 @@ export const fragmentVariant = gql`
       defaultVariant {
         id
       }
-      images {
+      media {
-        ...ProductImageFragment
+        ...ProductMediaFragment
       }
       name
       thumbnail {
@@ -305,9 +309,11 @@ export const fragmentVariant = gql`
         id
         name
         sku
-        images {
+        media {
           id
           url
+          type
+          oembedData
         }
       }
       defaultVariant {

src/fragments/types/Product.ts

@@ -2,7 +2,7 @@
 /* eslint-disable */
 // This file was automatically generated and should not be edited.
 
-import { AttributeInputTypeEnum, AttributeEntityTypeEnum, WeightUnitsEnum } from "./../../types/globalTypes";
+import { AttributeInputTypeEnum, AttributeEntityTypeEnum, ProductMediaType, WeightUnitsEnum } from "./../../types/globalTypes";
 
 // ====================================================
 // GraphQL fragment: Product
@@ -172,12 +172,14 @@ export interface Product_collections {
   name: string;
 }
 
-export interface Product_images {
+export interface Product_media {
-  __typename: "ProductImage";
+  __typename: "ProductMedia";
   id: string;
   alt: string;
   sortOrder: number | null;
   url: string;
+  type: ProductMediaType;
+  oembedData: any;
 }
 
 export interface Product_variants_stocks_warehouse {
@@ -261,7 +263,7 @@ export interface Product {
   category: Product_category | null;
   collections: (Product_collections | null)[] | null;
   chargeTaxes: boolean;
-  images: (Product_images | null)[] | null;
+  media: (Product_media | null)[] | null;
   isAvailable: boolean | null;
   variants: (Product_variants | null)[] | null;
   weight: Product_weight | null;

src/fragments/types/ProductMediaFragment.ts

@@ -2,14 +2,18 @@
 /* eslint-disable */
 // This file was automatically generated and should not be edited.
 
+import { ProductMediaType } from "./../../types/globalTypes";
+
 // ====================================================
-// GraphQL fragment: ProductImageFragment
+// GraphQL fragment: ProductMediaFragment
 // ====================================================
 
-export interface ProductImageFragment {
+export interface ProductMediaFragment {
-  __typename: "ProductImage";
+  __typename: "ProductMedia";
   id: string;
   alt: string;
   sortOrder: number | null;
   url: string;
+  type: ProductMediaType;
+  oembedData: any;
 }

src/fragments/types/ProductVariant.ts

@@ -2,7 +2,7 @@
 /* eslint-disable */
 // This file was automatically generated and should not be edited.
 
-import { AttributeInputTypeEnum, AttributeEntityTypeEnum, WeightUnitsEnum } from "./../../types/globalTypes";
+import { AttributeInputTypeEnum, AttributeEntityTypeEnum, ProductMediaType, WeightUnitsEnum } from "./../../types/globalTypes";
 
 // ====================================================
 // GraphQL fragment: ProductVariant
@@ -114,10 +114,12 @@ export interface ProductVariant_nonSelectionAttributes {
   values: (ProductVariant_nonSelectionAttributes_values | null)[];
 }
 
-export interface ProductVariant_images {
+export interface ProductVariant_media {
-  __typename: "ProductImage";
+  __typename: "ProductMedia";
   id: string;
   url: string;
+  type: ProductMediaType;
+  oembedData: any;
 }
 
 export interface ProductVariant_product_defaultVariant {
@@ -125,12 +127,14 @@ export interface ProductVariant_product_defaultVariant {
   id: string;
 }
 
-export interface ProductVariant_product_images {
+export interface ProductVariant_product_media {
-  __typename: "ProductImage";
+  __typename: "ProductMedia";
   id: string;
   alt: string;
   sortOrder: number | null;
   url: string;
+  type: ProductMediaType;
+  oembedData: any;
 }
 
 export interface ProductVariant_product_thumbnail {
@@ -184,10 +188,12 @@ export interface ProductVariant_product_channelListings {
   pricing: ProductVariant_product_channelListings_pricing | null;
 }
 
-export interface ProductVariant_product_variants_images {
+export interface ProductVariant_product_variants_media {
-  __typename: "ProductImage";
+  __typename: "ProductMedia";
   id: string;
   url: string;
+  type: ProductMediaType;
+  oembedData: any;
 }
 
 export interface ProductVariant_product_variants {
@@ -195,14 +201,14 @@ export interface ProductVariant_product_variants {
   id: string;
   name: string;
   sku: string;
-  images: (ProductVariant_product_variants_images | null)[] | null;
+  media: ProductVariant_product_variants_media[] | null;
 }
 
 export interface ProductVariant_product {
   __typename: "Product";
   id: string;
   defaultVariant: ProductVariant_product_defaultVariant | null;
-  images: (ProductVariant_product_images | null)[] | null;
+  media: (ProductVariant_product_media | null)[] | null;
   name: string;
   thumbnail: ProductVariant_product_thumbnail | null;
   channelListings: ProductVariant_product_channelListings[] | null;
@@ -262,7 +268,7 @@ export interface ProductVariant {
   privateMetadata: (ProductVariant_privateMetadata | null)[];
   selectionAttributes: ProductVariant_selectionAttributes[];
   nonSelectionAttributes: ProductVariant_nonSelectionAttributes[];
-  images: (ProductVariant_images | null)[] | null;
+  media: ProductVariant_media[] | null;
   name: string;
   product: ProductVariant_product;
   channelListings: ProductVariant_channelListings[] | null;

src/products/components/ProductExternalMediaDialog/ProductExternalMediaDialog.tsx

@@ -0,0 +1,88 @@
+import Button from "@material-ui/core/Button";
+import Dialog from "@material-ui/core/Dialog";
+import DialogActions from "@material-ui/core/DialogActions";
+import DialogContent from "@material-ui/core/DialogContent";
+import DialogTitle from "@material-ui/core/DialogTitle";
+import TextField from "@material-ui/core/TextField";
+import Typography from "@material-ui/core/Typography";
+import Form from "@saleor/components/Form";
+import FormSpacer from "@saleor/components/FormSpacer";
+import { buttonMessages } from "@saleor/intl";
+import { ProductDetails_product } from "@saleor/products/types/ProductDetails";
+import React from "react";
+import { defineMessages, FormattedMessage, useIntl } from "react-intl";
+
+interface ProductExternalMediaDialogProps {
+  product: ProductDetails_product;
+  open: boolean;
+  onClose: () => void;
+  onSubmit: (mediaUrl: string) => void;
+}
+
+interface FormValues {
+  mediaUrl: string;
+}
+
+const messages = defineMessages({
+  buttonMessage: {
+    defaultMessage: "Upload URL",
+    description: "modal button"
+  }
+});
+
+const ProductExternalMediaDialog: React.FC<ProductExternalMediaDialogProps> = ({
+  open,
+  onClose,
+  onSubmit
+}) => {
+  const intl = useIntl();
+  const initialValues: FormValues = {
+    mediaUrl: ""
+  };
+
+  const handleOnSubmit = (values: FormValues) => {
+    onSubmit(values.mediaUrl);
+    onClose();
+  };
+
+  return (
+    <Dialog onClose={onClose} open={open}>
+      <DialogTitle>{intl.formatMessage(messages.buttonMessage)}</DialogTitle>
+      <Form initial={initialValues} onSubmit={handleOnSubmit}>
+        {({ change, data, submit }) => (
+          <>
+            <DialogContent>
+              <Typography>
+                <FormattedMessage
+                  defaultMessage="Media from the URL you supply will be shown in the media gallery. You will be able to define the order of the gallery."
+                  description="modal header"
+                />
+              </Typography>
+              <FormSpacer />
+              <TextField
+                label="URL"
+                value={data.mediaUrl}
+                name="mediaUrl"
+                type="url"
+                onChange={change}
+                autoFocus
+                fullWidth
+              />
+            </DialogContent>
+
+            <DialogActions>
+              <Button onClick={onClose}>
+                <FormattedMessage {...buttonMessages.back} />
+              </Button>
+              <Button onClick={submit}>
+                {intl.formatMessage(messages.buttonMessage)}
+              </Button>
+            </DialogActions>
+          </>
+        )}
+      </Form>
+    </Dialog>
+  );
+};
+
+export default ProductExternalMediaDialog;

src/products/components/ProductExternalMediaDialog/index.ts

@@ -0,0 +1,2 @@
+export * from "./ProductExternalMediaDialog";
+export { default } from "./ProductExternalMediaDialog";

src/products/components/ProductImageNavigation/index.ts

@@ -1,2 +0,0 @@
-export { default } from "./ProductImageNavigation";
-export * from "./ProductImageNavigation";

src/products/components/ProductImagePage/index.ts

@@ -1,2 +0,0 @@
-export { default } from "./ProductImagePage";
-export * from "./ProductImagePage";

src/products/components/ProductImages/index.ts

@@ -1,2 +0,0 @@
-export { default } from "./ProductImages";
-export * from "./ProductImages";

src/products/components/ProductMedia/ProductMedia.tsx

@@ -3,17 +3,28 @@ 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 ImageTile from "@saleor/components/ImageTile";
 import ImageUpload from "@saleor/components/ImageUpload";
-import { commonMessages } from "@saleor/intl";
+import MediaTile from "@saleor/components/MediaTile";
+import { ProductMediaFragment } from "@saleor/fragments/types/ProductMediaFragment";
+import { ProductMediaPopper } from "@saleor/products/components/ProductMediaPopper/ProductMediaPopper";
 import { ReorderAction } from "@saleor/types";
+import { ProductMediaType } from "@saleor/types/globalTypes";
 import createMultiFileUploadHandler from "@saleor/utils/handlers/multiFileUploadHandler";
 import classNames from "classnames";
 import React from "react";
-import { useIntl } from "react-intl";
+import { defineMessages, useIntl } from "react-intl";
 import { SortableContainer, SortableElement } from "react-sortable-hoc";
 
-import { ProductDetails_product_images } from "../../types/ProductDetails";
+const messages = defineMessages({
+  media: {
+    defaultMessage: "Media",
+    description: "section header"
+  },
+  upload: {
+    defaultMessage: "Upload",
+    description: "modal button upload"
+  }
+});
 
 const useStyles = makeStyles(
   theme => ({
@@ -102,85 +113,88 @@ const useStyles = makeStyles(
       opacity: 0.2
     }
   }),
-  { name: "ProductImages" }
+  { name: "ProductMedia" }
 );
 
-interface ProductImagesProps {
+interface SortableMediaProps {
-  placeholderImage?: string;
+  media: {
-  images: ProductDetails_product_images[];
-  loading?: boolean;
-  onImageDelete: (id: string) => () => void;
-  onImageEdit: (id: string) => () => void;
-  onImageReorder?: ReorderAction;
-  onImageUpload(file: File);
-}
-
-interface SortableImageProps {
-  image: {
     id: string;
     alt?: string;
     url: string;
   };
-  onImageEdit: (id: string) => void;
+  onEdit: (id: string) => void;
-  onImageDelete: () => void;
+  onDelete: () => void;
 }
 
-const SortableImage = SortableElement<SortableImageProps>(
+const SortableMedia = SortableElement<SortableMediaProps>(
-  ({ image, onImageEdit, onImageDelete }) => (
+  ({ media, onEdit, onDelete }) => (
-    <ImageTile
+    <MediaTile
-      image={image}
+      media={media}
-      onImageEdit={onImageEdit ? () => onImageEdit(image.id) : undefined}
+      onEdit={onEdit ? () => onEdit(media.id) : undefined}
-      onImageDelete={onImageDelete}
+      onDelete={onDelete}
     />
   )
 );
 
-interface ImageListContainerProps {
+interface MediaListContainerProps {
   className: string;
-  items: ProductDetails_product_images[];
+  media: ProductMediaFragment[];
-  preview: ProductDetails_product_images[];
+  preview: ProductMediaFragment[];
-  onImageDelete: (id: string) => () => void;
+  onDelete: (id: string) => () => void;
-  onImageEdit: (id: string) => () => void;
+  onEdit: (id: string) => () => void;
 }
 
-const ImageListContainer = SortableContainer<ImageListContainerProps>(
+const MediaListContainer = SortableContainer<MediaListContainerProps>(
-  ({ items, preview, onImageDelete, onImageEdit, ...props }) => (
+  ({ media, preview, onDelete, onEdit, ...props }) => (
     <div {...props}>
-      {items.map((image, index) => (
+      {media.map((mediaObj, index) => (
-        <SortableImage
+        <SortableMedia
           key={`item-${index}`}
           index={index}
-          image={image}
+          media={mediaObj}
-          onImageEdit={onImageEdit ? onImageEdit(image.id) : null}
+          onEdit={onEdit ? onEdit(mediaObj.id) : null}
-          onImageDelete={onImageDelete(image.id)}
+          onDelete={onDelete(mediaObj.id)}
         />
       ))}
       {preview
         .sort((a, b) => (a.sortOrder > b.sortOrder ? 1 : -1))
-        .map(image => (
+        .map((mediaObj, index) => (
-          <ImageTile loading={true} image={image} />
+          <MediaTile loading={true} media={mediaObj} key={index} />
         ))}
     </div>
   )
 );
 
-const ProductImages: React.FC<ProductImagesProps> = props => {
+interface ProductMediaProps {
+  placeholderImage?: string;
+  media: ProductMediaFragment[];
+  loading?: boolean;
+  onImageDelete: (id: string) => () => void;
+  onImageEdit: (id: string) => () => void;
+  onImageReorder?: ReorderAction;
+  onImageUpload(file: File);
+  openMediaUrlModal();
+}
+
+const ProductMedia: React.FC<ProductMediaProps> = props => {
   const {
-    images,
+    media,
     placeholderImage,
-    loading,
     onImageEdit,
     onImageDelete,
     onImageReorder,
-    onImageUpload
+    onImageUpload,
+    openMediaUrlModal
   } = props;
 
   const classes = useStyles(props);
   const intl = useIntl();
-  const upload = React.useRef(null);
+  const imagesUpload = React.useRef<HTMLInputElement>(null);
+  const anchor = React.useRef<HTMLButtonElement>();
   const [imagesToUpload, setImagesToUpload] = React.useState<
-    ProductDetails_product_images[]
+    ProductMediaFragment[]
   >([]);
+  const [popperOpenStatus, setPopperOpenStatus] = React.useState(false);
 
   const handleImageUpload = createMultiFileUploadHandler(onImageUpload, {
     onAfterUpload: () =>
@@ -192,11 +206,13 @@ const ProductImages: React.FC<ProductImagesProps> = props => {
           setImagesToUpload(prevImagesToUpload => [
             ...prevImagesToUpload,
             {
-              __typename: "ProductImage",
+              __typename: "ProductMedia",
               alt: "",
               id: "",
               sortOrder: fileIndex,
-              url: event.target.result as string
+              type: ProductMediaType.IMAGE,
+              url: event.target.result as string,
+              oembedData: null
             }
           ]);
         };
@@ -208,35 +224,41 @@ const ProductImages: React.FC<ProductImagesProps> = props => {
   return (
     <Card className={classes.card}>
       <CardTitle
-        title={intl.formatMessage({
+        title={intl.formatMessage(messages.media)}
-          defaultMessage: "Images",
-          description: "section header"
-        })}
         toolbar={
           <>
             <Button
-              onClick={() => upload.current.click()}
+              onClick={() => setPopperOpenStatus(true)}
-              disabled={loading}
               variant="text"
               color="primary"
               data-test="button-upload-image"
+              ref={anchor}
             >
-              {intl.formatMessage(commonMessages.uploadImage)}
+              {intl.formatMessage(messages.upload)}
             </Button>
+
+            <ProductMediaPopper
+              anchorRef={anchor.current}
+              imagesUploadRef={imagesUpload.current}
+              setPopperStatus={setPopperOpenStatus}
+              popperStatus={popperOpenStatus}
+              openMediaUrlModal={openMediaUrlModal}
+            />
+
             <input
               className={classes.fileField}
               id="fileUpload"
               onChange={event => handleImageUpload(event.target.files)}
               multiple
               type="file"
-              ref={upload}
+              ref={imagesUpload}
               accept="image/*"
             />
           </>
         }
       />
       <div className={classes.imageGridContainer}>
-        {images === undefined ? (
+        {media === undefined ? (
           <CardContent>
             <div className={classes.root}>
               <div className={classes.imageContainer}>
@@ -244,7 +266,7 @@ const ProductImages: React.FC<ProductImagesProps> = props => {
               </div>
             </div>
           </CardContent>
-        ) : images.length > 0 ? (
+        ) : media.length > 0 ? (
           <>
             <ImageUpload
               className={classes.imageUpload}
@@ -256,19 +278,19 @@ const ProductImages: React.FC<ProductImagesProps> = props => {
             >
               {({ isDragActive }) => (
                 <CardContent>
-                  <ImageListContainer
+                  <MediaListContainer
                     distance={20}
                     helperClass="dragged"
                     axis="xy"
-                    items={images}
+                    media={media}
                     preview={imagesToUpload}
                     onSortEnd={onImageReorder}
                     className={classNames({
                       [classes.root]: true,
                       [classes.rootDragActive]: isDragActive
                     })}
-                    onImageDelete={onImageDelete}
+                    onDelete={onImageDelete}
-                    onImageEdit={onImageEdit}
+                    onEdit={onImageEdit}
                   />
                 </CardContent>
               )}
@@ -281,5 +303,5 @@ const ProductImages: React.FC<ProductImagesProps> = props => {
     </Card>
   );
 };
-ProductImages.displayName = "ProductImages";
+ProductMedia.displayName = "ProductMedia";
-export default ProductImages;
+export default ProductMedia;

src/products/components/ProductMedia/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./ProductMedia";
+export * from "./ProductMedia";

src/products/components/ProductMediaNavigation/ProductMediaNavigation.tsx

@@ -5,7 +5,14 @@ import CardTitle from "@saleor/components/CardTitle";
 import Skeleton from "@saleor/components/Skeleton";
 import classNames from "classnames";
 import React from "react";
-import { useIntl } from "react-intl";
+import { defineMessages, useIntl } from "react-intl";
+
+const messages = defineMessages({
+  allMedia: {
+    defaultMessage: "All Media",
+    description: "section header"
+  }
+});
 
 const useStyles = makeStyles(
   theme => ({
@@ -39,55 +46,63 @@ const useStyles = makeStyles(
     },
     toolbar: { marginTop: -theme.spacing(0.5) }
   }),
-  { name: "ProductImageNavigation" }
+  { name: "ProductMediaNavigation" }
 );
 
-interface ProductImageNavigationProps {
+interface ProductMediaNavigationProps {
   disabled: boolean;
-  images?: Array<{
+  media?: Array<{
     id: string;
     url: string;
+    alt?: string;
+    type?: string;
+    oembedData?: string;
   }>;
   highlighted?: string;
   onRowClick: (id: string) => () => void;
 }
 
-const ProductImageNavigation: React.FC<ProductImageNavigationProps> = props => {
+const ProductMediaNavigation: React.FC<ProductMediaNavigationProps> = props => {
-  const { highlighted, images, onRowClick } = props;
+  const { highlighted, media, onRowClick } = props;
   const classes = useStyles(props);
-
   const intl = useIntl();
 
   return (
     <Card className={classes.card}>
-      <CardTitle
+      <CardTitle title={intl.formatMessage(messages.allMedia)} />
-        title={intl.formatMessage({
-          defaultMessage: "All Photos",
-          description: "section header"
-        })}
-      />
       <CardContent>
-        {images === undefined ? (
+        {!media ? (
           <Skeleton />
         ) : (
           <div className={classes.root}>
-            {images.map(image => (
+            {media.map(mediaObj => {
-              <div
+              const mediaObjOembedData = JSON.parse(mediaObj?.oembedData);
-                className={classNames({
+              const mediaUrl =
-                  [classes.imageContainer]: true,
+                mediaObjOembedData?.thumbnail_url || mediaObj.url;
-                  [classes.highlightedImageContainer]: image.id === highlighted
+
-                })}
+              return (
-                onClick={onRowClick(image.id)}
+                <div
-                key={image.id}
+                  className={classNames({
-              >
+                    [classes.imageContainer]: true,
-                <img className={classes.image} src={image.url} />
+                    [classes.highlightedImageContainer]:
-              </div>
+                      mediaObj.id === highlighted
-            ))}
+                  })}
+                  onClick={onRowClick(mediaObj.id)}
+                  key={mediaObj.id}
+                >
+                  <img
+                    className={classes.image}
+                    src={mediaUrl}
+                    alt={mediaObj.alt}
+                  />
+                </div>
+              );
+            })}
           </div>
         )}
       </CardContent>
     </Card>
   );
 };
-ProductImageNavigation.displayName = "ProductImageNavigation";
+ProductMediaNavigation.displayName = "ProductMediaNavigation";
-export default ProductImageNavigation;
+export default ProductMediaNavigation;

src/products/components/ProductMediaNavigation/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./ProductMediaNavigation";
+export * from "./ProductMediaNavigation";

src/products/components/ProductMediaPage/ProductMediaPage.tsx

@@ -12,10 +12,30 @@ import PageHeader from "@saleor/components/PageHeader";
 import SaveButtonBar from "@saleor/components/SaveButtonBar";
 import Skeleton from "@saleor/components/Skeleton";
 import { commonMessages } from "@saleor/intl";
+import { ProductMediaType } from "@saleor/types/globalTypes";
 import React from "react";
-import { useIntl } from "react-intl";
+import { defineMessages, useIntl } from "react-intl";
 
-import ProductImageNavigation from "../ProductImageNavigation";
+import ProductMediaNavigation from "../ProductMediaNavigation";
+
+const messages = defineMessages({
+  editMedia: {
+    defaultMessage: "Edit Media",
+    description: "header"
+  },
+  mediaInformation: {
+    defaultMessage: "Media Information",
+    description: "section header"
+  },
+  mediaView: {
+    defaultMessage: "Media View",
+    description: "section header"
+  },
+  optional: {
+    defaultMessage: "Optional",
+    description: "field is optional"
+  }
+});
 
 const useStyles = makeStyles(
   theme => ({
@@ -25,24 +45,30 @@ const useStyles = makeStyles(
       width: "100%"
     },
     imageContainer: {
+      "& iframe": {
+        width: "100%",
+        maxHeight: 420
+      },
       background: "#ffffff",
       border: "1px solid #eaeaea",
       borderRadius: theme.spacing(),
       margin: `0 auto ${theme.spacing(2)}px`,
-      maxWidth: 552,
+      width: "100%",
       padding: theme.spacing(2)
     }
   }),
-  { name: "ProductImagePage" }
+  { name: "ProductMediaPage" }
 );
 
-interface ProductImagePageProps {
+interface ProductMediaPageProps {
-  image?: {
+  mediaObj?: {
     id: string;
     alt: string;
     url: string;
+    type: string;
+    oembedData?: string;
   };
-  images?: Array<{
+  media?: Array<{
     id: string;
     url: string;
   }>;
@@ -55,11 +81,11 @@ interface ProductImagePageProps {
   onSubmit: (data: { description: string }) => void;
 }
 
-const ProductImagePage: React.FC<ProductImagePageProps> = props => {
+const ProductMediaPage: React.FC<ProductMediaPageProps> = props => {
   const {
     disabled,
-    image,
+    mediaObj,
-    images,
+    media,
     product,
     saveButtonBarState,
     onBack,
@@ -73,42 +99,31 @@ const ProductImagePage: React.FC<ProductImagePageProps> = props => {
 
   return (
     <Form
-      initial={{ description: image ? image.alt : "" }}
+      initial={{ description: mediaObj ? mediaObj.alt : "" }}
       onSubmit={onSubmit}
       confirmLeave
     >
       {({ change, data, hasChanged, submit }) => (
         <Container>
           <AppHeader onBack={onBack}>{product}</AppHeader>
-          <PageHeader
+          <PageHeader title={intl.formatMessage(messages.editMedia)} />
-            title={intl.formatMessage({
-              defaultMessage: "Edit Photo",
-              description: "header"
-            })}
-          />
           <Grid variant="inverted">
             <div>
-              <ProductImageNavigation
+              <ProductMediaNavigation
                 disabled={disabled}
-                images={images}
+                media={media}
-                highlighted={image ? image.id : undefined}
+                highlighted={media ? mediaObj.id : undefined}
                 onRowClick={onRowClick}
               />
               <Card>
                 <CardTitle
-                  title={intl.formatMessage({
+                  title={intl.formatMessage(messages.mediaInformation)}
-                    defaultMessage: "Photo Information",
-                    description: "section header"
-                  })}
                 />
                 <CardContent>
                   <TextField
                     name="description"
                     label={intl.formatMessage(commonMessages.description)}
-                    helperText={intl.formatMessage({
+                    helperText={intl.formatMessage(messages.optional)}
-                      defaultMessage: "Optional",
-                      description: "field is optional"
-                    })}
                     disabled={disabled}
                     onChange={change}
                     value={data.description}
@@ -120,17 +135,25 @@ const ProductImagePage: React.FC<ProductImagePageProps> = props => {
             </div>
             <div>
               <Card>
-                <CardTitle
+                <CardTitle title={intl.formatMessage(messages.mediaView)} />
-                  title={intl.formatMessage({
-                    defaultMessage: "Photo View",
-                    description: "section header"
-                  })}
-                />
                 <CardContent>
-                  {!!image ? (
+                  {!!mediaObj ? (
-                    <div className={classes.imageContainer}>
+                    mediaObj?.type === ProductMediaType.IMAGE ? (
-                      <img src={image.url} className={classes.image} />
+                      <div className={classes.imageContainer}>
-                    </div>
+                        <img
+                          className={classes.image}
+                          src={mediaObj.url}
+                          alt={mediaObj.alt}
+                        />
+                      </div>
+                    ) : (
+                      <div
+                        className={classes.imageContainer}
+                        dangerouslySetInnerHTML={{
+                          __html: JSON.parse(mediaObj?.oembedData)?.html
+                        }}
+                      />
+                    )
                   ) : (
                     <Skeleton />
                   )}
@@ -150,5 +173,5 @@ const ProductImagePage: React.FC<ProductImagePageProps> = props => {
     </Form>
   );
 };
-ProductImagePage.displayName = "ProductImagePage";
+ProductMediaPage.displayName = "ProductMediaPage";
-export default ProductImagePage;
+export default ProductMediaPage;

src/products/components/ProductMediaPage/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./ProductMediaPage";
+export * from "./ProductMediaPage";

src/products/components/ProductMediaPopper/ProductMediaPopper.tsx

@@ -0,0 +1,74 @@
+import ClickAwayListener from "@material-ui/core/ClickAwayListener";
+import Grow from "@material-ui/core/Grow";
+import MenuItem from "@material-ui/core/MenuItem";
+import Menu from "@material-ui/core/MenuList";
+import Paper from "@material-ui/core/Paper";
+import Popper from "@material-ui/core/Popper";
+import React from "react";
+import { defineMessages, useIntl } from "react-intl";
+
+interface ProductMediaPopperProps {
+  anchorRef: HTMLButtonElement;
+  imagesUploadRef: HTMLInputElement;
+  openMediaUrlModal: () => void;
+  popperStatus: boolean;
+  setPopperStatus: (popperStatus: boolean) => void;
+}
+
+const messages = defineMessages({
+  uploadImages: {
+    defaultMessage: "Upload Images",
+    description: "modal button images upload"
+  },
+  uploadUrl: {
+    defaultMessage: "Upload URL",
+    description: "modal button url upload"
+  }
+});
+
+export const ProductMediaPopper = ({
+  anchorRef,
+  imagesUploadRef,
+  setPopperStatus,
+  openMediaUrlModal,
+  popperStatus
+}: ProductMediaPopperProps) => {
+  const intl = useIntl();
+
+  return (
+    <Popper
+      open={popperStatus}
+      anchorEl={anchorRef}
+      transition
+      placement="bottom-end"
+    >
+      {({ TransitionProps }) => (
+        <Grow {...TransitionProps}>
+          <Paper>
+            <ClickAwayListener
+              onClickAway={() => setPopperStatus(false)}
+              mouseEvent="onClick"
+            >
+              <Menu>
+                <MenuItem
+                  onClick={() => imagesUploadRef.click()}
+                  data-test="uploadImages"
+                  key="upload-images"
+                >
+                  {intl.formatMessage(messages.uploadImages)}
+                </MenuItem>
+                <MenuItem
+                  onClick={openMediaUrlModal}
+                  data-test="uploadMediaUrl"
+                  key="upload-media-url"
+                >
+                  {intl.formatMessage(messages.uploadUrl)}
+                </MenuItem>
+              </Menu>
+            </ClickAwayListener>
+          </Paper>
+        </Grow>
+      )}
+    </Popper>
+  );
+};

src/products/components/ProductUpdatePage/ProductUpdatePage.test.tsx

@@ -41,7 +41,7 @@ const props: ProductUpdatePageProps = {
   fetchMoreCollections: fetchMoreProps,
   hasChannelChanged: false,
   header: product.name,
-  images: product.images,
+  media: product.media,
   onAssignReferencesClick: () => undefined,
   onBack: () => undefined,
   onChannelsChange: () => undefined,
@@ -49,6 +49,7 @@ const props: ProductUpdatePageProps = {
   onDelete: () => undefined,
   onImageDelete: () => undefined,
   onImageUpload: () => undefined,
+  onMediaUrlUpload: () => undefined,
   onSetDefaultVariant: () => undefined,
   onSubmit,
   onVariantAdd: () => undefined,

src/products/components/ProductUpdatePage/ProductUpdatePage.tsx

@@ -26,6 +26,7 @@ import { FormsetData } from "@saleor/hooks/useFormset";
 import useStateFromProps from "@saleor/hooks/useStateFromProps";
 import { sectionNames } from "@saleor/intl";
 import { maybe } from "@saleor/misc";
+import ProductExternalMediaDialog from "@saleor/products/components/ProductExternalMediaDialog";
 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";
@@ -42,12 +43,12 @@ import { useIntl } from "react-intl";
 
 import {
   ProductDetails_product,
-  ProductDetails_product_images,
+  ProductDetails_product_media,
   ProductDetails_product_variants
 } from "../../types/ProductDetails";
 import { getChoices, ProductUpdatePageFormData } from "../../utils/data";
 import ProductDetailsForm from "../ProductDetailsForm";
-import ProductImages from "../ProductImages";
+import ProductMedia from "../ProductMedia";
 import ProductOrganization from "../ProductOrganization";
 import ProductShipping from "../ProductShipping/ProductShipping";
 import ProductStocks, { ProductStockInput } from "../ProductStocks";
@@ -71,8 +72,9 @@ export interface ProductUpdatePageProps extends ListActions, ChannelProps {
   disabled: boolean;
   fetchMoreCategories: FetchMoreProps;
   fetchMoreCollections: FetchMoreProps;
+  isMediaUrlModalVisible?: boolean;
   variants: ProductDetails_product_variants[];
-  images: ProductDetails_product_images[];
+  media: ProductDetails_product_media[];
   hasChannelChanged: boolean;
   product: ProductDetails_product;
   header: string;
@@ -102,6 +104,7 @@ export interface ProductUpdatePageProps extends ListActions, ChannelProps {
   onImageEdit?(id: string);
   onImageReorder?(event: { oldIndex: number; newIndex: number });
   onImageUpload(file: File);
+  onMediaUrlUpload(mediaUrl: string);
   onSeoClick?();
   onVariantAdd?();
   onSetDefaultVariant(variant: ProductDetails_product_variants);
@@ -133,7 +136,7 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
   fetchCollections,
   fetchMoreCategories,
   fetchMoreCollections,
-  images,
+  media,
   hasChannelChanged,
   header,
   placeholderImage,
@@ -150,6 +153,7 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
   onImageEdit,
   onImageReorder,
   onImageUpload,
+  onMediaUrlUpload,
   onChannelsChange,
   openChannelsModal,
   onSeoClick,
@@ -161,6 +165,7 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
   onVariantReorder,
   onWarehouseConfigure,
   isChecked,
+  isMediaUrlModalVisible,
   selected,
   selectedChannelId,
   toggle,
@@ -180,6 +185,10 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
     product?.category?.name || ""
   );
 
+  const [mediaUrlModalStatus, setMediaUrlModalStatus] = useStateFromProps(
+    isMediaUrlModalVisible || false
+  );
+
   const [selectedCollections, setSelectedCollections] = useStateFromProps(
     getChoices(maybe(() => product.collections, []))
   );
@@ -262,13 +271,14 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
                   onChange={change}
                 />
                 <CardSpacer />
-                <ProductImages
+                <ProductMedia
-                  images={images}
+                  media={media}
                   placeholderImage={placeholderImage}
                   onImageDelete={onImageDelete}
                   onImageReorder={onImageReorder}
                   onImageEdit={onImageEdit}
                   onImageUpload={onImageUpload}
+                  openMediaUrlModal={() => setMediaUrlModalStatus(true)}
                 />
                 <CardSpacer />
                 {data.attributes.length > 0 && (
@@ -441,6 +451,13 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
                 }
               />
             )}
+
+            <ProductExternalMediaDialog
+              product={product}
+              onClose={() => setMediaUrlModalStatus(false)}
+              open={mediaUrlModalStatus}
+              onSubmit={onMediaUrlUpload}
+            />
           </Container>
         </>
       )}

src/products/components/ProductVariantImageSelectDialog/ProductVariantMediaSelectDialog.tsx

@@ -4,7 +4,7 @@ import DialogActions from "@material-ui/core/DialogActions";
 import DialogContent from "@material-ui/core/DialogContent";
 import DialogTitle from "@material-ui/core/DialogTitle";
 import { makeStyles } from "@material-ui/core/styles";
-import { ProductImageFragment } from "@saleor/fragments/types/ProductImageFragment";
+import { ProductMediaFragment } from "@saleor/fragments/types/ProductMediaFragment";
 import { buttonMessages } from "@saleor/intl";
 import classNames from "classnames";
 import React from "react";
@@ -48,45 +48,53 @@ const useStyles = makeStyles(
 );
 
 interface ProductVariantImageSelectDialogProps {
-  images?: ProductImageFragment[];
+  media?: ProductMediaFragment[];
-  selectedImages?: string[];
+  selectedMedia?: string[];
   open: boolean;
   onClose();
-  onImageSelect(id: string);
+  onMediaSelect(id: string);
 }
 
-const ProductVariantImageSelectDialog: React.FC<ProductVariantImageSelectDialogProps> = props => {
+const ProductVariantMediaSelectDialog: React.FC<ProductVariantImageSelectDialogProps> = props => {
-  const { images, open, selectedImages, onClose, onImageSelect } = props;
+  const { media, open, selectedMedia, onClose, onMediaSelect } = props;
-
   const classes = useStyles(props);
 
   return (
     <Dialog onClose={onClose} open={open}>
       <DialogTitle>
         <FormattedMessage
-          defaultMessage="Image Selection"
+          defaultMessage="Media Selection"
           description="dialog header"
         />
       </DialogTitle>
       <DialogContent>
         <div className={classes.root}>
-          {images
+          {media
             .sort((prev, next) => (prev.sortOrder > next.sortOrder ? 1 : -1))
-            .map(tile => (
+            .map(mediaObj => {
-              <div
+              const parsedMediaOembedData = JSON.parse(mediaObj?.oembedData);
-                className={classNames([
+              const mediaUrl =
-                  classes.imageContainer,
+                parsedMediaOembedData?.thumbnail_url || mediaObj.url;
-                  {
+              return (
-                    [classes.selectedImageContainer]:
+                <div
-                      selectedImages.indexOf(tile.id) !== -1
+                  className={classNames([
-                  }
+                    classes.imageContainer,
-                ])}
+                    {
-                onClick={onImageSelect(tile.id)}
+                      [classes.selectedImageContainer]:
-                key={tile.id}
+                        selectedMedia.indexOf(mediaObj.id) !== -1
-              >
+                    }
-                <img className={classes.image} src={tile.url} />
+                  ])}
-              </div>
+                  onClick={onMediaSelect(mediaObj.id)}
-            ))}
+                  key={mediaObj.id}
+                >
+                  <img
+                    className={classes.image}
+                    src={mediaUrl}
+                    alt={mediaObj.alt}
+                  />
+                </div>
+              );
+            })}
         </div>
       </DialogContent>
       <DialogActions>
@@ -97,5 +105,6 @@ const ProductVariantImageSelectDialog: React.FC<ProductVariantImageSelectDialogP
     </Dialog>
   );
 };
-ProductVariantImageSelectDialog.displayName = "ProductVariantImageSelectDialog";
+
-export default ProductVariantImageSelectDialog;
+ProductVariantMediaSelectDialog.displayName = "ProductVariantMediaSelectDialog";
+export default ProductVariantMediaSelectDialog;

src/products/components/ProductVariantImageSelectDialog/index.ts

@@ -1,2 +1,2 @@
-export { default } from "./ProductVariantImageSelectDialog";
+export { default } from "./ProductVariantMediaSelectDialog";
-export * from "./ProductVariantImageSelectDialog";
+export * from "./ProductVariantMediaSelectDialog";

src/products/components/ProductVariantImages/index.ts

@@ -1,2 +0,0 @@
-export { default } from "./ProductVariantImages";
-export * from "./ProductVariantImages";

src/products/components/ProductVariantMedia/ProductVariantMedia.tsx

@@ -5,9 +5,24 @@ import { makeStyles } from "@material-ui/core/styles";
 import Typography from "@material-ui/core/Typography";
 import CardTitle from "@saleor/components/CardTitle";
 import Skeleton from "@saleor/components/Skeleton";
-import { ProductImageFragment } from "@saleor/fragments/types/ProductImageFragment";
+import { ProductMediaFragment } from "@saleor/fragments/types/ProductMediaFragment";
 import React from "react";
-import { FormattedMessage, useIntl } from "react-intl";
+import { defineMessages, useIntl } from "react-intl";
+
+const messages = defineMessages({
+  chooseMedia: {
+    defaultMessage: "Choose media",
+    description: "button"
+  },
+  media: {
+    defaultMessage: "Media",
+    description: "section header"
+  },
+  selectSpecificVariant: {
+    defaultMessage: "Select a specific variant media from product media",
+    description: "select variant media"
+  }
+});
 
 const useStyles = makeStyles(
   theme => ({
@@ -38,29 +53,25 @@ const useStyles = makeStyles(
       gridTemplateColumns: "repeat(4, 1fr)"
     }
   }),
-  { name: "ProductVariantImages" }
+  { name: "ProductVariantMedia" }
 );
 
-interface ProductVariantImagesProps {
+interface ProductVariantMediaProps {
-  images?: ProductImageFragment[];
+  media?: ProductMediaFragment[];
   placeholderImage?: string;
   disabled: boolean;
   onImageAdd();
 }
 
-export const ProductVariantImages: React.FC<ProductVariantImagesProps> = props => {
+export const ProductVariantMedia: React.FC<ProductVariantMediaProps> = props => {
-  const { disabled, images, onImageAdd } = props;
-
-  const classes = useStyles(props);
   const intl = useIntl();
+  const classes = useStyles(props);
+  const { disabled, media, onImageAdd } = props;
 
   return (
     <Card>
       <CardTitle
-        title={intl.formatMessage({
+        title={intl.formatMessage(messages.media)}
-          defaultMessage: "Images",
-          description: "section header"
-        })}
         toolbar={
           <Button
             color="primary"
@@ -68,28 +79,33 @@ export const ProductVariantImages: React.FC<ProductVariantImagesProps> = props =
             disabled={disabled}
             onClick={onImageAdd}
           >
-            <FormattedMessage
+            {intl.formatMessage(messages.chooseMedia)}
-              defaultMessage="Choose photos"
-              description="button"
-            />
           </Button>
         }
       />
       <CardContent>
         <div className={classes.root}>
-          {images === undefined || images === null ? (
+          {media === undefined || media === null ? (
             <Skeleton />
-          ) : images.length > 0 ? (
+          ) : media.length > 0 ? (
-            images
+            media
               .sort((prev, next) => (prev.sortOrder > next.sortOrder ? 1 : -1))
-              .map(tile => (
+              .map(mediaObj => {
-                <div className={classes.imageContainer} key={tile.id}>
+                const parsedMediaOembedData = JSON.parse(mediaObj?.oembedData);
-                  <img className={classes.image} src={tile.url} />
+                const mediaUrl =
-                </div>
+                  parsedMediaOembedData?.thumbnail_url || mediaObj.url;
-              ))
+                return (
+                  <img
+                    key={mediaObj.id}
+                    className={classes.image}
+                    src={mediaUrl}
+                    alt={mediaObj.alt}
+                  />
+                );
+              })
           ) : (
             <Typography className={classes.helpText}>
-              <FormattedMessage defaultMessage="Select a specific variant image from product images" />
+              {intl.formatMessage(messages.selectSpecificVariant)}
             </Typography>
           )}
         </div>
@@ -97,5 +113,5 @@ export const ProductVariantImages: React.FC<ProductVariantImagesProps> = props =
     </Card>
   );
 };
-ProductVariantImages.displayName = "ProductVariantImages";
+ProductVariantMedia.displayName = "ProductVariantMedia";
-export default ProductVariantImages;
+export default ProductVariantMedia;

src/products/components/ProductVariantMedia/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./ProductVariantMedia";
+export * from "./ProductVariantMedia";

src/products/components/ProductVariantNavigation/ProductVariantNavigation.tsx

@@ -99,6 +99,10 @@ const ProductVariantNavigation: React.FC<ProductVariantNavigationProps> = props
           {renderCollection(variants, (variant, variantIndex) => {
             const isDefault = variant && variant.id === defaultVariantId;
             const isActive = variant && variant.id === current;
+            const thumbnail = variant?.media?.filter(
+              mediaObj => mediaObj.type === "IMAGE"
+            )[0];
+
             return (
               <SortableTableRow
                 hover={!!variant}
@@ -111,7 +115,7 @@ const ProductVariantNavigation: React.FC<ProductVariantNavigationProps> = props
               >
                 <TableCellAvatar
                   className={classes.colAvatar}
-                  thumbnail={variant?.images[0]?.url || fallbackThumbnail}
+                  thumbnail={thumbnail?.url || fallbackThumbnail}
                 />
                 <TableCell className={classes.colName}>
                   {variant ? variant.name || variant.sku : <Skeleton />}

src/products/components/ProductVariantPage/ProductVariantPage.tsx

@@ -31,8 +31,8 @@ import { defineMessages, useIntl } from "react-intl";
 import { maybe } from "../../../misc";
 import ProductShipping from "../ProductShipping/ProductShipping";
 import ProductStocks, { ProductStockInput } from "../ProductStocks";
-import ProductVariantImages from "../ProductVariantImages";
+import ProductVariantMediaSelectDialog from "../ProductVariantImageSelectDialog";
-import ProductVariantImageSelectDialog from "../ProductVariantImageSelectDialog";
+import ProductVariantMedia from "../ProductVariantMedia";
 import ProductVariantNavigation from "../ProductVariantNavigation";
 import ProductVariantPrice from "../ProductVariantPrice";
 import ProductVariantSetDefault from "../ProductVariantSetDefault";
@@ -97,7 +97,7 @@ interface ProductVariantPageProps {
   onBack();
   onDelete();
   onSubmit(data: ProductVariantUpdateSubmitData);
-  onImageSelect(id: string);
+  onMediaSelect(id: string);
   onVariantClick(variantId: string);
   onSetDefaultVariant();
   onWarehouseConfigure();
@@ -120,7 +120,7 @@ const ProductVariantPage: React.FC<ProductVariantPageProps> = ({
   onAdd,
   onBack,
   onDelete,
-  onImageSelect,
+  onMediaSelect,
   onSubmit,
   onVariantClick,
   onVariantReorder,
@@ -139,12 +139,12 @@ const ProductVariantPage: React.FC<ProductVariantPageProps> = ({
   const [isModalOpened, setModalStatus] = React.useState(false);
   const toggleModal = () => setModalStatus(!isModalOpened);
 
-  const variantImages = variant?.images?.map(image => image.id);
+  const variantMedia = variant?.media?.map(image => image.id);
-  const productImages = variant?.product?.images?.sort((prev, next) =>
+  const productMedia = variant?.product?.media?.sort((prev, next) =>
     prev.sortOrder > next.sortOrder ? 1 : -1
   );
-  const images = productImages
+  const media = productMedia
-    ?.filter(image => variantImages.indexOf(image.id) !== -1)
+    ?.filter(image => variantMedia.indexOf(image.id) !== -1)
     .sort((prev, next) => (prev.sortOrder > next.sortOrder ? 1 : -1));
 
   const canOpenAssignReferencesAttributeDialog = !!assignReferencesAttributeId;
@@ -255,9 +255,9 @@ const ProductVariantPage: React.FC<ProductVariantPageProps> = ({
                     onReferencesReorder={handlers.reorderAttributeValue}
                   />
                   <CardSpacer />
-                  <ProductVariantImages
+                  <ProductVariantMedia
                     disabled={loading}
-                    images={images}
+                    media={media}
                     placeholderImage={placeholderImage}
                     onImageAdd={toggleModal}
                   />
@@ -334,12 +334,12 @@ const ProductVariantPage: React.FC<ProductVariantPageProps> = ({
         </ProductVariantUpdateForm>
       </Container>
       {variant && (
-        <ProductVariantImageSelectDialog
+        <ProductVariantMediaSelectDialog
           onClose={toggleModal}
-          onImageSelect={onImageSelect}
+          onMediaSelect={onMediaSelect}
           open={isModalOpened}
-          images={productImages}
+          media={productMedia}
-          selectedImages={maybe(() => variant.images.map(image => image.id))}
+          selectedMedia={maybe(() => variant.media.map(image => image.id))}
         />
       )}
     </>

src/products/containers/ProductImagesReorder.tsx

@@ -1,55 +1,56 @@
 import React from "react";
 
 import { TypedMutationInnerProps } from "../../mutations";
-import { useProductImagesReorder } from "../mutations";
+import { useProductMediaReorder } from "../mutations";
 import {
-  ProductImageReorder,
+  ProductMediaReorder,
-  ProductImageReorderVariables
+  ProductMediaReorderVariables
-} from "../types/ProductImageReorder";
+} from "../types/ProductMediaReorder";
 
-interface ProductImagesReorderProviderProps
+interface ProductMediaReorderProviderProps
   extends TypedMutationInnerProps<
-    ProductImageReorder,
+    ProductMediaReorder,
-    ProductImageReorderVariables
+    ProductMediaReorderVariables
   > {
   productId: string;
-  productImages: Array<{
+  productMedia: Array<{
     id: string;
     url: string;
   }>;
 }
 
-const ProductImagesReorderProvider: React.FC<ProductImagesReorderProviderProps> = ({
+const ProductMediaReorderProvider: React.FC<ProductMediaReorderProviderProps> = ({
   children,
   productId,
-  productImages,
+  productMedia,
   ...mutationProps
 }) => {
-  const [mutate, mutationResult] = useProductImagesReorder(mutationProps);
+  const [mutate, mutationResult] = useProductMediaReorder(mutationProps);
 
   return (
     <>
       {children(opts => {
-        const productImagesMap = productImages.reduce((prev, curr) => {
+        const productMediaMap = productMedia.reduce((prev, curr) => {
           prev[curr.id] = curr;
           return prev;
         }, {});
-        const newProductImages = opts.variables.imagesIds.map((id, index) => ({
+        const newProductMedia = opts.variables.mediaIds.map((id, index) => ({
-          __typename: "ProductImage",
+          __typename: "ProductMedia",
-          ...productImagesMap[id],
+          ...productMediaMap[id],
           sortOrder: index
         }));
         const optimisticResponse: typeof mutationResult["data"] = {
-          productImageReorder: {
+          productMediaReorder: {
-            __typename: "ProductImageReorder",
+            __typename: "ProductMediaReorder",
             errors: null,
             product: {
               __typename: "Product",
               id: productId,
-              images: newProductImages
+              media: newProductMedia
             }
           }
         };
+
         return mutate({
           ...opts,
           optimisticResponse
@@ -59,4 +60,4 @@ const ProductImagesReorderProvider: React.FC<ProductImagesReorderProviderProps>
   );
 };
 
-export default ProductImagesReorderProvider;
+export default ProductMediaReorderProvider;

src/products/fixtures.ts

@@ -1,6 +1,7 @@
 import { ProductVariant } from "@saleor/fragments/types/ProductVariant";
 import {
   AttributeInputTypeEnum,
+  ProductMediaType,
   WeightUnitsEnum
 } from "@saleor/types/globalTypes";
 import { warehouseList } from "@saleor/warehouses/fixtures";
@@ -206,47 +207,57 @@ export const product: (
   defaultVariant: { __typename: "ProductVariant", id: "pv75934" },
   description: JSON.stringify(content),
   id: "p10171",
-  images: [
-    {
-      __typename: "ProductImage",
-      alt: "Id sit dolores adipisci",
-      id: "UHJvZHVjdEltYWdlOjE=",
-      sortOrder: 0,
-      url: placeholderImage
-    },
-    {
-      __typename: "ProductImage",
-      alt: "Id sit dolores adipisci",
-      id: "UHJvZHVjdEltYWdlOaE=",
-      sortOrder: 2,
-      url: placeholderImage
-    },
-    {
-      __typename: "ProductImage",
-      alt: "Id sit dolores adipisci",
-      id: "UPJvZHVjdEltYWdlOjV=",
-      sortOrder: 1,
-      url: placeholderImage
-    },
-    {
-      __typename: "ProductImage",
-      alt: "Id sit dolores adipisci",
-      id: "UHJvZHVjdEltYHdlOjX=",
-      sortOrder: 3,
-      url: placeholderImage
-    },
-    {
-      __typename: "ProductImage",
-      alt: "Id sit dolores adipisci",
-      id: "UHJvZHVjdIlnYWdlOjX=",
-      sortOrder: 4,
-      url: placeholderImage
-    }
-  ],
   isAvailable: false,
   isAvailableForPurchase: false,
   isFeatured: false,
   margin: { __typename: "Margin", start: 2, stop: 7 },
+  media: [
+    {
+      __typename: "ProductMedia",
+      alt: "Id sit dolores adipisci",
+      id: "UHJvZHVjdEltYWdlOjE=",
+      sortOrder: 0,
+      type: ProductMediaType.IMAGE,
+      oembedData: "{}",
+      url: placeholderImage
+    },
+    {
+      __typename: "ProductMedia",
+      alt: "Id sit dolores adipisci",
+      id: "UHJvZHVjdEltYWdlOaE=",
+      sortOrder: 2,
+      type: ProductMediaType.IMAGE,
+      oembedData: "{}",
+      url: placeholderImage
+    },
+    {
+      __typename: "ProductMedia",
+      alt: "Id sit dolores adipisci",
+      id: "UPJvZHVjdEltYWdlOjV=",
+      sortOrder: 1,
+      type: ProductMediaType.IMAGE,
+      oembedData: "{}",
+      url: placeholderImage
+    },
+    {
+      __typename: "ProductMedia",
+      alt: "Id sit dolores adipisci",
+      id: "UHJvZHVjdEltYHdlOjX=",
+      sortOrder: 3,
+      type: ProductMediaType.IMAGE,
+      oembedData: "{}",
+      url: placeholderImage
+    },
+    {
+      __typename: "ProductMedia",
+      alt: "Id sit dolores adipisci",
+      id: "UHJvZHVjdIlnYWdlOjX=",
+      sortOrder: 4,
+      type: ProductMediaType.IMAGE,
+      oembedData: "{}",
+      url: placeholderImage
+    }
+  ],
   metadata: [
     {
       __typename: "MetadataItem",
@@ -404,19 +415,23 @@ export const product: (
       __typename: "ProductVariant",
       channelListings: [],
       id: "pv75934",
-      images: [
+      margin: 2,
+      media: [
         {
-          __typename: "ProductImage",
+          __typename: "ProductMedia",
           id: "pi92837",
+          type: ProductMediaType.IMAGE,
+          oembedData: "{}",
           url: placeholderImage
         },
         {
-          __typename: "ProductImage",
+          __typename: "ProductMedia",
           id: "pi92838",
+          type: ProductMediaType.IMAGE,
+          oembedData: "{}",
           url: placeholderImage
         }
       ],
-      margin: 2,
       name: "Cordoba Oro",
       sku: "87192-94370",
       stocks: [
@@ -485,19 +500,23 @@ export const product: (
         }
       ],
       id: "pv68615",
-      images: [
+      margin: 7,
+      media: [
         {
-          __typename: "ProductImage",
+          __typename: "ProductMedia",
           id: "pi81234",
+          type: ProductMediaType.IMAGE,
+          oembedData: "{}",
           url: placeholderImage
         },
         {
-          __typename: "ProductImage",
+          __typename: "ProductMedia",
           id: "pi1236912",
+          type: ProductMediaType.IMAGE,
+          oembedData: "{}",
           url: placeholderImage
         }
       ],
-      margin: 7,
       name: "silver",
       sku: "69055-15190",
       stocks: [
@@ -2679,25 +2698,33 @@ export const variant = (placeholderImage: string): ProductVariant => ({
     }
   ],
   id: "var1",
-  images: [
+  media: [
     {
-      __typename: "ProductImage",
+      __typename: "ProductMedia",
       id: "img1",
+      type: ProductMediaType.IMAGE,
+      oembedData: "{}",
       url: placeholderImage
     },
     {
-      __typename: "ProductImage",
+      __typename: "ProductMedia",
       id: "img2",
+      type: ProductMediaType.IMAGE,
+      oembedData: "{}",
       url: placeholderImage
     },
     {
-      __typename: "ProductImage",
+      __typename: "ProductMedia",
       id: "img7",
+      type: ProductMediaType.IMAGE,
+      oembedData: "{}",
       url: placeholderImage
     },
     {
-      __typename: "ProductImage",
+      __typename: "ProductMedia",
       id: "img8",
+      type: ProductMediaType.IMAGE,
+      oembedData: "{}",
       url: placeholderImage
     }
   ],
@@ -2823,68 +2850,86 @@ export const variant = (placeholderImage: string): ProductVariant => ({
       id: "var1"
     },
     id: "prod1",
-    images: [
+    media: [
       {
-        __typename: "ProductImage",
+        __typename: "ProductMedia",
         alt: "Front",
         id: "img1",
         sortOrder: 1,
+        type: ProductMediaType.IMAGE,
+        oembedData: "{}",
         url: placeholderImage
       },
       {
-        __typename: "ProductImage",
+        __typename: "ProductMedia",
         alt: "Back",
         id: "img2",
         sortOrder: 4,
+        type: ProductMediaType.IMAGE,
+        oembedData: "{}",
         url: placeholderImage
       },
       {
-        __typename: "ProductImage",
+        __typename: "ProductMedia",
         alt: "Right side",
         id: "img3",
         sortOrder: 2,
+        type: ProductMediaType.IMAGE,
+        oembedData: "{}",
         url: placeholderImage
       },
       {
-        __typename: "ProductImage",
+        __typename: "ProductMedia",
         alt: "Left side",
         id: "img4",
         sortOrder: 3,
+        type: ProductMediaType.IMAGE,
+        oembedData: "{}",
         url: placeholderImage
       },
       {
-        __typename: "ProductImage",
+        __typename: "ProductMedia",
         alt: "Paper",
         id: "img5",
         sortOrder: 0,
+        type: ProductMediaType.IMAGE,
+        oembedData: "{}",
         url: placeholderImage
       },
       {
-        __typename: "ProductImage",
+        __typename: "ProductMedia",
         alt: "Hard cover",
         id: "img6",
         sortOrder: 1,
+        type: ProductMediaType.IMAGE,
+        oembedData: "{}",
         url: placeholderImage
       },
       {
-        __typename: "ProductImage",
+        __typename: "ProductMedia",
         alt: "Extended version",
         id: "img7",
         sortOrder: 0,
+        type: ProductMediaType.IMAGE,
+        oembedData: "{}",
         url: placeholderImage
       },
       {
-        __typename: "ProductImage",
+        __typename: "ProductMedia",
         alt: "Cut version",
         id: "img8",
         sortOrder: 2,
+        type: ProductMediaType.IMAGE,
+        oembedData: "{}",
         url: placeholderImage
       },
       {
-        __typename: "ProductImage",
+        __typename: "ProductMedia",
         alt: "Soft cover",
         id: "img9",
         sortOrder: 2,
+        type: ProductMediaType.IMAGE,
+        oembedData: "{}",
         url: placeholderImage
       }
     ],
@@ -2894,10 +2939,12 @@ export const variant = (placeholderImage: string): ProductVariant => ({
       {
         __typename: "ProductVariant",
         id: "var1",
-        images: [
+        media: [
           {
-            __typename: "ProductImage",
+            __typename: "ProductMedia",
             id: "23123",
+            type: ProductMediaType.IMAGE,
+            oembedData: "{}",
             url: placeholderImage
           }
         ],
@@ -2907,10 +2954,12 @@ export const variant = (placeholderImage: string): ProductVariant => ({
       {
         __typename: "ProductVariant",
         id: "var2",
-        images: [
+        media: [
           {
-            __typename: "ProductImage",
+            __typename: "ProductMedia",
             id: "23123",
+            type: ProductMediaType.IMAGE,
+            oembedData: "{}",
             url: placeholderImage
           }
         ],
@@ -2920,10 +2969,12 @@ export const variant = (placeholderImage: string): ProductVariant => ({
       {
         __typename: "ProductVariant",
         id: "var3",
-        images: [
+        media: [
           {
-            __typename: "ProductImage",
+            __typename: "ProductMedia",
             id: "23123",
+            type: ProductMediaType.IMAGE,
+            oembedData: "{}",
             url: placeholderImage
           }
         ],
@@ -2933,10 +2984,12 @@ export const variant = (placeholderImage: string): ProductVariant => ({
       {
         __typename: "ProductVariant",
         id: "var4",
-        images: [
+        media: [
           {
-            __typename: "ProductImage",
+            __typename: "ProductMedia",
             id: "23123",
+            type: ProductMediaType.IMAGE,
+            oembedData: "{}",
             url: placeholderImage
           }
         ],
@@ -3075,9 +3128,9 @@ export const variant = (placeholderImage: string): ProductVariant => ({
     value: 6
   }
 });
-export const variantImages = (placeholderImage: string) =>
+export const variantMedia = (placeholderImage: string) =>
-  variant(placeholderImage).images;
+  variant(placeholderImage).media;
 export const variantProductImages = (placeholderImage: string) =>
-  variant(placeholderImage).product.images;
+  variant(placeholderImage).product.media;
 export const variantSiblings = (placeholderImage: string) =>
   variant(placeholderImage).product.variants;

src/products/index.tsx

@@ -91,7 +91,7 @@ const ProductImage: React.FC<RouteComponentProps<any>> = ({
 
   return (
     <ProductImageComponent
-      imageId={decodeURIComponent(match.params.imageId)}
+      mediaId={decodeURIComponent(match.params.imageId)}
       productId={decodeURIComponent(match.params.productId)}
       params={params}
     />

src/products/mutations.ts

@@ -13,6 +13,26 @@ import {
   productFragmentDetails
 } from "@saleor/fragments/products";
 import makeMutation from "@saleor/hooks/makeMutation";
+import {
+  ProductMediaDelete,
+  ProductMediaDeleteVariables
+} from "@saleor/products/types/ProductMediaDelete";
+import {
+  ProductMediaReorder,
+  ProductMediaReorderVariables
+} from "@saleor/products/types/ProductMediaReorder";
+import {
+  ProductMediaUpdate,
+  ProductMediaUpdateVariables
+} from "@saleor/products/types/ProductMediaUpdate";
+import {
+  VariantMediaAssign,
+  VariantMediaAssignVariables
+} from "@saleor/products/types/VariantMediaAssign";
+import {
+  VariantMediaUnassign,
+  VariantMediaUnassignVariables
+} from "@saleor/products/types/VariantMediaUnassign";
 import gql from "graphql-tag";
 
 import {
@@ -27,21 +47,9 @@ import { ProductCreate, ProductCreateVariables } from "./types/ProductCreate";
 import { ProductDelete, ProductDeleteVariables } from "./types/ProductDelete";
 import { ProductExport, ProductExportVariables } from "./types/ProductExport";
 import {
-  ProductImageCreate,
+  ProductMediaCreate,
-  ProductImageCreateVariables
+  ProductMediaCreateVariables
-} from "./types/ProductImageCreate";
+} from "./types/ProductMediaCreate";
-import {
-  ProductImageDelete,
-  ProductImageDeleteVariables
-} from "./types/ProductImageDelete";
-import {
-  ProductImageReorder,
-  ProductImageReorderVariables
-} from "./types/ProductImageReorder";
-import {
-  ProductImageUpdate,
-  ProductImageUpdateVariables
-} from "./types/ProductImageUpdate";
 import { ProductUpdate, ProductUpdateVariables } from "./types/ProductUpdate";
 import {
   ProductVariantBulkCreate,
@@ -69,21 +77,25 @@ import {
 } from "./types/SimpleProductUpdate";
 import { VariantCreate, VariantCreateVariables } from "./types/VariantCreate";
 import { VariantDelete, VariantDeleteVariables } from "./types/VariantDelete";
-import {
-  VariantImageAssign,
-  VariantImageAssignVariables
-} from "./types/VariantImageAssign";
-import {
-  VariantImageUnassign,
-  VariantImageUnassignVariables
-} from "./types/VariantImageUnassign";
 import { VariantUpdate, VariantUpdateVariables } from "./types/VariantUpdate";
 
-export const productImageCreateMutation = gql`
+export const productMediaCreateMutation = gql`
   ${productErrorFragment}
   ${productFragmentDetails}
-  mutation ProductImageCreate($product: ID!, $image: Upload!, $alt: String) {
+  mutation ProductMediaCreate(
-    productImageCreate(input: { alt: $alt, image: $image, product: $product }) {
+    $product: ID!
+    $image: Upload
+    $alt: String
+    $mediaUrl: String
+  ) {
+    productMediaCreate(
+      input: {
+        alt: $alt
+        image: $image
+        product: $product
+        mediaUrl: $mediaUrl
+      }
+    ) {
       errors: productErrors {
         ...ProductErrorFragment
       }
@@ -93,10 +105,10 @@ export const productImageCreateMutation = gql`
     }
   }
 `;
-export const useProductImageCreateMutation = makeMutation<
+export const useProductMediaCreateMutation = makeMutation<
-  ProductImageCreate,
+  ProductMediaCreate,
-  ProductImageCreateVariables
+  ProductMediaCreateVariables
->(productImageCreateMutation);
+>(productMediaCreateMutation);
 
 export const productDeleteMutation = gql`
   ${productErrorFragment}
@@ -116,16 +128,16 @@ export const useProductDeleteMutation = makeMutation<
   ProductDeleteVariables
 >(productDeleteMutation);
 
-export const productImagesReorder = gql`
+export const productMediaReorder = gql`
   ${productErrorFragment}
-  mutation ProductImageReorder($productId: ID!, $imagesIds: [ID]!) {
+  mutation ProductMediaReorder($productId: ID!, $mediaIds: [ID]!) {
-    productImageReorder(productId: $productId, imagesIds: $imagesIds) {
+    productMediaReorder(productId: $productId, mediaIds: $mediaIds) {
       errors: productErrors {
         ...ProductErrorFragment
       }
       product {
         id
-        images {
+        media {
           id
           alt
           sortOrder
@@ -135,10 +147,10 @@ export const productImagesReorder = gql`
     }
   }
 `;
-export const useProductImagesReorder = makeMutation<
+export const useProductMediaReorder = makeMutation<
-  ProductImageReorder,
+  ProductMediaReorder,
-  ProductImageReorderVariables
+  ProductMediaReorderVariables
->(productImagesReorder);
+>(productMediaReorder);
 
 const productVariantSetDefault = gql`
   ${productErrorFragment}
@@ -374,32 +386,32 @@ export const useVariantCreateMutation = makeMutation<
   VariantCreateVariables
 >(variantCreateMutation);
 
-export const productImageDeleteMutation = gql`
+export const productMediaDeleteMutation = gql`
   ${productErrorFragment}
-  mutation ProductImageDelete($id: ID!) {
+  mutation ProductMediaDelete($id: ID!) {
-    productImageDelete(id: $id) {
+    productMediaDelete(id: $id) {
       errors: productErrors {
         ...ProductErrorFragment
       }
       product {
         id
-        images {
+        media {
           id
         }
       }
     }
   }
 `;
-export const useProductImageDeleteMutation = makeMutation<
+export const useProductMediaDeleteMutation = makeMutation<
-  ProductImageDelete,
+  ProductMediaDelete,
-  ProductImageDeleteVariables
+  ProductMediaDeleteVariables
->(productImageDeleteMutation);
+>(productMediaDeleteMutation);
 
-export const productImageUpdateMutation = gql`
+export const productMediaUpdateMutation = gql`
   ${productErrorFragment}
   ${productFragmentDetails}
-  mutation ProductImageUpdate($id: ID!, $alt: String!) {
+  mutation ProductMediaUpdate($id: ID!, $alt: String!) {
-    productImageUpdate(id: $id, input: { alt: $alt }) {
+    productMediaUpdate(id: $id, input: { alt: $alt }) {
       errors: productErrors {
         ...ProductErrorFragment
       }
@@ -409,16 +421,16 @@ export const productImageUpdateMutation = gql`
     }
   }
 `;
-export const useProductImageUpdateMutation = makeMutation<
+export const useProductMediaUpdateMutation = makeMutation<
-  ProductImageUpdate,
+  ProductMediaUpdate,
-  ProductImageUpdateVariables
+  ProductMediaUpdateVariables
->(productImageUpdateMutation);
+>(productMediaUpdateMutation);
 
-export const variantImageAssignMutation = gql`
+export const variantMediaAssignMutation = gql`
   ${fragmentVariant}
   ${productErrorFragment}
-  mutation VariantImageAssign($variantId: ID!, $imageId: ID!) {
+  mutation VariantMediaAssign($variantId: ID!, $mediaId: ID!) {
-    variantImageAssign(variantId: $variantId, imageId: $imageId) {
+    variantMediaAssign(variantId: $variantId, mediaId: $mediaId) {
       errors: productErrors {
         ...ProductErrorFragment
       }
@@ -428,16 +440,16 @@ export const variantImageAssignMutation = gql`
     }
   }
 `;
-export const useVariantImageAssignMutation = makeMutation<
+export const useVariantMediaAssignMutation = makeMutation<
-  VariantImageAssign,
+  VariantMediaAssign,
-  VariantImageAssignVariables
+  VariantMediaAssignVariables
->(variantImageAssignMutation);
+>(variantMediaAssignMutation);
 
-export const variantImageUnassignMutation = gql`
+export const variantMediaUnassignMutation = gql`
   ${fragmentVariant}
   ${productErrorFragment}
-  mutation VariantImageUnassign($variantId: ID!, $imageId: ID!) {
+  mutation VariantMediaUnassign($variantId: ID!, $mediaId: ID!) {
-    variantImageUnassign(variantId: $variantId, imageId: $imageId) {
+    variantMediaUnassign(variantId: $variantId, mediaId: $mediaId) {
       errors: productErrors {
         ...ProductErrorFragment
       }
@@ -447,10 +459,10 @@ export const variantImageUnassignMutation = gql`
     }
   }
 `;
-export const useVariantImageUnassignMutation = makeMutation<
+export const useVariantMediaUnassignMutation = makeMutation<
-  VariantImageUnassign,
+  VariantMediaUnassign,
-  VariantImageUnassignVariables
+  VariantMediaUnassignVariables
->(variantImageUnassignMutation);
+>(variantMediaUnassignMutation);
 
 export const productBulkDeleteMutation = gql`
   ${productErrorFragment}

src/products/queries.ts

@@ -10,6 +10,10 @@ import {
 import { taxTypeFragment } from "@saleor/fragments/taxes";
 import { warehouseFragment } from "@saleor/fragments/warehouses";
 import makeQuery from "@saleor/hooks/makeQuery";
+import {
+  ProductMediaById,
+  ProductMediaByIdVariables
+} from "@saleor/products/types/ProductMediaById";
 import gql from "graphql-tag";
 
 import { CountAllProducts } from "./types/CountAllProducts";
@@ -29,10 +33,6 @@ import {
   ProductDetails,
   ProductDetailsVariables
 } from "./types/ProductDetails";
-import {
-  ProductImageById,
-  ProductImageByIdVariables
-} from "./types/ProductImageById";
 import { ProductList, ProductListVariables } from "./types/ProductList";
 import {
   ProductVariantCreateData,
@@ -191,7 +191,7 @@ const productVariantCreateQuery = gql`
   query ProductVariantCreateData($id: ID!) {
     product(id: $id) {
       id
-      images {
+      media {
         id
         sortOrder
         url
@@ -224,9 +224,10 @@ const productVariantCreateQuery = gql`
         id
         name
         sku
-        images {
+        media {
           id
           url
+          type
         }
       }
     }
@@ -237,27 +238,32 @@ export const useProductVariantCreateQuery = makeQuery<
   ProductVariantCreateDataVariables
 >(productVariantCreateQuery);
 
-const productImageQuery = gql`
+const productMediaQuery = gql`
-  query ProductImageById($productId: ID!, $imageId: ID!) {
+  query ProductMediaById($productId: ID!, $mediaId: ID!) {
     product(id: $productId) {
       id
       name
-      mainImage: imageById(id: $imageId) {
+      mainImage: mediaById(id: $mediaId) {
         id
         alt
         url
+        type
+        oembedData
       }
-      images {
+      media {
         id
         url(size: 48)
+        alt
+        type
+        oembedData
       }
     }
   }
 `;
-export const useProductImageQuery = makeQuery<
+export const useProductMediaQuery = makeQuery<
-  ProductImageById,
+  ProductMediaById,
-  ProductImageByIdVariables
+  ProductMediaByIdVariables
->(productImageQuery);
+>(productMediaQuery);
 
 const availableInGridAttributes = gql`
   ${pageInfoFragment}

src/products/types/ProductChannelListingUpdate.ts

@@ -2,7 +2,7 @@
 /* eslint-disable */
 // This file was automatically generated and should not be edited.
 
-import { ProductChannelListingUpdateInput, AttributeInputTypeEnum, AttributeEntityTypeEnum, WeightUnitsEnum, ProductErrorCode } from "./../../types/globalTypes";
+import { ProductChannelListingUpdateInput, AttributeInputTypeEnum, AttributeEntityTypeEnum, ProductMediaType, WeightUnitsEnum, ProductErrorCode } from "./../../types/globalTypes";
 
 // ====================================================
 // GraphQL mutation operation: ProductChannelListingUpdate
@@ -172,12 +172,14 @@ export interface ProductChannelListingUpdate_productChannelListingUpdate_product
   name: string;
 }
 
-export interface ProductChannelListingUpdate_productChannelListingUpdate_product_images {
+export interface ProductChannelListingUpdate_productChannelListingUpdate_product_media {
-  __typename: "ProductImage";
+  __typename: "ProductMedia";
   id: string;
   alt: string;
   sortOrder: number | null;
   url: string;
+  type: ProductMediaType;
+  oembedData: any;
 }
 
 export interface ProductChannelListingUpdate_productChannelListingUpdate_product_variants_stocks_warehouse {
@@ -261,7 +263,7 @@ export interface ProductChannelListingUpdate_productChannelListingUpdate_product
   category: ProductChannelListingUpdate_productChannelListingUpdate_product_category | null;
   collections: (ProductChannelListingUpdate_productChannelListingUpdate_product_collections | null)[] | null;
   chargeTaxes: boolean;
-  images: (ProductChannelListingUpdate_productChannelListingUpdate_product_images | null)[] | null;
+  media: (ProductChannelListingUpdate_productChannelListingUpdate_product_media | null)[] | null;
   isAvailable: boolean | null;
   variants: (ProductChannelListingUpdate_productChannelListingUpdate_product_variants | null)[] | null;
   weight: ProductChannelListingUpdate_productChannelListingUpdate_product_weight | null;

src/products/types/ProductCreate.ts

@@ -2,7 +2,7 @@
 /* eslint-disable */
 // This file was automatically generated and should not be edited.
 
-import { ProductCreateInput, ProductErrorCode, AttributeInputTypeEnum, AttributeEntityTypeEnum, WeightUnitsEnum } from "./../../types/globalTypes";
+import { ProductCreateInput, ProductErrorCode, AttributeInputTypeEnum, AttributeEntityTypeEnum, ProductMediaType, WeightUnitsEnum } from "./../../types/globalTypes";
 
 // ====================================================
 // GraphQL mutation operation: ProductCreate
@@ -179,12 +179,14 @@ export interface ProductCreate_productCreate_product_collections {
   name: string;
 }
 
-export interface ProductCreate_productCreate_product_images {
+export interface ProductCreate_productCreate_product_media {
-  __typename: "ProductImage";
+  __typename: "ProductMedia";
   id: string;
   alt: string;
   sortOrder: number | null;
   url: string;
+  type: ProductMediaType;
+  oembedData: any;
 }
 
 export interface ProductCreate_productCreate_product_variants_stocks_warehouse {
@@ -268,7 +270,7 @@ export interface ProductCreate_productCreate_product {
   category: ProductCreate_productCreate_product_category | null;
   collections: (ProductCreate_productCreate_product_collections | null)[] | null;
   chargeTaxes: boolean;
-  images: (ProductCreate_productCreate_product_images | null)[] | null;
+  media: (ProductCreate_productCreate_product_media | null)[] | null;
   isAvailable: boolean | null;
   variants: (ProductCreate_productCreate_product_variants | null)[] | null;
   weight: ProductCreate_productCreate_product_weight | null;

src/products/types/ProductDetails.ts

@@ -2,7 +2,7 @@
 /* eslint-disable */
 // This file was automatically generated and should not be edited.
 
-import { AttributeInputTypeEnum, AttributeEntityTypeEnum, WeightUnitsEnum } from "./../../types/globalTypes";
+import { AttributeInputTypeEnum, AttributeEntityTypeEnum, ProductMediaType, WeightUnitsEnum } from "./../../types/globalTypes";
 
 // ====================================================
 // GraphQL query operation: ProductDetails
@@ -172,12 +172,14 @@ export interface ProductDetails_product_collections {
   name: string;
 }
 
-export interface ProductDetails_product_images {
+export interface ProductDetails_product_media {
-  __typename: "ProductImage";
+  __typename: "ProductMedia";
   id: string;
   alt: string;
   sortOrder: number | null;
   url: string;
+  type: ProductMediaType;
+  oembedData: any;
 }
 
 export interface ProductDetails_product_variants_stocks_warehouse {
@@ -261,7 +263,7 @@ export interface ProductDetails_product {
   category: ProductDetails_product_category | null;
   collections: (ProductDetails_product_collections | null)[] | null;
   chargeTaxes: boolean;
-  images: (ProductDetails_product_images | null)[] | null;
+  media: (ProductDetails_product_media | null)[] | null;
   isAvailable: boolean | null;
   variants: (ProductDetails_product_variants | null)[] | null;
   weight: ProductDetails_product_weight | null;

src/products/types/ProductImageById.ts

@@ -1,37 +0,0 @@
-/* tslint:disable */
-/* eslint-disable */
-// This file was automatically generated and should not be edited.
-
-// ====================================================
-// GraphQL query operation: ProductImageById
-// ====================================================
-
-export interface ProductImageById_product_mainImage {
-  __typename: "ProductImage";
-  id: string;
-  alt: string;
-  url: string;
-}
-
-export interface ProductImageById_product_images {
-  __typename: "ProductImage";
-  id: string;
-  url: string;
-}
-
-export interface ProductImageById_product {
-  __typename: "Product";
-  id: string;
-  name: string;
-  mainImage: ProductImageById_product_mainImage | null;
-  images: (ProductImageById_product_images | null)[] | null;
-}
-
-export interface ProductImageById {
-  product: ProductImageById_product | null;
-}
-
-export interface ProductImageByIdVariables {
-  productId: string;
-  imageId: string;
-}

src/products/types/ProductImageDelete.ts

@@ -1,40 +0,0 @@
-/* tslint:disable */
-/* eslint-disable */
-// This file was automatically generated and should not be edited.
-
-import { ProductErrorCode } from "./../../types/globalTypes";
-
-// ====================================================
-// GraphQL mutation operation: ProductImageDelete
-// ====================================================
-
-export interface ProductImageDelete_productImageDelete_errors {
-  __typename: "ProductError";
-  code: ProductErrorCode;
-  field: string | null;
-}
-
-export interface ProductImageDelete_productImageDelete_product_images {
-  __typename: "ProductImage";
-  id: string;
-}
-
-export interface ProductImageDelete_productImageDelete_product {
-  __typename: "Product";
-  id: string;
-  images: (ProductImageDelete_productImageDelete_product_images | null)[] | null;
-}
-
-export interface ProductImageDelete_productImageDelete {
-  __typename: "ProductImageDelete";
-  errors: ProductImageDelete_productImageDelete_errors[];
-  product: ProductImageDelete_productImageDelete_product | null;
-}
-
-export interface ProductImageDelete {
-  productImageDelete: ProductImageDelete_productImageDelete | null;
-}
-
-export interface ProductImageDeleteVariables {
-  id: string;
-}

src/products/types/ProductImageReorder.ts

@@ -1,44 +0,0 @@
-/* tslint:disable */
-/* eslint-disable */
-// This file was automatically generated and should not be edited.
-
-import { ProductErrorCode } from "./../../types/globalTypes";
-
-// ====================================================
-// GraphQL mutation operation: ProductImageReorder
-// ====================================================
-
-export interface ProductImageReorder_productImageReorder_errors {
-  __typename: "ProductError";
-  code: ProductErrorCode;
-  field: string | null;
-}
-
-export interface ProductImageReorder_productImageReorder_product_images {
-  __typename: "ProductImage";
-  id: string;
-  alt: string;
-  sortOrder: number | null;
-  url: string;
-}
-
-export interface ProductImageReorder_productImageReorder_product {
-  __typename: "Product";
-  id: string;
-  images: (ProductImageReorder_productImageReorder_product_images | null)[] | null;
-}
-
-export interface ProductImageReorder_productImageReorder {
-  __typename: "ProductImageReorder";
-  errors: ProductImageReorder_productImageReorder_errors[];
-  product: ProductImageReorder_productImageReorder_product | null;
-}
-
-export interface ProductImageReorder {
-  productImageReorder: ProductImageReorder_productImageReorder | null;
-}
-
-export interface ProductImageReorderVariables {
-  productId: string;
-  imagesIds: (string | null)[];
-}

src/products/types/ProductMediaById.ts

@@ -0,0 +1,44 @@
+/* tslint:disable */
+/* eslint-disable */
+// This file was automatically generated and should not be edited.
+
+import { ProductMediaType } from "./../../types/globalTypes";
+
+// ====================================================
+// GraphQL query operation: ProductMediaById
+// ====================================================
+
+export interface ProductMediaById_product_mainImage {
+  __typename: "ProductMedia";
+  id: string;
+  alt: string;
+  url: string;
+  type: ProductMediaType;
+  oembedData: any;
+}
+
+export interface ProductMediaById_product_media {
+  __typename: "ProductMedia";
+  id: string;
+  url: string;
+  alt: string;
+  type: ProductMediaType;
+  oembedData: any;
+}
+
+export interface ProductMediaById_product {
+  __typename: "Product";
+  id: string;
+  name: string;
+  mainImage: ProductMediaById_product_mainImage;
+  media: (ProductMediaById_product_media | null)[] | null;
+}
+
+export interface ProductMediaById {
+  product: ProductMediaById_product | null;
+}
+
+export interface ProductMediaByIdVariables {
+  productId: string;
+  mediaId: string;
+}

src/products/types/ProductMediaCreate.ts

@@ -0,0 +1,294 @@
+/* tslint:disable */
+/* eslint-disable */
+// This file was automatically generated and should not be edited.
+
+import { ProductErrorCode, AttributeInputTypeEnum, AttributeEntityTypeEnum, ProductMediaType, WeightUnitsEnum } from "./../../types/globalTypes";
+
+// ====================================================
+// GraphQL mutation operation: ProductMediaCreate
+// ====================================================
+
+export interface ProductMediaCreate_productMediaCreate_errors {
+  __typename: "ProductError";
+  code: ProductErrorCode;
+  field: string | null;
+}
+
+export interface ProductMediaCreate_productMediaCreate_product_attributes_attribute_values_file {
+  __typename: "File";
+  url: string;
+  contentType: string | null;
+}
+
+export interface ProductMediaCreate_productMediaCreate_product_attributes_attribute_values {
+  __typename: "AttributeValue";
+  id: string;
+  name: string | null;
+  slug: string | null;
+  file: ProductMediaCreate_productMediaCreate_product_attributes_attribute_values_file | null;
+  reference: string | null;
+}
+
+export interface ProductMediaCreate_productMediaCreate_product_attributes_attribute {
+  __typename: "Attribute";
+  id: string;
+  slug: string | null;
+  name: string | null;
+  inputType: AttributeInputTypeEnum | null;
+  entityType: AttributeEntityTypeEnum | null;
+  valueRequired: boolean;
+  values: (ProductMediaCreate_productMediaCreate_product_attributes_attribute_values | null)[] | null;
+}
+
+export interface ProductMediaCreate_productMediaCreate_product_attributes_values_file {
+  __typename: "File";
+  url: string;
+  contentType: string | null;
+}
+
+export interface ProductMediaCreate_productMediaCreate_product_attributes_values {
+  __typename: "AttributeValue";
+  id: string;
+  name: string | null;
+  slug: string | null;
+  file: ProductMediaCreate_productMediaCreate_product_attributes_values_file | null;
+  reference: string | null;
+}
+
+export interface ProductMediaCreate_productMediaCreate_product_attributes {
+  __typename: "SelectedAttribute";
+  attribute: ProductMediaCreate_productMediaCreate_product_attributes_attribute;
+  values: (ProductMediaCreate_productMediaCreate_product_attributes_values | null)[];
+}
+
+export interface ProductMediaCreate_productMediaCreate_product_productType_variantAttributes_values_file {
+  __typename: "File";
+  url: string;
+  contentType: string | null;
+}
+
+export interface ProductMediaCreate_productMediaCreate_product_productType_variantAttributes_values {
+  __typename: "AttributeValue";
+  id: string;
+  name: string | null;
+  slug: string | null;
+  file: ProductMediaCreate_productMediaCreate_product_productType_variantAttributes_values_file | null;
+  reference: string | null;
+}
+
+export interface ProductMediaCreate_productMediaCreate_product_productType_variantAttributes {
+  __typename: "Attribute";
+  id: string;
+  name: string | null;
+  values: (ProductMediaCreate_productMediaCreate_product_productType_variantAttributes_values | null)[] | null;
+}
+
+export interface ProductMediaCreate_productMediaCreate_product_productType_taxType {
+  __typename: "TaxType";
+  description: string | null;
+  taxCode: string | null;
+}
+
+export interface ProductMediaCreate_productMediaCreate_product_productType {
+  __typename: "ProductType";
+  id: string;
+  variantAttributes: (ProductMediaCreate_productMediaCreate_product_productType_variantAttributes | null)[] | null;
+  name: string;
+  hasVariants: boolean;
+  taxType: ProductMediaCreate_productMediaCreate_product_productType_taxType | null;
+}
+
+export interface ProductMediaCreate_productMediaCreate_product_channelListings_channel {
+  __typename: "Channel";
+  id: string;
+  name: string;
+  currencyCode: string;
+}
+
+export interface ProductMediaCreate_productMediaCreate_product_channelListings_pricing_priceRange_start_net {
+  __typename: "Money";
+  amount: number;
+  currency: string;
+}
+
+export interface ProductMediaCreate_productMediaCreate_product_channelListings_pricing_priceRange_start {
+  __typename: "TaxedMoney";
+  net: ProductMediaCreate_productMediaCreate_product_channelListings_pricing_priceRange_start_net;
+}
+
+export interface ProductMediaCreate_productMediaCreate_product_channelListings_pricing_priceRange_stop_net {
+  __typename: "Money";
+  amount: number;
+  currency: string;
+}
+
+export interface ProductMediaCreate_productMediaCreate_product_channelListings_pricing_priceRange_stop {
+  __typename: "TaxedMoney";
+  net: ProductMediaCreate_productMediaCreate_product_channelListings_pricing_priceRange_stop_net;
+}
+
+export interface ProductMediaCreate_productMediaCreate_product_channelListings_pricing_priceRange {
+  __typename: "TaxedMoneyRange";
+  start: ProductMediaCreate_productMediaCreate_product_channelListings_pricing_priceRange_start | null;
+  stop: ProductMediaCreate_productMediaCreate_product_channelListings_pricing_priceRange_stop | null;
+}
+
+export interface ProductMediaCreate_productMediaCreate_product_channelListings_pricing {
+  __typename: "ProductPricingInfo";
+  priceRange: ProductMediaCreate_productMediaCreate_product_channelListings_pricing_priceRange | null;
+}
+
+export interface ProductMediaCreate_productMediaCreate_product_channelListings {
+  __typename: "ProductChannelListing";
+  channel: ProductMediaCreate_productMediaCreate_product_channelListings_channel;
+  pricing: ProductMediaCreate_productMediaCreate_product_channelListings_pricing | null;
+  isPublished: boolean;
+  publicationDate: any | null;
+  isAvailableForPurchase: boolean | null;
+  availableForPurchase: any | null;
+  visibleInListings: boolean;
+}
+
+export interface ProductMediaCreate_productMediaCreate_product_metadata {
+  __typename: "MetadataItem";
+  key: string;
+  value: string;
+}
+
+export interface ProductMediaCreate_productMediaCreate_product_privateMetadata {
+  __typename: "MetadataItem";
+  key: string;
+  value: string;
+}
+
+export interface ProductMediaCreate_productMediaCreate_product_defaultVariant {
+  __typename: "ProductVariant";
+  id: string;
+}
+
+export interface ProductMediaCreate_productMediaCreate_product_category {
+  __typename: "Category";
+  id: string;
+  name: string;
+}
+
+export interface ProductMediaCreate_productMediaCreate_product_collections {
+  __typename: "Collection";
+  id: string;
+  name: string;
+}
+
+export interface ProductMediaCreate_productMediaCreate_product_media {
+  __typename: "ProductMedia";
+  id: string;
+  alt: string;
+  sortOrder: number | null;
+  url: string;
+  type: ProductMediaType;
+  oembedData: any;
+}
+
+export interface ProductMediaCreate_productMediaCreate_product_variants_stocks_warehouse {
+  __typename: "Warehouse";
+  id: string;
+  name: string;
+}
+
+export interface ProductMediaCreate_productMediaCreate_product_variants_stocks {
+  __typename: "Stock";
+  id: string;
+  quantity: number;
+  quantityAllocated: number;
+  warehouse: ProductMediaCreate_productMediaCreate_product_variants_stocks_warehouse;
+}
+
+export interface ProductMediaCreate_productMediaCreate_product_variants_channelListings_channel {
+  __typename: "Channel";
+  id: string;
+  name: string;
+  currencyCode: string;
+}
+
+export interface ProductMediaCreate_productMediaCreate_product_variants_channelListings_price {
+  __typename: "Money";
+  amount: number;
+  currency: string;
+}
+
+export interface ProductMediaCreate_productMediaCreate_product_variants_channelListings_costPrice {
+  __typename: "Money";
+  amount: number;
+  currency: string;
+}
+
+export interface ProductMediaCreate_productMediaCreate_product_variants_channelListings {
+  __typename: "ProductVariantChannelListing";
+  channel: ProductMediaCreate_productMediaCreate_product_variants_channelListings_channel;
+  price: ProductMediaCreate_productMediaCreate_product_variants_channelListings_price | null;
+  costPrice: ProductMediaCreate_productMediaCreate_product_variants_channelListings_costPrice | null;
+}
+
+export interface ProductMediaCreate_productMediaCreate_product_variants {
+  __typename: "ProductVariant";
+  id: string;
+  sku: string;
+  name: string;
+  margin: number | null;
+  stocks: (ProductMediaCreate_productMediaCreate_product_variants_stocks | null)[] | null;
+  trackInventory: boolean;
+  channelListings: ProductMediaCreate_productMediaCreate_product_variants_channelListings[] | null;
+}
+
+export interface ProductMediaCreate_productMediaCreate_product_weight {
+  __typename: "Weight";
+  unit: WeightUnitsEnum;
+  value: number;
+}
+
+export interface ProductMediaCreate_productMediaCreate_product_taxType {
+  __typename: "TaxType";
+  description: string | null;
+  taxCode: string | null;
+}
+
+export interface ProductMediaCreate_productMediaCreate_product {
+  __typename: "Product";
+  id: string;
+  attributes: ProductMediaCreate_productMediaCreate_product_attributes[];
+  productType: ProductMediaCreate_productMediaCreate_product_productType;
+  channelListings: ProductMediaCreate_productMediaCreate_product_channelListings[] | null;
+  metadata: (ProductMediaCreate_productMediaCreate_product_metadata | null)[];
+  privateMetadata: (ProductMediaCreate_productMediaCreate_product_privateMetadata | null)[];
+  name: string;
+  slug: string;
+  description: any | null;
+  seoTitle: string | null;
+  seoDescription: string | null;
+  rating: number | null;
+  defaultVariant: ProductMediaCreate_productMediaCreate_product_defaultVariant | null;
+  category: ProductMediaCreate_productMediaCreate_product_category | null;
+  collections: (ProductMediaCreate_productMediaCreate_product_collections | null)[] | null;
+  chargeTaxes: boolean;
+  media: (ProductMediaCreate_productMediaCreate_product_media | null)[] | null;
+  isAvailable: boolean | null;
+  variants: (ProductMediaCreate_productMediaCreate_product_variants | null)[] | null;
+  weight: ProductMediaCreate_productMediaCreate_product_weight | null;
+  taxType: ProductMediaCreate_productMediaCreate_product_taxType | null;
+}
+
+export interface ProductMediaCreate_productMediaCreate {
+  __typename: "ProductMediaCreate";
+  errors: ProductMediaCreate_productMediaCreate_errors[];
+  product: ProductMediaCreate_productMediaCreate_product | null;
+}
+
+export interface ProductMediaCreate {
+  productMediaCreate: ProductMediaCreate_productMediaCreate | null;
+}
+
+export interface ProductMediaCreateVariables {
+  product: string;
+  image?: any | null;
+  alt?: string | null;
+  mediaUrl?: string | null;
+}

src/products/types/ProductMediaDelete.ts

@@ -0,0 +1,40 @@
+/* tslint:disable */
+/* eslint-disable */
+// This file was automatically generated and should not be edited.
+
+import { ProductErrorCode } from "./../../types/globalTypes";
+
+// ====================================================
+// GraphQL mutation operation: ProductMediaDelete
+// ====================================================
+
+export interface ProductMediaDelete_productMediaDelete_errors {
+  __typename: "ProductError";
+  code: ProductErrorCode;
+  field: string | null;
+}
+
+export interface ProductMediaDelete_productMediaDelete_product_media {
+  __typename: "ProductMedia";
+  id: string;
+}
+
+export interface ProductMediaDelete_productMediaDelete_product {
+  __typename: "Product";
+  id: string;
+  media: (ProductMediaDelete_productMediaDelete_product_media | null)[] | null;
+}
+
+export interface ProductMediaDelete_productMediaDelete {
+  __typename: "ProductMediaDelete";
+  errors: ProductMediaDelete_productMediaDelete_errors[];
+  product: ProductMediaDelete_productMediaDelete_product | null;
+}
+
+export interface ProductMediaDelete {
+  productMediaDelete: ProductMediaDelete_productMediaDelete | null;
+}
+
+export interface ProductMediaDeleteVariables {
+  id: string;
+}

src/products/types/ProductMediaReorder.ts

@@ -0,0 +1,44 @@
+/* tslint:disable */
+/* eslint-disable */
+// This file was automatically generated and should not be edited.
+
+import { ProductErrorCode } from "./../../types/globalTypes";
+
+// ====================================================
+// GraphQL mutation operation: ProductMediaReorder
+// ====================================================
+
+export interface ProductMediaReorder_productMediaReorder_errors {
+  __typename: "ProductError";
+  code: ProductErrorCode;
+  field: string | null;
+}
+
+export interface ProductMediaReorder_productMediaReorder_product_media {
+  __typename: "ProductMedia";
+  id: string;
+  alt: string;
+  sortOrder: number | null;
+  url: string;
+}
+
+export interface ProductMediaReorder_productMediaReorder_product {
+  __typename: "Product";
+  id: string;
+  media: (ProductMediaReorder_productMediaReorder_product_media | null)[] | null;
+}
+
+export interface ProductMediaReorder_productMediaReorder {
+  __typename: "ProductMediaReorder";
+  errors: ProductMediaReorder_productMediaReorder_errors[];
+  product: ProductMediaReorder_productMediaReorder_product | null;
+}
+
+export interface ProductMediaReorder {
+  productMediaReorder: ProductMediaReorder_productMediaReorder | null;
+}
+
+export interface ProductMediaReorderVariables {
+  productId: string;
+  mediaIds: (string | null)[];
+}

src/products/types/ProductMediaUpdate.ts

@@ -0,0 +1,292 @@
+/* tslint:disable */
+/* eslint-disable */
+// This file was automatically generated and should not be edited.
+
+import { ProductErrorCode, AttributeInputTypeEnum, AttributeEntityTypeEnum, ProductMediaType, WeightUnitsEnum } from "./../../types/globalTypes";
+
+// ====================================================
+// GraphQL mutation operation: ProductMediaUpdate
+// ====================================================
+
+export interface ProductMediaUpdate_productMediaUpdate_errors {
+  __typename: "ProductError";
+  code: ProductErrorCode;
+  field: string | null;
+}
+
+export interface ProductMediaUpdate_productMediaUpdate_product_attributes_attribute_values_file {
+  __typename: "File";
+  url: string;
+  contentType: string | null;
+}
+
+export interface ProductMediaUpdate_productMediaUpdate_product_attributes_attribute_values {
+  __typename: "AttributeValue";
+  id: string;
+  name: string | null;
+  slug: string | null;
+  file: ProductMediaUpdate_productMediaUpdate_product_attributes_attribute_values_file | null;
+  reference: string | null;
+}
+
+export interface ProductMediaUpdate_productMediaUpdate_product_attributes_attribute {
+  __typename: "Attribute";
+  id: string;
+  slug: string | null;
+  name: string | null;
+  inputType: AttributeInputTypeEnum | null;
+  entityType: AttributeEntityTypeEnum | null;
+  valueRequired: boolean;
+  values: (ProductMediaUpdate_productMediaUpdate_product_attributes_attribute_values | null)[] | null;
+}
+
+export interface ProductMediaUpdate_productMediaUpdate_product_attributes_values_file {
+  __typename: "File";
+  url: string;
+  contentType: string | null;
+}
+
+export interface ProductMediaUpdate_productMediaUpdate_product_attributes_values {
+  __typename: "AttributeValue";
+  id: string;
+  name: string | null;
+  slug: string | null;
+  file: ProductMediaUpdate_productMediaUpdate_product_attributes_values_file | null;
+  reference: string | null;
+}
+
+export interface ProductMediaUpdate_productMediaUpdate_product_attributes {
+  __typename: "SelectedAttribute";
+  attribute: ProductMediaUpdate_productMediaUpdate_product_attributes_attribute;
+  values: (ProductMediaUpdate_productMediaUpdate_product_attributes_values | null)[];
+}
+
+export interface ProductMediaUpdate_productMediaUpdate_product_productType_variantAttributes_values_file {
+  __typename: "File";
+  url: string;
+  contentType: string | null;
+}
+
+export interface ProductMediaUpdate_productMediaUpdate_product_productType_variantAttributes_values {
+  __typename: "AttributeValue";
+  id: string;
+  name: string | null;
+  slug: string | null;
+  file: ProductMediaUpdate_productMediaUpdate_product_productType_variantAttributes_values_file | null;
+  reference: string | null;
+}
+
+export interface ProductMediaUpdate_productMediaUpdate_product_productType_variantAttributes {
+  __typename: "Attribute";
+  id: string;
+  name: string | null;
+  values: (ProductMediaUpdate_productMediaUpdate_product_productType_variantAttributes_values | null)[] | null;
+}
+
+export interface ProductMediaUpdate_productMediaUpdate_product_productType_taxType {
+  __typename: "TaxType";
+  description: string | null;
+  taxCode: string | null;
+}
+
+export interface ProductMediaUpdate_productMediaUpdate_product_productType {
+  __typename: "ProductType";
+  id: string;
+  variantAttributes: (ProductMediaUpdate_productMediaUpdate_product_productType_variantAttributes | null)[] | null;
+  name: string;
+  hasVariants: boolean;
+  taxType: ProductMediaUpdate_productMediaUpdate_product_productType_taxType | null;
+}
+
+export interface ProductMediaUpdate_productMediaUpdate_product_channelListings_channel {
+  __typename: "Channel";
+  id: string;
+  name: string;
+  currencyCode: string;
+}
+
+export interface ProductMediaUpdate_productMediaUpdate_product_channelListings_pricing_priceRange_start_net {
+  __typename: "Money";
+  amount: number;
+  currency: string;
+}
+
+export interface ProductMediaUpdate_productMediaUpdate_product_channelListings_pricing_priceRange_start {
+  __typename: "TaxedMoney";
+  net: ProductMediaUpdate_productMediaUpdate_product_channelListings_pricing_priceRange_start_net;
+}
+
+export interface ProductMediaUpdate_productMediaUpdate_product_channelListings_pricing_priceRange_stop_net {
+  __typename: "Money";
+  amount: number;
+  currency: string;
+}
+
+export interface ProductMediaUpdate_productMediaUpdate_product_channelListings_pricing_priceRange_stop {
+  __typename: "TaxedMoney";
+  net: ProductMediaUpdate_productMediaUpdate_product_channelListings_pricing_priceRange_stop_net;
+}
+
+export interface ProductMediaUpdate_productMediaUpdate_product_channelListings_pricing_priceRange {
+  __typename: "TaxedMoneyRange";
+  start: ProductMediaUpdate_productMediaUpdate_product_channelListings_pricing_priceRange_start | null;
+  stop: ProductMediaUpdate_productMediaUpdate_product_channelListings_pricing_priceRange_stop | null;
+}
+
+export interface ProductMediaUpdate_productMediaUpdate_product_channelListings_pricing {
+  __typename: "ProductPricingInfo";
+  priceRange: ProductMediaUpdate_productMediaUpdate_product_channelListings_pricing_priceRange | null;
+}
+
+export interface ProductMediaUpdate_productMediaUpdate_product_channelListings {
+  __typename: "ProductChannelListing";
+  channel: ProductMediaUpdate_productMediaUpdate_product_channelListings_channel;
+  pricing: ProductMediaUpdate_productMediaUpdate_product_channelListings_pricing | null;
+  isPublished: boolean;
+  publicationDate: any | null;
+  isAvailableForPurchase: boolean | null;
+  availableForPurchase: any | null;
+  visibleInListings: boolean;
+}
+
+export interface ProductMediaUpdate_productMediaUpdate_product_metadata {
+  __typename: "MetadataItem";
+  key: string;
+  value: string;
+}
+
+export interface ProductMediaUpdate_productMediaUpdate_product_privateMetadata {
+  __typename: "MetadataItem";
+  key: string;
+  value: string;
+}
+
+export interface ProductMediaUpdate_productMediaUpdate_product_defaultVariant {
+  __typename: "ProductVariant";
+  id: string;
+}
+
+export interface ProductMediaUpdate_productMediaUpdate_product_category {
+  __typename: "Category";
+  id: string;
+  name: string;
+}
+
+export interface ProductMediaUpdate_productMediaUpdate_product_collections {
+  __typename: "Collection";
+  id: string;
+  name: string;
+}
+
+export interface ProductMediaUpdate_productMediaUpdate_product_media {
+  __typename: "ProductMedia";
+  id: string;
+  alt: string;
+  sortOrder: number | null;
+  url: string;
+  type: ProductMediaType;
+  oembedData: any;
+}
+
+export interface ProductMediaUpdate_productMediaUpdate_product_variants_stocks_warehouse {
+  __typename: "Warehouse";
+  id: string;
+  name: string;
+}
+
+export interface ProductMediaUpdate_productMediaUpdate_product_variants_stocks {
+  __typename: "Stock";
+  id: string;
+  quantity: number;
+  quantityAllocated: number;
+  warehouse: ProductMediaUpdate_productMediaUpdate_product_variants_stocks_warehouse;
+}
+
+export interface ProductMediaUpdate_productMediaUpdate_product_variants_channelListings_channel {
+  __typename: "Channel";
+  id: string;
+  name: string;
+  currencyCode: string;
+}
+
+export interface ProductMediaUpdate_productMediaUpdate_product_variants_channelListings_price {
+  __typename: "Money";
+  amount: number;
+  currency: string;
+}
+
+export interface ProductMediaUpdate_productMediaUpdate_product_variants_channelListings_costPrice {
+  __typename: "Money";
+  amount: number;
+  currency: string;
+}
+
+export interface ProductMediaUpdate_productMediaUpdate_product_variants_channelListings {
+  __typename: "ProductVariantChannelListing";
+  channel: ProductMediaUpdate_productMediaUpdate_product_variants_channelListings_channel;
+  price: ProductMediaUpdate_productMediaUpdate_product_variants_channelListings_price | null;
+  costPrice: ProductMediaUpdate_productMediaUpdate_product_variants_channelListings_costPrice | null;
+}
+
+export interface ProductMediaUpdate_productMediaUpdate_product_variants {
+  __typename: "ProductVariant";
+  id: string;
+  sku: string;
+  name: string;
+  margin: number | null;
+  stocks: (ProductMediaUpdate_productMediaUpdate_product_variants_stocks | null)[] | null;
+  trackInventory: boolean;
+  channelListings: ProductMediaUpdate_productMediaUpdate_product_variants_channelListings[] | null;
+}
+
+export interface ProductMediaUpdate_productMediaUpdate_product_weight {
+  __typename: "Weight";
+  unit: WeightUnitsEnum;
+  value: number;
+}
+
+export interface ProductMediaUpdate_productMediaUpdate_product_taxType {
+  __typename: "TaxType";
+  description: string | null;
+  taxCode: string | null;
+}
+
+export interface ProductMediaUpdate_productMediaUpdate_product {
+  __typename: "Product";
+  id: string;
+  attributes: ProductMediaUpdate_productMediaUpdate_product_attributes[];
+  productType: ProductMediaUpdate_productMediaUpdate_product_productType;
+  channelListings: ProductMediaUpdate_productMediaUpdate_product_channelListings[] | null;
+  metadata: (ProductMediaUpdate_productMediaUpdate_product_metadata | null)[];
+  privateMetadata: (ProductMediaUpdate_productMediaUpdate_product_privateMetadata | null)[];
+  name: string;
+  slug: string;
+  description: any | null;
+  seoTitle: string | null;
+  seoDescription: string | null;
+  rating: number | null;
+  defaultVariant: ProductMediaUpdate_productMediaUpdate_product_defaultVariant | null;
+  category: ProductMediaUpdate_productMediaUpdate_product_category | null;
+  collections: (ProductMediaUpdate_productMediaUpdate_product_collections | null)[] | null;
+  chargeTaxes: boolean;
+  media: (ProductMediaUpdate_productMediaUpdate_product_media | null)[] | null;
+  isAvailable: boolean | null;
+  variants: (ProductMediaUpdate_productMediaUpdate_product_variants | null)[] | null;
+  weight: ProductMediaUpdate_productMediaUpdate_product_weight | null;
+  taxType: ProductMediaUpdate_productMediaUpdate_product_taxType | null;
+}
+
+export interface ProductMediaUpdate_productMediaUpdate {
+  __typename: "ProductMediaUpdate";
+  errors: ProductMediaUpdate_productMediaUpdate_errors[];
+  product: ProductMediaUpdate_productMediaUpdate_product | null;
+}
+
+export interface ProductMediaUpdate {
+  productMediaUpdate: ProductMediaUpdate_productMediaUpdate | null;
+}
+
+export interface ProductMediaUpdateVariables {
+  id: string;
+  alt: string;
+}

src/products/types/ProductUpdate.ts

@@ -2,7 +2,7 @@
 /* eslint-disable */
 // This file was automatically generated and should not be edited.
 
-import { ProductInput, ProductErrorCode, AttributeInputTypeEnum, AttributeEntityTypeEnum, WeightUnitsEnum } from "./../../types/globalTypes";
+import { ProductInput, ProductErrorCode, AttributeInputTypeEnum, AttributeEntityTypeEnum, ProductMediaType, WeightUnitsEnum } from "./../../types/globalTypes";
 
 // ====================================================
 // GraphQL mutation operation: ProductUpdate
@@ -179,12 +179,14 @@ export interface ProductUpdate_productUpdate_product_collections {
   name: string;
 }
 
-export interface ProductUpdate_productUpdate_product_images {
+export interface ProductUpdate_productUpdate_product_media {
-  __typename: "ProductImage";
+  __typename: "ProductMedia";
   id: string;
   alt: string;
   sortOrder: number | null;
   url: string;
+  type: ProductMediaType;
+  oembedData: any;
 }
 
 export interface ProductUpdate_productUpdate_product_variants_stocks_warehouse {
@@ -268,7 +270,7 @@ export interface ProductUpdate_productUpdate_product {
   category: ProductUpdate_productUpdate_product_category | null;
   collections: (ProductUpdate_productUpdate_product_collections | null)[] | null;
   chargeTaxes: boolean;
-  images: (ProductUpdate_productUpdate_product_images | null)[] | null;
+  media: (ProductUpdate_productUpdate_product_media | null)[] | null;
   isAvailable: boolean | null;
   variants: (ProductUpdate_productUpdate_product_variants | null)[] | null;
   weight: ProductUpdate_productUpdate_product_weight | null;

src/products/types/ProductVariantChannelListingUpdate.ts

@@ -2,7 +2,7 @@
 /* eslint-disable */
 // This file was automatically generated and should not be edited.
 
-import { ProductVariantChannelListingAddInput, AttributeInputTypeEnum, AttributeEntityTypeEnum, WeightUnitsEnum, ProductErrorCode } from "./../../types/globalTypes";
+import { ProductVariantChannelListingAddInput, AttributeInputTypeEnum, AttributeEntityTypeEnum, ProductMediaType, WeightUnitsEnum, ProductErrorCode } from "./../../types/globalTypes";
 
 // ====================================================
 // GraphQL mutation operation: ProductVariantChannelListingUpdate
@@ -114,10 +114,12 @@ export interface ProductVariantChannelListingUpdate_productVariantChannelListing
   values: (ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_nonSelectionAttributes_values | null)[];
 }
 
-export interface ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_images {
+export interface ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_media {
-  __typename: "ProductImage";
+  __typename: "ProductMedia";
   id: string;
   url: string;
+  type: ProductMediaType;
+  oembedData: any;
 }
 
 export interface ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_product_defaultVariant {
@@ -125,12 +127,14 @@ export interface ProductVariantChannelListingUpdate_productVariantChannelListing
   id: string;
 }
 
-export interface ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_product_images {
+export interface ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_product_media {
-  __typename: "ProductImage";
+  __typename: "ProductMedia";
   id: string;
   alt: string;
   sortOrder: number | null;
   url: string;
+  type: ProductMediaType;
+  oembedData: any;
 }
 
 export interface ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_product_thumbnail {
@@ -184,10 +188,12 @@ export interface ProductVariantChannelListingUpdate_productVariantChannelListing
   pricing: ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_product_channelListings_pricing | null;
 }
 
-export interface ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_product_variants_images {
+export interface ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_product_variants_media {
-  __typename: "ProductImage";
+  __typename: "ProductMedia";
   id: string;
   url: string;
+  type: ProductMediaType;
+  oembedData: any;
 }
 
 export interface ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_product_variants {
@@ -195,14 +201,14 @@ export interface ProductVariantChannelListingUpdate_productVariantChannelListing
   id: string;
   name: string;
   sku: string;
-  images: (ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_product_variants_images | null)[] | null;
+  media: ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_product_variants_media[] | null;
 }
 
 export interface ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_product {
   __typename: "Product";
   id: string;
   defaultVariant: ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_product_defaultVariant | null;
-  images: (ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_product_images | null)[] | null;
+  media: (ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_product_media | null)[] | null;
   name: string;
   thumbnail: ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_product_thumbnail | null;
   channelListings: ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_product_channelListings[] | null;
@@ -262,7 +268,7 @@ export interface ProductVariantChannelListingUpdate_productVariantChannelListing
   privateMetadata: (ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_privateMetadata | null)[];
   selectionAttributes: ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_selectionAttributes[];
   nonSelectionAttributes: ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_nonSelectionAttributes[];
-  images: (ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_images | null)[] | null;
+  media: ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_media[] | null;
   name: string;
   product: ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_product;
   channelListings: ProductVariantChannelListingUpdate_productVariantChannelListingUpdate_variant_channelListings[] | null;

src/products/types/ProductVariantCreateData.ts

@@ -2,14 +2,14 @@
 /* eslint-disable */
 // This file was automatically generated and should not be edited.
 
-import { AttributeInputTypeEnum, AttributeEntityTypeEnum } from "./../../types/globalTypes";
+import { AttributeInputTypeEnum, AttributeEntityTypeEnum, ProductMediaType } from "./../../types/globalTypes";
 
 // ====================================================
 // GraphQL query operation: ProductVariantCreateData
 // ====================================================
 
-export interface ProductVariantCreateData_product_images {
+export interface ProductVariantCreateData_product_media {
-  __typename: "ProductImage";
+  __typename: "ProductMedia";
   id: string;
   sortOrder: number | null;
   url: string;
@@ -91,10 +91,11 @@ export interface ProductVariantCreateData_product_thumbnail {
   url: string;
 }
 
-export interface ProductVariantCreateData_product_variants_images {
+export interface ProductVariantCreateData_product_variants_media {
-  __typename: "ProductImage";
+  __typename: "ProductMedia";
   id: string;
   url: string;
+  type: ProductMediaType;
 }
 
 export interface ProductVariantCreateData_product_variants {
@@ -102,13 +103,13 @@ export interface ProductVariantCreateData_product_variants {
   id: string;
   name: string;
   sku: string;
-  images: (ProductVariantCreateData_product_variants_images | null)[] | null;
+  media: ProductVariantCreateData_product_variants_media[] | null;
 }
 
 export interface ProductVariantCreateData_product {
   __typename: "Product";
   id: string;
-  images: (ProductVariantCreateData_product_images | null)[] | null;
+  media: (ProductVariantCreateData_product_media | null)[] | null;
   channelListings: ProductVariantCreateData_product_channelListings[] | null;
   name: string;
   productType: ProductVariantCreateData_product_productType;

src/products/types/ProductVariantDetails.ts

@@ -2,7 +2,7 @@
 /* eslint-disable */
 // This file was automatically generated and should not be edited.
 
-import { AttributeInputTypeEnum, AttributeEntityTypeEnum, WeightUnitsEnum } from "./../../types/globalTypes";
+import { AttributeInputTypeEnum, AttributeEntityTypeEnum, ProductMediaType, WeightUnitsEnum } from "./../../types/globalTypes";
 
 // ====================================================
 // GraphQL query operation: ProductVariantDetails
@@ -114,10 +114,12 @@ export interface ProductVariantDetails_productVariant_nonSelectionAttributes {
   values: (ProductVariantDetails_productVariant_nonSelectionAttributes_values | null)[];
 }
 
-export interface ProductVariantDetails_productVariant_images {
+export interface ProductVariantDetails_productVariant_media {
-  __typename: "ProductImage";
+  __typename: "ProductMedia";
   id: string;
   url: string;
+  type: ProductMediaType;
+  oembedData: any;
 }
 
 export interface ProductVariantDetails_productVariant_product_defaultVariant {
@@ -125,12 +127,14 @@ export interface ProductVariantDetails_productVariant_product_defaultVariant {
   id: string;
 }
 
-export interface ProductVariantDetails_productVariant_product_images {
+export interface ProductVariantDetails_productVariant_product_media {
-  __typename: "ProductImage";
+  __typename: "ProductMedia";
   id: string;
   alt: string;
   sortOrder: number | null;
   url: string;
+  type: ProductMediaType;
+  oembedData: any;
 }
 
 export interface ProductVariantDetails_productVariant_product_thumbnail {
@@ -184,10 +188,12 @@ export interface ProductVariantDetails_productVariant_product_channelListings {
   pricing: ProductVariantDetails_productVariant_product_channelListings_pricing | null;
 }
 
-export interface ProductVariantDetails_productVariant_product_variants_images {
+export interface ProductVariantDetails_productVariant_product_variants_media {
-  __typename: "ProductImage";
+  __typename: "ProductMedia";
   id: string;
   url: string;
+  type: ProductMediaType;
+  oembedData: any;
 }
 
 export interface ProductVariantDetails_productVariant_product_variants {
@@ -195,14 +201,14 @@ export interface ProductVariantDetails_productVariant_product_variants {
   id: string;
   name: string;
   sku: string;
-  images: (ProductVariantDetails_productVariant_product_variants_images | null)[] | null;
+  media: ProductVariantDetails_productVariant_product_variants_media[] | null;
 }
 
 export interface ProductVariantDetails_productVariant_product {
   __typename: "Product";
   id: string;
   defaultVariant: ProductVariantDetails_productVariant_product_defaultVariant | null;
-  images: (ProductVariantDetails_productVariant_product_images | null)[] | null;
+  media: (ProductVariantDetails_productVariant_product_media | null)[] | null;
   name: string;
   thumbnail: ProductVariantDetails_productVariant_product_thumbnail | null;
   channelListings: ProductVariantDetails_productVariant_product_channelListings[] | null;
@@ -262,7 +268,7 @@ export interface ProductVariantDetails_productVariant {
   privateMetadata: (ProductVariantDetails_productVariant_privateMetadata | null)[];
   selectionAttributes: ProductVariantDetails_productVariant_selectionAttributes[];
   nonSelectionAttributes: ProductVariantDetails_productVariant_nonSelectionAttributes[];
-  images: (ProductVariantDetails_productVariant_images | null)[] | null;
+  media: ProductVariantDetails_productVariant_media[] | null;
   name: string;
   product: ProductVariantDetails_productVariant_product;
   channelListings: ProductVariantDetails_productVariant_channelListings[] | null;

src/products/types/ProductVariantReorder.ts

@@ -2,7 +2,7 @@
 /* eslint-disable */
 // This file was automatically generated and should not be edited.
 
-import { ReorderInput, ProductErrorCode, AttributeInputTypeEnum, AttributeEntityTypeEnum, WeightUnitsEnum } from "./../../types/globalTypes";
+import { ReorderInput, ProductErrorCode, AttributeInputTypeEnum, AttributeEntityTypeEnum, ProductMediaType, WeightUnitsEnum } from "./../../types/globalTypes";
 
 // ====================================================
 // GraphQL mutation operation: ProductVariantReorder
@@ -178,12 +178,14 @@ export interface ProductVariantReorder_productVariantReorder_product_collections
   name: string;
 }
 
-export interface ProductVariantReorder_productVariantReorder_product_images {
+export interface ProductVariantReorder_productVariantReorder_product_media {
-  __typename: "ProductImage";
+  __typename: "ProductMedia";
   id: string;
   alt: string;
   sortOrder: number | null;
   url: string;
+  type: ProductMediaType;
+  oembedData: any;
 }
 
 export interface ProductVariantReorder_productVariantReorder_product_variants_stocks_warehouse {
@@ -267,7 +269,7 @@ export interface ProductVariantReorder_productVariantReorder_product {
   category: ProductVariantReorder_productVariantReorder_product_category | null;
   collections: (ProductVariantReorder_productVariantReorder_product_collections | null)[] | null;
   chargeTaxes: boolean;
-  images: (ProductVariantReorder_productVariantReorder_product_images | null)[] | null;
+  media: (ProductVariantReorder_productVariantReorder_product_media | null)[] | null;
   isAvailable: boolean | null;
   variants: (ProductVariantReorder_productVariantReorder_product_variants | null)[] | null;
   weight: ProductVariantReorder_productVariantReorder_product_weight | null;

src/products/types/ProductVariantSetDefault.ts

@@ -2,7 +2,7 @@
 /* eslint-disable */
 // This file was automatically generated and should not be edited.
 
-import { ProductErrorCode, AttributeInputTypeEnum, AttributeEntityTypeEnum, WeightUnitsEnum } from "./../../types/globalTypes";
+import { ProductErrorCode, AttributeInputTypeEnum, AttributeEntityTypeEnum, ProductMediaType, WeightUnitsEnum } from "./../../types/globalTypes";
 
 // ====================================================
 // GraphQL mutation operation: ProductVariantSetDefault
@@ -178,12 +178,14 @@ export interface ProductVariantSetDefault_productVariantSetDefault_product_colle
   name: string;
 }
 
-export interface ProductVariantSetDefault_productVariantSetDefault_product_images {
+export interface ProductVariantSetDefault_productVariantSetDefault_product_media {
-  __typename: "ProductImage";
+  __typename: "ProductMedia";
   id: string;
   alt: string;
   sortOrder: number | null;
   url: string;
+  type: ProductMediaType;
+  oembedData: any;
 }
 
 export interface ProductVariantSetDefault_productVariantSetDefault_product_variants_stocks_warehouse {
@@ -267,7 +269,7 @@ export interface ProductVariantSetDefault_productVariantSetDefault_product {
   category: ProductVariantSetDefault_productVariantSetDefault_product_category | null;
   collections: (ProductVariantSetDefault_productVariantSetDefault_product_collections | null)[] | null;
   chargeTaxes: boolean;
-  images: (ProductVariantSetDefault_productVariantSetDefault_product_images | null)[] | null;
+  media: (ProductVariantSetDefault_productVariantSetDefault_product_media | null)[] | null;
   isAvailable: boolean | null;
   variants: (ProductVariantSetDefault_productVariantSetDefault_product_variants | null)[] | null;
   weight: ProductVariantSetDefault_productVariantSetDefault_product_weight | null;

src/products/types/SimpleProductUpdate.ts

@@ -2,7 +2,7 @@
 /* eslint-disable */
 // This file was automatically generated and should not be edited.
 
-import { ProductInput, ProductVariantInput, StockInput, ProductErrorCode, AttributeInputTypeEnum, AttributeEntityTypeEnum, WeightUnitsEnum, StockErrorCode } from "./../../types/globalTypes";
+import { ProductInput, ProductVariantInput, StockInput, ProductErrorCode, AttributeInputTypeEnum, AttributeEntityTypeEnum, ProductMediaType, WeightUnitsEnum, StockErrorCode } from "./../../types/globalTypes";
 
 // ====================================================
 // GraphQL mutation operation: SimpleProductUpdate
@@ -179,12 +179,14 @@ export interface SimpleProductUpdate_productUpdate_product_collections {
   name: string;
 }
 
-export interface SimpleProductUpdate_productUpdate_product_images {
+export interface SimpleProductUpdate_productUpdate_product_media {
-  __typename: "ProductImage";
+  __typename: "ProductMedia";
   id: string;
   alt: string;
   sortOrder: number | null;
   url: string;
+  type: ProductMediaType;
+  oembedData: any;
 }
 
 export interface SimpleProductUpdate_productUpdate_product_variants_stocks_warehouse {
@@ -268,7 +270,7 @@ export interface SimpleProductUpdate_productUpdate_product {
   category: SimpleProductUpdate_productUpdate_product_category | null;
   collections: (SimpleProductUpdate_productUpdate_product_collections | null)[] | null;
   chargeTaxes: boolean;
-  images: (SimpleProductUpdate_productUpdate_product_images | null)[] | null;
+  media: (SimpleProductUpdate_productUpdate_product_media | null)[] | null;
   isAvailable: boolean | null;
   variants: (SimpleProductUpdate_productUpdate_product_variants | null)[] | null;
   weight: SimpleProductUpdate_productUpdate_product_weight | null;
@@ -394,10 +396,12 @@ export interface SimpleProductUpdate_productVariantUpdate_productVariant_nonSele
   values: (SimpleProductUpdate_productVariantUpdate_productVariant_nonSelectionAttributes_values | null)[];
 }
 
-export interface SimpleProductUpdate_productVariantUpdate_productVariant_images {
+export interface SimpleProductUpdate_productVariantUpdate_productVariant_media {
-  __typename: "ProductImage";
+  __typename: "ProductMedia";
   id: string;
   url: string;
+  type: ProductMediaType;
+  oembedData: any;
 }
 
 export interface SimpleProductUpdate_productVariantUpdate_productVariant_product_defaultVariant {
@@ -405,12 +409,14 @@ export interface SimpleProductUpdate_productVariantUpdate_productVariant_product
   id: string;
 }
 
-export interface SimpleProductUpdate_productVariantUpdate_productVariant_product_images {
+export interface SimpleProductUpdate_productVariantUpdate_productVariant_product_media {
-  __typename: "ProductImage";
+  __typename: "ProductMedia";
   id: string;
   alt: string;
   sortOrder: number | null;
   url: string;
+  type: ProductMediaType;
+  oembedData: any;
 }
 
 export interface SimpleProductUpdate_productVariantUpdate_productVariant_product_thumbnail {
@@ -464,10 +470,12 @@ export interface SimpleProductUpdate_productVariantUpdate_productVariant_product
   pricing: SimpleProductUpdate_productVariantUpdate_productVariant_product_channelListings_pricing | null;
 }
 
-export interface SimpleProductUpdate_productVariantUpdate_productVariant_product_variants_images {
+export interface SimpleProductUpdate_productVariantUpdate_productVariant_product_variants_media {
-  __typename: "ProductImage";
+  __typename: "ProductMedia";
   id: string;
   url: string;
+  type: ProductMediaType;
+  oembedData: any;
 }
 
 export interface SimpleProductUpdate_productVariantUpdate_productVariant_product_variants {
@@ -475,14 +483,14 @@ export interface SimpleProductUpdate_productVariantUpdate_productVariant_product
   id: string;
   name: string;
   sku: string;
-  images: (SimpleProductUpdate_productVariantUpdate_productVariant_product_variants_images | null)[] | null;
+  media: SimpleProductUpdate_productVariantUpdate_productVariant_product_variants_media[] | null;
 }
 
 export interface SimpleProductUpdate_productVariantUpdate_productVariant_product {
   __typename: "Product";
   id: string;
   defaultVariant: SimpleProductUpdate_productVariantUpdate_productVariant_product_defaultVariant | null;
-  images: (SimpleProductUpdate_productVariantUpdate_productVariant_product_images | null)[] | null;
+  media: (SimpleProductUpdate_productVariantUpdate_productVariant_product_media | null)[] | null;
   name: string;
   thumbnail: SimpleProductUpdate_productVariantUpdate_productVariant_product_thumbnail | null;
   channelListings: SimpleProductUpdate_productVariantUpdate_productVariant_product_channelListings[] | null;
@@ -542,7 +550,7 @@ export interface SimpleProductUpdate_productVariantUpdate_productVariant {
   privateMetadata: (SimpleProductUpdate_productVariantUpdate_productVariant_privateMetadata | null)[];
   selectionAttributes: SimpleProductUpdate_productVariantUpdate_productVariant_selectionAttributes[];
   nonSelectionAttributes: SimpleProductUpdate_productVariantUpdate_productVariant_nonSelectionAttributes[];
-  images: (SimpleProductUpdate_productVariantUpdate_productVariant_images | null)[] | null;
+  media: SimpleProductUpdate_productVariantUpdate_productVariant_media[] | null;
   name: string;
   product: SimpleProductUpdate_productVariantUpdate_productVariant_product;
   channelListings: SimpleProductUpdate_productVariantUpdate_productVariant_channelListings[] | null;
@@ -671,10 +679,12 @@ export interface SimpleProductUpdate_productVariantStocksCreate_productVariant_n
   values: (SimpleProductUpdate_productVariantStocksCreate_productVariant_nonSelectionAttributes_values | null)[];
 }
 
-export interface SimpleProductUpdate_productVariantStocksCreate_productVariant_images {
+export interface SimpleProductUpdate_productVariantStocksCreate_productVariant_media {
-  __typename: "ProductImage";
+  __typename: "ProductMedia";
   id: string;
   url: string;
+  type: ProductMediaType;
+  oembedData: any;
 }
 
 export interface SimpleProductUpdate_productVariantStocksCreate_productVariant_product_defaultVariant {
@@ -682,12 +692,14 @@ export interface SimpleProductUpdate_productVariantStocksCreate_productVariant_p
   id: string;
 }
 
-export interface SimpleProductUpdate_productVariantStocksCreate_productVariant_product_images {
+export interface SimpleProductUpdate_productVariantStocksCreate_productVariant_product_media {
-  __typename: "ProductImage";
+  __typename: "ProductMedia";
   id: string;
   alt: string;
   sortOrder: number | null;
   url: string;
+  type: ProductMediaType;
+  oembedData: any;
 }
 
 export interface SimpleProductUpdate_productVariantStocksCreate_productVariant_product_thumbnail {
@@ -741,10 +753,12 @@ export interface SimpleProductUpdate_productVariantStocksCreate_productVariant_p
   pricing: SimpleProductUpdate_productVariantStocksCreate_productVariant_product_channelListings_pricing | null;
 }
 
-export interface SimpleProductUpdate_productVariantStocksCreate_productVariant_product_variants_images {
+export interface SimpleProductUpdate_productVariantStocksCreate_productVariant_product_variants_media {
-  __typename: "ProductImage";
+  __typename: "ProductMedia";
   id: string;
   url: string;
+  type: ProductMediaType;
+  oembedData: any;
 }
 
 export interface SimpleProductUpdate_productVariantStocksCreate_productVariant_product_variants {
@@ -752,14 +766,14 @@ export interface SimpleProductUpdate_productVariantStocksCreate_productVariant_p
   id: string;
   name: string;
   sku: string;
-  images: (SimpleProductUpdate_productVariantStocksCreate_productVariant_product_variants_images | null)[] | null;
+  media: SimpleProductUpdate_productVariantStocksCreate_productVariant_product_variants_media[] | null;
 }
 
 export interface SimpleProductUpdate_productVariantStocksCreate_productVariant_product {
   __typename: "Product";
   id: string;
   defaultVariant: SimpleProductUpdate_productVariantStocksCreate_productVariant_product_defaultVariant | null;
-  images: (SimpleProductUpdate_productVariantStocksCreate_productVariant_product_images | null)[] | null;
+  media: (SimpleProductUpdate_productVariantStocksCreate_productVariant_product_media | null)[] | null;
   name: string;
   thumbnail: SimpleProductUpdate_productVariantStocksCreate_productVariant_product_thumbnail | null;
   channelListings: SimpleProductUpdate_productVariantStocksCreate_productVariant_product_channelListings[] | null;
@@ -819,7 +833,7 @@ export interface SimpleProductUpdate_productVariantStocksCreate_productVariant {
   privateMetadata: (SimpleProductUpdate_productVariantStocksCreate_productVariant_privateMetadata | null)[];
   selectionAttributes: SimpleProductUpdate_productVariantStocksCreate_productVariant_selectionAttributes[];
   nonSelectionAttributes: SimpleProductUpdate_productVariantStocksCreate_productVariant_nonSelectionAttributes[];
-  images: (SimpleProductUpdate_productVariantStocksCreate_productVariant_images | null)[] | null;
+  media: SimpleProductUpdate_productVariantStocksCreate_productVariant_media[] | null;
   name: string;
   product: SimpleProductUpdate_productVariantStocksCreate_productVariant_product;
   channelListings: SimpleProductUpdate_productVariantStocksCreate_productVariant_channelListings[] | null;
@@ -947,10 +961,12 @@ export interface SimpleProductUpdate_productVariantStocksDelete_productVariant_n
   values: (SimpleProductUpdate_productVariantStocksDelete_productVariant_nonSelectionAttributes_values | null)[];
 }
 
-export interface SimpleProductUpdate_productVariantStocksDelete_productVariant_images {
+export interface SimpleProductUpdate_productVariantStocksDelete_productVariant_media {
-  __typename: "ProductImage";
+  __typename: "ProductMedia";
   id: string;
   url: string;
+  type: ProductMediaType;
+  oembedData: any;
 }
 
 export interface SimpleProductUpdate_productVariantStocksDelete_productVariant_product_defaultVariant {
@@ -958,12 +974,14 @@ export interface SimpleProductUpdate_productVariantStocksDelete_productVariant_p
   id: string;
 }
 
-export interface SimpleProductUpdate_productVariantStocksDelete_productVariant_product_images {
+export interface SimpleProductUpdate_productVariantStocksDelete_productVariant_product_media {
-  __typename: "ProductImage";
+  __typename: "ProductMedia";
   id: string;
   alt: string;
   sortOrder: number | null;
   url: string;
+  type: ProductMediaType;
+  oembedData: any;
 }
 
 export interface SimpleProductUpdate_productVariantStocksDelete_productVariant_product_thumbnail {
@@ -1017,10 +1035,12 @@ export interface SimpleProductUpdate_productVariantStocksDelete_productVariant_p
   pricing: SimpleProductUpdate_productVariantStocksDelete_productVariant_product_channelListings_pricing | null;
 }
 
-export interface SimpleProductUpdate_productVariantStocksDelete_productVariant_product_variants_images {
+export interface SimpleProductUpdate_productVariantStocksDelete_productVariant_product_variants_media {
-  __typename: "ProductImage";
+  __typename: "ProductMedia";
   id: string;
   url: string;
+  type: ProductMediaType;
+  oembedData: any;
 }
 
 export interface SimpleProductUpdate_productVariantStocksDelete_productVariant_product_variants {
@@ -1028,14 +1048,14 @@ export interface SimpleProductUpdate_productVariantStocksDelete_productVariant_p
   id: string;
   name: string;
   sku: string;
-  images: (SimpleProductUpdate_productVariantStocksDelete_productVariant_product_variants_images | null)[] | null;
+  media: SimpleProductUpdate_productVariantStocksDelete_productVariant_product_variants_media[] | null;
 }
 
 export interface SimpleProductUpdate_productVariantStocksDelete_productVariant_product {
   __typename: "Product";
   id: string;
   defaultVariant: SimpleProductUpdate_productVariantStocksDelete_productVariant_product_defaultVariant | null;
-  images: (SimpleProductUpdate_productVariantStocksDelete_productVariant_product_images | null)[] | null;
+  media: (SimpleProductUpdate_productVariantStocksDelete_productVariant_product_media | null)[] | null;
   name: string;
   thumbnail: SimpleProductUpdate_productVariantStocksDelete_productVariant_product_thumbnail | null;
   channelListings: SimpleProductUpdate_productVariantStocksDelete_productVariant_product_channelListings[] | null;
@@ -1095,7 +1115,7 @@ export interface SimpleProductUpdate_productVariantStocksDelete_productVariant {
   privateMetadata: (SimpleProductUpdate_productVariantStocksDelete_productVariant_privateMetadata | null)[];
   selectionAttributes: SimpleProductUpdate_productVariantStocksDelete_productVariant_selectionAttributes[];
   nonSelectionAttributes: SimpleProductUpdate_productVariantStocksDelete_productVariant_nonSelectionAttributes[];
-  images: (SimpleProductUpdate_productVariantStocksDelete_productVariant_images | null)[] | null;
+  media: SimpleProductUpdate_productVariantStocksDelete_productVariant_media[] | null;
   name: string;
   product: SimpleProductUpdate_productVariantStocksDelete_productVariant_product;
   channelListings: SimpleProductUpdate_productVariantStocksDelete_productVariant_channelListings[] | null;
@@ -1224,10 +1244,12 @@ export interface SimpleProductUpdate_productVariantStocksUpdate_productVariant_n
   values: (SimpleProductUpdate_productVariantStocksUpdate_productVariant_nonSelectionAttributes_values | null)[];
 }
 
-export interface SimpleProductUpdate_productVariantStocksUpdate_productVariant_images {
+export interface SimpleProductUpdate_productVariantStocksUpdate_productVariant_media {
-  __typename: "ProductImage";
+  __typename: "ProductMedia";
   id: string;
   url: string;
+  type: ProductMediaType;
+  oembedData: any;
 }
 
 export interface SimpleProductUpdate_productVariantStocksUpdate_productVariant_product_defaultVariant {
@@ -1235,12 +1257,14 @@ export interface SimpleProductUpdate_productVariantStocksUpdate_productVariant_p
   id: string;
 }
 
-export interface SimpleProductUpdate_productVariantStocksUpdate_productVariant_product_images {
+export interface SimpleProductUpdate_productVariantStocksUpdate_productVariant_product_media {
-  __typename: "ProductImage";
+  __typename: "ProductMedia";
   id: string;
   alt: string;
   sortOrder: number | null;
   url: string;
+  type: ProductMediaType;
+  oembedData: any;
 }
 
 export interface SimpleProductUpdate_productVariantStocksUpdate_productVariant_product_thumbnail {
@@ -1294,10 +1318,12 @@ export interface SimpleProductUpdate_productVariantStocksUpdate_productVariant_p
   pricing: SimpleProductUpdate_productVariantStocksUpdate_productVariant_product_channelListings_pricing | null;
 }
 
-export interface SimpleProductUpdate_productVariantStocksUpdate_productVariant_product_variants_images {
+export interface SimpleProductUpdate_productVariantStocksUpdate_productVariant_product_variants_media {
-  __typename: "ProductImage";
+  __typename: "ProductMedia";
   id: string;
   url: string;
+  type: ProductMediaType;
+  oembedData: any;
 }
 
 export interface SimpleProductUpdate_productVariantStocksUpdate_productVariant_product_variants {
@@ -1305,14 +1331,14 @@ export interface SimpleProductUpdate_productVariantStocksUpdate_productVariant_p
   id: string;
   name: string;
   sku: string;
-  images: (SimpleProductUpdate_productVariantStocksUpdate_productVariant_product_variants_images | null)[] | null;
+  media: SimpleProductUpdate_productVariantStocksUpdate_productVariant_product_variants_media[] | null;
 }
 
 export interface SimpleProductUpdate_productVariantStocksUpdate_productVariant_product {
   __typename: "Product";
   id: string;
   defaultVariant: SimpleProductUpdate_productVariantStocksUpdate_productVariant_product_defaultVariant | null;
-  images: (SimpleProductUpdate_productVariantStocksUpdate_productVariant_product_images | null)[] | null;
+  media: (SimpleProductUpdate_productVariantStocksUpdate_productVariant_product_media | null)[] | null;
   name: string;
   thumbnail: SimpleProductUpdate_productVariantStocksUpdate_productVariant_product_thumbnail | null;
   channelListings: SimpleProductUpdate_productVariantStocksUpdate_productVariant_product_channelListings[] | null;
@@ -1372,7 +1398,7 @@ export interface SimpleProductUpdate_productVariantStocksUpdate_productVariant {
   privateMetadata: (SimpleProductUpdate_productVariantStocksUpdate_productVariant_privateMetadata | null)[];
   selectionAttributes: SimpleProductUpdate_productVariantStocksUpdate_productVariant_selectionAttributes[];
   nonSelectionAttributes: SimpleProductUpdate_productVariantStocksUpdate_productVariant_nonSelectionAttributes[];
-  images: (SimpleProductUpdate_productVariantStocksUpdate_productVariant_images | null)[] | null;
+  media: SimpleProductUpdate_productVariantStocksUpdate_productVariant_media[] | null;
   name: string;
   product: SimpleProductUpdate_productVariantStocksUpdate_productVariant_product;
   channelListings: SimpleProductUpdate_productVariantStocksUpdate_productVariant_channelListings[] | null;

src/products/types/VariantCreate.ts

@@ -2,7 +2,7 @@
 /* eslint-disable */
 // This file was automatically generated and should not be edited.
 
-import { ProductVariantCreateInput, ProductErrorCode, AttributeInputTypeEnum, AttributeEntityTypeEnum, WeightUnitsEnum } from "./../../types/globalTypes";
+import { ProductVariantCreateInput, ProductErrorCode, AttributeInputTypeEnum, AttributeEntityTypeEnum, ProductMediaType, WeightUnitsEnum } from "./../../types/globalTypes";
 
 // ====================================================
 // GraphQL mutation operation: VariantCreate
@@ -121,10 +121,12 @@ export interface VariantCreate_productVariantCreate_productVariant_nonSelectionA
   values: (VariantCreate_productVariantCreate_productVariant_nonSelectionAttributes_values | null)[];
 }
 
-export interface VariantCreate_productVariantCreate_productVariant_images {
+export interface VariantCreate_productVariantCreate_productVariant_media {
-  __typename: "ProductImage";
+  __typename: "ProductMedia";
   id: string;
   url: string;
+  type: ProductMediaType;
+  oembedData: any;
 }
 
 export interface VariantCreate_productVariantCreate_productVariant_product_defaultVariant {
@@ -132,12 +134,14 @@ export interface VariantCreate_productVariantCreate_productVariant_product_defau
   id: string;
 }
 
-export interface VariantCreate_productVariantCreate_productVariant_product_images {
+export interface VariantCreate_productVariantCreate_productVariant_product_media {
-  __typename: "ProductImage";
+  __typename: "ProductMedia";
   id: string;
   alt: string;
   sortOrder: number | null;
   url: string;
+  type: ProductMediaType;
+  oembedData: any;
 }
 
 export interface VariantCreate_productVariantCreate_productVariant_product_thumbnail {
@@ -191,10 +195,12 @@ export interface VariantCreate_productVariantCreate_productVariant_product_chann
   pricing: VariantCreate_productVariantCreate_productVariant_product_channelListings_pricing | null;
 }
 
-export interface VariantCreate_productVariantCreate_productVariant_product_variants_images {
+export interface VariantCreate_productVariantCreate_productVariant_product_variants_media {
-  __typename: "ProductImage";
+  __typename: "ProductMedia";
   id: string;
   url: string;
+  type: ProductMediaType;
+  oembedData: any;
 }
 
 export interface VariantCreate_productVariantCreate_productVariant_product_variants {
@@ -202,14 +208,14 @@ export interface VariantCreate_productVariantCreate_productVariant_product_varia
   id: string;
   name: string;
   sku: string;
-  images: (VariantCreate_productVariantCreate_productVariant_product_variants_images | null)[] | null;
+  media: VariantCreate_productVariantCreate_productVariant_product_variants_media[] | null;
 }
 
 export interface VariantCreate_productVariantCreate_productVariant_product {
   __typename: "Product";
   id: string;
   defaultVariant: VariantCreate_productVariantCreate_productVariant_product_defaultVariant | null;
-  images: (VariantCreate_productVariantCreate_productVariant_product_images | null)[] | null;
+  media: (VariantCreate_productVariantCreate_productVariant_product_media | null)[] | null;
   name: string;
   thumbnail: VariantCreate_productVariantCreate_productVariant_product_thumbnail | null;
   channelListings: VariantCreate_productVariantCreate_productVariant_product_channelListings[] | null;
@@ -269,7 +275,7 @@ export interface VariantCreate_productVariantCreate_productVariant {
   privateMetadata: (VariantCreate_productVariantCreate_productVariant_privateMetadata | null)[];
   selectionAttributes: VariantCreate_productVariantCreate_productVariant_selectionAttributes[];
   nonSelectionAttributes: VariantCreate_productVariantCreate_productVariant_nonSelectionAttributes[];
-  images: (VariantCreate_productVariantCreate_productVariant_images | null)[] | null;
+  media: VariantCreate_productVariantCreate_productVariant_media[] | null;
   name: string;
   product: VariantCreate_productVariantCreate_productVariant_product;
   channelListings: VariantCreate_productVariantCreate_productVariant_channelListings[] | null;

src/products/types/VariantImageAssign.ts

@@ -1,294 +0,0 @@
-/* tslint:disable */
-/* eslint-disable */
-// This file was automatically generated and should not be edited.
-
-import { ProductErrorCode, AttributeInputTypeEnum, AttributeEntityTypeEnum, WeightUnitsEnum } from "./../../types/globalTypes";
-
-// ====================================================
-// GraphQL mutation operation: VariantImageAssign
-// ====================================================
-
-export interface VariantImageAssign_variantImageAssign_errors {
-  __typename: "ProductError";
-  code: ProductErrorCode;
-  field: string | null;
-}
-
-export interface VariantImageAssign_variantImageAssign_productVariant_metadata {
-  __typename: "MetadataItem";
-  key: string;
-  value: string;
-}
-
-export interface VariantImageAssign_variantImageAssign_productVariant_privateMetadata {
-  __typename: "MetadataItem";
-  key: string;
-  value: string;
-}
-
-export interface VariantImageAssign_variantImageAssign_productVariant_selectionAttributes_attribute_values_file {
-  __typename: "File";
-  url: string;
-  contentType: string | null;
-}
-
-export interface VariantImageAssign_variantImageAssign_productVariant_selectionAttributes_attribute_values {
-  __typename: "AttributeValue";
-  id: string;
-  name: string | null;
-  slug: string | null;
-  file: VariantImageAssign_variantImageAssign_productVariant_selectionAttributes_attribute_values_file | null;
-  reference: string | null;
-}
-
-export interface VariantImageAssign_variantImageAssign_productVariant_selectionAttributes_attribute {
-  __typename: "Attribute";
-  id: string;
-  name: string | null;
-  slug: string | null;
-  inputType: AttributeInputTypeEnum | null;
-  entityType: AttributeEntityTypeEnum | null;
-  valueRequired: boolean;
-  values: (VariantImageAssign_variantImageAssign_productVariant_selectionAttributes_attribute_values | null)[] | null;
-}
-
-export interface VariantImageAssign_variantImageAssign_productVariant_selectionAttributes_values_file {
-  __typename: "File";
-  url: string;
-  contentType: string | null;
-}
-
-export interface VariantImageAssign_variantImageAssign_productVariant_selectionAttributes_values {
-  __typename: "AttributeValue";
-  id: string;
-  name: string | null;
-  slug: string | null;
-  file: VariantImageAssign_variantImageAssign_productVariant_selectionAttributes_values_file | null;
-  reference: string | null;
-}
-
-export interface VariantImageAssign_variantImageAssign_productVariant_selectionAttributes {
-  __typename: "SelectedAttribute";
-  attribute: VariantImageAssign_variantImageAssign_productVariant_selectionAttributes_attribute;
-  values: (VariantImageAssign_variantImageAssign_productVariant_selectionAttributes_values | null)[];
-}
-
-export interface VariantImageAssign_variantImageAssign_productVariant_nonSelectionAttributes_attribute_values_file {
-  __typename: "File";
-  url: string;
-  contentType: string | null;
-}
-
-export interface VariantImageAssign_variantImageAssign_productVariant_nonSelectionAttributes_attribute_values {
-  __typename: "AttributeValue";
-  id: string;
-  name: string | null;
-  slug: string | null;
-  file: VariantImageAssign_variantImageAssign_productVariant_nonSelectionAttributes_attribute_values_file | null;
-  reference: string | null;
-}
-
-export interface VariantImageAssign_variantImageAssign_productVariant_nonSelectionAttributes_attribute {
-  __typename: "Attribute";
-  id: string;
-  name: string | null;
-  slug: string | null;
-  inputType: AttributeInputTypeEnum | null;
-  entityType: AttributeEntityTypeEnum | null;
-  valueRequired: boolean;
-  values: (VariantImageAssign_variantImageAssign_productVariant_nonSelectionAttributes_attribute_values | null)[] | null;
-}
-
-export interface VariantImageAssign_variantImageAssign_productVariant_nonSelectionAttributes_values_file {
-  __typename: "File";
-  url: string;
-  contentType: string | null;
-}
-
-export interface VariantImageAssign_variantImageAssign_productVariant_nonSelectionAttributes_values {
-  __typename: "AttributeValue";
-  id: string;
-  name: string | null;
-  slug: string | null;
-  file: VariantImageAssign_variantImageAssign_productVariant_nonSelectionAttributes_values_file | null;
-  reference: string | null;
-}
-
-export interface VariantImageAssign_variantImageAssign_productVariant_nonSelectionAttributes {
-  __typename: "SelectedAttribute";
-  attribute: VariantImageAssign_variantImageAssign_productVariant_nonSelectionAttributes_attribute;
-  values: (VariantImageAssign_variantImageAssign_productVariant_nonSelectionAttributes_values | null)[];
-}
-
-export interface VariantImageAssign_variantImageAssign_productVariant_images {
-  __typename: "ProductImage";
-  id: string;
-  url: string;
-}
-
-export interface VariantImageAssign_variantImageAssign_productVariant_product_defaultVariant {
-  __typename: "ProductVariant";
-  id: string;
-}
-
-export interface VariantImageAssign_variantImageAssign_productVariant_product_images {
-  __typename: "ProductImage";
-  id: string;
-  alt: string;
-  sortOrder: number | null;
-  url: string;
-}
-
-export interface VariantImageAssign_variantImageAssign_productVariant_product_thumbnail {
-  __typename: "Image";
-  url: string;
-}
-
-export interface VariantImageAssign_variantImageAssign_productVariant_product_channelListings_channel {
-  __typename: "Channel";
-  id: string;
-  name: string;
-  currencyCode: string;
-}
-
-export interface VariantImageAssign_variantImageAssign_productVariant_product_channelListings_pricing_priceRange_start_net {
-  __typename: "Money";
-  amount: number;
-  currency: string;
-}
-
-export interface VariantImageAssign_variantImageAssign_productVariant_product_channelListings_pricing_priceRange_start {
-  __typename: "TaxedMoney";
-  net: VariantImageAssign_variantImageAssign_productVariant_product_channelListings_pricing_priceRange_start_net;
-}
-
-export interface VariantImageAssign_variantImageAssign_productVariant_product_channelListings_pricing_priceRange_stop_net {
-  __typename: "Money";
-  amount: number;
-  currency: string;
-}
-
-export interface VariantImageAssign_variantImageAssign_productVariant_product_channelListings_pricing_priceRange_stop {
-  __typename: "TaxedMoney";
-  net: VariantImageAssign_variantImageAssign_productVariant_product_channelListings_pricing_priceRange_stop_net;
-}
-
-export interface VariantImageAssign_variantImageAssign_productVariant_product_channelListings_pricing_priceRange {
-  __typename: "TaxedMoneyRange";
-  start: VariantImageAssign_variantImageAssign_productVariant_product_channelListings_pricing_priceRange_start | null;
-  stop: VariantImageAssign_variantImageAssign_productVariant_product_channelListings_pricing_priceRange_stop | null;
-}
-
-export interface VariantImageAssign_variantImageAssign_productVariant_product_channelListings_pricing {
-  __typename: "ProductPricingInfo";
-  priceRange: VariantImageAssign_variantImageAssign_productVariant_product_channelListings_pricing_priceRange | null;
-}
-
-export interface VariantImageAssign_variantImageAssign_productVariant_product_channelListings {
-  __typename: "ProductChannelListing";
-  channel: VariantImageAssign_variantImageAssign_productVariant_product_channelListings_channel;
-  pricing: VariantImageAssign_variantImageAssign_productVariant_product_channelListings_pricing | null;
-}
-
-export interface VariantImageAssign_variantImageAssign_productVariant_product_variants_images {
-  __typename: "ProductImage";
-  id: string;
-  url: string;
-}
-
-export interface VariantImageAssign_variantImageAssign_productVariant_product_variants {
-  __typename: "ProductVariant";
-  id: string;
-  name: string;
-  sku: string;
-  images: (VariantImageAssign_variantImageAssign_productVariant_product_variants_images | null)[] | null;
-}
-
-export interface VariantImageAssign_variantImageAssign_productVariant_product {
-  __typename: "Product";
-  id: string;
-  defaultVariant: VariantImageAssign_variantImageAssign_productVariant_product_defaultVariant | null;
-  images: (VariantImageAssign_variantImageAssign_productVariant_product_images | null)[] | null;
-  name: string;
-  thumbnail: VariantImageAssign_variantImageAssign_productVariant_product_thumbnail | null;
-  channelListings: VariantImageAssign_variantImageAssign_productVariant_product_channelListings[] | null;
-  variants: (VariantImageAssign_variantImageAssign_productVariant_product_variants | null)[] | null;
-}
-
-export interface VariantImageAssign_variantImageAssign_productVariant_channelListings_channel {
-  __typename: "Channel";
-  id: string;
-  name: string;
-  currencyCode: string;
-}
-
-export interface VariantImageAssign_variantImageAssign_productVariant_channelListings_price {
-  __typename: "Money";
-  amount: number;
-  currency: string;
-}
-
-export interface VariantImageAssign_variantImageAssign_productVariant_channelListings_costPrice {
-  __typename: "Money";
-  amount: number;
-  currency: string;
-}
-
-export interface VariantImageAssign_variantImageAssign_productVariant_channelListings {
-  __typename: "ProductVariantChannelListing";
-  channel: VariantImageAssign_variantImageAssign_productVariant_channelListings_channel;
-  price: VariantImageAssign_variantImageAssign_productVariant_channelListings_price | null;
-  costPrice: VariantImageAssign_variantImageAssign_productVariant_channelListings_costPrice | null;
-}
-
-export interface VariantImageAssign_variantImageAssign_productVariant_stocks_warehouse {
-  __typename: "Warehouse";
-  id: string;
-  name: string;
-}
-
-export interface VariantImageAssign_variantImageAssign_productVariant_stocks {
-  __typename: "Stock";
-  id: string;
-  quantity: number;
-  quantityAllocated: number;
-  warehouse: VariantImageAssign_variantImageAssign_productVariant_stocks_warehouse;
-}
-
-export interface VariantImageAssign_variantImageAssign_productVariant_weight {
-  __typename: "Weight";
-  unit: WeightUnitsEnum;
-  value: number;
-}
-
-export interface VariantImageAssign_variantImageAssign_productVariant {
-  __typename: "ProductVariant";
-  id: string;
-  metadata: (VariantImageAssign_variantImageAssign_productVariant_metadata | null)[];
-  privateMetadata: (VariantImageAssign_variantImageAssign_productVariant_privateMetadata | null)[];
-  selectionAttributes: VariantImageAssign_variantImageAssign_productVariant_selectionAttributes[];
-  nonSelectionAttributes: VariantImageAssign_variantImageAssign_productVariant_nonSelectionAttributes[];
-  images: (VariantImageAssign_variantImageAssign_productVariant_images | null)[] | null;
-  name: string;
-  product: VariantImageAssign_variantImageAssign_productVariant_product;
-  channelListings: VariantImageAssign_variantImageAssign_productVariant_channelListings[] | null;
-  sku: string;
-  stocks: (VariantImageAssign_variantImageAssign_productVariant_stocks | null)[] | null;
-  trackInventory: boolean;
-  weight: VariantImageAssign_variantImageAssign_productVariant_weight | null;
-}
-
-export interface VariantImageAssign_variantImageAssign {
-  __typename: "VariantImageAssign";
-  errors: VariantImageAssign_variantImageAssign_errors[];
-  productVariant: VariantImageAssign_variantImageAssign_productVariant | null;
-}
-
-export interface VariantImageAssign {
-  variantImageAssign: VariantImageAssign_variantImageAssign | null;
-}
-
-export interface VariantImageAssignVariables {
-  variantId: string;
-  imageId: string;
-}

src/products/types/VariantMediaAssign.ts

@@ -0,0 +1,300 @@
+/* tslint:disable */
+/* eslint-disable */
+// This file was automatically generated and should not be edited.
+
+import { ProductErrorCode, AttributeInputTypeEnum, AttributeEntityTypeEnum, ProductMediaType, WeightUnitsEnum } from "./../../types/globalTypes";
+
+// ====================================================
+// GraphQL mutation operation: VariantMediaAssign
+// ====================================================
+
+export interface VariantMediaAssign_variantMediaAssign_errors {
+  __typename: "ProductError";
+  code: ProductErrorCode;
+  field: string | null;
+}
+
+export interface VariantMediaAssign_variantMediaAssign_productVariant_metadata {
+  __typename: "MetadataItem";
+  key: string;
+  value: string;
+}
+
+export interface VariantMediaAssign_variantMediaAssign_productVariant_privateMetadata {
+  __typename: "MetadataItem";
+  key: string;
+  value: string;
+}
+
+export interface VariantMediaAssign_variantMediaAssign_productVariant_selectionAttributes_attribute_values_file {
+  __typename: "File";
+  url: string;
+  contentType: string | null;
+}
+
+export interface VariantMediaAssign_variantMediaAssign_productVariant_selectionAttributes_attribute_values {
+  __typename: "AttributeValue";
+  id: string;
+  name: string | null;
+  slug: string | null;
+  file: VariantMediaAssign_variantMediaAssign_productVariant_selectionAttributes_attribute_values_file | null;
+  reference: string | null;
+}
+
+export interface VariantMediaAssign_variantMediaAssign_productVariant_selectionAttributes_attribute {
+  __typename: "Attribute";
+  id: string;
+  name: string | null;
+  slug: string | null;
+  inputType: AttributeInputTypeEnum | null;
+  entityType: AttributeEntityTypeEnum | null;
+  valueRequired: boolean;
+  values: (VariantMediaAssign_variantMediaAssign_productVariant_selectionAttributes_attribute_values | null)[] | null;
+}
+
+export interface VariantMediaAssign_variantMediaAssign_productVariant_selectionAttributes_values_file {
+  __typename: "File";
+  url: string;
+  contentType: string | null;
+}
+
+export interface VariantMediaAssign_variantMediaAssign_productVariant_selectionAttributes_values {
+  __typename: "AttributeValue";
+  id: string;
+  name: string | null;
+  slug: string | null;
+  file: VariantMediaAssign_variantMediaAssign_productVariant_selectionAttributes_values_file | null;
+  reference: string | null;
+}
+
+export interface VariantMediaAssign_variantMediaAssign_productVariant_selectionAttributes {
+  __typename: "SelectedAttribute";
+  attribute: VariantMediaAssign_variantMediaAssign_productVariant_selectionAttributes_attribute;
+  values: (VariantMediaAssign_variantMediaAssign_productVariant_selectionAttributes_values | null)[];
+}
+
+export interface VariantMediaAssign_variantMediaAssign_productVariant_nonSelectionAttributes_attribute_values_file {
+  __typename: "File";
+  url: string;
+  contentType: string | null;
+}
+
+export interface VariantMediaAssign_variantMediaAssign_productVariant_nonSelectionAttributes_attribute_values {
+  __typename: "AttributeValue";
+  id: string;
+  name: string | null;
+  slug: string | null;
+  file: VariantMediaAssign_variantMediaAssign_productVariant_nonSelectionAttributes_attribute_values_file | null;
+  reference: string | null;
+}
+
+export interface VariantMediaAssign_variantMediaAssign_productVariant_nonSelectionAttributes_attribute {
+  __typename: "Attribute";
+  id: string;
+  name: string | null;
+  slug: string | null;
+  inputType: AttributeInputTypeEnum | null;
+  entityType: AttributeEntityTypeEnum | null;
+  valueRequired: boolean;
+  values: (VariantMediaAssign_variantMediaAssign_productVariant_nonSelectionAttributes_attribute_values | null)[] | null;
+}
+
+export interface VariantMediaAssign_variantMediaAssign_productVariant_nonSelectionAttributes_values_file {
+  __typename: "File";
+  url: string;
+  contentType: string | null;
+}
+
+export interface VariantMediaAssign_variantMediaAssign_productVariant_nonSelectionAttributes_values {
+  __typename: "AttributeValue";
+  id: string;
+  name: string | null;
+  slug: string | null;
+  file: VariantMediaAssign_variantMediaAssign_productVariant_nonSelectionAttributes_values_file | null;
+  reference: string | null;
+}
+
+export interface VariantMediaAssign_variantMediaAssign_productVariant_nonSelectionAttributes {
+  __typename: "SelectedAttribute";
+  attribute: VariantMediaAssign_variantMediaAssign_productVariant_nonSelectionAttributes_attribute;
+  values: (VariantMediaAssign_variantMediaAssign_productVariant_nonSelectionAttributes_values | null)[];
+}
+
+export interface VariantMediaAssign_variantMediaAssign_productVariant_media {
+  __typename: "ProductMedia";
+  id: string;
+  url: string;
+  type: ProductMediaType;
+  oembedData: any;
+}
+
+export interface VariantMediaAssign_variantMediaAssign_productVariant_product_defaultVariant {
+  __typename: "ProductVariant";
+  id: string;
+}
+
+export interface VariantMediaAssign_variantMediaAssign_productVariant_product_media {
+  __typename: "ProductMedia";
+  id: string;
+  alt: string;
+  sortOrder: number | null;
+  url: string;
+  type: ProductMediaType;
+  oembedData: any;
+}
+
+export interface VariantMediaAssign_variantMediaAssign_productVariant_product_thumbnail {
+  __typename: "Image";
+  url: string;
+}
+
+export interface VariantMediaAssign_variantMediaAssign_productVariant_product_channelListings_channel {
+  __typename: "Channel";
+  id: string;
+  name: string;
+  currencyCode: string;
+}
+
+export interface VariantMediaAssign_variantMediaAssign_productVariant_product_channelListings_pricing_priceRange_start_net {
+  __typename: "Money";
+  amount: number;
+  currency: string;
+}
+
+export interface VariantMediaAssign_variantMediaAssign_productVariant_product_channelListings_pricing_priceRange_start {
+  __typename: "TaxedMoney";
+  net: VariantMediaAssign_variantMediaAssign_productVariant_product_channelListings_pricing_priceRange_start_net;
+}
+
+export interface VariantMediaAssign_variantMediaAssign_productVariant_product_channelListings_pricing_priceRange_stop_net {
+  __typename: "Money";
+  amount: number;
+  currency: string;
+}
+
+export interface VariantMediaAssign_variantMediaAssign_productVariant_product_channelListings_pricing_priceRange_stop {
+  __typename: "TaxedMoney";
+  net: VariantMediaAssign_variantMediaAssign_productVariant_product_channelListings_pricing_priceRange_stop_net;
+}
+
+export interface VariantMediaAssign_variantMediaAssign_productVariant_product_channelListings_pricing_priceRange {
+  __typename: "TaxedMoneyRange";
+  start: VariantMediaAssign_variantMediaAssign_productVariant_product_channelListings_pricing_priceRange_start | null;
+  stop: VariantMediaAssign_variantMediaAssign_productVariant_product_channelListings_pricing_priceRange_stop | null;
+}
+
+export interface VariantMediaAssign_variantMediaAssign_productVariant_product_channelListings_pricing {
+  __typename: "ProductPricingInfo";
+  priceRange: VariantMediaAssign_variantMediaAssign_productVariant_product_channelListings_pricing_priceRange | null;
+}
+
+export interface VariantMediaAssign_variantMediaAssign_productVariant_product_channelListings {
+  __typename: "ProductChannelListing";
+  channel: VariantMediaAssign_variantMediaAssign_productVariant_product_channelListings_channel;
+  pricing: VariantMediaAssign_variantMediaAssign_productVariant_product_channelListings_pricing | null;
+}
+
+export interface VariantMediaAssign_variantMediaAssign_productVariant_product_variants_media {
+  __typename: "ProductMedia";
+  id: string;
+  url: string;
+  type: ProductMediaType;
+  oembedData: any;
+}
+
+export interface VariantMediaAssign_variantMediaAssign_productVariant_product_variants {
+  __typename: "ProductVariant";
+  id: string;
+  name: string;
+  sku: string;
+  media: VariantMediaAssign_variantMediaAssign_productVariant_product_variants_media[] | null;
+}
+
+export interface VariantMediaAssign_variantMediaAssign_productVariant_product {
+  __typename: "Product";
+  id: string;
+  defaultVariant: VariantMediaAssign_variantMediaAssign_productVariant_product_defaultVariant | null;
+  media: (VariantMediaAssign_variantMediaAssign_productVariant_product_media | null)[] | null;
+  name: string;
+  thumbnail: VariantMediaAssign_variantMediaAssign_productVariant_product_thumbnail | null;
+  channelListings: VariantMediaAssign_variantMediaAssign_productVariant_product_channelListings[] | null;
+  variants: (VariantMediaAssign_variantMediaAssign_productVariant_product_variants | null)[] | null;
+}
+
+export interface VariantMediaAssign_variantMediaAssign_productVariant_channelListings_channel {
+  __typename: "Channel";
+  id: string;
+  name: string;
+  currencyCode: string;
+}
+
+export interface VariantMediaAssign_variantMediaAssign_productVariant_channelListings_price {
+  __typename: "Money";
+  amount: number;
+  currency: string;
+}
+
+export interface VariantMediaAssign_variantMediaAssign_productVariant_channelListings_costPrice {
+  __typename: "Money";
+  amount: number;
+  currency: string;
+}
+
+export interface VariantMediaAssign_variantMediaAssign_productVariant_channelListings {
+  __typename: "ProductVariantChannelListing";
+  channel: VariantMediaAssign_variantMediaAssign_productVariant_channelListings_channel;
+  price: VariantMediaAssign_variantMediaAssign_productVariant_channelListings_price | null;
+  costPrice: VariantMediaAssign_variantMediaAssign_productVariant_channelListings_costPrice | null;
+}
+
+export interface VariantMediaAssign_variantMediaAssign_productVariant_stocks_warehouse {
+  __typename: "Warehouse";
+  id: string;
+  name: string;
+}
+
+export interface VariantMediaAssign_variantMediaAssign_productVariant_stocks {
+  __typename: "Stock";
+  id: string;
+  quantity: number;
+  quantityAllocated: number;
+  warehouse: VariantMediaAssign_variantMediaAssign_productVariant_stocks_warehouse;
+}
+
+export interface VariantMediaAssign_variantMediaAssign_productVariant_weight {
+  __typename: "Weight";
+  unit: WeightUnitsEnum;
+  value: number;
+}
+
+export interface VariantMediaAssign_variantMediaAssign_productVariant {
+  __typename: "ProductVariant";
+  id: string;
+  metadata: (VariantMediaAssign_variantMediaAssign_productVariant_metadata | null)[];
+  privateMetadata: (VariantMediaAssign_variantMediaAssign_productVariant_privateMetadata | null)[];
+  selectionAttributes: VariantMediaAssign_variantMediaAssign_productVariant_selectionAttributes[];
+  nonSelectionAttributes: VariantMediaAssign_variantMediaAssign_productVariant_nonSelectionAttributes[];
+  media: VariantMediaAssign_variantMediaAssign_productVariant_media[] | null;
+  name: string;
+  product: VariantMediaAssign_variantMediaAssign_productVariant_product;
+  channelListings: VariantMediaAssign_variantMediaAssign_productVariant_channelListings[] | null;
+  sku: string;
+  stocks: (VariantMediaAssign_variantMediaAssign_productVariant_stocks | null)[] | null;
+  trackInventory: boolean;
+  weight: VariantMediaAssign_variantMediaAssign_productVariant_weight | null;
+}
+
+export interface VariantMediaAssign_variantMediaAssign {
+  __typename: "VariantMediaAssign";
+  errors: VariantMediaAssign_variantMediaAssign_errors[];
+  productVariant: VariantMediaAssign_variantMediaAssign_productVariant | null;
+}
+
+export interface VariantMediaAssign {
+  variantMediaAssign: VariantMediaAssign_variantMediaAssign | null;
+}
+
+export interface VariantMediaAssignVariables {
+  variantId: string;
+  mediaId: string;
+}

src/products/types/VariantMediaUnassign.ts

@@ -2,46 +2,46 @@
 /* eslint-disable */
 // This file was automatically generated and should not be edited.
 
-import { ProductErrorCode, AttributeInputTypeEnum, AttributeEntityTypeEnum, WeightUnitsEnum } from "./../../types/globalTypes";
+import { ProductErrorCode, AttributeInputTypeEnum, AttributeEntityTypeEnum, ProductMediaType, WeightUnitsEnum } from "./../../types/globalTypes";
 
 // ====================================================
-// GraphQL mutation operation: VariantImageUnassign
+// GraphQL mutation operation: VariantMediaUnassign
 // ====================================================
 
-export interface VariantImageUnassign_variantImageUnassign_errors {
+export interface VariantMediaUnassign_variantMediaUnassign_errors {
   __typename: "ProductError";
   code: ProductErrorCode;
   field: string | null;
 }
 
-export interface VariantImageUnassign_variantImageUnassign_productVariant_metadata {
+export interface VariantMediaUnassign_variantMediaUnassign_productVariant_metadata {
   __typename: "MetadataItem";
   key: string;
   value: string;
 }
 
-export interface VariantImageUnassign_variantImageUnassign_productVariant_privateMetadata {
+export interface VariantMediaUnassign_variantMediaUnassign_productVariant_privateMetadata {
   __typename: "MetadataItem";
   key: string;
   value: string;
 }
 
-export interface VariantImageUnassign_variantImageUnassign_productVariant_selectionAttributes_attribute_values_file {
+export interface VariantMediaUnassign_variantMediaUnassign_productVariant_selectionAttributes_attribute_values_file {
   __typename: "File";
   url: string;
   contentType: string | null;
 }
 
-export interface VariantImageUnassign_variantImageUnassign_productVariant_selectionAttributes_attribute_values {
+export interface VariantMediaUnassign_variantMediaUnassign_productVariant_selectionAttributes_attribute_values {
   __typename: "AttributeValue";
   id: string;
   name: string | null;
   slug: string | null;
-  file: VariantImageUnassign_variantImageUnassign_productVariant_selectionAttributes_attribute_values_file | null;
+  file: VariantMediaUnassign_variantMediaUnassign_productVariant_selectionAttributes_attribute_values_file | null;
   reference: string | null;
 }
 
-export interface VariantImageUnassign_variantImageUnassign_productVariant_selectionAttributes_attribute {
+export interface VariantMediaUnassign_variantMediaUnassign_productVariant_selectionAttributes_attribute {
   __typename: "Attribute";
   id: string;
   name: string | null;
@@ -49,46 +49,46 @@ export interface VariantImageUnassign_variantImageUnassign_productVariant_select
   inputType: AttributeInputTypeEnum | null;
   entityType: AttributeEntityTypeEnum | null;
   valueRequired: boolean;
-  values: (VariantImageUnassign_variantImageUnassign_productVariant_selectionAttributes_attribute_values | null)[] | null;
+  values: (VariantMediaUnassign_variantMediaUnassign_productVariant_selectionAttributes_attribute_values | null)[] | null;
 }
 
-export interface VariantImageUnassign_variantImageUnassign_productVariant_selectionAttributes_values_file {
+export interface VariantMediaUnassign_variantMediaUnassign_productVariant_selectionAttributes_values_file {
   __typename: "File";
   url: string;
   contentType: string | null;
 }
 
-export interface VariantImageUnassign_variantImageUnassign_productVariant_selectionAttributes_values {
+export interface VariantMediaUnassign_variantMediaUnassign_productVariant_selectionAttributes_values {
   __typename: "AttributeValue";
   id: string;
   name: string | null;
   slug: string | null;
-  file: VariantImageUnassign_variantImageUnassign_productVariant_selectionAttributes_values_file | null;
+  file: VariantMediaUnassign_variantMediaUnassign_productVariant_selectionAttributes_values_file | null;
   reference: string | null;
 }
 
-export interface VariantImageUnassign_variantImageUnassign_productVariant_selectionAttributes {
+export interface VariantMediaUnassign_variantMediaUnassign_productVariant_selectionAttributes {
   __typename: "SelectedAttribute";
-  attribute: VariantImageUnassign_variantImageUnassign_productVariant_selectionAttributes_attribute;
+  attribute: VariantMediaUnassign_variantMediaUnassign_productVariant_selectionAttributes_attribute;
-  values: (VariantImageUnassign_variantImageUnassign_productVariant_selectionAttributes_values | null)[];
+  values: (VariantMediaUnassign_variantMediaUnassign_productVariant_selectionAttributes_values | null)[];
 }
 
-export interface VariantImageUnassign_variantImageUnassign_productVariant_nonSelectionAttributes_attribute_values_file {
+export interface VariantMediaUnassign_variantMediaUnassign_productVariant_nonSelectionAttributes_attribute_values_file {
   __typename: "File";
   url: string;
   contentType: string | null;
 }
 
-export interface VariantImageUnassign_variantImageUnassign_productVariant_nonSelectionAttributes_attribute_values {
+export interface VariantMediaUnassign_variantMediaUnassign_productVariant_nonSelectionAttributes_attribute_values {
   __typename: "AttributeValue";
   id: string;
   name: string | null;
   slug: string | null;
-  file: VariantImageUnassign_variantImageUnassign_productVariant_nonSelectionAttributes_attribute_values_file | null;
+  file: VariantMediaUnassign_variantMediaUnassign_productVariant_nonSelectionAttributes_attribute_values_file | null;
   reference: string | null;
 }
 
-export interface VariantImageUnassign_variantImageUnassign_productVariant_nonSelectionAttributes_attribute {
+export interface VariantMediaUnassign_variantMediaUnassign_productVariant_nonSelectionAttributes_attribute {
   __typename: "Attribute";
   id: string;
   name: string | null;
@@ -96,199 +96,205 @@ export interface VariantImageUnassign_variantImageUnassign_productVariant_nonSel
   inputType: AttributeInputTypeEnum | null;
   entityType: AttributeEntityTypeEnum | null;
   valueRequired: boolean;
-  values: (VariantImageUnassign_variantImageUnassign_productVariant_nonSelectionAttributes_attribute_values | null)[] | null;
+  values: (VariantMediaUnassign_variantMediaUnassign_productVariant_nonSelectionAttributes_attribute_values | null)[] | null;
 }
 
-export interface VariantImageUnassign_variantImageUnassign_productVariant_nonSelectionAttributes_values_file {
+export interface VariantMediaUnassign_variantMediaUnassign_productVariant_nonSelectionAttributes_values_file {
   __typename: "File";
   url: string;
   contentType: string | null;
 }
 
-export interface VariantImageUnassign_variantImageUnassign_productVariant_nonSelectionAttributes_values {
+export interface VariantMediaUnassign_variantMediaUnassign_productVariant_nonSelectionAttributes_values {
   __typename: "AttributeValue";
   id: string;
   name: string | null;
   slug: string | null;
-  file: VariantImageUnassign_variantImageUnassign_productVariant_nonSelectionAttributes_values_file | null;
+  file: VariantMediaUnassign_variantMediaUnassign_productVariant_nonSelectionAttributes_values_file | null;
   reference: string | null;
 }
 
-export interface VariantImageUnassign_variantImageUnassign_productVariant_nonSelectionAttributes {
+export interface VariantMediaUnassign_variantMediaUnassign_productVariant_nonSelectionAttributes {
   __typename: "SelectedAttribute";
-  attribute: VariantImageUnassign_variantImageUnassign_productVariant_nonSelectionAttributes_attribute;
+  attribute: VariantMediaUnassign_variantMediaUnassign_productVariant_nonSelectionAttributes_attribute;
-  values: (VariantImageUnassign_variantImageUnassign_productVariant_nonSelectionAttributes_values | null)[];
+  values: (VariantMediaUnassign_variantMediaUnassign_productVariant_nonSelectionAttributes_values | null)[];
 }
 
-export interface VariantImageUnassign_variantImageUnassign_productVariant_images {
+export interface VariantMediaUnassign_variantMediaUnassign_productVariant_media {
-  __typename: "ProductImage";
+  __typename: "ProductMedia";
   id: string;
   url: string;
+  type: ProductMediaType;
+  oembedData: any;
 }
 
-export interface VariantImageUnassign_variantImageUnassign_productVariant_product_defaultVariant {
+export interface VariantMediaUnassign_variantMediaUnassign_productVariant_product_defaultVariant {
   __typename: "ProductVariant";
   id: string;
 }
 
-export interface VariantImageUnassign_variantImageUnassign_productVariant_product_images {
+export interface VariantMediaUnassign_variantMediaUnassign_productVariant_product_media {
-  __typename: "ProductImage";
+  __typename: "ProductMedia";
   id: string;
   alt: string;
   sortOrder: number | null;
   url: string;
+  type: ProductMediaType;
+  oembedData: any;
 }
 
-export interface VariantImageUnassign_variantImageUnassign_productVariant_product_thumbnail {
+export interface VariantMediaUnassign_variantMediaUnassign_productVariant_product_thumbnail {
   __typename: "Image";
   url: string;
 }
 
-export interface VariantImageUnassign_variantImageUnassign_productVariant_product_channelListings_channel {
+export interface VariantMediaUnassign_variantMediaUnassign_productVariant_product_channelListings_channel {
   __typename: "Channel";
   id: string;
   name: string;
   currencyCode: string;
 }
 
-export interface VariantImageUnassign_variantImageUnassign_productVariant_product_channelListings_pricing_priceRange_start_net {
+export interface VariantMediaUnassign_variantMediaUnassign_productVariant_product_channelListings_pricing_priceRange_start_net {
   __typename: "Money";
   amount: number;
   currency: string;
 }
 
-export interface VariantImageUnassign_variantImageUnassign_productVariant_product_channelListings_pricing_priceRange_start {
+export interface VariantMediaUnassign_variantMediaUnassign_productVariant_product_channelListings_pricing_priceRange_start {
   __typename: "TaxedMoney";
-  net: VariantImageUnassign_variantImageUnassign_productVariant_product_channelListings_pricing_priceRange_start_net;
+  net: VariantMediaUnassign_variantMediaUnassign_productVariant_product_channelListings_pricing_priceRange_start_net;
 }
 
-export interface VariantImageUnassign_variantImageUnassign_productVariant_product_channelListings_pricing_priceRange_stop_net {
+export interface VariantMediaUnassign_variantMediaUnassign_productVariant_product_channelListings_pricing_priceRange_stop_net {
   __typename: "Money";
   amount: number;
   currency: string;
 }
 
-export interface VariantImageUnassign_variantImageUnassign_productVariant_product_channelListings_pricing_priceRange_stop {
+export interface VariantMediaUnassign_variantMediaUnassign_productVariant_product_channelListings_pricing_priceRange_stop {
   __typename: "TaxedMoney";
-  net: VariantImageUnassign_variantImageUnassign_productVariant_product_channelListings_pricing_priceRange_stop_net;
+  net: VariantMediaUnassign_variantMediaUnassign_productVariant_product_channelListings_pricing_priceRange_stop_net;
 }
 
-export interface VariantImageUnassign_variantImageUnassign_productVariant_product_channelListings_pricing_priceRange {
+export interface VariantMediaUnassign_variantMediaUnassign_productVariant_product_channelListings_pricing_priceRange {
   __typename: "TaxedMoneyRange";
-  start: VariantImageUnassign_variantImageUnassign_productVariant_product_channelListings_pricing_priceRange_start | null;
+  start: VariantMediaUnassign_variantMediaUnassign_productVariant_product_channelListings_pricing_priceRange_start | null;
-  stop: VariantImageUnassign_variantImageUnassign_productVariant_product_channelListings_pricing_priceRange_stop | null;
+  stop: VariantMediaUnassign_variantMediaUnassign_productVariant_product_channelListings_pricing_priceRange_stop | null;
 }
 
-export interface VariantImageUnassign_variantImageUnassign_productVariant_product_channelListings_pricing {
+export interface VariantMediaUnassign_variantMediaUnassign_productVariant_product_channelListings_pricing {
   __typename: "ProductPricingInfo";
-  priceRange: VariantImageUnassign_variantImageUnassign_productVariant_product_channelListings_pricing_priceRange | null;
+  priceRange: VariantMediaUnassign_variantMediaUnassign_productVariant_product_channelListings_pricing_priceRange | null;
 }
 
-export interface VariantImageUnassign_variantImageUnassign_productVariant_product_channelListings {
+export interface VariantMediaUnassign_variantMediaUnassign_productVariant_product_channelListings {
   __typename: "ProductChannelListing";
-  channel: VariantImageUnassign_variantImageUnassign_productVariant_product_channelListings_channel;
+  channel: VariantMediaUnassign_variantMediaUnassign_productVariant_product_channelListings_channel;
-  pricing: VariantImageUnassign_variantImageUnassign_productVariant_product_channelListings_pricing | null;
+  pricing: VariantMediaUnassign_variantMediaUnassign_productVariant_product_channelListings_pricing | null;
 }
 
-export interface VariantImageUnassign_variantImageUnassign_productVariant_product_variants_images {
+export interface VariantMediaUnassign_variantMediaUnassign_productVariant_product_variants_media {
-  __typename: "ProductImage";
+  __typename: "ProductMedia";
   id: string;
   url: string;
+  type: ProductMediaType;
+  oembedData: any;
 }
 
-export interface VariantImageUnassign_variantImageUnassign_productVariant_product_variants {
+export interface VariantMediaUnassign_variantMediaUnassign_productVariant_product_variants {
   __typename: "ProductVariant";
   id: string;
   name: string;
   sku: string;
-  images: (VariantImageUnassign_variantImageUnassign_productVariant_product_variants_images | null)[] | null;
+  media: VariantMediaUnassign_variantMediaUnassign_productVariant_product_variants_media[] | null;
 }
 
-export interface VariantImageUnassign_variantImageUnassign_productVariant_product {
+export interface VariantMediaUnassign_variantMediaUnassign_productVariant_product {
   __typename: "Product";
   id: string;
-  defaultVariant: VariantImageUnassign_variantImageUnassign_productVariant_product_defaultVariant | null;
+  defaultVariant: VariantMediaUnassign_variantMediaUnassign_productVariant_product_defaultVariant | null;
-  images: (VariantImageUnassign_variantImageUnassign_productVariant_product_images | null)[] | null;
+  media: (VariantMediaUnassign_variantMediaUnassign_productVariant_product_media | null)[] | null;
   name: string;
-  thumbnail: VariantImageUnassign_variantImageUnassign_productVariant_product_thumbnail | null;
+  thumbnail: VariantMediaUnassign_variantMediaUnassign_productVariant_product_thumbnail | null;
-  channelListings: VariantImageUnassign_variantImageUnassign_productVariant_product_channelListings[] | null;
+  channelListings: VariantMediaUnassign_variantMediaUnassign_productVariant_product_channelListings[] | null;
-  variants: (VariantImageUnassign_variantImageUnassign_productVariant_product_variants | null)[] | null;
+  variants: (VariantMediaUnassign_variantMediaUnassign_productVariant_product_variants | null)[] | null;
 }
 
-export interface VariantImageUnassign_variantImageUnassign_productVariant_channelListings_channel {
+export interface VariantMediaUnassign_variantMediaUnassign_productVariant_channelListings_channel {
   __typename: "Channel";
   id: string;
   name: string;
   currencyCode: string;
 }
 
-export interface VariantImageUnassign_variantImageUnassign_productVariant_channelListings_price {
+export interface VariantMediaUnassign_variantMediaUnassign_productVariant_channelListings_price {
   __typename: "Money";
   amount: number;
   currency: string;
 }
 
-export interface VariantImageUnassign_variantImageUnassign_productVariant_channelListings_costPrice {
+export interface VariantMediaUnassign_variantMediaUnassign_productVariant_channelListings_costPrice {
   __typename: "Money";
   amount: number;
   currency: string;
 }
 
-export interface VariantImageUnassign_variantImageUnassign_productVariant_channelListings {
+export interface VariantMediaUnassign_variantMediaUnassign_productVariant_channelListings {
   __typename: "ProductVariantChannelListing";
-  channel: VariantImageUnassign_variantImageUnassign_productVariant_channelListings_channel;
+  channel: VariantMediaUnassign_variantMediaUnassign_productVariant_channelListings_channel;
-  price: VariantImageUnassign_variantImageUnassign_productVariant_channelListings_price | null;
+  price: VariantMediaUnassign_variantMediaUnassign_productVariant_channelListings_price | null;
-  costPrice: VariantImageUnassign_variantImageUnassign_productVariant_channelListings_costPrice | null;
+  costPrice: VariantMediaUnassign_variantMediaUnassign_productVariant_channelListings_costPrice | null;
 }
 
-export interface VariantImageUnassign_variantImageUnassign_productVariant_stocks_warehouse {
+export interface VariantMediaUnassign_variantMediaUnassign_productVariant_stocks_warehouse {
   __typename: "Warehouse";
   id: string;
   name: string;
 }
 
-export interface VariantImageUnassign_variantImageUnassign_productVariant_stocks {
+export interface VariantMediaUnassign_variantMediaUnassign_productVariant_stocks {
   __typename: "Stock";
   id: string;
   quantity: number;
   quantityAllocated: number;
-  warehouse: VariantImageUnassign_variantImageUnassign_productVariant_stocks_warehouse;
+  warehouse: VariantMediaUnassign_variantMediaUnassign_productVariant_stocks_warehouse;
 }
 
-export interface VariantImageUnassign_variantImageUnassign_productVariant_weight {
+export interface VariantMediaUnassign_variantMediaUnassign_productVariant_weight {
   __typename: "Weight";
   unit: WeightUnitsEnum;
   value: number;
 }
 
-export interface VariantImageUnassign_variantImageUnassign_productVariant {
+export interface VariantMediaUnassign_variantMediaUnassign_productVariant {
   __typename: "ProductVariant";
   id: string;
-  metadata: (VariantImageUnassign_variantImageUnassign_productVariant_metadata | null)[];
+  metadata: (VariantMediaUnassign_variantMediaUnassign_productVariant_metadata | null)[];
-  privateMetadata: (VariantImageUnassign_variantImageUnassign_productVariant_privateMetadata | null)[];
+  privateMetadata: (VariantMediaUnassign_variantMediaUnassign_productVariant_privateMetadata | null)[];
-  selectionAttributes: VariantImageUnassign_variantImageUnassign_productVariant_selectionAttributes[];
+  selectionAttributes: VariantMediaUnassign_variantMediaUnassign_productVariant_selectionAttributes[];
-  nonSelectionAttributes: VariantImageUnassign_variantImageUnassign_productVariant_nonSelectionAttributes[];
+  nonSelectionAttributes: VariantMediaUnassign_variantMediaUnassign_productVariant_nonSelectionAttributes[];
-  images: (VariantImageUnassign_variantImageUnassign_productVariant_images | null)[] | null;
+  media: VariantMediaUnassign_variantMediaUnassign_productVariant_media[] | null;
   name: string;
-  product: VariantImageUnassign_variantImageUnassign_productVariant_product;
+  product: VariantMediaUnassign_variantMediaUnassign_productVariant_product;
-  channelListings: VariantImageUnassign_variantImageUnassign_productVariant_channelListings[] | null;
+  channelListings: VariantMediaUnassign_variantMediaUnassign_productVariant_channelListings[] | null;
   sku: string;
-  stocks: (VariantImageUnassign_variantImageUnassign_productVariant_stocks | null)[] | null;
+  stocks: (VariantMediaUnassign_variantMediaUnassign_productVariant_stocks | null)[] | null;
   trackInventory: boolean;
-  weight: VariantImageUnassign_variantImageUnassign_productVariant_weight | null;
+  weight: VariantMediaUnassign_variantMediaUnassign_productVariant_weight | null;
 }
 
-export interface VariantImageUnassign_variantImageUnassign {
+export interface VariantMediaUnassign_variantMediaUnassign {
-  __typename: "VariantImageUnassign";
+  __typename: "VariantMediaUnassign";
-  errors: VariantImageUnassign_variantImageUnassign_errors[];
+  errors: VariantMediaUnassign_variantMediaUnassign_errors[];
-  productVariant: VariantImageUnassign_variantImageUnassign_productVariant | null;
+  productVariant: VariantMediaUnassign_variantMediaUnassign_productVariant | null;
 }
 
-export interface VariantImageUnassign {
+export interface VariantMediaUnassign {
-  variantImageUnassign: VariantImageUnassign_variantImageUnassign | null;
+  variantMediaUnassign: VariantMediaUnassign_variantMediaUnassign | null;
 }
 
-export interface VariantImageUnassignVariables {
+export interface VariantMediaUnassignVariables {
   variantId: string;
-  imageId: string;
+  mediaId: string;
 }

src/products/types/VariantUpdate.ts

@@ -2,7 +2,7 @@
 /* eslint-disable */
 // This file was automatically generated and should not be edited.
 
-import { StockInput, AttributeValueInput, ProductErrorCode, AttributeInputTypeEnum, AttributeEntityTypeEnum, WeightUnitsEnum, StockErrorCode } from "./../../types/globalTypes";
+import { StockInput, AttributeValueInput, ProductErrorCode, AttributeInputTypeEnum, AttributeEntityTypeEnum, ProductMediaType, WeightUnitsEnum, StockErrorCode } from "./../../types/globalTypes";
 
 // ====================================================
 // GraphQL mutation operation: VariantUpdate
@@ -121,10 +121,12 @@ export interface VariantUpdate_productVariantUpdate_productVariant_nonSelectionA
   values: (VariantUpdate_productVariantUpdate_productVariant_nonSelectionAttributes_values | null)[];
 }
 
-export interface VariantUpdate_productVariantUpdate_productVariant_images {
+export interface VariantUpdate_productVariantUpdate_productVariant_media {
-  __typename: "ProductImage";
+  __typename: "ProductMedia";
   id: string;
   url: string;
+  type: ProductMediaType;
+  oembedData: any;
 }
 
 export interface VariantUpdate_productVariantUpdate_productVariant_product_defaultVariant {
@@ -132,12 +134,14 @@ export interface VariantUpdate_productVariantUpdate_productVariant_product_defau
   id: string;
 }
 
-export interface VariantUpdate_productVariantUpdate_productVariant_product_images {
+export interface VariantUpdate_productVariantUpdate_productVariant_product_media {
-  __typename: "ProductImage";
+  __typename: "ProductMedia";
   id: string;
   alt: string;
   sortOrder: number | null;
   url: string;
+  type: ProductMediaType;
+  oembedData: any;
 }
 
 export interface VariantUpdate_productVariantUpdate_productVariant_product_thumbnail {
@@ -191,10 +195,12 @@ export interface VariantUpdate_productVariantUpdate_productVariant_product_chann
   pricing: VariantUpdate_productVariantUpdate_productVariant_product_channelListings_pricing | null;
 }
 
-export interface VariantUpdate_productVariantUpdate_productVariant_product_variants_images {
+export interface VariantUpdate_productVariantUpdate_productVariant_product_variants_media {
-  __typename: "ProductImage";
+  __typename: "ProductMedia";
   id: string;
   url: string;
+  type: ProductMediaType;
+  oembedData: any;
 }
 
 export interface VariantUpdate_productVariantUpdate_productVariant_product_variants {
@@ -202,14 +208,14 @@ export interface VariantUpdate_productVariantUpdate_productVariant_product_varia
   id: string;
   name: string;
   sku: string;
-  images: (VariantUpdate_productVariantUpdate_productVariant_product_variants_images | null)[] | null;
+  media: VariantUpdate_productVariantUpdate_productVariant_product_variants_media[] | null;
 }
 
 export interface VariantUpdate_productVariantUpdate_productVariant_product {
   __typename: "Product";
   id: string;
   defaultVariant: VariantUpdate_productVariantUpdate_productVariant_product_defaultVariant | null;
-  images: (VariantUpdate_productVariantUpdate_productVariant_product_images | null)[] | null;
+  media: (VariantUpdate_productVariantUpdate_productVariant_product_media | null)[] | null;
   name: string;
   thumbnail: VariantUpdate_productVariantUpdate_productVariant_product_thumbnail | null;
   channelListings: VariantUpdate_productVariantUpdate_productVariant_product_channelListings[] | null;
@@ -269,7 +275,7 @@ export interface VariantUpdate_productVariantUpdate_productVariant {
   privateMetadata: (VariantUpdate_productVariantUpdate_productVariant_privateMetadata | null)[];
   selectionAttributes: VariantUpdate_productVariantUpdate_productVariant_selectionAttributes[];
   nonSelectionAttributes: VariantUpdate_productVariantUpdate_productVariant_nonSelectionAttributes[];
-  images: (VariantUpdate_productVariantUpdate_productVariant_images | null)[] | null;
+  media: VariantUpdate_productVariantUpdate_productVariant_media[] | null;
   name: string;
   product: VariantUpdate_productVariantUpdate_productVariant_product;
   channelListings: VariantUpdate_productVariantUpdate_productVariant_channelListings[] | null;
@@ -398,10 +404,12 @@ export interface VariantUpdate_productVariantStocksUpdate_productVariant_nonSele
   values: (VariantUpdate_productVariantStocksUpdate_productVariant_nonSelectionAttributes_values | null)[];
 }
 
-export interface VariantUpdate_productVariantStocksUpdate_productVariant_images {
+export interface VariantUpdate_productVariantStocksUpdate_productVariant_media {
-  __typename: "ProductImage";
+  __typename: "ProductMedia";
   id: string;
   url: string;
+  type: ProductMediaType;
+  oembedData: any;
 }
 
 export interface VariantUpdate_productVariantStocksUpdate_productVariant_product_defaultVariant {
@@ -409,12 +417,14 @@ export interface VariantUpdate_productVariantStocksUpdate_productVariant_product
   id: string;
 }
 
-export interface VariantUpdate_productVariantStocksUpdate_productVariant_product_images {
+export interface VariantUpdate_productVariantStocksUpdate_productVariant_product_media {
-  __typename: "ProductImage";
+  __typename: "ProductMedia";
   id: string;
   alt: string;
   sortOrder: number | null;
   url: string;
+  type: ProductMediaType;
+  oembedData: any;
 }
 
 export interface VariantUpdate_productVariantStocksUpdate_productVariant_product_thumbnail {
@@ -468,10 +478,12 @@ export interface VariantUpdate_productVariantStocksUpdate_productVariant_product
   pricing: VariantUpdate_productVariantStocksUpdate_productVariant_product_channelListings_pricing | null;
 }
 
-export interface VariantUpdate_productVariantStocksUpdate_productVariant_product_variants_images {
+export interface VariantUpdate_productVariantStocksUpdate_productVariant_product_variants_media {
-  __typename: "ProductImage";
+  __typename: "ProductMedia";
   id: string;
   url: string;
+  type: ProductMediaType;
+  oembedData: any;
 }
 
 export interface VariantUpdate_productVariantStocksUpdate_productVariant_product_variants {
@@ -479,14 +491,14 @@ export interface VariantUpdate_productVariantStocksUpdate_productVariant_product
   id: string;
   name: string;
   sku: string;
-  images: (VariantUpdate_productVariantStocksUpdate_productVariant_product_variants_images | null)[] | null;
+  media: VariantUpdate_productVariantStocksUpdate_productVariant_product_variants_media[] | null;
 }
 
 export interface VariantUpdate_productVariantStocksUpdate_productVariant_product {
   __typename: "Product";
   id: string;
   defaultVariant: VariantUpdate_productVariantStocksUpdate_productVariant_product_defaultVariant | null;
-  images: (VariantUpdate_productVariantStocksUpdate_productVariant_product_images | null)[] | null;
+  media: (VariantUpdate_productVariantStocksUpdate_productVariant_product_media | null)[] | null;
   name: string;
   thumbnail: VariantUpdate_productVariantStocksUpdate_productVariant_product_thumbnail | null;
   channelListings: VariantUpdate_productVariantStocksUpdate_productVariant_product_channelListings[] | null;
@@ -546,7 +558,7 @@ export interface VariantUpdate_productVariantStocksUpdate_productVariant {
   privateMetadata: (VariantUpdate_productVariantStocksUpdate_productVariant_privateMetadata | null)[];
   selectionAttributes: VariantUpdate_productVariantStocksUpdate_productVariant_selectionAttributes[];
   nonSelectionAttributes: VariantUpdate_productVariantStocksUpdate_productVariant_nonSelectionAttributes[];
-  images: (VariantUpdate_productVariantStocksUpdate_productVariant_images | null)[] | null;
+  media: VariantUpdate_productVariantStocksUpdate_productVariant_media[] | null;
   name: string;
   product: VariantUpdate_productVariantStocksUpdate_productVariant_product;
   channelListings: VariantUpdate_productVariantStocksUpdate_productVariant_channelListings[] | null;

src/products/views/ProductImage.tsx

@@ -7,12 +7,12 @@ import { commonMessages } from "@saleor/intl";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
-import ProductImagePage from "../components/ProductImagePage";
+import ProductMediaPage from "../components/ProductMediaPage";
 import {
-  useProductImageDeleteMutation,
+  useProductMediaDeleteMutation,
-  useProductImageUpdateMutation
+  useProductMediaUpdateMutation
 } from "../mutations";
-import { useProductImageQuery } from "../queries";
+import { useProductMediaQuery } from "../queries";
 import {
   productImageUrl,
   ProductImageUrlQueryParams,
@@ -20,14 +20,14 @@ import {
   productUrl
 } from "../urls";
 
-interface ProductImageProps {
+interface ProductMediaProps {
-  imageId: string;
+  mediaId: string;
   productId: string;
   params: ProductImageUrlQueryParams;
 }
 
-export const ProductImage: React.FC<ProductImageProps> = ({
+export const ProductImage: React.FC<ProductMediaProps> = ({
-  imageId,
+  mediaId,
   productId,
   params
 }) => {
@@ -37,17 +37,17 @@ export const ProductImage: React.FC<ProductImageProps> = ({
 
   const handleBack = () => navigate(productUrl(productId));
 
-  const { data, loading } = useProductImageQuery({
+  const { data, loading } = useProductMediaQuery({
     displayLoader: true,
     variables: {
-      imageId,
+      mediaId,
       productId
     }
   });
 
-  const [updateImage, updateResult] = useProductImageUpdateMutation({
+  const [updateImage, updateResult] = useProductMediaUpdateMutation({
     onCompleted: data => {
-      if (data.productImageUpdate.errors.length === 0) {
+      if (data.productMediaUpdate.errors.length === 0) {
         notify({
           status: "success",
           text: intl.formatMessage(commonMessages.savedChanges)
@@ -56,7 +56,7 @@ export const ProductImage: React.FC<ProductImageProps> = ({
     }
   });
 
-  const [deleteImage, deleteResult] = useProductImageDeleteMutation({
+  const [deleteImage, deleteResult] = useProductMediaDeleteMutation({
     onCompleted: handleBack
   });
 
@@ -66,30 +66,30 @@ export const ProductImage: React.FC<ProductImageProps> = ({
     return <NotFoundPage onBack={() => navigate(productListUrl())} />;
   }
 
-  const handleDelete = () => deleteImage({ variables: { id: imageId } });
+  const handleDelete = () => deleteImage({ variables: { id: mediaId } });
   const handleImageClick = (id: string) => () =>
     navigate(productImageUrl(productId, id));
   const handleUpdate = (formData: { description: string }) => {
     updateImage({
       variables: {
         alt: formData.description,
-        id: imageId
+        id: mediaId
       }
     });
   };
-  const image = data?.product?.mainImage;
+  const mediaObj = data?.product?.mainImage;
 
   return (
     <>
-      <ProductImagePage
+      <ProductMediaPage
         disabled={loading}
         product={data?.product?.name}
-        image={image || null}
+        mediaObj={mediaObj || null}
-        images={data?.product?.images}
+        media={data?.product?.media}
         onBack={handleBack}
         onDelete={() =>
           navigate(
-            productImageUrl(productId, imageId, {
+            productImageUrl(productId, mediaId, {
               action: "remove"
             })
           )
@@ -99,7 +99,7 @@ export const ProductImage: React.FC<ProductImageProps> = ({
         saveButtonBarState={updateResult.status}
       />
       <ActionDialog
-        onClose={() => navigate(productImageUrl(productId, imageId), true)}
+        onClose={() => navigate(productImageUrl(productId, mediaId), true)}
         onConfirm={handleDelete}
         open={params.action === "remove"}
         title={intl.formatMessage({

src/products/views/ProductUpdate/ProductUpdate.tsx

@@ -27,9 +27,9 @@ import { commonMessages } from "@saleor/intl";
 import {
   useProductChannelListingUpdate,
   useProductDeleteMutation,
-  useProductImageCreateMutation,
+  useProductMediaCreateMutation,
-  useProductImageDeleteMutation,
+  useProductMediaDeleteMutation,
-  useProductImagesReorder,
+  useProductMediaReorder,
   useProductUpdateMutation,
   useProductVariantBulkDeleteMutation,
   useProductVariantChannelListingUpdate,
@@ -41,6 +41,7 @@ import useCategorySearch from "@saleor/searches/useCategorySearch";
 import useCollectionSearch from "@saleor/searches/useCollectionSearch";
 import usePageSearch from "@saleor/searches/usePageSearch";
 import useProductSearch from "@saleor/searches/useProductSearch";
+import { getProductErrorMessage } from "@saleor/utils/errors";
 import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
 import createMetadataUpdateHandler from "@saleor/utils/handlers/metadataUpdateHandler";
 import {
@@ -55,7 +56,7 @@ import { FormattedMessage, useIntl } from "react-intl";
 import { getMutationState } from "../../../misc";
 import ProductUpdatePage from "../../components/ProductUpdatePage";
 import { useProductDetails } from "../../queries";
-import { ProductImageCreateVariables } from "../../types/ProductImageCreate";
+import { ProductMediaCreateVariables } from "../../types/ProductMediaCreate";
 import { ProductUpdate as ProductUpdateMutationResult } from "../../types/ProductUpdate";
 import {
   productImageUrl,
@@ -159,7 +160,7 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = ({ id, params }) => {
   const [
     reorderProductImages,
     reorderProductImagesOpts
-  ] = useProductImagesReorder({});
+  ] = useProductMediaReorder({});
 
   const [deleteProduct, deleteProductOpts] = useProductDeleteMutation({
     onCompleted: () => {
@@ -176,10 +177,10 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = ({ id, params }) => {
   const [
     createProductImage,
     createProductImageOpts
-  ] = useProductImageCreateMutation({
+  ] = useProductMediaCreateMutation({
     onCompleted: data => {
-      const imageError = data.productImageCreate.errors.find(
+      const imageError = data.productMediaCreate.errors.find(
-        error => error.field === ("image" as keyof ProductImageCreateVariables)
+        error => error.field === ("image" as keyof ProductMediaCreateVariables)
       );
       if (imageError) {
         notify({
@@ -190,7 +191,7 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = ({ id, params }) => {
     }
   });
 
-  const [deleteProductImage] = useProductImageDeleteMutation({
+  const [deleteProductImage] = useProductMediaDeleteMutation({
     onCompleted: () =>
       notify({
         status: "success",
@@ -264,6 +265,41 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = ({ id, params }) => {
     value: listing.channel.id
   }));
 
+  const [
+    createProductMedia,
+    createProductMediaOpts
+  ] = useProductMediaCreateMutation({
+    onCompleted: data => {
+      const errors = data.productMediaCreate.errors;
+
+      if (errors.length) {
+        errors.map(error =>
+          notify({
+            status: "error",
+            text: getProductErrorMessage(error, intl)
+          })
+        );
+      } else {
+        notify({
+          status: "success",
+          text: intl.formatMessage(commonMessages.savedChanges)
+        });
+      }
+    }
+  });
+
+  const handleMediaUrlUpload = (mediaUrl: string) => {
+    const variables = {
+      alt: "",
+      mediaUrl,
+      product: product.id
+    };
+
+    createProductMedia({
+      variables
+    });
+  };
+
   const [
     deleteAttributeValue,
     deleteAttributeValueOpts
@@ -332,6 +368,7 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = ({ id, params }) => {
     updateVariantChannelsOpts.loading ||
     productVariantCreateOpts.loading ||
     deleteAttributeValueOpts.loading ||
+    createProductMediaOpts.loading ||
     loading;
 
   const formTransitionState = getMutationState(
@@ -339,7 +376,8 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = ({ id, params }) => {
     updateProductOpts.loading || updateSimpleProductOpts.loading,
     updateProductOpts.data?.productUpdate.errors,
     updateSimpleProductOpts.data?.productUpdate.errors,
-    updateSimpleProductOpts.data?.productVariantUpdate.errors
+    updateSimpleProductOpts.data?.productVariantUpdate.errors,
+    createProductMediaOpts.data?.productMediaCreate.errors
   );
 
   const categories = (searchCategoriesOpts?.data?.search?.edges || []).map(
@@ -353,6 +391,7 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = ({ id, params }) => {
     ...(updateSimpleProductOpts.data?.productUpdate.errors || []),
     ...(productVariantCreateOpts.data?.productVariantCreate.errors || [])
   ];
+
   const onSetDefaultVariant = useOnSetDefaultVariant(
     product ? product.id : null,
     null
@@ -421,7 +460,7 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = ({ id, params }) => {
         fetchCategories={searchCategories}
         fetchCollections={searchCollections}
         saveButtonBarState={formTransitionState}
-        images={data?.product?.images}
+        media={data?.product?.media}
         header={product?.name}
         placeholderImage={placeholderImg}
         product={product}
@@ -433,6 +472,7 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = ({ id, params }) => {
         onBack={handleBack}
         onDelete={() => openModal("remove")}
         onImageReorder={handleImageReorder}
+        onMediaUrlUpload={handleMediaUrlUpload}
         onSubmit={handleSubmit}
         onWarehouseConfigure={() => navigate(warehouseAddPath)}
         onVariantAdd={handleVariantAdd}

src/products/views/ProductUpdate/handlers.ts

@@ -33,8 +33,8 @@ import {
   ProductDetails_product,
   ProductDetails_product_variants
 } from "@saleor/products/types/ProductDetails";
-import { ProductImageCreateVariables } from "@saleor/products/types/ProductImageCreate";
+import { ProductMediaCreateVariables } from "@saleor/products/types/ProductMediaCreate";
-import { ProductImageReorderVariables } from "@saleor/products/types/ProductImageReorder";
+import { ProductMediaReorderVariables } from "@saleor/products/types/ProductMediaReorder";
 import {
   ProductUpdate,
   ProductUpdateVariables
@@ -271,7 +271,7 @@ export function createUpdateHandler(
 
 export function createImageUploadHandler(
   id: string,
-  createProductImage: (variables: ProductImageCreateVariables) => void
+  createProductImage: (variables: ProductMediaCreateVariables) => void
 ) {
   return (file: File) =>
     createProductImage({
@@ -283,13 +283,13 @@ export function createImageUploadHandler(
 
 export function createImageReorderHandler(
   product: ProductDetails_product,
-  reorderProductImages: (variables: ProductImageReorderVariables) => void
+  reorderProductImages: (variables: ProductMediaReorderVariables) => void
 ) {
   return ({ newIndex, oldIndex }: ReorderEvent) => {
-    let ids = product.images.map(image => image.id);
+    let ids = product.media.map(image => image.id);
     ids = arrayMove(ids, oldIndex, newIndex);
     reorderProductImages({
-      imagesIds: ids,
+      mediaIds: ids,
       productId: product.id
     });
   };

src/products/views/ProductVariant.tsx

@@ -43,8 +43,8 @@ import { ProductVariantUpdateSubmitData } from "../components/ProductVariantPage
 import {
   useProductVariantReorderMutation,
   useVariantDeleteMutation,
-  useVariantImageAssignMutation,
+  useVariantMediaAssignMutation,
-  useVariantImageUnassignMutation,
+  useVariantMediaUnassignMutation,
   useVariantUpdateMutation
 } from "../mutations";
 import { useProductVariantQuery } from "../queries";
@@ -115,8 +115,8 @@ export const ProductVariant: React.FC<ProductUpdateProps> = ({
 
   const [uploadFile, uploadFileOpts] = useFileUploadMutation({});
 
-  const [assignImage, assignImageOpts] = useVariantImageAssignMutation({});
+  const [assignMedia, assignMediaOpts] = useVariantMediaAssignMutation({});
-  const [unassignImage, unassignImageOpts] = useVariantImageUnassignMutation(
+  const [unassignMedia, unassignMediaOpts] = useVariantMediaUnassignMutation(
     {}
   );
   const [deleteVariant, deleteVariantOpts] = useVariantDeleteMutation({
@@ -130,6 +130,7 @@ export const ProductVariant: React.FC<ProductUpdateProps> = ({
       navigate(productUrl(productId));
     }
   });
+
   const [updateVariant, updateVariantOpts] = useVariantUpdateMutation({
     onCompleted: data => {
       if (data.productVariantUpdate.errors.length === 0) {
@@ -198,24 +199,24 @@ export const ProductVariant: React.FC<ProductUpdateProps> = ({
     uploadFileOpts.loading ||
     deleteVariantOpts.loading ||
     updateVariantOpts.loading ||
-    assignImageOpts.loading ||
+    assignMediaOpts.loading ||
-    unassignImageOpts.loading ||
+    unassignMediaOpts.loading ||
     reorderProductVariantsOpts.loading ||
     deleteAttributeValueOpts.loading;
 
-  const handleImageSelect = (id: string) => () => {
+  const handleMediaSelect = (id: string) => () => {
     if (variant) {
-      if (variant?.images?.map(image => image.id).indexOf(id) !== -1) {
+      if (variant?.media?.map(media_obj => media_obj.id).indexOf(id) !== -1) {
-        unassignImage({
+        unassignMedia({
           variables: {
-            imageId: id,
+            mediaId: id,
             variantId: variant.id
           }
         });
       } else {
-        assignImage({
+        assignMedia({
           variables: {
-            imageId: id,
+            mediaId: id,
             variantId: variant.id
           }
         });
@@ -331,7 +332,7 @@ export const ProductVariant: React.FC<ProductUpdateProps> = ({
         onAdd={() => navigate(productVariantAddUrl(productId))}
         onBack={handleBack}
         onDelete={() => openModal("remove")}
-        onImageSelect={handleImageSelect}
+        onMediaSelect={handleMediaSelect}
         onSubmit={async data => {
           await handleSubmit(data);
           await handleSubmitChannels(data, variant);

src/storybook/stories/collections/CollectionDetailsPage.tsx

@@ -41,7 +41,7 @@ const props: Omit<CollectionDetailsPageProps, "classes"> = {
   selectedChannelId: "123"
 };
 
-storiesOf("Views / Collections / Collection details", module)
+storiesOf("Views / Collections / Collection detailsCollection details", module)
   .addDecorator(Decorator)
   .add("default", () => <CollectionDetailsPage {...props} />)
   .add("loading", () => (

src/storybook/stories/products/ProductImagePage.tsx

@@ -1,23 +1,29 @@
 import placeholder from "@assets/images/placeholder1080x1080.png";
+import { ProductMediaType } from "@saleor/types/globalTypes";
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
-import ProductImagePage from "../../../products/components/ProductImagePage";
+import ProductMediaPage from "../../../products/components/ProductMediaPage";
 import Decorator from "../../Decorator";
 
-const image = { alt: "Lorem ipsum", id: "", url: placeholder };
+const mediaObj = {
-const images = (Array(8) as any)
+  alt: "Lorem ipsum",
-  .fill({ id: "img", url: placeholder })
+  id: "",
+  type: ProductMediaType.IMAGE,
+  url: placeholder
+};
+const media = (Array(8) as any)
+  .fill({ id: "img", url: placeholder, oembedData: "{}" })
   .map((image, imageIndex) => ({ ...image, id: image.id + imageIndex }));
 
 storiesOf("Views / Products / Product image details", module)
   .addDecorator(Decorator)
   .add("when loaded data", () => (
-    <ProductImagePage
+    <ProductMediaPage
       product="Example product"
       disabled={false}
-      image={image}
+      mediaObj={mediaObj}
-      images={images}
+      media={media}
       onBack={() => undefined}
       onDelete={undefined}
       onRowClick={() => undefined}
@@ -26,7 +32,7 @@ storiesOf("Views / Products / Product image details", module)
     />
   ))
   .add("when loading data", () => (
-    <ProductImagePage
+    <ProductMediaPage
       product="Example product"
       disabled={true}
       onBack={() => undefined}

src/storybook/stories/products/ProductUpdatePage.tsx

@@ -41,7 +41,7 @@ const props: ProductUpdatePageProps = {
   fetchMoreCollections: fetchMoreProps,
   hasChannelChanged: false,
   header: product.name,
-  images: product.images,
+  media: product.media,
   onAssignReferencesClick: () => undefined,
   onBack: () => undefined,
   onChannelsChange: () => undefined,
@@ -49,6 +49,7 @@ const props: ProductUpdatePageProps = {
   onDelete: () => undefined,
   onImageDelete: () => undefined,
   onImageUpload: () => undefined,
+  onMediaUrlUpload: () => undefined,
   onSetDefaultVariant: () => undefined,
   onSubmit: () => undefined,
   onVariantAdd: () => undefined,
@@ -72,7 +73,7 @@ storiesOf("Views / Products / Product edit", module)
   .addDecorator(Decorator)
   .add("when data is fully loaded", () => <ProductUpdatePage {...props} />)
   .add("when product has no images", () => (
-    <ProductUpdatePage {...props} images={[]} />
+    <ProductUpdatePage {...props} media={[]} />
   ))
   .add("when product has no variants", () => (
     <ProductUpdatePage
@@ -92,7 +93,7 @@ storiesOf("Views / Products / Product edit", module)
       variants={undefined}
       product={undefined}
       collections={undefined}
-      images={undefined}
+      media={undefined}
     />
   ))
   .add("no variants", () => (

src/storybook/stories/products/ProductVariantImageSelectDialog.tsx

@@ -1,25 +1,25 @@
 import placeholderImage from "@assets/images/placeholder255x255.png";
+import Decorator from "@saleor/storybook/Decorator";
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
-import ProductVariantImageSelectDialog from "../../../products/components/ProductVariantImageSelectDialog";
+import ProductVariantMediaSelectDialog from "../../../products/components/ProductVariantImageSelectDialog";
 import {
-  variantImages as variantImagesFixture,
+  variantMedia as variantImagesFixture,
   variantProductImages as variantProductImagesFixture
 } from "../../../products/fixtures";
 
 const variantImages = variantImagesFixture(placeholderImage);
 const variantProductImages = variantProductImagesFixture(placeholderImage);
 
-storiesOf("Products / ProductVariantImageSelectDialog", module).add(
+storiesOf("Products / ProductVariantImageSelectDialog", module)
-  "default",
+  .addDecorator(Decorator)
-  () => (
+  .add("default", () => (
-    <ProductVariantImageSelectDialog
+    <ProductVariantMediaSelectDialog
-      images={variantProductImages}
+      media={variantProductImages}
-      selectedImages={variantImages.map(image => image.id)}
+      selectedMedia={variantImages.map(image => image.id)}
       onClose={() => undefined}
-      onImageSelect={() => undefined}
+      onMediaSelect={() => undefined}
       open={true}
     />
-  )
+  ));
-);

src/storybook/stories/products/ProductVariantPage.tsx

@@ -26,7 +26,7 @@ storiesOf("Views / Products / Product variant details", module)
       onBack={() => undefined}
       onDelete={undefined}
       onSetDefaultVariant={() => undefined}
-      onImageSelect={() => undefined}
+      onMediaSelect={() => undefined}
       onSubmit={() => undefined}
       onVariantClick={() => undefined}
       onVariantReorder={() => undefined}
@@ -52,7 +52,7 @@ storiesOf("Views / Products / Product variant details", module)
       onAdd={() => undefined}
       onDelete={undefined}
       onSetDefaultVariant={() => undefined}
-      onImageSelect={() => undefined}
+      onMediaSelect={() => undefined}
       onSubmit={() => undefined}
       onVariantClick={() => undefined}
       onVariantReorder={() => undefined}
@@ -77,7 +77,7 @@ storiesOf("Views / Products / Product variant details", module)
       onBack={() => undefined}
       onDelete={undefined}
       onSetDefaultVariant={() => undefined}
-      onImageSelect={() => undefined}
+      onMediaSelect={() => undefined}
       onSubmit={() => undefined}
       onVariantClick={() => undefined}
       onVariantReorder={() => undefined}
@@ -100,7 +100,7 @@ storiesOf("Views / Products / Product variant details", module)
       onBack={() => undefined}
       onDelete={undefined}
       onSetDefaultVariant={() => undefined}
-      onImageSelect={() => undefined}
+      onMediaSelect={() => undefined}
       onSubmit={() => undefined}
       onVariantClick={() => undefined}
       onVariantReorder={() => undefined}

src/types/globalTypes.ts

@@ -795,6 +795,7 @@ export enum ProductErrorCode {
   PRODUCT_WITHOUT_CATEGORY = "PRODUCT_WITHOUT_CATEGORY",
   REQUIRED = "REQUIRED",
   UNIQUE = "UNIQUE",
+  UNSUPPORTED_MEDIA_PROVIDER = "UNSUPPORTED_MEDIA_PROVIDER",
   VARIANT_NO_DIGITAL_CONTENT = "VARIANT_NO_DIGITAL_CONTENT",
 }
 
@@ -813,6 +814,11 @@ export enum ProductFieldEnum {
   VISIBLE = "VISIBLE",
 }
 
+export enum ProductMediaType {
+  IMAGE = "IMAGE",
+  VIDEO = "VIDEO",
+}
+
 export enum ProductOrderField {
   COLLECTION = "COLLECTION",
   DATE = "DATE",
@@ -1572,10 +1578,10 @@ export interface ProductChannelListingUpdateInput {
 }
 
 export interface ProductCreateInput {
-  attributes?: (AttributeValueInput | null)[] | null;
+  attributes?: AttributeValueInput[] | null;
   category?: string | null;
   chargeTaxes?: boolean | null;
-  collections?: (string | null)[] | null;
+  collections?: string[] | null;
   description?: any | null;
   name?: string | null;
   slug?: string | null;
@@ -1604,10 +1610,10 @@ export interface ProductFilterInput {
 }
 
 export interface ProductInput {
-  attributes?: (AttributeValueInput | null)[] | null;
+  attributes?: AttributeValueInput[] | null;
   category?: string | null;
   chargeTaxes?: boolean | null;
-  collections?: (string | null)[] | null;
+  collections?: string[] | null;
   description?: any | null;
   name?: string | null;
   slug?: string | null;

src/utils/errors/product.ts

@@ -41,6 +41,9 @@ const messages = defineMessages({
     defaultMessage: "SKUs must be unique",
     description: "bulk variant create error"
   },
+  unsupportedMediaProvider: {
+    defaultMessage: "Unsupported media provider or incorrect URL"
+  },
   variantNoDigitalContent: {
     defaultMessage: "This variant does not have any digital content"
   },
@@ -74,6 +77,8 @@ function getProductErrorMessage(
         return intl.formatMessage(commonMessages.requiredField);
       case ProductErrorCode.VARIANT_NO_DIGITAL_CONTENT:
         return intl.formatMessage(messages.variantNoDigitalContent);
+      case ProductErrorCode.UNSUPPORTED_MEDIA_PROVIDER:
+        return intl.formatMessage(messages.unsupportedMediaProvider);
       case ProductErrorCode.INVALID:
         if (err.field === "price") {
           return intl.formatMessage(messages.priceInvalid);