@argusoft/medplat-app-shell 1.0.6 → 1.0.8

package/src/views/feature-components/YearlyRecap/slides/ReachSlide.jsx

@@ -0,0 +1,273 @@
+import React, { useEffect, useState } from 'react';
+import { Box, Typography } from '@mui/material';
+import { motion } from 'framer-motion';
+import RecapSlide from '../components/RecapSlide';
+
+import { useTranslateProvider } from '@/common/languageTranslator/TranslationContext';
+
+import PropTypes from 'prop-types';
+
+const bubbleVariants = {
+  hidden: {
+    opacity: 0,
+    scale: 0.7,
+    y: 260,
+  },
+
+  focus: {
+    opacity: 1,
+    scale: 1,
+    y: '-25vh',
+    transition: {
+      duration: 1.3,
+      ease: 'easeOut',
+    },
+  },
+
+  parked: (pos) => {
+    const isSmall = window.innerWidth < 360;
+
+    // base vertical spacing derived from bubble size
+    const verticalUnit = isSmall ? 140 : 180;
+    const horizontalUnit = isSmall ? 40 : 80;
+
+    switch (pos) {
+      case 'topLeft':
+        return {
+          opacity: 1,
+          scale: 0.78,
+          x: -30,
+          y: -verticalUnit * 2,
+          transition: {
+            duration: 1.6,
+            ease: 'easeInOut',
+          },
+        };
+
+      case 'centerRight':
+        return {
+          opacity: 1,
+          scale: 0.78,
+          x: horizontalUnit,
+          y: -verticalUnit,
+          transition: {
+            duration: 1.6,
+            ease: 'easeInOut',
+          },
+        };
+
+      case 'bottomLeft':
+      default:
+        return {
+          opacity: 1,
+          scale: 0.78,
+          x: -30,
+          y: 0,
+          transition: {
+            duration: 1.6,
+            ease: 'easeInOut',
+          },
+        };
+    }
+  },
+};
+
+const FloatingOrbs = () => {
+  return (
+    <>
+      {[...Array(8)].map((_, i) => (
+        <motion.div
+          key={i}
+          initial={{
+            opacity: 0,
+            x: Math.random() * window.innerWidth,
+            y: window.innerHeight + 100,
+          }}
+          animate={{
+            opacity: [0, 0.4, 0],
+            y: -200,
+          }}
+          transition={{
+            duration: 12 + Math.random() * 6,
+            repeat: Infinity,
+            delay: Math.random() * 4,
+            ease: 'linear',
+          }}
+          style={{
+            position: 'absolute',
+            width: 12 + Math.random() * 14,
+            height: 12 + Math.random() * 14,
+            borderRadius: '50%',
+            background: 'rgba(255,255,255,0.4)',
+            filter: 'blur(1px)',
+            pointerEvents: 'none',
+          }}
+        />
+      ))}
+    </>
+  );
+};
+
+const Bubble = ({ title1, title2, value, color, phase, position }) => {
+  const BUBBLE_SIZE = 'clamp(180px, 55vw, 260px)';
+  return (
+    <motion.div
+      custom={position}
+      variants={bubbleVariants}
+      initial="hidden"
+      animate={phase}
+      style={{
+        position: 'absolute',
+        bottom: 0,
+        width: BUBBLE_SIZE,
+        height: BUBBLE_SIZE,
+        borderRadius: '50%',
+        background: color,
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        color: '#fff',
+        boxShadow: '0 18px 40px rgba(0,0,0,0.25)',
+        padding: '1rem',
+      }}
+    >
+      <Typography
+        variant="h6"
+        sx={{
+          opacity: 0.9,
+          letterSpacing: 0.5,
+          px: 1,
+          textAlign: 'center',
+          fontSize: 'clamp(0.85rem, 3.5vw, 1rem)',
+        }}
+      >
+        {title1}
+      </Typography>
+      <Typography
+        variant="h2"
+        sx={{
+          fontWeight: 900,
+          fontSize: 'clamp(1.8rem, 8vw, 3rem)',
+          lineHeight: 1,
+        }}
+      >
+        {value}
+      </Typography>
+      <Typography
+        variant="h6"
+        sx={{
+          opacity: 0.9,
+          letterSpacing: 0.5,
+          px: 1,
+          textAlign: 'center',
+          fontSize: 'clamp(0.85rem, 3.5vw, 1rem)',
+        }}
+      >
+        {title2}
+      </Typography>
+    </motion.div>
+  );
+};
+
+const ReachSlide = ({ data, onNext, onPrev, isActive }) => {
+  const { translate } = useTranslateProvider();
+  const [familyPhase, setFamilyPhase] = useState('hidden');
+  const [memberPhase, setMemberPhase] = useState('hidden');
+  const [childPhase, setChildPhase] = useState('hidden');
+
+  useEffect(() => {
+    if (!isActive) return;
+
+    // reset once
+    setFamilyPhase('hidden');
+    setMemberPhase('hidden');
+    setChildPhase('hidden');
+
+    const t1 = setTimeout(() => setFamilyPhase('focus'), 600);
+    const t2 = setTimeout(() => setFamilyPhase('parked'), 2600);
+
+    const t3 = setTimeout(() => setMemberPhase('focus'), 3200);
+    const t4 = setTimeout(() => setMemberPhase('parked'), 5200);
+
+    const t5 = setTimeout(() => setChildPhase('focus'), 5800);
+    const t6 = setTimeout(() => setChildPhase('parked'), 7800);
+
+    return () => {
+      [t1, t2, t3, t4, t5, t6].forEach(clearTimeout);
+    };
+  }, [isActive]);
+
+  return (
+    <RecapSlide
+      onNext={onNext}
+      onPrev={onPrev}
+      bgGradient="linear-gradient(to top, #fff1eb 0%, #ace0f9 100%)"
+      sx={{
+        backgroundSize: '400% 400%',
+        animation: 'gradientShift 20s ease infinite',
+      }}
+      isActive={isActive}
+    >
+      <Box
+        sx={{
+          position: 'relative',
+          height: '90vh',
+          width: '100%',
+          overflow: 'hidden',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          paddingBottom: 'env(safe-area-inset-bottom)',
+        }}
+      >
+        <FloatingOrbs />
+
+        <Bubble
+          title1={translate('A big year, you stood with')}
+          title2={translate('families')}
+          value={data.familiesContacted}
+          color="linear-gradient(135deg,#2196F3,#21CBF3)"
+          phase={familyPhase}
+          position="topLeft"
+        />
+
+        <Bubble
+          title1={translate('Your efforts touched the lives of')}
+          title2={translate('people')}
+          value={data.membersServed}
+          color="linear-gradient(135deg,#26A69A,#80CBC4)"
+          phase={memberPhase}
+          position="centerRight"
+        />
+
+        <Bubble
+          title1={translate('Because of you,')}
+          title2={translate('children are healthier today')}
+          value={data.childrenServed}
+          color="linear-gradient(135deg,#7E57C2,#B39DDB)"
+          phase={childPhase}
+          position="bottomLeft"
+        />
+      </Box>
+    </RecapSlide>
+  );
+};
+
+Bubble.propTypes = {
+  title1: PropTypes.string,
+  title2: PropTypes.string,
+  value: PropTypes.number,
+  color: PropTypes.string,
+  phase: PropTypes.string,
+  position: PropTypes.string,
+};
+
+ReachSlide.propTypes = {
+  data: PropTypes.any,
+  onNext: PropTypes.func,
+  onPrev: PropTypes.func,
+  isActive: PropTypes.bool,
+};
+
+export default ReachSlide;