@stigg/react-sdk 4.4.0-beta.6 → 4.4.0-beta.8

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.4.0-beta.6",
+  "version": "4.4.0-beta.8",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/checkout/components/Button.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import styled from '@emotion/styled/macro';
-import { Button as MuiButton, ButtonProps, css } from '@mui/material';
+import { Button as MuiButton, ButtonProps } from '@mui/material';
 
 export type StyledButtonProps = { $success?: boolean; $error?: boolean };
 
@@ -9,30 +9,25 @@ const StyledButton = styled(MuiButton, { shouldForwardProp: (prop) => !prop.star
   border-radius: 10px;
   text-transform: none;
 
-  ${({ theme, $success, $error }) => {
+  background-color: ${({ theme, $success, $error }) => {
     if ($success) {
-      return css`
-        background-color: ${theme.stigg.palette.success};
-        cursor: 'default';
-
-        &:hover {
-          background-color: ${theme.stigg.palette.successDark};
-        }
-      `;
+      return theme.stigg.palette.success;
+    } else if ($error) {
+      return theme.stigg.palette.error;
     }
-
-    if ($error) {
-      return css`
-        background-color: ${theme.stigg.palette.error};
-
-        &:hover {
-          background-color: ${theme.stigg.palette.errorDark};
-        }
-      `;
-    }
-
     return '';
-  }}
+  }};
+
+  &:hover {
+    background-color: ${({ theme, $success, $error }) => {
+      if ($success) {
+        return theme.stigg.palette.successDark;
+      } else if ($error) {
+        return theme.stigg.palette.errorDark;
+      }
+      return '';
+    }};
+  }
 `;
 
 export const Button = ({ variant = 'outlined', ...props }: ButtonProps & StyledButtonProps) => {

package/src/components/checkout/steps/addons/CheckoutAddonsStep.tsx

@@ -63,8 +63,9 @@ function AddonListItem({
       setAddon(addon, initialAddonState.quantity);
     } else {
       removeAddon(addon.id);
-      onAddonsValidationChange({ addonId: addon.id, isValid: true });
     }
+
+    onAddonsValidationChange({ addonId: addon.id, isValid: true });
   };
 
   return (
@@ -102,7 +103,12 @@ function AddonListItem({
               FormHelperTextProps={{ sx: { margin: '4px' } }}
               onChange={(event) => handleQuantityChange(event?.target?.value ? Number(event?.target?.value) : null)}
             />
-            <TrashButton color="error" onClick={() => removeAddon(addon.id)}>
+            <TrashButton
+              color="error"
+              onClick={() => {
+                removeAddon(addon.id);
+                onAddonsValidationChange({ addonId: addon.id, isValid: true });
+              }}>
               <Icon icon="Trash" style={{ display: 'flex' }} />
             </TrashButton>
           </>
@@ -124,8 +130,7 @@ export function CheckoutAddonsStep() {
   const { initialAddons, addons, availableAddons, setAddon, removeAddon } = useAddonsStepModel();
   const [addonsValidation, setAddonsValidation] = useState(
     availableAddons?.reduce<Record<string, boolean>>((acc, curr) => {
-      const addonState = addons.find((x) => x.addon.id === curr.id);
-      acc[curr.id] = !!addonState && addonState.quantity > 0;
+      acc[curr.id] = true;
       return acc;
     }, {}) || {},
   );