@campxdev/shared 3.0.9 → 3.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/shared",
-  "version": "3.0.9",
+  "version": "3.1.1",
   "main": "./exports.ts",
   "scripts": {
     "start": "react-scripts start",

package/src/components/CustomJoyRideStyles.css

@@ -1,18 +1,84 @@
-  .react-joyride__tooltip {
-    background-color: 'rgb(255, 255, 255)';
-  
-  }
-  
-  div.react-joyride__tooltip > div:nth-child(1) {
-   text-align: left !important;
-  }
+/* Modern ReactJoyride Styles */
+.react-joyride__tooltip {
+  background-color: #ffffff !important;
+  border-radius: 12px !important;
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
+  border: 1px solid #f3f4f6 !important;
+  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif !important;
+  padding-top: 16px !important;
+}
+
+.react-joyride__tooltip div {
+  text-align: left !important;
+}
+
+
+.react-joyride__tooltip > div:nth-child(1) div:nth-child(2) {
+  padding: 0 !important;
+  font-size: 14px !important;
+  line-height: 1.5 !important;
+  color: #4b5563 !important;
+}
+
+/* Adjust skip button positioning */
+.react-joyride__tooltip button[data-action="skip"] {
+  top: 16px !important;
+  right: 16px !important;
+}
+
+/* Beacon styling */
+.react-joyride__beacon {
+  background-color: #3b82f6 !important;
+  border: 3px solid #3b82f6 !important;
+  border-radius: 50% !important;
+  box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.2) !important;
+}
 
-  div.react-joyride__tooltip > div:nth-child(1) div:nth-child(2) {
-    padding: 20px 0px !important; 
-   }
+.react-joyride__beacon::before {
+  background-color: #3b82f6 !important;
+  animation: joyride-beacon-pulse 1.5s ease-in-out infinite !important;
+}
 
-   div.react-joyride__tooltip > div:nth-child(2) {
-    flex-direction: row-reverse !important;
-   }
-  
+/* Button hover effects */
+.react-joyride__tooltip button[data-action="next"]:hover {
+  background-color: #000000 !important;
+  transform: translateY(-1px) !important;
+}
 
+.react-joyride__tooltip button[data-action="back"]:hover {
+  background-color: #f9fafb !important;
+  border-color: #d1d5db !important;
+}
+
+.react-joyride__tooltip button[data-action="skip"]:hover {
+  background-color: #f3f4f6 !important;
+  color: #374151 !important;
+}
+
+/* Progress indicator */
+.react-joyride__tooltip .react-joyride__tooltip-footer {
+  margin-top: 16px !important;
+  padding-top: 16px !important;
+  border-top: 1px solid #f3f4f6 !important;
+}
+
+/* Arrow styling */
+.react-joyride__tooltip-arrow {
+  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.1)) !important;
+}
+
+/* Custom keyframe for beacon pulse */
+@keyframes joyride-beacon-pulse {
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(1.2);
+    opacity: 0.7;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}

package/src/components/Form/Form.tsx

@@ -127,7 +127,7 @@ export default function Form({
           fullWidth
           variant="outlined"
           onClick={() => {
-            onCancel ? onCancel() : null
+            if (onCancel) onCancel()
           }}
           disabled={isLoading}
           {...buttonProps}

package/src/components/Form/RenderForm.tsx

@@ -88,30 +88,40 @@ const RenderForm = ({
           width: '100%',
         }}
       >
-        {fields?.map((item) => {
-          return renderFormField({
-            field: item,
-            control,
-            dropdown: dropdowns ? dropdowns[item?.name] : null,
-            elementProps: item?.elementProps,
-            value: data ? data[item?.name] : null,
-            fieldArrayOptions,
-          })
-        })}
+        {fields?.map((item, index) => (
+          <RenderFormField
+            key={index}
+            field={item}
+            control={control}
+            dropdown={dropdowns ? dropdowns[item?.name] : null}
+            elementProps={item?.elementProps}
+            value={data ? data[item?.name] : null}
+            fieldArrayOptions={fieldArrayOptions}
+          />
+        ))}
       </Box>
     </>
   )
 }
 export default RenderForm
 
-const renderFormField = ({
+interface RenderFormFieldProps {
+  field: Field
+  control: Control<any, any>
+  dropdown: Option[] | null
+  elementProps: any
+  value: any
+  fieldArrayOptions?: { index: number; name: string }
+}
+
+const RenderFormField = ({
   field,
   control,
   dropdown,
   elementProps,
   value,
   fieldArrayOptions,
-}) => {
+}: RenderFormFieldProps) => {
   const name = fieldArrayOptions?.name
     ? `${fieldArrayOptions?.name}.${fieldArrayOptions?.index}.${field?.name}`
     : field?.name

package/src/components/MyProfile/MyProfile.tsx

@@ -84,7 +84,7 @@ const MyProfile = ({ close }) => {
       case 4:
         return '4th'
       default:
-        ''
+        return ''
     }
   }
 

package/src/components/ReactJoyRide.tsx

@@ -1,7 +1,7 @@
 import TourIcon from '@mui/icons-material/Tour'
-import { Box, IconButton } from '@mui/material'
+import { Box, Button, Typography } from '@mui/material'
 import { ReactNode, useEffect, useState } from 'react'
-import ReactJoyride, { Step } from 'react-joyride'
+import ReactJoyride, { Step, CallBackProps } from 'react-joyride'
 import { useQuery } from 'react-query'
 import axios from '../config/axios'
 import './CustomJoyRideStyles.css'
@@ -11,14 +11,13 @@ function ReactJoyRide({
   steps,
   children,
   tourName,
-  iconPosition,
 }: {
   steps: Step[]
   children?: ReactNode
   tourName: string
-  iconPosition?: 'left' | 'right'
 }) {
   const [run, setRun] = useState(false)
+  const [stepIndex, setStepIndex] = useState(0)
 
   const fetchTours = (params) => {
     return axios.get(`/square/tours`).then((res) => res.data)
@@ -39,25 +38,68 @@ function ReactJoyRide({
     }
   }
 
-  const handleJoyRideCallback = (data) => {
-    const { action, status } = data
+  const handleJoyRideCallback = (data: CallBackProps) => {
+    const { action, status, index } = data
+
+    if (action === 'next' || action === 'prev') {
+      setStepIndex(index + (action === 'next' ? 1 : 0))
+    }
 
     if (action === 'reset') {
       setRun(false)
+      setStepIndex(0)
       completeTour()
     }
   }
 
-  const customSteps = steps.map((step) => ({
-    ...step,
-    content: (
-      <div style={{ fontFamily: 'Roboto, sans-serif' }}>{step.content}</div>
-    ),
-  }))
-
-  if (toursLoading) {
-    return <Spinner />
-  }
+  const customSteps = steps.map((step, index) => ({
+      ...step,
+      title: '', // Remove the automatic title
+      content: (
+        <Box sx={{ fontFamily: 'Roboto, sans-serif',display: 'flex', flexDirection: 'column', }}>
+  
+          <Typography 
+            variant="caption" 
+            sx={{ 
+              color: '#6b7280', 
+              fontWeight: 500,
+              textTransform: 'uppercase',
+              letterSpacing: '0.5px',
+              fontSize: '11px',
+            }}
+          >
+            Step {index + 1}
+          </Typography>
+          <Box sx={{ padding: '4px 0' }}>
+            <Typography 
+              sx={{ 
+                lineHeight: 1.5,
+                color: '#4b5563',
+                fontFamily: 'Poppins, sans-serif',
+                fontSize: '16px',
+                fontWeight: '600',
+                marginTop: '12px',
+              }}
+            >
+              {step.title}
+            </Typography>
+          </Box>
+          <Box sx={{ padding: '4px 0' }}>
+            <Typography 
+              sx={{ 
+                fontSize: '14px',
+                lineHeight: 1.5,
+                color: '#4b5563',
+                fontFamily: 'Heebo, sans-serif',
+                fontWeight: '500',
+              }}
+            >
+              {step.content}
+            </Typography>
+          </Box>
+        </Box>
+      ),
+    }))
 
   return (
     <>
@@ -67,48 +109,104 @@ function ReactJoyRide({
           run={run}
           steps={customSteps}
           styles={{
+            options: {
+              primaryColor: '#121212',
+              textColor: '#1f2937',
+              backgroundColor: '#ffffff',
+              overlayColor: 'rgba(0, 0, 0, 0.4)',
+              arrowColor: '#ffffff',
+              zIndex: 1000,
+            },
+            tooltip: {
+              borderRadius: '12px',
+              boxShadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
+              fontSize: '14px',
+              padding: '20px',
+              minWidth: '320px',
+              maxWidth: '400px',
+            },
+            tooltipContainer: {
+              textAlign: 'left',
+            },
+            tooltipTitle: {
+              fontSize: '16px',
+              fontWeight: '600',
+              color: '#1f2937',
+     fontFamily: 'Poppins, sans-serif',
+            },
+            tooltipContent: {
+              fontSize: '14px',
+              lineHeight: '1.5',
+              color: '#4b5563',
+              padding: '0',
+              fontFamily: 'Heebo, sans-serif !important',
+              fontWeight: '400'
+            },
             buttonNext: {
-              backgroundColor: '#D27D2D',
+              backgroundColor: '#121212',
               color: 'white',
-              height: '28px',
-              width: '100px',
-              padding: '0px',
+              borderRadius: '8px',
+              fontSize: '14px',
+              fontWeight: '500',
+              height: '40px',
+              minWidth: '80px',
+              padding: '0 16px',
+              border: 'none',
+              cursor: 'pointer',
+              transition: 'all 0.2s ease',
               fontFamily: 'Roboto, sans-serif',
             },
-
             buttonBack: {
               backgroundColor: 'transparent',
-              color: 'black',
-              borderRadius: '4px',
-              height: '28px',
-              width: '100px',
-              gap: '10px',
-              marginLeft: '5px',
-              padding: '0px',
-              border: '1px solid black',
+              color: '#121212',
+              borderRadius: '8px',
+              fontSize: '14px',
+              fontWeight: '500',
+              height: '40px',
+              minWidth: '80px',
+              padding: '0 16px',
+              border: '1.5px solid #e5e7eb',
+              cursor: 'pointer',
+              transition: 'all 0.2s ease',
+              marginRight: '8px',
               fontFamily: 'Roboto, sans-serif',
             },
-
             buttonSkip: {
               backgroundColor: 'transparent',
-              color: 'cement',
-              borderRadius: '0px',
-              border: '0px',
+              color: '#6b7280',
               fontSize: '13px',
-              padding: '21px 15px',
-              right: '0px',
-              top: '0px',
+              fontWeight: '500',
+              border: 'none',
+              cursor: 'pointer',
               position: 'absolute',
-              lineHeight: 1,
+              top: '16px',
+              right: '16px',
+              padding: '4px 8px',
+              borderRadius: '6px',
+              transition: 'all 0.2s ease',
               fontFamily: 'Roboto, sans-serif',
             },
+            buttonClose: {
+              display: 'none',
+            },
+            beacon: {
+              backgroundColor: '#3b82f6',
+              borderRadius: '50%',
+              border: '3px solid #3b82f6',
+              boxShadow: '0 0 0 6px rgba(59, 130, 246, 0.2)',
+            },
+            beaconInner: {
+              backgroundColor: '#3b82f6',
+              borderRadius: '50%',
+            },
           }}
           continuous
           showSkipButton
+          showProgress
           scrollToFirstStep
-          disableOverlay
+          disableOverlay={false}
           disableOverlayClose
-          disableScrolling
+          disableScrolling={false}
           hideCloseButton
           locale={{
             last: 'Finish',
@@ -120,22 +218,44 @@ function ReactJoyRide({
 
         {children}
 
-        <IconButton
+        <Button
           onClick={() => setRun(true)}
+          variant="contained"
           sx={{
             position: 'fixed',
-            bottom: '85px',
-            left: iconPosition === 'left' ? '235px' : 'auto',
-            right: iconPosition === 'right' ? '20px' : 'auto',
+            top: '50%',
+            right: '0px',
+            transform: 'translateY(-50%)',
             zIndex: 1000,
-            borderRadius: '50%',
-            width: '50px',
-            height: '50px',
-            backgroundColor: '#FF0244',
+            borderRadius: '8px 0 0 8px',
+            backgroundColor: '#E0E0E7',
+            color: '#4b5261ff',
+            fontSize: '14px',
+            fontWeight: 500,
+            padding: '60px 4px',
+            minWidth: 'auto',
+            textTransform: 'none',
+            border: '1px solid #D0D0E3',
+            borderRight: 'none',
+            fontFamily: 'Roboto, sans-serif',
+            letterSpacing: '0.025em',
+            writingMode: 'vertical-rl',
+            textOrientation: 'mixed',
+            whiteSpace: 'nowrap',
+            transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 2)',
+            '&:hover': {
+              backgroundColor: '#1E027F',
+              color: 'white',
+              boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
+              transform: 'translateY(-50%) translateX(-4px)',
+            },
+            '&:active': {
+              transform: 'translateY(-50%) translateX(0px)',
+            },
           }}
         >
-          <TourIcon sx={{ color: 'white' }} />
-        </IconButton>
+          Take a Tour
+        </Button>
       </Box>
     </>
   )

package/src/components/ReactJoyRideDemo.tsx

@@ -0,0 +1,240 @@
+import React, { ReactNode, useState } from 'react'
+import TourIcon from '@mui/icons-material/Tour'
+import { Box, Button, Typography } from '@mui/material'
+import ReactJoyride, { Step, CallBackProps } from 'react-joyride'
+// import './CustomJoyRideStyles.css'
+
+function ReactJoyRideDemo({
+  steps,
+  children,
+  tourName,
+}: {
+  steps: Step[]
+  children?: ReactNode
+  tourName: string
+}) {
+  const [run, setRun] = useState(false)
+  const [stepIndex, setStepIndex] = useState(0)
+  const handleJoyRideCallback = (data: CallBackProps) => {
+    const { action, status, index } = data
+
+    if (action === 'next' || action === 'prev') {
+      setStepIndex(index + (action === 'next' ? 1 : 0))
+    }
+
+    if (action === 'reset') {
+      setRun(false)
+      setStepIndex(0)
+      // For demo purposes, we'll just log instead of making API calls
+      console.log('Tour completed:', tourName)
+    }
+  }
+
+  const customSteps = steps.map((step, index) => ({
+    ...step,
+    content: (
+      <Box sx={{ fontFamily: 'Roboto, sans-serif',display: 'flex', flexDirection: 'column', }}>
+
+        <Typography 
+          variant="caption" 
+          sx={{ 
+            color: '#6b7280', 
+            fontWeight: 500,
+            textTransform: 'uppercase',
+            letterSpacing: '0.5px',
+            fontSize: '11px',
+          }}
+        >
+          Step {index + 1}
+        </Typography>
+        <Box sx={{ padding: '4px 0' }}>
+          <Typography 
+            sx={{ 
+              lineHeight: 1.5,
+              color: '#4b5563',
+              fontFamily: 'Poppins, sans-serif',
+                fontSize: '16px',
+                fontWeight: '600',
+                marginTop: '12px',
+            }}
+          >
+            {step.title}
+          </Typography>
+        </Box>
+        <Box sx={{ padding: '4px 0' }}>
+          <Typography 
+            sx={{ 
+              fontSize: '14px',
+              lineHeight: 1.5,
+              color: '#4b5563',
+              fontFamily: 'Heebo, sans-serif',
+              fontWeight: '500',
+            }}
+          >
+            {step.content}
+          </Typography>
+        </Box>
+      </Box>
+    ),
+  }))
+
+  return (
+    <>
+      <Box>
+        <ReactJoyride
+          callback={handleJoyRideCallback}
+          run={run}
+          steps={customSteps}
+          styles={{
+            options: {
+              primaryColor: '#121212',
+              textColor: '#1f2937',
+              backgroundColor: '#ffffff',
+              overlayColor: 'rgba(0, 0, 0, 0.4)',
+              arrowColor: '#ffffff',
+              zIndex: 1000,
+            },
+            tooltip: {
+              borderRadius: '12px',
+              boxShadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
+              fontSize: '14px',
+              padding: '20px',
+              minWidth: '320px',
+              maxWidth: '400px',
+            },
+            tooltipContainer: {
+              textAlign: 'left',
+            },
+            tooltipTitle: {
+              fontSize: '16px',
+              fontWeight: '600',
+              color: '#1f2937',
+              marginBottom: '8px',
+              display: 'none',
+            },
+            tooltipContent: {
+              fontSize: '14px',
+              lineHeight: '1.5',
+              color: '#4b5563',
+              padding: '0',
+            },
+            buttonNext: {
+              backgroundColor: '#121212',
+              color: 'white',
+              borderRadius: '8px',
+              fontSize: '14px',
+              fontWeight: '500',
+              height: '40px',
+              minWidth: '80px',
+              padding: '0 16px',
+              border: 'none',
+              cursor: 'pointer',
+              transition: 'all 0.2s ease',
+              fontFamily: 'Roboto, sans-serif',
+            },
+            buttonBack: {
+              backgroundColor: 'transparent',
+              color: '#121212',
+              borderRadius: '8px',
+              fontSize: '14px',
+              fontWeight: '500',
+              height: '40px',
+              minWidth: '80px',
+              padding: '0 16px',
+              border: '1.5px solid #e5e7eb',
+              cursor: 'pointer',
+              transition: 'all 0.2s ease',
+              marginRight: '8px',
+              fontFamily: 'Roboto, sans-serif',
+            },
+            buttonSkip: {
+              backgroundColor: 'transparent',
+              color: '#6b7280',
+              fontSize: '13px',
+              fontWeight: '500',
+              border: 'none',
+              cursor: 'pointer',
+              position: 'absolute',
+              top: '16px',
+              right: '16px',
+              padding: '4px 8px',
+              borderRadius: '6px',
+              transition: 'all 0.2s ease',
+              fontFamily: 'Roboto, sans-serif',
+            },
+            buttonClose: {
+              display: 'none',
+            },
+            beacon: {
+              backgroundColor: '#3b82f6',
+              borderRadius: '50%',
+              border: '3px solid #3b82f6',
+              boxShadow: '0 0 0 6px rgba(59, 130, 246, 0.2)',
+            },
+            beaconInner: {
+              backgroundColor: '#3b82f6',
+              borderRadius: '50%',
+            },
+          }}
+          continuous
+          showSkipButton
+          showProgress
+          scrollToFirstStep
+          disableOverlay={false}
+          disableOverlayClose
+          disableScrolling={false}
+          hideCloseButton
+          locale={{
+            last: 'Finish',
+            next: 'Next',
+            skip: 'Skip',
+            back: 'Previous',
+          }}
+        />
+
+        {children}
+
+        <Button
+          onClick={() => setRun(true)}
+          variant="contained"
+          startIcon={<TourIcon />}
+          sx={{
+            position: 'fixed',
+            top: '50%',
+            right: '20px',
+            transform: 'translateY(-50%)',
+            zIndex: 1000,
+            borderRadius: '12px',
+            backgroundColor: '#3b82f6',
+            color: 'white',
+            fontSize: '14px',
+            fontWeight: 600,
+            padding: '12px 20px',
+            minWidth: 'auto',
+            textTransform: 'none',
+            boxShadow: '0 10px 25px -5px rgba(59, 130, 246, 0.4), 0 4px 6px -2px rgba(59, 130, 246, 0.05)',
+            border: 'none',
+            fontFamily: 'Roboto, sans-serif',
+            letterSpacing: '0.025em',
+            transition: 'all 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
+            '&:hover': {
+              backgroundColor: '#2563eb',
+              boxShadow: '0 20px 25px -5px rgba(59, 130, 246, 0.4), 0 10px 10px -5px rgba(59, 130, 246, 0.1)',
+              transform: 'translateY(-50%) translateY(-1px)',
+            },
+            '& .MuiButton-startIcon': {
+              marginRight: '8px',
+              '& svg': {
+                fontSize: '18px',
+              },
+            },
+          }}
+        >
+          Take a Tour
+        </Button>
+      </Box>
+    </>
+  )
+}
+
+export default ReactJoyRideDemo

package/src/constants/UIConstants.ts

@@ -1,5 +1,4 @@
 import { ReactNode } from 'react'
-import { campxTenantKey } from '../contexts/Providers'
 
 // Configuration for tenant-specific batch suffixes
 const tenantBatchConfig = {
@@ -21,7 +20,7 @@ export const batchOptions = (() => {
   })
 
   // Check if current tenant has specific batch configuration
-  const tenantConfig = tenantBatchConfig[campxTenantKey]
+  const tenantConfig = tenantBatchConfig[window.location.hostname.split('.')[0]]
 
   if (tenantConfig) {
     const { batchConfigs } = tenantConfig

package/src/contexts/Providers.tsx

@@ -49,7 +49,7 @@ export default function Providers({ children }: { children: ReactNode }) {
   }
 
   useEffect(() => {
-    if (location.pathname === '/' && institutionCode && tenantCode) {
+    if (window.location.pathname === '/' && institutionCode && tenantCode) {
       window.location.replace(window.location.origin + `/${institutionCode}`)
     }
   }, [])