Shopping: Support drag & drop from library

packages/story-editor/src/components/library/panes/shared/libraryMoveable.js

@@ -43,6 +43,7 @@ import { useStory, useCanvas } from '../../../../app';
 import objectWithout from '../../../../utils/objectWithout';
 import { noop } from '../../../../utils/noop';
 import usePerformanceTracking from '../../../../utils/usePerformanceTracking';
+import { PRODUCT_WIDTH, PRODUCT_HEIGHT } from '../shopping/constants';
 
 const TargetBox = styled.div`
   position: absolute;
@@ -126,6 +127,10 @@ function LibraryMoveable({
   };
 
   const resetMoveable = useCallback(() => {
+    if (!targetBoxRef.current || !cloneRef.current) {
+      return;
+    }
+
     targetBoxRef.current.style.transform = null;
     cloneRef.current.style.transform = null;
     // Hide the clone, too.
@@ -261,6 +266,14 @@ function LibraryMoveable({
           offsetX: editorToDataX(x - pageX, pageSize.width),
           offsetY: editorToDataY(y - pageY, pageSize.height),
         });
+      } else if (type === 'product') {
+        insertElement(type, {
+          ...elementProps,
+          width: PRODUCT_WIDTH,
+          height: PRODUCT_HEIGHT,
+          x: editorToDataX(x - pageX, pageSize.width),
+          y: editorToDataY(y - pageY, pageSize.height),
+        });
       } else {
         insertElement(type, {
           ...elementProps,

packages/story-editor/src/components/library/panes/shopping/constants.js

@@ -0,0 +1,17 @@
+/*
+ * Copyright 2022 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export const PRODUCT_WIDTH = 25;
+export const PRODUCT_HEIGHT = 25;

packages/story-editor/src/components/library/panes/shopping/karma/shopping.karma.js

@@ -240,5 +240,28 @@ describe('Shopping integration', () => {
       expect(tooltip).toHaveTextContent(tooltipText);
       await fixture.snapshot('Product pill tooltip on hover');
     });
+
+    it('add product via dragging', async () => {
+      expect(isStoryEmpty()).toEqual(true);
+      await searchProduct('hoodie');
+
+      // Only background initially
+      const bgFrame = fixture.editor.canvas.framesLayer.frames[0].node;
+
+      const product = fixture.querySelector(
+        '[aria-label="Products list"] [role="listitem"] img'
+      );
+
+      await fixture.events.mouse.seq(({ moveRel, down, up }) => [
+        moveRel(product, 10, 10),
+        down(),
+        /* The steps give time for Moveable to react and display a clone to drag */
+        moveRel(bgFrame, 50, 50, { steps: 20 }),
+        up(),
+      ]);
+
+      // Now background + 1 extra element
+      expect(fixture.editor.canvas.framesLayer.frames.length).toBe(2);
+    });
   });
 });

packages/story-editor/src/components/library/panes/shopping/product.js

@@ -46,7 +46,7 @@ function Product({ product, onClick, onFocus, isOnPage, canAddMore }) {
         onClick={onClick}
         onFocus={onFocus}
       />
-      <ProductImage product={product} />
+      <ProductImage product={product} draggable={!isOnPage && canAddMore} />
       <StyledDescription>
         <StyledTitle isBold>{product?.productTitle}</StyledTitle>
         <ProductPrice

packages/story-editor/src/components/library/panes/shopping/productImage.js

@@ -19,6 +19,12 @@
 import styled, { css } from 'styled-components';
 import PropTypes from 'prop-types';
 
+/**
+ * Internal dependencies
+ */
+import LibraryMoveable from '../shared/libraryMoveable';
+import { PRODUCT_WIDTH, PRODUCT_HEIGHT } from './constants';
+
 const imgPlaceholder = css`
   display: block;
   margin-right: 10px;
@@ -32,11 +38,24 @@ const StyledImgPlaceHolder = styled.div`
   ${imgPlaceholder}
 `;
 
+const ProductImageWrap = styled.div`
+  position: relative;
+`;
+
 const StyledImage = styled.img`
   ${imgPlaceholder}
   object-fit: cover;
 `;
 
+const StyledImageClone = styled.img`
+  opacity: 0;
+  position: absolute;
+  object-fit: cover;
+  border-radius: 4px;
+  width: ${PRODUCT_WIDTH}px;
+  height: ${PRODUCT_HEIGHT}px;
+`;
+
 function ProductImage({ product }) {
   const imageSrc = product?.productImages[0]?.url || '';
   return imageSrc ? (
@@ -45,7 +64,7 @@ function ProductImage({ product }) {
       src={imageSrc}
       loading="lazy"
       decoding="async"
-      draggable={false}
+      draggable={false} // dragging is handled by `DraggableProductImage`
       crossOrigin="anonymous"
     />
   ) : (
@@ -57,4 +76,31 @@ ProductImage.propTypes = {
   product: PropTypes.object.isRequired,
 };
 
-export default ProductImage;
+function DraggableProductImage({ product, draggable }) {
+  const src = product?.productImages[0]?.url || '';
+  return (
+    <ProductImageWrap>
+      <ProductImage product={product} />
+      {draggable && src && (
+        <LibraryMoveable
+          type="product"
+          elementProps={{ product }}
+          cloneElement={StyledImageClone}
+          cloneProps={{
+            loading: 'lazy',
+            decoding: 'async',
+            crossOrigin: 'anonymous',
+            src,
+          }}
+        />
+      )}
+    </ProductImageWrap>
+  );
+}
+
+DraggableProductImage.propTypes = {
+  product: PropTypes.object.isRequired,
+  draggable: PropTypes.bool,
+};
+
+export default DraggableProductImage;

packages/story-editor/src/components/library/panes/shopping/shoppingPane.js

@@ -48,6 +48,7 @@ import useLibrary from '../../useLibrary';
 import paneId from './paneId';
 import ProductList from './productList';
 import ProductSort from './productSort';
+import { PRODUCT_WIDTH, PRODUCT_HEIGHT } from './constants';
 
 const LoadingContainer = styled.div`
   display: flex;
@@ -200,8 +201,8 @@ function ShoppingPane(props) {
   const insertProduct = useCallback(
     (product) => {
       insertElement(ELEMENT_TYPES.PRODUCT, {
-        width: 25,
-        height: 25,
+        width: PRODUCT_WIDTH,
+        height: PRODUCT_HEIGHT,
         product,
       });