added close button & other improvements

blocks/product-details/product-details.js

@@ -219,7 +219,6 @@ export default async function decorate(block) {
               desktop: false,
             },
             gap: 'small',
-            zoomType: 'zoom',
           },
           slots: {
             Actions: (ctx) => {
@@ -252,6 +251,7 @@ export default async function decorate(block) {
               });
             },
           },
+          zoomType: 'zoom',
           useACDL: true,
         })(block);
       } catch (e) {

package.json

@@ -34,7 +34,7 @@
   "dependencies": {
     "@adobe/magento-storefront-event-collector": "^1.8.0",
     "@adobe/magento-storefront-events-sdk": "^1.8.0",
-    "@dropins/storefront-pdp": "^0.4.0-beta1",
+    "@dropins/storefront-pdp": "0.4.0-beta2",
     "@dropins/tools": "^0.25.0"
   }
 }

scripts/__dropins__/storefront-pdp/api/fetch-graphql/fetch-graphql.d.ts

@@ -1,3 +1,18 @@
+/**
+ * ADOBE CONFIDENTIAL
+ * __________________
+ * Copyright 2023 Adobe
+ * All Rights Reserved.
+ * __________________
+ * NOTICE: All information contained herein is, and remains
+ * the property of Adobe and its suppliers, if any. The intellectual
+ * and technical concepts contained herein are proprietary to Adobe
+ * and its suppliers and are protected by all applicable intellectual
+ * property laws, including trade secret and copyright laws.
+ * Dissemination of this information or reproduction of this material
+ * is strictly forbidden unless prior written permission is obtained
+ * from Adobe.
+ */
 export declare const setEndpoint: (endpoint: string) => void, setFetchGraphQlHeader: (key: string, value: string | null) => void, removeFetchGraphQlHeader: (key: string) => void, setFetchGraphQlHeaders: (header: import('@adobe/fetch-graphql').Header) => void, fetchGraphQl: <T = any>(query: string, options?: import('@adobe/fetch-graphql').FetchOptions | undefined) => Promise<{
     errors?: import('@adobe/fetch-graphql').FetchQueryError | undefined;
     data: T;

scripts/__dropins__/storefront-pdp/api/fetch-graphql/index.d.ts

@@ -1,2 +1,17 @@
+/**
+ * ADOBE CONFIDENTIAL
+ * __________________
+ * Copyright 2023 Adobe
+ * All Rights Reserved.
+ * __________________
+ * NOTICE: All information contained herein is, and remains
+ * the property of Adobe and its suppliers, if any. The intellectual
+ * and technical concepts contained herein are proprietary to Adobe
+ * and its suppliers and are protected by all applicable intellectual
+ * property laws, including trade secret and copyright laws.
+ * Dissemination of this information or reproduction of this material
+ * is strictly forbidden unless prior written permission is obtained
+ * from Adobe.
+ */
 export * from './fetch-graphql';
 //# sourceMappingURL=index.d.ts.map

scripts/__dropins__/storefront-pdp/api/getProductData/graphql/getProductData.graphql.d.ts

@@ -1,2 +1,17 @@
+/**
+ * ADOBE CONFIDENTIAL
+ * __________________
+ * Copyright 2023 Adobe
+ * All Rights Reserved.
+ * __________________
+ * NOTICE: All information contained herein is, and remains
+ * the property of Adobe and its suppliers, if any. The intellectual
+ * and technical concepts contained herein are proprietary to Adobe
+ * and its suppliers and are protected by all applicable intellectual
+ * property laws, including trade secret and copyright laws.
+ * Dissemination of this information or reproduction of this material
+ * is strictly forbidden unless prior written permission is obtained
+ * from Adobe.
+ */
 export declare const GET_PRODUCT_DATA: string;
 //# sourceMappingURL=getProductData.graphql.d.ts.map

scripts/__dropins__/storefront-pdp/api/getProductData/index.d.ts

@@ -1,2 +1,17 @@
+/**
+ * ADOBE CONFIDENTIAL
+ * __________________
+ * Copyright 2023 Adobe
+ * All Rights Reserved.
+ * __________________
+ * NOTICE: All information contained herein is, and remains
+ * the property of Adobe and its suppliers, if any. The intellectual
+ * and technical concepts contained herein are proprietary to Adobe
+ * and its suppliers and are protected by all applicable intellectual
+ * property laws, including trade secret and copyright laws.
+ * Dissemination of this information or reproduction of this material
+ * is strictly forbidden unless prior written permission is obtained
+ * from Adobe.
+ */
 export * from './getProductData';
 //# sourceMappingURL=index.d.ts.map

scripts/__dropins__/storefront-pdp/api/getRefinedProduct/graphql/RefineProductQuery.graphql.d.ts

@@ -1,2 +1,17 @@
+/**
+ * ADOBE CONFIDENTIAL
+ * __________________
+ * Copyright 2023 Adobe
+ * All Rights Reserved.
+ * __________________
+ * NOTICE: All information contained herein is, and remains
+ * the property of Adobe and its suppliers, if any. The intellectual
+ * and technical concepts contained herein are proprietary to Adobe
+ * and its suppliers and are protected by all applicable intellectual
+ * property laws, including trade secret and copyright laws.
+ * Dissemination of this information or reproduction of this material
+ * is strictly forbidden unless prior written permission is obtained
+ * from Adobe.
+ */
 export declare const REFINE_PRODUCT_QUERY: string;
 //# sourceMappingURL=RefineProductQuery.graphql.d.ts.map

scripts/__dropins__/storefront-pdp/api/getRefinedProduct/index.d.ts

@@ -1,2 +1,17 @@
+/**
+ * ADOBE CONFIDENTIAL
+ * __________________
+ * Copyright 2023 Adobe
+ * All Rights Reserved.
+ * __________________
+ * NOTICE: All information contained herein is, and remains
+ * the property of Adobe and its suppliers, if any. The intellectual
+ * and technical concepts contained herein are proprietary to Adobe
+ * and its suppliers and are protected by all applicable intellectual
+ * property laws, including trade secret and copyright laws.
+ * Dissemination of this information or reproduction of this material
+ * is strictly forbidden unless prior written permission is obtained
+ * from Adobe.
+ */
 export * from './getRefinedProduct';
 //# sourceMappingURL=index.d.ts.map

scripts/__dropins__/storefront-pdp/api/graphql/ProductFragment.graphql.d.ts

@@ -1,2 +1,17 @@
+/**
+ * ADOBE CONFIDENTIAL
+ * __________________
+ * Copyright 2023 Adobe
+ * All Rights Reserved.
+ * __________________
+ * NOTICE: All information contained herein is, and remains
+ * the property of Adobe and its suppliers, if any. The intellectual
+ * and technical concepts contained herein are proprietary to Adobe
+ * and its suppliers and are protected by all applicable intellectual
+ * property laws, including trade secret and copyright laws.
+ * Dissemination of this information or reproduction of this material
+ * is strictly forbidden unless prior written permission is obtained
+ * from Adobe.
+ */
 export declare const ProductFragment: string;
 //# sourceMappingURL=ProductFragment.graphql.d.ts.map

scripts/__dropins__/storefront-pdp/api/graphql/ProductOptionFragment.graphql.d.ts

@@ -1,2 +1,17 @@
+/**
+ * ADOBE CONFIDENTIAL
+ * __________________
+ * Copyright 2023 Adobe
+ * All Rights Reserved.
+ * __________________
+ * NOTICE: All information contained herein is, and remains
+ * the property of Adobe and its suppliers, if any. The intellectual
+ * and technical concepts contained herein are proprietary to Adobe
+ * and its suppliers and are protected by all applicable intellectual
+ * property laws, including trade secret and copyright laws.
+ * Dissemination of this information or reproduction of this material
+ * is strictly forbidden unless prior written permission is obtained
+ * from Adobe.
+ */
 export declare const ProductOptionFragment = "\nfragment ProductOptionFragment on ProductViewOption {\n    id\n    title\n    required\n    multi\n    values {\n      id\n      title\n      inStock\n      __typename\n      ... on ProductViewOptionValueProduct {\n        title\n        quantity\n        isDefault\n        product {\n          sku\n          shortDescription\n          metaDescription\n          metaKeyword\n          metaTitle\n          name\n          price {\n            final {\n              amount {\n                value\n                currency\n              }\n            }\n            regular {\n              amount {\n                value\n                currency\n              }\n            }\n            roles\n          }\n        }\n      }\n      ... on ProductViewOptionValueSwatch {\n        id\n        title\n        type\n        value\n        inStock\n      }\n    }\n  }\n";
 //# sourceMappingURL=ProductOptionFragment.graphql.d.ts.map

scripts/__dropins__/storefront-pdp/api/index.d.ts

@@ -1,3 +1,18 @@
+/**
+ * ADOBE CONFIDENTIAL
+ * __________________
+ * Copyright 2023 Adobe
+ * All Rights Reserved.
+ * __________________
+ * NOTICE: All information contained herein is, and remains
+ * the property of Adobe and its suppliers, if any. The intellectual
+ * and technical concepts contained herein are proprietary to Adobe
+ * and its suppliers and are protected by all applicable intellectual
+ * property laws, including trade secret and copyright laws.
+ * Dissemination of this information or reproduction of this material
+ * is strictly forbidden unless prior written permission is obtained
+ * from Adobe.
+ */
 export * from './initialize';
 export * from './fetch-graphql';
 export * from './getProductData';

scripts/__dropins__/storefront-pdp/api/initialize/index.d.ts

@@ -1,2 +1,17 @@
+/**
+ * ADOBE CONFIDENTIAL
+ * __________________
+ * Copyright 2023 Adobe
+ * All Rights Reserved.
+ * __________________
+ * NOTICE: All information contained herein is, and remains
+ * the property of Adobe and its suppliers, if any. The intellectual
+ * and technical concepts contained herein are proprietary to Adobe
+ * and its suppliers and are protected by all applicable intellectual
+ * property laws, including trade secret and copyright laws.
+ * Dissemination of this information or reproduction of this material
+ * is strictly forbidden unless prior written permission is obtained
+ * from Adobe.
+ */
 export * from './initialize';
 //# sourceMappingURL=index.d.ts.map

scripts/__dropins__/storefront-pdp/components/Carousel/index.d.ts

@@ -1,3 +1,18 @@
+/**
+ * ADOBE CONFIDENTIAL
+ * __________________
+ * Copyright 2023 Adobe
+ * All Rights Reserved.
+ * __________________
+ * NOTICE: All information contained herein is, and remains
+ * the property of Adobe and its suppliers, if any. The intellectual
+ * and technical concepts contained herein are proprietary to Adobe
+ * and its suppliers and are protected by all applicable intellectual
+ * property laws, including trade secret and copyright laws.
+ * Dissemination of this information or reproduction of this material
+ * is strictly forbidden unless prior written permission is obtained
+ * from Adobe.
+ */
 export * from './Carousel';
 export { Carousel as default } from './Carousel';
 //# sourceMappingURL=index.d.ts.map

scripts/__dropins__/storefront-pdp/components/GalleryGrid/index.d.ts

@@ -1,3 +1,18 @@
+/**
+ * ADOBE CONFIDENTIAL
+ * __________________
+ * Copyright 2023 Adobe
+ * All Rights Reserved.
+ * __________________
+ * NOTICE: All information contained herein is, and remains
+ * the property of Adobe and its suppliers, if any. The intellectual
+ * and technical concepts contained herein are proprietary to Adobe
+ * and its suppliers and are protected by all applicable intellectual
+ * property laws, including trade secret and copyright laws.
+ * Dissemination of this information or reproduction of this material
+ * is strictly forbidden unless prior written permission is obtained
+ * from Adobe.
+ */
 export * from './GalleryGrid';
 export { GalleryGrid as default } from './GalleryGrid';
 //# sourceMappingURL=index.d.ts.map

scripts/__dropins__/storefront-pdp/components/Overlay/index.d.ts

@@ -1,3 +1,18 @@
+/**
+ * ADOBE CONFIDENTIAL
+ * __________________
+ * Copyright 2023 Adobe
+ * All Rights Reserved.
+ * __________________
+ * NOTICE: All information contained herein is, and remains
+ * the property of Adobe and its suppliers, if any. The intellectual
+ * and technical concepts contained herein are proprietary to Adobe
+ * and its suppliers and are protected by all applicable intellectual
+ * property laws, including trade secret and copyright laws.
+ * Dissemination of this information or reproduction of this material
+ * is strictly forbidden unless prior written permission is obtained
+ * from Adobe.
+ */
 export * from './Overlay';
 export { Overlay as default } from './Overlay';
 //# sourceMappingURL=index.d.ts.map

scripts/__dropins__/storefront-pdp/components/PriceRange/index.d.ts

@@ -1,3 +1,18 @@
+/**
+ * ADOBE CONFIDENTIAL
+ * __________________
+ * Copyright 2023 Adobe
+ * All Rights Reserved.
+ * __________________
+ * NOTICE: All information contained herein is, and remains
+ * the property of Adobe and its suppliers, if any. The intellectual
+ * and technical concepts contained herein are proprietary to Adobe
+ * and its suppliers and are protected by all applicable intellectual
+ * property laws, including trade secret and copyright laws.
+ * Dissemination of this information or reproduction of this material
+ * is strictly forbidden unless prior written permission is obtained
+ * from Adobe.
+ */
 export * from './PriceRange';
 export { PriceRange as default } from './PriceRange';
 //# sourceMappingURL=index.d.ts.map

scripts/__dropins__/storefront-pdp/components/Product/Product.d.ts

@@ -24,6 +24,7 @@ export interface ProductProps extends Omit<HTMLAttributes<HTMLDivElement>, 'titl
     quantity?: VNode;
     carouselConfig?: ProductCarouselConfig;
     zoomType?: 'zoom' | 'overlay';
+    closeButton?: boolean;
 }
 export declare const Product: FunctionComponent<ProductProps>;
 export {};

scripts/__dropins__/storefront-pdp/components/Product/index.d.ts

@@ -1,3 +1,18 @@
+/**
+ * ADOBE CONFIDENTIAL
+ * __________________
+ * Copyright 2023 Adobe
+ * All Rights Reserved.
+ * __________________
+ * NOTICE: All information contained herein is, and remains
+ * the property of Adobe and its suppliers, if any. The intellectual
+ * and technical concepts contained herein are proprietary to Adobe
+ * and its suppliers and are protected by all applicable intellectual
+ * property laws, including trade secret and copyright laws.
+ * Dissemination of this information or reproduction of this material
+ * is strictly forbidden unless prior written permission is obtained
+ * from Adobe.
+ */
 export * from './Product';
 export { Product as default } from './Product';
 //# sourceMappingURL=index.d.ts.map

scripts/__dropins__/storefront-pdp/components/Swatches/Swatches.d.ts

@@ -24,21 +24,15 @@ type Selection = {
     };
 };
 export interface SwatchesProps extends HTMLAttributes<HTMLDivElement> {
-    options: Array<{
-        id: string;
-        type: (typeof supportedTypes)[number];
-        label: string;
-        required?: boolean;
-        multiple?: boolean;
-        items: OptionValue[];
-    }>;
+    options: Array<Option>;
     hideSelectedValue?: boolean;
     defaultOptions?: string[];
     selectionsToUpdate?: Option[];
     onValues?: (uids: Selection, current: string) => void;
     onErrors?: (errors: {
         [id: string]: string;
     }) => void;
+    selectedUIDs?: string[];
 }
 export declare const Swatches: FunctionComponent<SwatchesProps>;
 export {};

scripts/__dropins__/storefront-pdp/components/Swatches/index.d.ts

@@ -1,3 +1,18 @@
+/**
+ * ADOBE CONFIDENTIAL
+ * __________________
+ * Copyright 2023 Adobe
+ * All Rights Reserved.
+ * __________________
+ * NOTICE: All information contained herein is, and remains
+ * the property of Adobe and its suppliers, if any. The intellectual
+ * and technical concepts contained herein are proprietary to Adobe
+ * and its suppliers and are protected by all applicable intellectual
+ * property laws, including trade secret and copyright laws.
+ * Dissemination of this information or reproduction of this material
+ * is strictly forbidden unless prior written permission is obtained
+ * from Adobe.
+ */
 export * from './Swatches';
 export { Swatches as default } from './Swatches';
 //# sourceMappingURL=index.d.ts.map

scripts/__dropins__/storefront-pdp/components/Zoom/Zoom.d.ts

@@ -3,6 +3,7 @@ import { FunctionComponent, VNode } from 'preact';
 export interface ZoomProps {
     children: VNode[] | VNode;
     scale?: number;
+    closeButton?: boolean;
 }
 export declare const Zoom: FunctionComponent<ZoomProps>;
 //# sourceMappingURL=Zoom.d.ts.map