updated Tag component to handle new isDeleted prop

packages/shared/components/tag/Tag.styled.ts

@@ -34,6 +34,7 @@ const StyledTag = styled.div<{
   tagMaxWidth?: string;
   isLast?: boolean;
   isDisabled?: boolean;
+  isDeleted?: boolean;
   isNewTag?: boolean;
   isDefault?: boolean;
   isClickable?: boolean;
@@ -76,6 +77,16 @@ const StyledTag = styled.div<{
     pointer-events: none;
   }
 
+  ${({ isDeleted, theme }) =>
+    isDeleted &&
+    css`
+      background: ${theme.tag.deletedBackground};
+      .tag-text {
+        text-decoration: line-through;
+        color: ${theme.tag.deletedColor};
+      }
+    `}
+
   .tag-icon {
     ${(props) =>
       props.theme.interfaceDirection === "rtl"
@@ -98,6 +109,7 @@ const StyledTag = styled.div<{
   ${(props) =>
     props.isClickable &&
     !props.isDisabled &&
+    !props.isDeleted &&
     css`
       cursor: pointer;
       &:hover {

packages/shared/components/tag/Tag.tsx

@@ -42,6 +42,7 @@ export const TagPure = ({
   label,
   isNewTag,
   isDisabled,
+  isDeleted,
   isDefault,
   isLast,
   onDelete,
@@ -55,6 +56,8 @@ export const TagPure = ({
   roomType,
   providerType,
 }: TagProps) => {
+  console.log(isDeleted, "isDeleted");
+
   const [openDropdown, setOpenDropdown] = React.useState(false);
 
   const tagRef = React.useRef<HTMLDivElement | null>(null);
@@ -99,12 +102,12 @@ export const TagPure = ({
 
   const onClickAction = React.useCallback(
     (e: React.MouseEvent | React.ChangeEvent) => {
-      if (onClick && !isDisabled) {
+      if (onClick && !isDisabled && !isDeleted) {
         const target = e.target as HTMLDivElement;
         onClick({ roomType, label: target.dataset.tag, providerType });
       }
     },
-    [onClick, isDisabled, roomType, providerType],
+    [onClick, isDisabled, isDeleted, roomType, providerType],
   );
 
   const onDeleteAction = React.useCallback(
@@ -125,6 +128,7 @@ export const TagPure = ({
         ref={tagRef}
         onClick={openDropdownAction}
         isDisabled={isDisabled}
+        isDeleted={isDeleted}
         isDefault={isDefault}
         isLast={isLast}
         tagMaxWidth={tagMaxWidth}
@@ -167,6 +171,7 @@ export const TagPure = ({
       onClick={onClickAction}
       isNewTag={isNewTag}
       isDisabled={isDisabled}
+      isDeleted={isDeleted}
       isDefault={isDefault}
       tagMaxWidth={tagMaxWidth}
       data-tag={label}
@@ -190,7 +195,7 @@ export const TagPure = ({
           >
             {label}
           </Text>
-          {isNewTag && (
+          {isNewTag && !!onDelete && (
             <IconButton
               className="tag-icon"
               iconName={CrossIconReactSvgUrl}

packages/shared/components/tag/Tag.types.tsx

@@ -39,6 +39,8 @@ export interface TagProps {
   isNewTag?: boolean;
   /** Accepts the tag styles as disabled and disables clicking */
   isDisabled?: boolean;
+  /** Accepts the tag styles as deleted and disables clicking */
+  isDeleted?: boolean;
   /** Accepts the function that is called when the tag is clicked */
   onClick: (tag?: object) => void;
   /** Accepts the function that ist called when the tag delete button is clicked */