@canmingir/link 1.1.7 → 1.2.0

package/minimal/src/sections/product/view/product-shop-view.jsx

@@ -1,240 +0,0 @@
-import orderBy from 'lodash/orderBy';
-import isEqual from 'lodash/isEqual';
-import { useState, useCallback } from 'react';
-
-import Stack from '@mui/material/Stack';
-import Container from '@mui/material/Container';
-import Typography from '@mui/material/Typography';
-
-import { paths } from 'src/routes/paths';
-
-import { useBoolean } from 'src/hooks/use-boolean';
-import { useDebounce } from 'src/hooks/use-debounce';
-
-import { useGetProducts, useSearchProducts } from 'src/api/product';
-import {
-  PRODUCT_SORT_OPTIONS,
-  PRODUCT_COLOR_OPTIONS,
-  PRODUCT_GENDER_OPTIONS,
-  PRODUCT_RATING_OPTIONS,
-  PRODUCT_CATEGORY_OPTIONS,
-} from 'src/_mock';
-
-import EmptyContent from 'src/components/empty-content';
-import { useSettingsContext } from 'src/components/settings';
-
-import ProductList from '../product-list';
-import ProductSort from '../product-sort';
-import CartIcon from '../common/cart-icon';
-import ProductSearch from '../product-search';
-import ProductFilters from '../product-filters';
-import { useCheckoutContext } from '../../checkout/context';
-import ProductFiltersResult from '../product-filters-result';
-
-// ----------------------------------------------------------------------
-
-const defaultFilters = {
-  gender: [],
-  colors: [],
-  rating: '',
-  category: 'all',
-  priceRange: [0, 200],
-};
-
-// ----------------------------------------------------------------------
-
-export default function ProductShopView() {
-  const settings = useSettingsContext();
-
-  const checkout = useCheckoutContext();
-
-  const openFilters = useBoolean();
-
-  const [sortBy, setSortBy] = useState('featured');
-
-  const [searchQuery, setSearchQuery] = useState('');
-
-  const debouncedQuery = useDebounce(searchQuery);
-
-  const [filters, setFilters] = useState(defaultFilters);
-
-  const { products, productsLoading, productsEmpty } = useGetProducts();
-
-  const { searchResults, searchLoading } = useSearchProducts(debouncedQuery);
-
-  const handleFilters = useCallback((name, value) => {
-    setFilters((prevState) => ({
-      ...prevState,
-      [name]: value,
-    }));
-  }, []);
-
-  const dataFiltered = applyFilter({
-    inputData: products,
-    filters,
-    sortBy,
-  });
-
-  const canReset = !isEqual(defaultFilters, filters);
-
-  const notFound = !dataFiltered.length && canReset;
-
-  const handleSortBy = useCallback((newValue) => {
-    setSortBy(newValue);
-  }, []);
-
-  const handleSearch = useCallback((inputValue) => {
-    setSearchQuery(inputValue);
-  }, []);
-
-  const handleResetFilters = useCallback(() => {
-    setFilters(defaultFilters);
-  }, []);
-
-  const renderFilters = (
-    <Stack
-      spacing={3}
-      justifyContent="space-between"
-      alignItems={{ xs: 'flex-end', sm: 'center' }}
-      direction={{ xs: 'column', sm: 'row' }}
-    >
-      <ProductSearch
-        query={debouncedQuery}
-        results={searchResults}
-        onSearch={handleSearch}
-        loading={searchLoading}
-        hrefItem={(id) => paths.product.details(id)}
-      />
-
-      <Stack direction="row" spacing={1} flexShrink={0}>
-        <ProductFilters
-          open={openFilters.value}
-          onOpen={openFilters.onTrue}
-          onClose={openFilters.onFalse}
-          //
-          filters={filters}
-          onFilters={handleFilters}
-          //
-          canReset={canReset}
-          onResetFilters={handleResetFilters}
-          //
-          colorOptions={PRODUCT_COLOR_OPTIONS}
-          ratingOptions={PRODUCT_RATING_OPTIONS}
-          genderOptions={PRODUCT_GENDER_OPTIONS}
-          categoryOptions={['all', ...PRODUCT_CATEGORY_OPTIONS]}
-        />
-
-        <ProductSort sort={sortBy} onSort={handleSortBy} sortOptions={PRODUCT_SORT_OPTIONS} />
-      </Stack>
-    </Stack>
-  );
-
-  const renderResults = (
-    <ProductFiltersResult
-      filters={filters}
-      onFilters={handleFilters}
-      //
-      canReset={canReset}
-      onResetFilters={handleResetFilters}
-      //
-      results={dataFiltered.length}
-    />
-  );
-
-  const renderNotFound = <EmptyContent filled title="No Data" sx={{ py: 10 }} />;
-
-  return (
-    <Container
-      maxWidth={settings.themeStretch ? false : 'lg'}
-      sx={{
-        mb: 15,
-      }}
-    >
-      <CartIcon totalItems={checkout.totalItems} />
-
-      <Typography
-        variant="h4"
-        sx={{
-          my: { xs: 3, md: 5 },
-        }}
-      >
-        Shop
-      </Typography>
-
-      <Stack
-        spacing={2.5}
-        sx={{
-          mb: { xs: 3, md: 5 },
-        }}
-      >
-        {renderFilters}
-
-        {canReset && renderResults}
-      </Stack>
-
-      {(notFound || productsEmpty) && renderNotFound}
-
-      <ProductList products={dataFiltered} loading={productsLoading} />
-    </Container>
-  );
-}
-
-// ----------------------------------------------------------------------
-
-function applyFilter({ inputData, filters, sortBy }) {
-  const { gender, category, colors, priceRange, rating } = filters;
-
-  const min = priceRange[0];
-
-  const max = priceRange[1];
-
-  // SORT BY
-  if (sortBy === 'featured') {
-    inputData = orderBy(inputData, ['totalSold'], ['desc']);
-  }
-
-  if (sortBy === 'newest') {
-    inputData = orderBy(inputData, ['createdAt'], ['desc']);
-  }
-
-  if (sortBy === 'priceDesc') {
-    inputData = orderBy(inputData, ['price'], ['desc']);
-  }
-
-  if (sortBy === 'priceAsc') {
-    inputData = orderBy(inputData, ['price'], ['asc']);
-  }
-
-  // FILTERS
-  if (gender.length) {
-    inputData = inputData.filter((product) => gender.includes(product.gender));
-  }
-
-  if (category !== 'all') {
-    inputData = inputData.filter((product) => product.category === category);
-  }
-
-  if (colors.length) {
-    inputData = inputData.filter((product) =>
-      product.colors.some((color) => colors.includes(color))
-    );
-  }
-
-  if (min !== 0 || max !== 200) {
-    inputData = inputData.filter((product) => product.price >= min && product.price <= max);
-  }
-
-  if (rating) {
-    inputData = inputData.filter((product) => {
-      const convertRating = (value) => {
-        if (value === 'up4Star') return 4;
-        if (value === 'up3Star') return 3;
-        if (value === 'up2Star') return 2;
-        return 1;
-      };
-      return product.totalRatings > convertRating(rating);
-    });
-  }
-
-  return inputData;
-}

package/minimal/src/sections/tour/tour-details-bookers.jsx

@@ -1,145 +0,0 @@
-import PropTypes from 'prop-types';
-import { useState, useCallback } from 'react';
-
-import Box from '@mui/material/Box';
-import Card from '@mui/material/Card';
-import Stack from '@mui/material/Stack';
-import Button from '@mui/material/Button';
-import Avatar from '@mui/material/Avatar';
-import { alpha } from '@mui/material/styles';
-import IconButton from '@mui/material/IconButton';
-import ListItemText from '@mui/material/ListItemText';
-
-import Iconify from 'src/components/iconify';
-
-// ----------------------------------------------------------------------
-
-export default function TourDetailsBookers({ bookers }) {
-  const [approved, setApproved] = useState([]);
-
-  const handleClick = useCallback(
-    (item) => {
-      const selected = approved.includes(item)
-        ? approved.filter((value) => value !== item)
-        : [...approved, item];
-
-      setApproved(selected);
-    },
-    [approved]
-  );
-
-  return (
-    <Box
-      gap={3}
-      display="grid"
-      gridTemplateColumns={{
-        xs: 'repeat(1, 1fr)',
-        sm: 'repeat(2, 1fr)',
-        md: 'repeat(3, 1fr)',
-      }}
-    >
-      {bookers.map((booker) => (
-        <BookerItem
-          key={booker.id}
-          booker={booker}
-          selected={approved.includes(booker.id)}
-          onSelected={() => handleClick(booker.id)}
-        />
-      ))}
-    </Box>
-  );
-}
-
-TourDetailsBookers.propTypes = {
-  bookers: PropTypes.array,
-};
-
-// ----------------------------------------------------------------------
-
-function BookerItem({ booker, selected, onSelected }) {
-  return (
-    <Stack component={Card} direction="row" spacing={2} key={booker.id} sx={{ p: 3 }}>
-      <Avatar alt={booker.name} src={booker.avatarUrl} sx={{ width: 48, height: 48 }} />
-
-      <Stack spacing={2} flexGrow={1}>
-        <ListItemText
-          primary={booker.name}
-          secondary={
-            <Stack direction="row" alignItems="center" spacing={0.5}>
-              <Iconify icon="solar:users-group-rounded-bold" width={16} />
-              {booker.guests} guests
-            </Stack>
-          }
-          secondaryTypographyProps={{
-            mt: 0.5,
-            component: 'span',
-            typography: 'caption',
-            color: 'text.disabled',
-          }}
-        />
-
-        <Stack spacing={1} direction="row">
-          <IconButton
-            size="small"
-            color="error"
-            sx={{
-              borderRadius: 1,
-              bgcolor: (theme) => alpha(theme.palette.error.main, 0.08),
-              '&:hover': {
-                bgcolor: (theme) => alpha(theme.palette.error.main, 0.16),
-              },
-            }}
-          >
-            <Iconify width={18} icon="solar:phone-bold" />
-          </IconButton>
-
-          <IconButton
-            size="small"
-            color="info"
-            sx={{
-              borderRadius: 1,
-              bgcolor: (theme) => alpha(theme.palette.info.main, 0.08),
-              '&:hover': {
-                bgcolor: (theme) => alpha(theme.palette.info.main, 0.16),
-              },
-            }}
-          >
-            <Iconify width={18} icon="solar:chat-round-dots-bold" />
-          </IconButton>
-
-          <IconButton
-            size="small"
-            color="primary"
-            sx={{
-              borderRadius: 1,
-              bgcolor: (theme) => alpha(theme.palette.primary.main, 0.08),
-              '&:hover': {
-                bgcolor: (theme) => alpha(theme.palette.primary.main, 0.16),
-              },
-            }}
-          >
-            <Iconify width={18} icon="fluent:mail-24-filled" />
-          </IconButton>
-        </Stack>
-      </Stack>
-
-      <Button
-        size="small"
-        variant={selected ? 'text' : 'outlined'}
-        color={selected ? 'success' : 'inherit'}
-        startIcon={
-          selected ? <Iconify width={18} icon="eva:checkmark-fill" sx={{ mr: -0.75 }} /> : null
-        }
-        onClick={onSelected}
-      >
-        {selected ? 'Approved' : 'Approve'}
-      </Button>
-    </Stack>
-  );
-}
-
-BookerItem.propTypes = {
-  booker: PropTypes.object,
-  onSelected: PropTypes.func,
-  selected: PropTypes.bool,
-};

package/minimal/src/sections/tour/tour-details-content.jsx

@@ -1,271 +0,0 @@
-import { m } from 'framer-motion';
-import PropTypes from 'prop-types';
-
-import Box from '@mui/material/Box';
-import Link from '@mui/material/Link';
-import Stack from '@mui/material/Stack';
-import Divider from '@mui/material/Divider';
-import Checkbox from '@mui/material/Checkbox';
-import IconButton from '@mui/material/IconButton';
-import Typography from '@mui/material/Typography';
-import ListItemText from '@mui/material/ListItemText';
-
-import { fDate } from 'src/utils/format-time';
-
-import { TOUR_SERVICE_OPTIONS } from 'src/_mock';
-
-import Image from 'src/components/image';
-import Iconify from 'src/components/iconify';
-import Markdown from 'src/components/markdown';
-import { varTranHover } from 'src/components/animate';
-import Lightbox, { useLightBox } from 'src/components/lightbox';
-
-// ----------------------------------------------------------------------
-
-export default function TourDetailsContent({ tour }) {
-  const {
-    name,
-    images,
-    content,
-    services,
-    tourGuides,
-    available,
-    durations,
-    destination,
-    ratingNumber,
-  } = tour;
-
-  const slides = images.map((slide) => ({
-    src: slide,
-  }));
-
-  const {
-    selected: selectedImage,
-    open: openLightbox,
-    onOpen: handleOpenLightbox,
-    onClose: handleCloseLightbox,
-  } = useLightBox(slides);
-
-  const renderGallery = (
-    <>
-      <Box
-        gap={1}
-        display="grid"
-        gridTemplateColumns={{
-          xs: 'repeat(1, 1fr)',
-          md: 'repeat(2, 1fr)',
-        }}
-        sx={{
-          mb: { xs: 3, md: 5 },
-        }}
-      >
-        <m.div
-          key={slides[0].src}
-          whileHover="hover"
-          variants={{
-            hover: { opacity: 0.8 },
-          }}
-          transition={varTranHover()}
-        >
-          <Image
-            alt={slides[0].src}
-            src={slides[0].src}
-            ratio="1/1"
-            onClick={() => handleOpenLightbox(slides[0].src)}
-            sx={{ borderRadius: 2, cursor: 'pointer' }}
-          />
-        </m.div>
-
-        <Box gap={1} display="grid" gridTemplateColumns="repeat(2, 1fr)">
-          {slides.slice(1, 5).map((slide) => (
-            <m.div
-              key={slide.src}
-              whileHover="hover"
-              variants={{
-                hover: { opacity: 0.8 },
-              }}
-              transition={varTranHover()}
-            >
-              <Image
-                alt={slide.src}
-                src={slide.src}
-                ratio="1/1"
-                onClick={() => handleOpenLightbox(slide.src)}
-                sx={{ borderRadius: 2, cursor: 'pointer' }}
-              />
-            </m.div>
-          ))}
-        </Box>
-      </Box>
-
-      <Lightbox
-        index={selectedImage}
-        slides={slides}
-        open={openLightbox}
-        close={handleCloseLightbox}
-      />
-    </>
-  );
-
-  const renderHead = (
-    <>
-      <Stack direction="row" sx={{ mb: 3 }}>
-        <Typography variant="h4" sx={{ flexGrow: 1 }}>
-          {name}
-        </Typography>
-
-        <IconButton>
-          <Iconify icon="solar:share-bold" />
-        </IconButton>
-
-        <Checkbox
-          defaultChecked
-          color="error"
-          icon={<Iconify icon="solar:heart-outline" />}
-          checkedIcon={<Iconify icon="solar:heart-bold" />}
-        />
-      </Stack>
-
-      <Stack spacing={3} direction="row" flexWrap="wrap" alignItems="center">
-        <Stack direction="row" alignItems="center" spacing={0.5} sx={{ typography: 'body2' }}>
-          <Iconify icon="eva:star-fill" sx={{ color: 'warning.main' }} />
-          <Box component="span" sx={{ typography: 'subtitle2' }}>
-            {ratingNumber}
-          </Box>
-          <Link sx={{ color: 'text.secondary' }}>(234 reviews)</Link>
-        </Stack>
-
-        <Stack direction="row" alignItems="center" spacing={0.5} sx={{ typography: 'body2' }}>
-          <Iconify icon="mingcute:location-fill" sx={{ color: 'error.main' }} />
-          {destination}
-        </Stack>
-
-        <Stack direction="row" alignItems="center" spacing={0.5} sx={{ typography: 'subtitle2' }}>
-          <Iconify icon="solar:flag-bold" sx={{ color: 'info.main' }} />
-          <Box component="span" sx={{ typography: 'body2', color: 'text.secondary' }}>
-            Guide by
-          </Box>
-          {tourGuides.map((tourGuide) => tourGuide.name).join(', ')}
-        </Stack>
-      </Stack>
-    </>
-  );
-
-  const renderOverview = (
-    <Box
-      gap={3}
-      display="grid"
-      gridTemplateColumns={{
-        xs: 'repeat(1, 1fr)',
-        md: 'repeat(2, 1fr)',
-      }}
-    >
-      {[
-        {
-          label: 'Available',
-          value: `${fDate(available.startDate)} - ${fDate(available.endDate)}`,
-          icon: <Iconify icon="solar:calendar-date-bold" />,
-        },
-        {
-          label: 'Contact name',
-          value: tourGuides.map((tourGuide) => tourGuide.phoneNumber).join(', '),
-          icon: <Iconify icon="solar:user-rounded-bold" />,
-        },
-        {
-          label: 'Durations',
-          value: durations,
-          icon: <Iconify icon="solar:clock-circle-bold" />,
-        },
-        {
-          label: 'Contact phone',
-          value: tourGuides.map((tourGuide) => tourGuide.name).join(', '),
-          icon: <Iconify icon="solar:phone-bold" />,
-        },
-      ].map((item) => (
-        <Stack key={item.label} spacing={1.5} direction="row">
-          {item.icon}
-          <ListItemText
-            primary={item.label}
-            secondary={item.value}
-            primaryTypographyProps={{
-              typography: 'body2',
-              color: 'text.secondary',
-              mb: 0.5,
-            }}
-            secondaryTypographyProps={{
-              typography: 'subtitle2',
-              color: 'text.primary',
-              component: 'span',
-            }}
-          />
-        </Stack>
-      ))}
-    </Box>
-  );
-
-  const renderContent = (
-    <>
-      <Markdown children={content} />
-
-      <Stack spacing={2}>
-        <Typography variant="h6"> Services</Typography>
-
-        <Box
-          rowGap={2}
-          display="grid"
-          gridTemplateColumns={{
-            xs: 'repeat(1, 1fr)',
-            md: 'repeat(2, 1fr)',
-          }}
-        >
-          {TOUR_SERVICE_OPTIONS.map((service) => (
-            <Stack
-              key={service.label}
-              spacing={1}
-              direction="row"
-              alignItems="center"
-              sx={{
-                ...(services.includes(service.label) && {
-                  color: 'text.disabled',
-                }),
-              }}
-            >
-              <Iconify
-                icon="eva:checkmark-circle-2-outline"
-                sx={{
-                  color: 'primary.main',
-                  ...(services.includes(service.label) && {
-                    color: 'text.disabled',
-                  }),
-                }}
-              />
-              {service.label}
-            </Stack>
-          ))}
-        </Box>
-      </Stack>
-    </>
-  );
-
-  return (
-    <>
-      {renderGallery}
-
-      <Stack sx={{ maxWidth: 720, mx: 'auto' }}>
-        {renderHead}
-
-        <Divider sx={{ borderStyle: 'dashed', my: 5 }} />
-
-        {renderOverview}
-
-        <Divider sx={{ borderStyle: 'dashed', my: 5 }} />
-
-        {renderContent}
-      </Stack>
-    </>
-  );
-}
-
-TourDetailsContent.propTypes = {
-  tour: PropTypes.object,
-};