goobs-frontend 0.7.53 → 0.7.55

package/src/components/Card/index.tsx

@@ -0,0 +1,251 @@
+import React from 'react'
+import { BoxProps } from '@mui/material'
+import { CustomStepperProps } from '../Stepper'
+import InventoryCard from './variants/inventory'
+import SimplePricingSummary from './variants/simplepricingsummary'
+import DetailedPricingSummary from './variants/detailedpricingsummary'
+import ProductCard from './variants/product'
+import ProductSummaryCard from './variants/productsummary'
+import DefaultCard from './variants/defaultconfig'
+import { columnconfig } from '../Grid'
+import { CustomButtonProps } from '../Button'
+
+/**
+ * Props for the Card component.
+ * Extends BoxProps from Material-UI and includes additional custom properties.
+ */
+export interface CardProps extends BoxProps {
+  /** Title of the card */
+  title?: string
+  /** Whether to show an underline for the title */
+  titleUnderline?: boolean
+  /** Body text of the card */
+  body?: string
+  /** URL or path of the image to display */
+  image?: string
+  /** Position of the image in the card */
+  imagePosition?: 'top' | 'left'
+  /** Text for the parent breadcrumb */
+  parentText?: string
+  /** Link for the parent breadcrumb */
+  parentLink?: string
+  /** Text for the child breadcrumb */
+  childText?: string
+  /** Link for the child breadcrumb */
+  childLink?: string
+  /** Link for the grandchild breadcrumb */
+  grandchildLink?: string
+  /** Whether to enable the favorite feature */
+  favoriteEnabled?: boolean
+  /** Whether to show breadcrumbs */
+  breadcrumbEnabled?: boolean
+  /** Whether to enable links */
+  linkEnabled?: boolean
+  /** Width of the card */
+  width?: string
+  /** Height of the card */
+  height?: string | number
+  /** Whether to show a stepper */
+  stepperEnabled?: boolean
+  /** Active step in the stepper */
+  stepperActiveStep?: number
+  /** Steps configuration for the stepper */
+  stepperSteps?: CustomStepperProps['steps']
+  /** Variant of the card to render */
+  variant?:
+    | 'default'
+    | 'inventory'
+    | 'pricingsummary'
+    | 'detailedpricingsummary'
+    | 'product'
+    | 'productsummary'
+  /** Props for the pricing summary variant */
+  pricingSummaryProps?: {
+    subtotal?: string
+    total?: string
+    proceedText?: string
+    taxText?: string
+    discountText?: string
+    onProceed?: () => void
+  }
+  /** Props for the detailed pricing summary variant */
+  detailedPricingSummaryProps?: {
+    product?: string
+    vendor?: string
+    vendorPrice?: string
+    subtotal?: string
+    vat?: string
+    total?: string
+    proceedText?: string
+    onProceed?: () => void
+  }
+  /** Props for the inventory variant */
+  inventoryProps?: {
+    license?: string
+    developmentUse?: string
+    productionUse?: string
+    updates?: string
+    support?: string
+    price?: string
+    quantity?: number
+    onRemove?: () => void
+  }
+  /** Props for the product variant */
+  productProps?: {
+    title?: string
+    description?: string
+    image?: string
+    price?: string
+    onBuy?: () => void
+    favoriteEnabled?: boolean
+    linkEnabled?: boolean
+    grandchildLink?: string
+    numDevelopers?: number
+    onAddDeveloper?: () => void
+    licenses?: number
+    unitPrice?: number
+    total?: number
+    rating?: number
+    numReviews?: number
+    releaseDate?: string
+    category?: string
+    onContact?: () => void
+    createdBy?: string
+    featuredescriptions?: string[]
+  }
+  /** Props for the product summary variant */
+  productSummaryProps?: {
+    annualPrice?: string
+    monthlyPrice?: string
+    button1Props?: CustomButtonProps
+    button2Props?: CustomButtonProps
+  }
+  /** Configuration for grid columns */
+  columnconfig?: columnconfig
+}
+
+/**
+ * Card component that renders different card variants based on the provided props.
+ * It supports various card types including default, inventory, pricing summary, product, and more.
+ */
+const Card: React.FC<CardProps> = ({
+  title,
+  titleUnderline = true,
+  body,
+  image,
+  imagePosition = 'top',
+  parentText = 'Parent',
+  parentLink = '/',
+  childText = 'Child',
+  childLink = '/',
+  grandchildLink = '/',
+  favoriteEnabled = false,
+  breadcrumbEnabled = false,
+  linkEnabled = false,
+  width = '100%',
+  height,
+  stepperEnabled = false,
+  stepperActiveStep = -1,
+  stepperSteps = [],
+  variant = 'default',
+  pricingSummaryProps,
+  detailedPricingSummaryProps,
+  inventoryProps,
+  productProps,
+  productSummaryProps,
+  ...rest
+}) => {
+  // Render the default card variant
+  if (variant === 'default') {
+    return (
+      <DefaultCard
+        title={title}
+        titleUnderline={titleUnderline}
+        body={body}
+        image={image}
+        imagePosition={imagePosition}
+        parentText={parentText}
+        parentLink={parentLink}
+        childText={childText}
+        childLink={childLink}
+        grandchildLink={grandchildLink}
+        favoriteEnabled={favoriteEnabled}
+        breadcrumbEnabled={breadcrumbEnabled}
+        linkEnabled={linkEnabled}
+        width={width}
+        height={height}
+        stepperEnabled={stepperEnabled}
+        stepperActiveStep={stepperActiveStep}
+        stepperSteps={stepperSteps}
+        {...rest}
+      />
+    )
+  }
+
+  // Render the inventory card variant
+  if (variant === 'inventory') {
+    return (
+      <InventoryCard
+        title={title}
+        image={image}
+        width={width}
+        height={height}
+        {...inventoryProps}
+        {...rest}
+      />
+    )
+  }
+
+  // Render the simple pricing summary card variant
+  if (variant === 'pricingsummary') {
+    return (
+      <SimplePricingSummary
+        width={width}
+        height={height}
+        {...pricingSummaryProps}
+        {...rest}
+      />
+    )
+  }
+
+  // Render the detailed pricing summary card variant
+  if (variant === 'detailedpricingsummary') {
+    return (
+      <DetailedPricingSummary
+        width={width}
+        height={height}
+        {...detailedPricingSummaryProps}
+        {...rest}
+      />
+    )
+  }
+
+  // Render the product card variant
+  if (variant === 'product') {
+    return (
+      <ProductCard width={width} height={height} {...productProps} {...rest} />
+    )
+  }
+
+  // Render the product summary card variant
+  if (variant === 'productsummary') {
+    return (
+      <ProductSummaryCard
+        title={title}
+        body={body}
+        annualPrice={productSummaryProps?.annualPrice}
+        monthlyPrice={productSummaryProps?.monthlyPrice}
+        width={width}
+        height={height}
+        button1Props={productSummaryProps?.button1Props}
+        button2Props={productSummaryProps?.button2Props}
+        {...rest}
+      />
+    )
+  }
+
+  // Return null if no matching variant is found
+  return null
+}
+
+export default Card

package/src/components/Card/variants/defaultconfig/index.tsx

@@ -0,0 +1,237 @@
+import React from 'react'
+import { Box, Paper, BoxProps, useMediaQuery, useTheme } from '@mui/material'
+import Typography from '../../../../components/Typography'
+import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos'
+import InfoIcon from '@mui/icons-material/Info'
+import StyledTooltip from '../../../../components/Tooltip'
+import CustomButton from '../../../../components/Button'
+import Link from 'next/link'
+import FavoriteIcon from '../../../../components/Icons/FavoriteIcon'
+import {
+  CustomStepper,
+  CustomStepperProps,
+} from '../../../../components/Stepper'
+
+/**
+ * Props for the DefaultCard component.
+ * Extends BoxProps from Material-UI and includes additional custom properties.
+ */
+interface DefaultCardProps extends BoxProps {
+  /** Title of the card */
+  title?: string
+  /** Whether to show an underline for the title */
+  titleUnderline?: boolean
+  /** Body text of the card */
+  body?: string
+  /** URL or path of the image to display */
+  image?: string
+  /** Position of the image in the card */
+  imagePosition?: 'top' | 'left'
+  /** Text for the parent breadcrumb */
+  parentText?: string
+  /** Link for the parent breadcrumb */
+  parentLink?: string
+  /** Text for the child breadcrumb */
+  childText?: string
+  /** Link for the child breadcrumb */
+  childLink?: string
+  /** Link for the grandchild breadcrumb */
+  grandchildLink?: string
+  /** Whether to enable the favorite feature */
+  favoriteEnabled?: boolean
+  /** Whether to show breadcrumbs */
+  breadcrumbEnabled?: boolean
+  /** Whether to enable links */
+  linkEnabled?: boolean
+  /** Width of the card */
+  width?: string
+  /** Height of the card */
+  height?: string | number
+  /** Whether to show a stepper */
+  stepperEnabled?: boolean
+  /** Active step in the stepper */
+  stepperActiveStep?: number
+  /** Steps configuration for the stepper */
+  stepperSteps?: CustomStepperProps['steps']
+}
+
+/**
+ * DefaultCard component renders a customizable card with various features such as
+ * image, title, body text, breadcrumbs, favorite icon, and stepper.
+ * It adapts its layout based on the screen size and provided props.
+ */
+const DefaultCard: React.FC<DefaultCardProps> = ({
+  title,
+  titleUnderline = true,
+  body,
+  image,
+  imagePosition = 'top',
+  parentText = 'Parent',
+  parentLink = '/',
+  childText = 'Child',
+  childLink = '/',
+  grandchildLink = '/',
+  favoriteEnabled = false,
+  breadcrumbEnabled = false,
+  linkEnabled = false,
+  width = '100%',
+  height,
+  stepperEnabled = false,
+  stepperActiveStep = -1,
+  stepperSteps = [],
+  ...rest
+}) => {
+  const theme = useTheme()
+  /** Determines if the current viewport is mobile size */
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'))
+
+  return (
+    <Paper
+      elevation={1}
+      sx={{
+        position: 'relative',
+        display: 'flex',
+        flexDirection:
+          imagePosition === 'left' ? 'row' : isMobile ? 'row' : 'column',
+        justifyContent: isMobile ? 'space-between' : 'flex-start',
+        alignItems: isMobile ? 'center' : 'stretch',
+        border: '1px solid #e8e8e8',
+        width: width,
+        height: height,
+        ...rest.sx,
+      }}
+    >
+      {/* Render image if provided */}
+      {image && (
+        <Box
+          // @ts-ignore
+          sx={{
+            width: imagePosition === 'left' ? '200px' : '100%',
+            height: imagePosition === 'left' ? '100%' : '200px',
+            backgroundImage: `url(${image})`,
+            backgroundSize: 'cover',
+            backgroundPosition: 'center',
+            flexShrink: 0,
+          }}
+        />
+      )}
+      <Box sx={{ flexGrow: 1, display: 'flex', flexDirection: 'column' }}>
+        {/* Render title and favorite icon if title is provided */}
+        {title && (
+          <Box
+            sx={{
+              borderBottom: titleUnderline ? '1px solid #e8e8e8' : 'none',
+              width: '100%',
+              paddingLeft: '15px',
+              paddingRight: '15px',
+              paddingBottom: '10px',
+              paddingTop: '10px',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+            }}
+          >
+            <Typography text={title} fontcolor="black" fontvariant="merrih5" />
+            {favoriteEnabled && <FavoriteIcon />}
+          </Box>
+        )}
+        {/* Render body text or info icon for mobile */}
+        {body && (
+          <Box sx={{ padding: isMobile ? '0 15px' : '16px 15px' }}>
+            {!isMobile && (
+              <Typography
+                text={body}
+                fontcolor="black"
+                fontvariant="merriparagraph"
+              />
+            )}
+            {isMobile && (
+              <StyledTooltip
+                title={body}
+                placement="right"
+                arrow
+                tooltipcolor="black"
+                tooltipplacement="right"
+                offsetX={0}
+                offsetY={0}
+                disableHoverListener
+              >
+                <InfoIcon style={{ color: 'black', cursor: 'pointer' }} />
+              </StyledTooltip>
+            )}
+          </Box>
+        )}
+        {/* Render stepper if enabled */}
+        {stepperEnabled && (
+          <Box sx={{ padding: '0px 15px' }}>
+            <CustomStepper
+              activeStep={stepperActiveStep}
+              nonLinear
+              orientation="vertical"
+              steps={stepperSteps}
+              sx={{
+                '.MuiStepIcon-text': { display: 'none' },
+                '.MuiStepConnector-line': { display: 'none' },
+              }}
+            />
+          </Box>
+        )}
+        {/* Render breadcrumbs and link button */}
+        <Box
+          sx={{
+            width: '100%',
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            paddingLeft: '15px',
+            paddingRight: '15px',
+            paddingBottom: '10px',
+            marginTop: 'auto',
+          }}
+        >
+          <Box>
+            {breadcrumbEnabled && (
+              <>
+                <Link href={parentLink} passHref>
+                  <Typography
+                    text={parentText}
+                    fontcolor="black"
+                    fontvariant="merriparagraph"
+                  />
+                </Link>
+                <Typography
+                  text=">"
+                  fontcolor="black"
+                  fontvariant="merriparagraph"
+                />
+                <Link href={childLink} passHref>
+                  <Typography
+                    text={childText}
+                    fontcolor="black"
+                    fontvariant="merriparagraph"
+                  />
+                </Link>
+              </>
+            )}
+          </Box>
+          <Box sx={{ paddingLeft: '10px' }}>
+            {linkEnabled && (
+              <Link href={grandchildLink} passHref>
+                <CustomButton
+                  icon={<ArrowForwardIosIcon />}
+                  iconcolor="black"
+                  iconsize="15px"
+                  iconlocation="right"
+                  backgroundcolor="none"
+                  variant="text"
+                />
+              </Link>
+            )}
+          </Box>
+        </Box>
+      </Box>
+    </Paper>
+  )
+}
+
+export default DefaultCard

package/src/components/Card/variants/detailedpricingsummary/index.tsx

@@ -0,0 +1,179 @@
+import React from 'react'
+import { Box, Paper } from '@mui/material'
+import Typography from '../../../../components/Typography'
+import CustomButton from '../../../../components/Button'
+
+/**
+ * Props for the DetailedPricingSummary component.
+ */
+interface DetailedPricingSummaryProps {
+  /** Width of the pricing summary card */
+  width?: string
+  /** Height of the pricing summary card */
+  height?: string | number
+  /** Description of the product */
+  product?: string
+  /** Name of the vendor */
+  vendor?: string
+  /** Price from the vendor */
+  vendorPrice?: string
+  /** Subtotal of the order */
+  subtotal?: string
+  /** VAT amount */
+  vat?: string
+  /** Total price of the order */
+  total?: string
+  /** Text for the proceed button */
+  proceedText?: string
+  /** Function to call when the proceed button is clicked */
+  onProceed?: () => void
+}
+
+/**
+ * DetailedPricingSummary component renders a card with detailed pricing information.
+ * It displays product details, vendor information, subtotal, VAT, total, and a proceed button.
+ */
+const DetailedPricingSummary: React.FC<DetailedPricingSummaryProps> = ({
+  width = '100%',
+  height,
+  product = 'Goobs Repo Unlimited × 1',
+  vendor = 'Technologies Unlimited',
+  vendorPrice = '$180.00',
+  subtotal = '$180.00',
+  vat = '$0.00',
+  total = '$180.00',
+  proceedText = 'Proceed to checkout',
+  onProceed,
+}) => {
+  return (
+    <Paper
+      elevation={1}
+      sx={{
+        position: 'relative',
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'flex-start',
+        alignItems: 'stretch',
+        border: '1px solid #e8e8e8',
+        width: width,
+        minHeight: height,
+        padding: '16px',
+      }}
+    >
+      <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+        {/* Product section */}
+        <Typography
+          text="Product"
+          fontcolor="black"
+          fontvariant="merriparagraph"
+        />
+        <Typography
+          text={product}
+          fontcolor="black"
+          fontvariant="merriparagraph"
+          sx={{ marginTop: '8px' }}
+        />
+
+        {/* Vendor section */}
+        <Box sx={{ marginTop: '16px' }}>
+          <Box
+            sx={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              alignItems: 'center',
+            }}
+          >
+            <Typography
+              text="Vendor:"
+              fontcolor="black"
+              fontvariant="merriparagraph"
+            />
+            <Typography
+              text={vendor}
+              fontcolor="black"
+              fontvariant="merriparagraph"
+            />
+          </Box>
+          <Box
+            sx={{
+              display: 'flex',
+              justifyContent: 'flex-end',
+              alignItems: 'center',
+            }}
+          >
+            <Typography
+              text={vendorPrice}
+              fontcolor="black"
+              fontvariant="merriparagraph"
+            />
+          </Box>
+        </Box>
+
+        {/* Subtotal section */}
+        <Box sx={{ marginTop: '16px' }}>
+          <Typography
+            text="Subtotal"
+            fontcolor="black"
+            fontvariant="merriparagraph"
+          />
+          <Typography
+            text={subtotal}
+            fontcolor="black"
+            fontvariant="merriparagraph"
+            align="right"
+          />
+        </Box>
+
+        {/* VAT section */}
+        <Box sx={{ marginTop: '8px' }}>
+          <Typography
+            text="VAT"
+            fontcolor="black"
+            fontvariant="merriparagraph"
+          />
+          <Typography
+            text={vat}
+            fontcolor="black"
+            fontvariant="merriparagraph"
+            align="right"
+          />
+        </Box>
+
+        {/* Total section */}
+        <Box
+          sx={{
+            borderTop: '1px solid #e8e8e8',
+            marginTop: '8px',
+            paddingTop: '8px',
+          }}
+        >
+          <Box
+            sx={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              alignItems: 'center',
+            }}
+          >
+            <Typography text="Total" fontcolor="black" fontvariant="merrih5" />
+            <Typography text={total} fontcolor="black" fontvariant="merrih5" />
+          </Box>
+        </Box>
+      </Box>
+
+      {/* Proceed button */}
+      <Box sx={{ marginTop: '16px' }}>
+        <CustomButton
+          text={proceedText}
+          variant="contained"
+          backgroundcolor="black"
+          fontcolor="white"
+          fontvariant="merriparagraph"
+          onClick={onProceed}
+          width="100%"
+        />
+      </Box>
+    </Paper>
+  )
+}
+
+export default DetailedPricingSummary