kupos-ui-components-lib 1.0.0

package/src/components/PaymentSideBar/PaymentSideBarDesktop.tsx

@@ -0,0 +1,183 @@
+import React from "react";
+import { PaymentSideBarProps } from "./types";
+
+const PaymentSideBarDesktop: React.FC<PaymentSideBarProps> = (props) => {
+  const {
+    amount = 0,
+    currency = "$",
+    paymentMethods = [],
+    customerDetails,
+    onPaymentComplete,
+    onPaymentError,
+    colors = {},
+    showSummary = true,
+    orderDetails,
+  } = props;
+
+  const handlePayment = () => {
+    try {
+      // Payment processing logic would go here
+      onPaymentComplete && onPaymentComplete("payment-123");
+    } catch (error) {
+      onPaymentError && onPaymentError(error);
+    }
+  };
+
+  return (
+    <div
+      className="payment-sidebar-desktop"
+      style={{
+        backgroundColor: colors.backgroundColor || "#ffffff",
+        color: colors.textColor || "#333333",
+        padding: "20px",
+        borderRadius: "8px",
+        boxShadow: "0 2px 10px rgba(0, 0, 0, 0.1)",
+        maxWidth: "400px",
+      }}
+    >
+      <h2 style={{ marginBottom: "20px", color: colors.primaryColor || "#333" }}>
+        Payment Details
+      </h2>
+
+      {showSummary && orderDetails && (
+        <div className="order-summary" style={{ marginBottom: "20px" }}>
+          <h3 style={{ marginBottom: "10px" }}>Order Summary</h3>
+          {orderDetails.items.map((item, index) => (
+            <div
+              key={index}
+              style={{
+                display: "flex",
+                justifyContent: "space-between",
+                marginBottom: "8px",
+              }}
+            >
+              <span>
+                {item.name} x {item.quantity}
+              </span>
+              <span>
+                {currency}
+                {item.price.toFixed(2)}
+              </span>
+            </div>
+          ))}
+          <div
+            style={{
+              borderTop: "1px solid #eee",
+              paddingTop: "10px",
+              marginTop: "10px",
+            }}
+          >
+            <div
+              style={{
+                display: "flex",
+                justifyContent: "space-between",
+                marginBottom: "5px",
+              }}
+            >
+              <span>Subtotal</span>
+              <span>
+                {currency}
+                {orderDetails.subtotal.toFixed(2)}
+              </span>
+            </div>
+            {orderDetails.tax !== undefined && (
+              <div
+                style={{
+                  display: "flex",
+                  justifyContent: "space-between",
+                  marginBottom: "5px",
+                }}
+              >
+                <span>Tax</span>
+                <span>
+                  {currency}
+                  {orderDetails.tax.toFixed(2)}
+                </span>
+              </div>
+            )}
+            {orderDetails.discount !== undefined && (
+              <div
+                style={{
+                  display: "flex",
+                  justifyContent: "space-between",
+                  marginBottom: "5px",
+                }}
+              >
+                <span>Discount</span>
+                <span>
+                  -{currency}
+                  {orderDetails.discount.toFixed(2)}
+                </span>
+              </div>
+            )}
+            <div
+              style={{
+                display: "flex",
+                justifyContent: "space-between",
+                fontWeight: "bold",
+                marginTop: "10px",
+              }}
+            >
+              <span>Total</span>
+              <span>
+                {currency}
+                {orderDetails.total.toFixed(2)}
+              </span>
+            </div>
+          </div>
+        </div>
+      )}
+
+      <div className="payment-methods" style={{ marginBottom: "20px" }}>
+        <h3 style={{ marginBottom: "10px" }}>Payment Methods</h3>
+        {paymentMethods.length > 0 ? (
+          paymentMethods.map((method) => (
+            <div
+              key={method.id}
+              style={{
+                display: "flex",
+                alignItems: "center",
+                padding: "10px",
+                marginBottom: "8px",
+                border: `1px solid ${method.isSelected ? colors.primaryColor || "#007bff" : "#ddd"}`,
+                borderRadius: "4px",
+                cursor: "pointer",
+                backgroundColor: method.isSelected ? "#f8f9fa" : "transparent",
+              }}
+            >
+              {method.icon && (
+                <img
+                  src={method.icon}
+                  alt={method.name}
+                  style={{ width: "24px", height: "24px", marginRight: "10px" }}
+                />
+              )}
+              <span>{method.name}</span>
+            </div>
+          ))
+        ) : (
+          <p>No payment methods available</p>
+        )}
+      </div>
+
+      <button
+        onClick={handlePayment}
+        style={{
+          backgroundColor: colors.buttonColor || "#007bff",
+          color: colors.buttonTextColor || "#ffffff",
+          padding: "12px 20px",
+          border: "none",
+          borderRadius: "4px",
+          fontSize: "16px",
+          cursor: "pointer",
+          width: "100%",
+        }}
+      >
+        Pay {currency}
+        {amount.toFixed(2)}
+      </button>
+    </div>
+  );
+};
+
+export default PaymentSideBarDesktop;

package/src/components/PaymentSideBar/PaymentSideBarMobile.tsx

@@ -0,0 +1,197 @@
+import React from "react";
+import { PaymentSideBarProps } from "./types";
+
+const PaymentSideBarMobile: React.FC<PaymentSideBarProps> = (props) => {
+  const {
+    amount = 0,
+    currency = "$",
+    paymentMethods = [],
+    customerDetails,
+    onPaymentComplete,
+    onPaymentError,
+    colors = {},
+    showSummary = true,
+    orderDetails,
+  } = props;
+
+  const handlePayment = () => {
+    try {
+      // Payment processing logic would go here
+      onPaymentComplete && onPaymentComplete("payment-123");
+    } catch (error) {
+      onPaymentError && onPaymentError(error);
+    }
+  };
+
+  return (
+    <div
+      className="payment-sidebar-mobile"
+      style={{
+        backgroundColor: colors.backgroundColor || "#ffffff",
+        color: colors.textColor || "#333333",
+        padding: "15px",
+        borderRadius: "8px",
+        boxShadow: "0 2px 10px rgba(0, 0, 0, 0.1)",
+        width: "100%",
+        maxWidth: "100%",
+      }}
+    >
+      <h2 
+        style={{ 
+          marginBottom: "15px", 
+          color: colors.primaryColor || "#333",
+          fontSize: "18px"
+        }}
+      >
+        Payment Details
+      </h2>
+
+      {showSummary && orderDetails && (
+        <div className="order-summary" style={{ marginBottom: "15px" }}>
+          <h3 style={{ marginBottom: "8px", fontSize: "16px" }}>Order Summary</h3>
+          <div style={{ maxHeight: "150px", overflowY: "auto" }}>
+            {orderDetails.items.map((item, index) => (
+              <div
+                key={index}
+                style={{
+                  display: "flex",
+                  justifyContent: "space-between",
+                  marginBottom: "6px",
+                  fontSize: "14px"
+                }}
+              >
+                <span>
+                  {item.name} x {item.quantity}
+                </span>
+                <span>
+                  {currency}
+                  {item.price.toFixed(2)}
+                </span>
+              </div>
+            ))}
+          </div>
+          <div
+            style={{
+              borderTop: "1px solid #eee",
+              paddingTop: "8px",
+              marginTop: "8px",
+              fontSize: "14px"
+            }}
+          >
+            <div
+              style={{
+                display: "flex",
+                justifyContent: "space-between",
+                marginBottom: "4px",
+              }}
+            >
+              <span>Subtotal</span>
+              <span>
+                {currency}
+                {orderDetails.subtotal.toFixed(2)}
+              </span>
+            </div>
+            {orderDetails.tax !== undefined && (
+              <div
+                style={{
+                  display: "flex",
+                  justifyContent: "space-between",
+                  marginBottom: "4px",
+                }}
+              >
+                <span>Tax</span>
+                <span>
+                  {currency}
+                  {orderDetails.tax.toFixed(2)}
+                </span>
+              </div>
+            )}
+            {orderDetails.discount !== undefined && (
+              <div
+                style={{
+                  display: "flex",
+                  justifyContent: "space-between",
+                  marginBottom: "4px",
+                }}
+              >
+                <span>Discount</span>
+                <span>
+                  -{currency}
+                  {orderDetails.discount.toFixed(2)}
+                </span>
+              </div>
+            )}
+            <div
+              style={{
+                display: "flex",
+                justifyContent: "space-between",
+                fontWeight: "bold",
+                marginTop: "8px",
+                fontSize: "16px"
+              }}
+            >
+              <span>Total</span>
+              <span>
+                {currency}
+                {orderDetails.total.toFixed(2)}
+              </span>
+            </div>
+          </div>
+        </div>
+      )}
+
+      <div className="payment-methods" style={{ marginBottom: "15px" }}>
+        <h3 style={{ marginBottom: "8px", fontSize: "16px" }}>Payment Methods</h3>
+        <div style={{ maxHeight: "150px", overflowY: "auto" }}>
+          {paymentMethods.length > 0 ? (
+            paymentMethods.map((method) => (
+              <div
+                key={method.id}
+                style={{
+                  display: "flex",
+                  alignItems: "center",
+                  padding: "8px",
+                  marginBottom: "6px",
+                  border: `1px solid ${method.isSelected ? colors.primaryColor || "#007bff" : "#ddd"}`,
+                  borderRadius: "4px",
+                  cursor: "pointer",
+                  backgroundColor: method.isSelected ? "#f8f9fa" : "transparent",
+                }}
+              >
+                {method.icon && (
+                  <img
+                    src={method.icon}
+                    alt={method.name}
+                    style={{ width: "20px", height: "20px", marginRight: "8px" }}
+                  />
+                )}
+                <span style={{ fontSize: "14px" }}>{method.name}</span>
+              </div>
+            ))
+          ) : (
+            <p style={{ fontSize: "14px" }}>No payment methods available</p>
+          )}
+        </div>
+      </div>
+
+      <button
+        onClick={handlePayment}
+        style={{
+          backgroundColor: colors.buttonColor || "#007bff",
+          color: colors.buttonTextColor || "#ffffff",
+          padding: "10px 16px",
+          border: "none",
+          borderRadius: "4px",
+          fontSize: "16px",
+          cursor: "pointer",
+          width: "100%",
+        }}
+      >
+        Pay {currency}
+        {amount.toFixed(2)}
+      </button>
+    </div>
+  );
+};
+
+export default PaymentSideBarMobile;

package/src/components/PaymentSideBar/ResponsivePaymentSideBar.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { PaymentSideBarProps } from "./types";
+import PaymentSideBarDesktop from "./PaymentSideBarDesktop";
+import PaymentSideBarMobile from "./PaymentSideBarMobile";
+
+export default function ResponsivePaymentSideBar(props: PaymentSideBarProps) {
+  const { variant } = props;
+
+  if (variant === "mobile") {
+    return <PaymentSideBarMobile {...props} />;
+  }
+
+  return <PaymentSideBarDesktop {...props} />;
+}

package/src/components/PaymentSideBar/index.ts

@@ -0,0 +1,5 @@
+import PaymentSideBarDesktop from "./PaymentSideBarDesktop";
+import PaymentSideBarMobile from "./PaymentSideBarMobile";
+import ResponsivePaymentSideBar from "./ResponsivePaymentSideBar";
+export { PaymentSideBarDesktop, PaymentSideBarMobile, ResponsivePaymentSideBar };
+export type { PaymentSideBarProps } from "./types";

package/src/components/PaymentSideBar/types.ts

@@ -0,0 +1,44 @@
+export interface PaymentSideBarProps {
+  variant?: "mobile" | "desktop";
+  
+  // Payment-specific props
+  amount?: number;
+  currency?: string;
+  paymentMethods?: Array<{
+    id: string;
+    name: string;
+    icon?: string;
+    isSelected?: boolean;
+  }>;
+  customerDetails?: {
+    name?: string;
+    email?: string;
+    phone?: string;
+  };
+  onPaymentComplete?: (paymentId: string) => void;
+  onPaymentError?: (error: any) => void;
+  
+  // Styling props
+  colors?: {
+    primaryColor?: string;
+    secondaryColor?: string;
+    backgroundColor?: string;
+    textColor?: string;
+    buttonColor?: string;
+    buttonTextColor?: string;
+  };
+  
+  // Additional props
+  showSummary?: boolean;
+  orderDetails?: {
+    items: Array<{
+      name: string;
+      quantity: number;
+      price: number;
+    }>;
+    subtotal: number;
+    tax?: number;
+    discount?: number;
+    total: number;
+  };
+}

package/src/components/ServiceItem/ResponsiveServiceItem.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { ServiceItemProps } from "./types";
+import ServiceItemDesktop from "../ServiceItem/ServiceItemDesktop";
+import ServiceItemMobile from "../ServiceItem/ServiceItemMobile";
+
+export default function ResponsiveServiceItem(props: ServiceItemProps) {
+  const { variant } = props;
+
+  if (variant === "mobile") {
+    return <ServiceItemMobile {...props} />;
+  }
+
+  return <ServiceItemDesktop {...props} />;
+}