@shopgate/pwa-ui-shared 7.32.0-beta.8 → 7.32.0

package/DiscountBadge/index.js

@@ -7,7 +7,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => {
   const badgeBase = {
     background: theme.components.discountBadge.background,
-    borderRadius: 2,
+    borderRadius: theme.shape.borderRadius,
     color: theme.contrastColor(theme.components.discountBadge.background),
     padding: 5,
     width: '100%',

package/FavoritesButton/FavoritesButton.d.ts

@@ -0,0 +1,74 @@
+import React from 'react';
+import type { IconButtonSize } from '@shopgate/engage/components/v2';
+export interface FavoritesButtonOwnProps {
+    /**
+     * Whether the product is on a favorites list.
+     * @default false
+     */
+    active?: boolean;
+    /**
+     * Hides the button from assistive technology, for a surface that exposes the action elsewhere.
+     */
+    'aria-hidden'?: boolean;
+    /**
+     * Custom class name for the button.
+     */
+    className?: string;
+    /**
+     * If `true`, the button reacts to the first click only.
+     * @default false
+     */
+    once?: boolean;
+    /**
+     * The product the button toggles.
+     */
+    productId?: string | null;
+    /**
+     * Milliseconds to wait before a product is removed again.
+     * @default 0
+     */
+    removeThrottle?: number;
+    /**
+     * Whether removing the product also removes the favorites of its variants.
+     * @default false
+     */
+    removeWithRelatives?: boolean;
+    /**
+     * The size of the button.
+     * @default 'small'
+     */
+    size?: IconButtonSize;
+}
+/**
+ * The props the connector provides. Optional, so that the defaults apply to a button that is
+ * rendered without it.
+ */
+interface FavoritesButtonConnectedProps {
+    addFavorites?: (productId: string) => void;
+    removeFavorites?: (productId: string, removeWithRelatives?: boolean) => void;
+    loadWishlistOnAppStartEnabled?: boolean;
+    wishlistItemQuantityEnabled?: boolean;
+}
+export type FavoritesButtonProps = FavoritesButtonOwnProps & FavoritesButtonConnectedProps;
+/**
+ * The favorites button toggles whether a product is on a favorites list, and shows which of the
+ * two states it is in. It renders nothing at all in a shop without the favorites feature.
+ */
+declare const FavoritesButtonComponent: import("react-redux").ConnectedComponent<React.MemoExoticComponent<({ active, addFavorites, "aria-hidden": ariaHidden, className, loadWishlistOnAppStartEnabled, once, productId, removeFavorites, removeThrottle, removeWithRelatives, size, wishlistItemQuantityEnabled, }: FavoritesButtonProps) => React.JSX.Element | null>, {
+    className?: string | undefined;
+    size?: IconButtonSize | undefined;
+    active?: boolean | undefined;
+    addFavorites?: ((productId: string) => void) | undefined;
+    'aria-hidden'?: boolean | undefined;
+    loadWishlistOnAppStartEnabled?: boolean | undefined;
+    once?: boolean | undefined;
+    productId?: string | null | undefined;
+    removeFavorites?: ((productId: string, removeWithRelatives?: boolean) => void) | undefined;
+    removeThrottle?: number | undefined;
+    removeWithRelatives?: boolean | undefined;
+    wishlistItemQuantityEnabled?: boolean | undefined;
+    context?: import("react-redux/es/components/Context").ReactReduxContextInstance | undefined;
+    store?: import("redux").Store | undefined;
+}>;
+export default FavoritesButtonComponent;
+//# sourceMappingURL=FavoritesButton.d.ts.map

package/FavoritesButton/FavoritesButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FavoritesButton.d.ts","sourceRoot":"","sources":["../../FavoritesButton/FavoritesButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAEN,MAAM,OAAO,CAAC;AAKf,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAiGrE,MAAM,WAAW,uBAAuB;IACtC;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;OAGG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;CACvB;AAED;;;GAGG;AACH,UAAU,6BAA6B;IACrC,YAAY,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,eAAe,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,mBAAmB,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7E,6BAA6B,CAAC,EAAE,OAAO,CAAC;IACxC,2BAA2B,CAAC,EAAE,OAAO,CAAC;CACvC;AAED,MAAM,MAAM,oBAAoB,GAAG,uBAAuB,GAAG,6BAA6B,CAAC;AAE3F;;;GAGG;AACH,QAAA,MAAM,wBAAwB,gRAnI3B,oBAAoB;gBAuFT,MAAM;WAwBX,cAAc;aAhCZ,OAAO;oBAwCD,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI;oBApC1B,OAAO;oCAsCS,OAAO;WA7BhC,OAAO;gBAIF,MAAM,GAAG,IAAI;uBAwBP,CAAC,SAAS,EAAE,MAAM,EAAE,mBAAmB,CAAC,EAAE,OAAO,KAAK,IAAI;qBAnB3D,MAAM;0BAKD,OAAO;kCAgBC,OAAO;;;EASwB,CAAC;AAEhE,eAAe,wBAAwB,CAAC"}

package/FavoritesButton/FavoritesButton.js

@@ -0,0 +1,87 @@
+import React, { useCallback, useRef, useMemo, memo } from 'react';
+import classNames from 'classnames';
+import appConfig from '@shopgate/pwa-common/helpers/config';
+import { i18n } from '@shopgate/engage/core/helpers';
+import { IconButton } from '@shopgate/engage/components/v2';
+import HeartIcon from "../icons/HeartIcon";
+import HeartOutlineIcon from "../icons/HeartOutlineIcon";
+import HeartPlusOutlineIcon from "../icons/HeartPlusOutlineIcon";
+import HeartPlus from "../icons/HeartPlusIcon";
+import connect from "./connector";
+
+/**
+ * Renders the button. Exported through `FavoritesButtonComponent`, which carries the public docs.
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+const FavoritesButton = ({
+  active = false,
+  addFavorites,
+  'aria-hidden': ariaHidden,
+  className = '',
+  loadWishlistOnAppStartEnabled = true,
+  once = false,
+  productId = null,
+  removeFavorites,
+  removeThrottle = 0,
+  removeWithRelatives = false,
+  size = 'small',
+  wishlistItemQuantityEnabled = false
+}) => {
+  const clickedOnceRef = useRef(false);
+  const handleClick = useCallback(event => {
+    event.preventDefault();
+    event.stopPropagation();
+    if (once && clickedOnceRef.current) {
+      return;
+    }
+    clickedOnceRef.current = true;
+    if (!productId) {
+      return;
+    }
+    if (!active || wishlistItemQuantityEnabled) {
+      addFavorites?.(productId);
+    } else {
+      setTimeout(() => {
+        removeFavorites?.(productId, removeWithRelatives);
+      }, removeThrottle);
+    }
+  }, [once, productId, active, wishlistItemQuantityEnabled, addFavorites, removeFavorites, removeWithRelatives, removeThrottle]);
+  const icon = useMemo(() => {
+    if (!loadWishlistOnAppStartEnabled || wishlistItemQuantityEnabled && !active) {
+      return /*#__PURE__*/_jsx(HeartPlusOutlineIcon, {});
+    }
+    if (wishlistItemQuantityEnabled && active) {
+      return /*#__PURE__*/_jsx(HeartPlus, {});
+    }
+    if (active) {
+      return /*#__PURE__*/_jsx(HeartIcon, {});
+    }
+    return /*#__PURE__*/_jsx(HeartOutlineIcon, {});
+  }, [loadWishlistOnAppStartEnabled, wishlistItemQuantityEnabled, active]);
+  if (!appConfig.hasFavorites) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(IconButton, {
+    "aria-label": i18n.text(active ? 'favorites.remove' : 'favorites.add'),
+    "aria-hidden": ariaHidden,
+    variant: "surface",
+    color: "secondary",
+    size: size,
+    className: classNames('ui-shared__favorites-button', className),
+    onClick: handleClick,
+    testId: "favoriteButton",
+    children: icon
+  });
+};
+
+/**
+ * The props the connector provides. Optional, so that the defaults apply to a button that is
+ * rendered without it.
+ */
+
+/**
+ * The favorites button toggles whether a product is on a favorites list, and shows which of the
+ * two states it is in. It renders nothing at all in a shop without the favorites feature.
+ */
+const FavoritesButtonComponent = connect(/*#__PURE__*/memo(FavoritesButton));
+export default FavoritesButtonComponent;

package/FavoritesButton/connector.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("react-redux").InferableComponentEnhancerWithProps<Function & Object, {}>;
+export default _default;
+//# sourceMappingURL=connector.d.ts.map

package/FavoritesButton/connector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"connector.d.ts","sourceRoot":"","sources":["../../FavoritesButton/connector.js"],"names":[],"mappings":""}

package/FavoritesButton/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './FavoritesButton';
+export type { FavoritesButtonOwnProps, FavoritesButtonProps } from './FavoritesButton';
+//# sourceMappingURL=index.d.ts.map

package/FavoritesButton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../FavoritesButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,YAAY,EAAE,uBAAuB,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC"}

package/FavoritesButton/index.js

@@ -1,134 +1 @@
-import React, { useCallback, useRef, useMemo, memo } from 'react';
-import PropTypes from 'prop-types';
-import appConfig from '@shopgate/pwa-common/helpers/config';
-import { i18n } from '@shopgate/engage/core/helpers';
-import { makeStyles } from '@shopgate/engage/styles';
-import HeartIcon from "../icons/HeartIcon";
-import HeartOutlineIcon from "../icons/HeartOutlineIcon";
-import HeartPlusOutlineIcon from "../icons/HeartPlusOutlineIcon";
-import HeartPlus from "../icons/HeartPlusIcon";
-import Ripple from "../Ripple";
-import connect from "./connector";
-import { jsx as _jsx } from "react/jsx-runtime";
-const useStyles = makeStyles()(theme => {
-  const buttonProto = {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    position: 'relative',
-    background: theme.palette.common.white,
-    borderRadius: '50%',
-    padding: 0,
-    fontSize: theme.components.icon.small,
-    color: theme.palette.secondary.main,
-    outline: 0
-  };
-  return {
-    buttonFlat: {
-      ...buttonProto
-    },
-    button: {
-      ...buttonProto,
-      boxShadow: '0 8px 13px rgba(0, 0, 0, 0.25)'
-    },
-    ripple: {
-      padding: 6
-    }
-  };
-});
-
-/**
- * The favorites button component.
- * @param {Object} props Props.
- * @returns {JSX.Element|null}
- */
-const FavoritesButton = ({
-  active,
-  addFavorites,
-  'aria-hidden': ariaHidden,
-  className,
-  loadWishlistOnAppStartEnabled,
-  noShadow,
-  once,
-  onRippleComplete,
-  productId,
-  removeFavorites,
-  removeThrottle,
-  removeWithRelatives,
-  rippleClassName,
-  wishlistItemQuantityEnabled
-}) => {
-  const {
-    classes,
-    cx
-  } = useStyles();
-  const clickedOnceRef = useRef(false);
-  const handleRippleComplete = useCallback(() => {
-    onRippleComplete(active);
-  }, [onRippleComplete, active]);
-  const handleClick = useCallback(event => {
-    event.preventDefault();
-    event.stopPropagation();
-    if (once && clickedOnceRef.current) {
-      return;
-    }
-    clickedOnceRef.current = true;
-    if (!productId) {
-      return;
-    }
-    if (!active || wishlistItemQuantityEnabled) {
-      addFavorites(productId);
-    } else {
-      setTimeout(() => {
-        removeFavorites(productId, removeWithRelatives);
-      }, removeThrottle);
-    }
-  }, [once, productId, active, wishlistItemQuantityEnabled, addFavorites, removeFavorites, removeWithRelatives, removeThrottle]);
-  const icon = useMemo(() => {
-    if (!loadWishlistOnAppStartEnabled || wishlistItemQuantityEnabled && !active) {
-      return /*#__PURE__*/_jsx(HeartPlusOutlineIcon, {});
-    }
-    if (wishlistItemQuantityEnabled && active) {
-      return /*#__PURE__*/_jsx(HeartPlus, {});
-    }
-    if (active) {
-      return /*#__PURE__*/_jsx(HeartIcon, {});
-    }
-    return /*#__PURE__*/_jsx(HeartOutlineIcon, {});
-  }, [loadWishlistOnAppStartEnabled, wishlistItemQuantityEnabled, active]);
-  if (!appConfig.hasFavorites) {
-    return null;
-  }
-  const buttonClass = noShadow ? classes.buttonFlat : classes.button;
-  const ariaLabel = i18n.text(active ? 'favorites.remove' : 'favorites.add');
-  return /*#__PURE__*/_jsx("button", {
-    "aria-label": ariaLabel,
-    "aria-hidden": ariaHidden,
-    className: cx('ui-shared__favorites-button', buttonClass, className),
-    onClick: handleClick,
-    "data-test-id": "favoriteButton",
-    type: "button",
-    children: /*#__PURE__*/_jsx(Ripple, {
-      className: cx(classes.ripple, rippleClassName),
-      onComplete: handleRippleComplete,
-      children: icon
-    })
-  });
-};
-FavoritesButton.defaultProps = {
-  active: false,
-  addFavorites: () => {},
-  'aria-hidden': null,
-  className: '',
-  noShadow: false,
-  once: false,
-  onRippleComplete: () => {},
-  productId: null,
-  removeFavorites: () => {},
-  removeThrottle: 0,
-  removeWithRelatives: false,
-  rippleClassName: '',
-  wishlistItemQuantityEnabled: false,
-  loadWishlistOnAppStartEnabled: true
-};
-export default connect(/*#__PURE__*/memo(FavoritesButton));
+export { default } from "./FavoritesButton";

package/Glow/index.js

@@ -1,7 +1,7 @@
 import React, { useState, useRef, useEffect, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { withForwardedRef } from '@shopgate/engage/core';
-import { makeStyles } from '@shopgate/engage/styles';
+import { makeStyles, useTheme } from '@shopgate/engage/styles';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyles = makeStyles()({
   container: {
@@ -41,6 +41,7 @@ const Glow = ({
     classes,
     cx
   } = useStyles();
+  const theme = useTheme();
   const [hover, setHover] = useState(false);
   const timeoutRef = useRef(null);
   useEffect(() => () => {
@@ -58,7 +59,7 @@ const Glow = ({
   const innerInlineStyles = hover ? {
     ...propStyles.glow,
     ...propStyles.hover,
-    background: color
+    background: color || theme?.palette?.action?.pressed
   } : {
     ...propStyles.glow
   };
@@ -80,7 +81,7 @@ const Glow = ({
   jsx-a11y/click-events-have-key-events */
 };
 Glow.defaultProps = {
-  color: 'var(--sg-palette-grey-light)',
+  color: null,
   className: null,
   forwardedRef: null,
   disabled: false,

package/NoResults/components/Icon/index.js

@@ -8,7 +8,10 @@ const useStyles = makeStyles()(theme => ({
     fill: 'currentColor'
   },
   background: {
-    fill: theme.palette.background.surface
+    fill: theme.palette.common.white,
+    ...theme.applyStyles('dark', {
+      fill: theme.palette.grey[200]
+    })
   },
   circle: {
     fill: 'currentColor',

package/Price/index.js

@@ -7,11 +7,18 @@ import { makeStyles } from '@shopgate/engage/styles';
 import showTaxDisclaimer from '@shopgate/pwa-common-commerce/market/helpers/showTaxDisclaimer';
 import { useWidgetSettings } from '@shopgate/engage/core/hooks/useWidgetSettings';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   container: {
     display: 'flex',
     position: 'relative',
-    whiteSpace: 'nowrap'
+    whiteSpace: 'nowrap',
+    color: theme.components.price.defaultColor,
+    '--font-size': theme.typography.price.fontSize,
+    '--font-family': theme.typography.price.fontFamily,
+    '--font-weight': theme.typography.price.fontWeight,
+    fontSize: 'var(--font-size)',
+    fontFamily: 'var(--font-family)',
+    fontWeight: 'var(--font-weight)'
   },
   disclaimer: {
     color: 'initial',
@@ -20,9 +27,9 @@ const useStyles = makeStyles()({
     top: 0
   },
   discounted: {
-    color: 'var(--color-primary)'
+    color: theme.components.price.saleColor
   }
-});
+}));
 
 /**
  * The Price component

package/PriceStriked/index.js

@@ -24,8 +24,14 @@ const calcAngle = element => {
 };
 const useStyles = makeStyles()(theme => ({
   root: {
+    '--font-size': `calc(${theme.typography.price.fontSize} * 0.75)`,
+    '--font-family': theme.typography.price.fontFamily,
+    '--font-weight': theme.typography.price.fontWeight,
+    fontSize: 'var(--font-size)',
+    fontFamily: 'var(--font-family)',
+    fontWeight: 'var(--font-weight)',
     whiteSpace: 'nowrap',
-    color: theme.palette.grey.dark,
+    color: theme.components.price.strikedColor,
     '& span': {
       position: 'relative',
       '&::before': {

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "@shopgate/pwa-ui-shared",
-  "version": "7.32.0-beta.8",
+  "version": "7.32.0",
   "description": "Shopgate's shared UI components.",
   "main": "index.js",
   "license": "Apache-2.0",
   "dependencies": {
-    "@shopgate/pwa-ui-ios": "7.32.0-beta.8",
-    "@shopgate/pwa-ui-material": "7.32.0-beta.8"
+    "@shopgate/pwa-ui-ios": "7.32.0",
+    "@shopgate/pwa-ui-material": "7.32.0"
   },
   "devDependencies": {
-    "@shopgate/pwa-common": "7.32.0-beta.8",
-    "@shopgate/pwa-common-commerce": "7.32.0-beta.8",
+    "@shopgate/pwa-common": "7.32.0",
+    "@shopgate/pwa-common-commerce": "7.32.0",
     "classnames": "2.5.1",
     "react": "^17.0.2"
   },

package/AccordionContainer/spec.js

@@ -1,35 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-import AccordionContainer from "./index";
-
-/**
- * @returns {JSX}
- */
-import { jsx as _jsx } from "react/jsx-runtime";
-const Child = () => /*#__PURE__*/_jsx("div", {});
-describe('<AccordionContainer />', () => {
-  it('should render children with props', () => {
-    const wrapper = shallow(/*#__PURE__*/_jsx(AccordionContainer, {
-      children: props => /*#__PURE__*/_jsx(Child, {
-        ...props
-      })
-    }));
-    const props = wrapper.find('Child').props();
-    expect(wrapper).toMatchSnapshot();
-    expect(props.open).toEqual(false);
-    expect(typeof props.handleOpen).toEqual('function');
-    expect(typeof props.handleClose).toEqual('function');
-  });
-  it('should update children props when state changes', () => {
-    const wrapper = shallow(/*#__PURE__*/_jsx(AccordionContainer, {
-      children: props => /*#__PURE__*/_jsx(Child, {
-        ...props
-      })
-    }));
-    wrapper.setState({
-      open: true
-    });
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.find('Child').props().open).toEqual(true);
-  });
-});

package/ActionButton/spec.js

@@ -1,66 +0,0 @@
-import React from 'react';
-import { fireEvent, render, screen } from '@testing-library/react';
-import ActionButton from "./index";
-import { jsx as _jsx } from "react/jsx-runtime";
-describe('<ActionButton />', () => {
-  const renderComponent = (props = {}) => render(/*#__PURE__*/_jsx(ActionButton, {
-    ...props,
-    children: "Action Button"
-  }));
-  describe('Given the component was mounted to the DOM', () => {
-    let renderedElement;
-    let mockOnClick;
-    beforeEach(() => {
-      jest.useFakeTimers();
-      mockOnClick = jest.fn();
-      renderedElement = renderComponent({
-        onClick: mockOnClick
-      });
-    });
-    afterEach(() => {
-      jest.clearAllTimers();
-      jest.useRealTimers();
-    });
-    it('should match snapshot', () => {
-      expect(renderedElement.container.firstChild).toMatchSnapshot();
-    });
-    it('should not show the loading indicator by default', () => {
-      const indicator = renderedElement.container.querySelector('[data-test-id="loadingIndicator"]');
-      expect(indicator).toBeNull();
-    });
-    describe('Given the loading prop is set to true', () => {
-      beforeEach(() => {
-        renderedElement.rerender(/*#__PURE__*/_jsx(ActionButton, {
-          onClick: mockOnClick,
-          loading: true,
-          children: "Action Button"
-        }));
-      });
-      it('should match snapshot', () => {
-        expect(renderedElement.container.firstChild).toMatchSnapshot();
-      });
-      it('should show the loading indicator', () => {
-        const indicator = renderedElement.container.querySelector('[data-test-id="loadingIndicator"]');
-        expect(indicator).toBeTruthy();
-      });
-    });
-    describe('Given the component gets clicked', () => {
-      let timeoutSpy;
-      beforeEach(() => {
-        timeoutSpy = jest.spyOn(global, 'setTimeout');
-        fireEvent.click(screen.getByRole('button'));
-      });
-      afterEach(() => {
-        timeoutSpy.mockRestore();
-      });
-      it('should use setTimeout for delaying the onClick handler', () => {
-        expect(timeoutSpy).toHaveBeenCalledTimes(1);
-        expect(timeoutSpy.mock.calls[0][1]).toBe(ActionButton.clickDelay);
-      });
-      it('should eventually call the onClick handler', () => {
-        jest.runOnlyPendingTimers();
-        expect(mockOnClick).toHaveBeenCalledTimes(1);
-      });
-    });
-  });
-});

package/AddToCartButton/spec.js

@@ -1,68 +0,0 @@
-import React from 'react';
-import { mount } from 'enzyme';
-import { act } from 'react-dom/test-utils';
-import AddToCartButton from "./index";
-
-/**
- * Flushes the promise queue.
- * @returns {Promise}
- */
-import { jsx as _jsx } from "react/jsx-runtime";
-const flushMicrotasks = () => Promise.resolve();
-describe('<AddToCartButton />', () => {
-  it('should render in loading state and should not be clickable', () => {
-    const spy = jest.fn(() => Promise.resolve());
-    const wrapper = mount(/*#__PURE__*/_jsx(AddToCartButton, {
-      onClick: spy,
-      isLoading: true,
-      isOrderable: true,
-      isDisabled: false
-    }));
-
-    // Click shouldn’t fire when loading
-    wrapper.find('button').prop('onClick')();
-    expect(wrapper).toMatchSnapshot();
-    expect(spy).toHaveBeenCalledTimes(0);
-  });
-  it('should render with checkmark icon and should not be clickable the second time', async () => {
-    const spy = jest.fn(() => Promise.resolve());
-    const wrapper = mount(/*#__PURE__*/_jsx(AddToCartButton, {
-      onClick: spy,
-      isLoading: false,
-      isOrderable: true,
-      isDisabled: false
-    }));
-
-    // First click triggers async work
-    await act(async () => {
-      wrapper.find('button').prop('onClick')();
-      await flushMicrotasks();
-    });
-    wrapper.update();
-
-    // Second click should be ignored
-    await act(async () => {
-      wrapper.find('button').prop('onClick')();
-      await flushMicrotasks();
-    });
-    wrapper.update();
-    expect(wrapper).toMatchSnapshot();
-    expect(spy).toHaveBeenCalledTimes(1);
-  });
-  it('should render with cart icon and should be clickable', async () => {
-    const spy = jest.fn(() => Promise.resolve());
-    const wrapper = mount(/*#__PURE__*/_jsx(AddToCartButton, {
-      onClick: spy,
-      isLoading: false,
-      isOrderable: true,
-      isDisabled: false
-    }));
-    await act(async () => {
-      wrapper.find('button').prop('onClick')();
-      await flushMicrotasks();
-    });
-    wrapper.update();
-    expect(wrapper).toMatchSnapshot();
-    expect(spy).toHaveBeenCalledTimes(1);
-  });
-});

package/Availability/spec.js

@@ -1,42 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { AVAILABILITY_STATE_OK, AVAILABILITY_STATE_WARNING, AVAILABILITY_STATE_ALERT } from '@shopgate/pwa-common-commerce/product/constants';
-import Availability from "./index";
-import { jsx as _jsx } from "react/jsx-runtime";
-describe('<Availability />', () => {
-  it('should not render when text is empty', () => {
-    const wrapper = render(/*#__PURE__*/_jsx(Availability, {
-      text: ""
-    }));
-    expect(wrapper.asFragment()).toMatchSnapshot();
-  });
-  it('should not render by default if state is "ok"', () => {
-    const wrapper = render(/*#__PURE__*/_jsx(Availability, {
-      state: AVAILABILITY_STATE_OK,
-      text: "Available"
-    }));
-    expect(wrapper.asFragment()).toMatchSnapshot();
-  });
-  it('should render if state is "ok" when "showWhenAvailable" is set', () => {
-    const wrapper = render(/*#__PURE__*/_jsx(Availability, {
-      state: AVAILABILITY_STATE_OK,
-      text: "Available",
-      showWhenAvailable: true
-    }));
-    expect(wrapper.asFragment()).toMatchSnapshot();
-  });
-  it('should render if state is "warning"', () => {
-    const wrapper = render(/*#__PURE__*/_jsx(Availability, {
-      state: AVAILABILITY_STATE_WARNING,
-      text: "Only 5 left"
-    }));
-    expect(wrapper.asFragment()).toMatchSnapshot();
-  });
-  it('should render if state is "warning"', () => {
-    const wrapper = render(/*#__PURE__*/_jsx(Availability, {
-      state: AVAILABILITY_STATE_ALERT,
-      text: "Out of stock"
-    }));
-    expect(wrapper.asFragment()).toMatchSnapshot();
-  });
-});