Initial commit

src/components/CartActionsButtons/CartActionsButtons.module.css

@@ -0,0 +1,92 @@
+.quantityControls {
+  display: flex;
+  align-items: center;
+  background-color: #ffb70014;
+  border-radius: 888px;
+  width: fit-content;
+  margin-left: 3px;
+}
+
+:global(.rtl) .quantityControls {
+  margin-left: 0;
+  margin-right: 3px;
+}
+
+.quantityLabel {
+  font-size: 14px;
+  color: var(--secondary-color);
+  font-weight: 500;
+}
+
+.quantityInputContainer {
+  display: flex;
+  align-items: center;
+  padding: 8px;
+  border-radius: 888px;
+  width: 84px;
+  height: 32px;
+}
+
+.quantityButton {
+  padding: 0px;
+  width: 25px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--secondary-color);
+  transition: all 0.2s ease;
+}
+
+.quantityInput {
+  text-align: center;
+  border: none;
+  box-shadow: none;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.removeButton {
+  padding: 4px 0px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  width: 30px;
+}
+
+.deleteButtonContainer {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  background-color: var(--primary-color);
+  border-radius: 50%;
+  padding: 8px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.deleteIcon {
+  font-size: 18px;
+  color: var(--secondary-color);
+}
+
+.cartItemActions :global(.ant-input-number-outlined) {
+  border: none;
+  width: 40px;
+  background-color: inherit;
+  text-align: center;
+}
+
+.cartItemActions :global(.ant-input-number-input) {
+  text-align: center !important;
+}
+
+.plusIcon {
+margin-bottom: 1px;
+}
+
+.deleteIcon {
+  position: relative;
+  right: 1px;
+}

src/components/CartActionsButtons/CartActionsButtons.tsx

@@ -0,0 +1,109 @@
+import { MinusOutlined } from "@ant-design/icons";
+import { Button, InputNumber, Popconfirm } from "antd";
+import DeleteIcon from "components/Icons/DeleteIcon";
+import PlusIcon from "components/Icons/PlusIcon";
+import { removeItem, updateQuantity } from "features/order/orderSlice";
+import { useTranslation } from "react-i18next";
+import { useAppDispatch } from "redux/hooks";
+import { CartItem } from "utils/types/appTypes";
+import { colors } from "../../ThemeConstants";
+import styles from "./CartActionsButtons.module.css";
+
+export default function CartActionsButtons({ item }: { item: CartItem }) {
+  const { t } = useTranslation();
+  const dispatch = useAppDispatch();
+  const isMobile = false; // Default to desktop
+  const message = { success: (msg: string) => console.log(msg) }; // Simple message handler
+  const isRTL = false; // Default to LTR
+
+  const handleDeleteItem = (itemId: string) => {
+    dispatch(removeItem(Number(itemId)));
+    message.success(t("cart.deleteConfirmation.success"));
+  };
+
+  const getPopconfirmOverlayStyle = () => ({
+    width: isMobile ? "280px" : "auto",
+    maxWidth: "320px",
+    ".antPopconfirmMessageTitle": {
+      fontSize: isMobile ? "14px" : "16px",
+      paddingRight: isMobile ? "24px" : "0",
+    },
+    ".antPopconfirmMessageContent": {
+      fontSize: isMobile ? "13px" : "14px",
+      marginTop: "4px",
+    },
+    ".antPopconfirmButtons": {
+      marginTop: "12px",
+      ".ant-btn": {
+        fontSize: isMobile ? "13px" : "14px",
+        height: isMobile ? "28px" : "32px",
+        padding: isMobile ? "0 12px" : "4px 15px",
+      },
+    },
+  });
+
+  return (
+    <div className={styles.cartItemActions}>
+      <div className={styles.quantityControls}>
+        <div className={styles.quantityInputContainer}>
+          {item.quantity > 1 ? (
+            <Button
+              type="text"
+              size="small"
+              onClick={() =>
+                dispatch(updateQuantity({ id: item.id, quantity: Math.max(1, item.quantity - 1) }))
+              }
+              className={styles.quantityButton}
+            >
+              <MinusOutlined style={{ fontSize: 16, color: colors.primary }} />
+            </Button>
+          ) : (
+            <Popconfirm
+              title={t("cart.deleteConfirmation.title")}
+              description={t("cart.deleteConfirmation.content")}
+              onConfirm={() => handleDeleteItem(item.id.toString())}
+              okText={t("cart.deleteConfirmation.confirm")}
+              cancelText={t("cart.deleteConfirmation.cancel")}
+              okButtonProps={{ danger: true }}
+              placement={isRTL ? "left" : "right"}
+              styles={{
+                root: getPopconfirmOverlayStyle(),
+                body: {
+                  padding: isMobile ? "12px" : "16px",
+                },
+              }}
+            >
+              <Button
+                type="text"
+                size="small"
+                danger
+                icon={<DeleteIcon className={styles.deleteIcon} />}
+                className={styles.removeButton}
+              />
+            </Popconfirm>
+          )}
+          <InputNumber
+            min={1}
+            max={100}
+            value={item.quantity || 1}
+            onChange={(value) => dispatch(updateQuantity({ id: item.id, quantity: value || 1 }))}
+            size="small"
+            controls={false}
+            className={styles.quantityInput}
+            name="id"
+          />
+          <Button
+            type="text"
+            size="small"
+            onClick={() =>
+              dispatch(updateQuantity({ id: item.id, quantity: Math.min(100, item.quantity + 1) }))
+            }
+            className={styles.quantityButton}
+          >
+            <PlusIcon className={styles.plusIcon} />
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}