@canmingir/link 1.1.0

package/minimal/src/sections/product/product-details-summary.jsx

@@ -0,0 +1,355 @@
+import PropTypes from 'prop-types';
+import { useEffect, useCallback } from 'react';
+import { useForm, Controller } from 'react-hook-form';
+
+import Box from '@mui/material/Box';
+import Link from '@mui/material/Link';
+import Stack from '@mui/material/Stack';
+import Rating from '@mui/material/Rating';
+import Button from '@mui/material/Button';
+import Divider from '@mui/material/Divider';
+import MenuItem from '@mui/material/MenuItem';
+import Typography from '@mui/material/Typography';
+import { formHelperTextClasses } from '@mui/material/FormHelperText';
+
+import { paths } from 'src/routes/paths';
+import { useRouter } from 'src/routes/hooks';
+
+import { fCurrency, fShortenNumber } from 'src/utils/format-number';
+
+import Label from 'src/components/label';
+import Iconify from 'src/components/iconify';
+import { ColorPicker } from 'src/components/color-utils';
+import FormProvider, { RHFSelect } from 'src/components/hook-form';
+
+import IncrementerButton from './common/incrementer-button';
+
+// ----------------------------------------------------------------------
+
+export default function ProductDetailsSummary({
+  items,
+  product,
+  onAddCart,
+  onGotoStep,
+  disabledActions,
+  ...other
+}) {
+  const router = useRouter();
+
+  const {
+    id,
+    name,
+    sizes,
+    price,
+    coverUrl,
+    colors,
+    newLabel,
+    available,
+    priceSale,
+    saleLabel,
+    totalRatings,
+    totalReviews,
+    inventoryType,
+    subDescription,
+  } = product;
+
+  const existProduct = !!items?.length && items.map((item) => item.id).includes(id);
+
+  const isMaxQuantity =
+    !!items?.length &&
+    items.filter((item) => item.id === id).map((item) => item.quantity)[0] >= available;
+
+  const defaultValues = {
+    id,
+    name,
+    coverUrl,
+    available,
+    price,
+    colors: colors[0],
+    size: sizes[4],
+    quantity: available < 1 ? 0 : 1,
+  };
+
+  const methods = useForm({
+    defaultValues,
+  });
+
+  const { reset, watch, control, setValue, handleSubmit } = methods;
+
+  const values = watch();
+
+  useEffect(() => {
+    if (product) {
+      reset(defaultValues);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [product]);
+
+  const onSubmit = handleSubmit(async (data) => {
+    try {
+      if (!existProduct) {
+        onAddCart?.({
+          ...data,
+          colors: [values.colors],
+          subTotal: data.price * data.quantity,
+        });
+      }
+      onGotoStep?.(0);
+      router.push(paths.product.checkout);
+    } catch (error) {
+      console.error(error);
+    }
+  });
+
+  const handleAddCart = useCallback(() => {
+    try {
+      onAddCart?.({
+        ...values,
+        colors: [values.colors],
+        subTotal: values.price * values.quantity,
+      });
+    } catch (error) {
+      console.error(error);
+    }
+  }, [onAddCart, values]);
+
+  const renderPrice = (
+    <Box sx={{ typography: 'h5' }}>
+      {priceSale && (
+        <Box
+          component="span"
+          sx={{
+            color: 'text.disabled',
+            textDecoration: 'line-through',
+            mr: 0.5,
+          }}
+        >
+          {fCurrency(priceSale)}
+        </Box>
+      )}
+
+      {fCurrency(price)}
+    </Box>
+  );
+
+  const renderShare = (
+    <Stack direction="row" spacing={3} justifyContent="center">
+      <Link
+        variant="subtitle2"
+        sx={{
+          color: 'text.secondary',
+          display: 'inline-flex',
+          alignItems: 'center',
+        }}
+      >
+        <Iconify icon="mingcute:add-line" width={16} sx={{ mr: 1 }} />
+        Compare
+      </Link>
+
+      <Link
+        variant="subtitle2"
+        sx={{
+          color: 'text.secondary',
+          display: 'inline-flex',
+          alignItems: 'center',
+        }}
+      >
+        <Iconify icon="solar:heart-bold" width={16} sx={{ mr: 1 }} />
+        Favorite
+      </Link>
+
+      <Link
+        variant="subtitle2"
+        sx={{
+          color: 'text.secondary',
+          display: 'inline-flex',
+          alignItems: 'center',
+        }}
+      >
+        <Iconify icon="solar:share-bold" width={16} sx={{ mr: 1 }} />
+        Share
+      </Link>
+    </Stack>
+  );
+
+  const renderColorOptions = (
+    <Stack direction="row">
+      <Typography variant="subtitle2" sx={{ flexGrow: 1 }}>
+        Color
+      </Typography>
+
+      <Controller
+        name="colors"
+        control={control}
+        render={({ field }) => (
+          <ColorPicker
+            colors={colors}
+            selected={field.value}
+            onSelectColor={(color) => field.onChange(color)}
+            limit={4}
+          />
+        )}
+      />
+    </Stack>
+  );
+
+  const renderSizeOptions = (
+    <Stack direction="row">
+      <Typography variant="subtitle2" sx={{ flexGrow: 1 }}>
+        Size
+      </Typography>
+
+      <RHFSelect
+        name="size"
+        size="small"
+        helperText={
+          <Link underline="always" color="textPrimary">
+            Size Chart
+          </Link>
+        }
+        sx={{
+          maxWidth: 88,
+          [`& .${formHelperTextClasses.root}`]: {
+            mx: 0,
+            mt: 1,
+            textAlign: 'right',
+          },
+        }}
+      >
+        {sizes.map((size) => (
+          <MenuItem key={size} value={size}>
+            {size}
+          </MenuItem>
+        ))}
+      </RHFSelect>
+    </Stack>
+  );
+
+  const renderQuantity = (
+    <Stack direction="row">
+      <Typography variant="subtitle2" sx={{ flexGrow: 1 }}>
+        Quantity
+      </Typography>
+
+      <Stack spacing={1}>
+        <IncrementerButton
+          name="quantity"
+          quantity={values.quantity}
+          disabledDecrease={values.quantity <= 1}
+          disabledIncrease={values.quantity >= available}
+          onIncrease={() => setValue('quantity', values.quantity + 1)}
+          onDecrease={() => setValue('quantity', values.quantity - 1)}
+        />
+
+        <Typography variant="caption" component="div" sx={{ textAlign: 'right' }}>
+          Available: {available}
+        </Typography>
+      </Stack>
+    </Stack>
+  );
+
+  const renderActions = (
+    <Stack direction="row" spacing={2}>
+      <Button
+        fullWidth
+        disabled={isMaxQuantity || disabledActions}
+        size="large"
+        color="warning"
+        variant="contained"
+        startIcon={<Iconify icon="solar:cart-plus-bold" width={24} />}
+        onClick={handleAddCart}
+        sx={{ whiteSpace: 'nowrap' }}
+      >
+        Add to Cart
+      </Button>
+
+      <Button fullWidth size="large" type="submit" variant="contained" disabled={disabledActions}>
+        Buy Now
+      </Button>
+    </Stack>
+  );
+
+  const renderSubDescription = (
+    <Typography variant="body2" sx={{ color: 'text.secondary' }}>
+      {subDescription}
+    </Typography>
+  );
+
+  const renderRating = (
+    <Stack
+      direction="row"
+      alignItems="center"
+      sx={{
+        color: 'text.disabled',
+        typography: 'body2',
+      }}
+    >
+      <Rating size="small" value={totalRatings} precision={0.1} readOnly sx={{ mr: 1 }} />
+      {`(${fShortenNumber(totalReviews)} reviews)`}
+    </Stack>
+  );
+
+  const renderLabels = (newLabel.enabled || saleLabel.enabled) && (
+    <Stack direction="row" alignItems="center" spacing={1}>
+      {newLabel.enabled && <Label color="info">{newLabel.content}</Label>}
+      {saleLabel.enabled && <Label color="error">{saleLabel.content}</Label>}
+    </Stack>
+  );
+
+  const renderInventoryType = (
+    <Box
+      component="span"
+      sx={{
+        typography: 'overline',
+        color:
+          (inventoryType === 'out of stock' && 'error.main') ||
+          (inventoryType === 'low stock' && 'warning.main') ||
+          'success.main',
+      }}
+    >
+      {inventoryType}
+    </Box>
+  );
+
+  return (
+    <FormProvider methods={methods} onSubmit={onSubmit}>
+      <Stack spacing={3} sx={{ pt: 3 }} {...other}>
+        <Stack spacing={2} alignItems="flex-start">
+          {renderLabels}
+
+          {renderInventoryType}
+
+          <Typography variant="h5">{name}</Typography>
+
+          {renderRating}
+
+          {renderPrice}
+
+          {renderSubDescription}
+        </Stack>
+
+        <Divider sx={{ borderStyle: 'dashed' }} />
+
+        {renderColorOptions}
+
+        {renderSizeOptions}
+
+        {renderQuantity}
+
+        <Divider sx={{ borderStyle: 'dashed' }} />
+
+        {renderActions}
+
+        {renderShare}
+      </Stack>
+    </FormProvider>
+  );
+}
+
+ProductDetailsSummary.propTypes = {
+  items: PropTypes.array,
+  disabledActions: PropTypes.bool,
+  onAddCart: PropTypes.func,
+  onGotoStep: PropTypes.func,
+  product: PropTypes.object,
+};

package/minimal/src/sections/product/product-details-toolbar.jsx

@@ -0,0 +1,111 @@
+import PropTypes from 'prop-types';
+
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import Button from '@mui/material/Button';
+import Tooltip from '@mui/material/Tooltip';
+import MenuItem from '@mui/material/MenuItem';
+import IconButton from '@mui/material/IconButton';
+import LoadingButton from '@mui/lab/LoadingButton';
+
+import { RouterLink } from 'src/routes/components';
+
+import Iconify from 'src/components/iconify';
+import CustomPopover, { usePopover } from 'src/components/custom-popover';
+
+// ----------------------------------------------------------------------
+
+export default function ProductDetailsToolbar({
+  publish,
+  backLink,
+  editLink,
+  liveLink,
+  publishOptions,
+  onChangePublish,
+  sx,
+  ...other
+}) {
+  const popover = usePopover();
+
+  return (
+    <>
+      <Stack
+        spacing={1.5}
+        direction="row"
+        sx={{
+          mb: { xs: 3, md: 5 },
+          ...sx,
+        }}
+        {...other}
+      >
+        <Button
+          component={RouterLink}
+          href={backLink}
+          startIcon={<Iconify icon="eva:arrow-ios-back-fill" width={16} />}
+        >
+          Back
+        </Button>
+
+        <Box sx={{ flexGrow: 1 }} />
+
+        {publish === 'published' && (
+          <Tooltip title="Go Live">
+            <IconButton component={RouterLink} href={liveLink}>
+              <Iconify icon="eva:external-link-fill" />
+            </IconButton>
+          </Tooltip>
+        )}
+
+        <Tooltip title="Edit">
+          <IconButton component={RouterLink} href={editLink}>
+            <Iconify icon="solar:pen-bold" />
+          </IconButton>
+        </Tooltip>
+
+        <LoadingButton
+          color="inherit"
+          variant="contained"
+          loading={!publish}
+          loadingIndicator="Loading…"
+          endIcon={<Iconify icon="eva:arrow-ios-downward-fill" />}
+          onClick={popover.onOpen}
+          sx={{ textTransform: 'capitalize' }}
+        >
+          {publish}
+        </LoadingButton>
+      </Stack>
+
+      <CustomPopover
+        open={popover.open}
+        onClose={popover.onClose}
+        arrow="top-right"
+        sx={{ width: 140 }}
+      >
+        {publishOptions.map((option) => (
+          <MenuItem
+            key={option.value}
+            selected={option.value === publish}
+            onClick={() => {
+              popover.onClose();
+              onChangePublish(option.value);
+            }}
+          >
+            {option.value === 'published' && <Iconify icon="eva:cloud-upload-fill" />}
+            {option.value === 'draft' && <Iconify icon="solar:file-text-bold" />}
+            {option.label}
+          </MenuItem>
+        ))}
+      </CustomPopover>
+    </>
+  );
+}
+
+ProductDetailsToolbar.propTypes = {
+  backLink: PropTypes.string,
+  editLink: PropTypes.string,
+  liveLink: PropTypes.string,
+  onChangePublish: PropTypes.func,
+  publish: PropTypes.string,
+  publishOptions: PropTypes.array,
+  sx: PropTypes.object,
+};

package/minimal/src/sections/product/product-filters-result.jsx

@@ -0,0 +1,170 @@
+import PropTypes from 'prop-types';
+
+import Box from '@mui/material/Box';
+import Chip from '@mui/material/Chip';
+import Paper from '@mui/material/Paper';
+import Stack from '@mui/material/Stack';
+import Button from '@mui/material/Button';
+import { alpha } from '@mui/material/styles';
+
+import Iconify from 'src/components/iconify';
+
+// ----------------------------------------------------------------------
+
+export default function ProductFiltersResult({
+  filters,
+  onFilters,
+  //
+  canReset,
+  onResetFilters,
+  //
+  results,
+  ...other
+}) {
+  const handleRemoveGender = (inputValue) => {
+    const newValue = filters.gender.filter((item) => item !== inputValue);
+    onFilters('gender', newValue);
+  };
+
+  const handleRemoveCategory = () => {
+    onFilters('category', 'all');
+  };
+
+  const handleRemoveColor = (inputValue) => {
+    const newValue = filters.colors.filter((item) => item !== inputValue);
+    onFilters('colors', newValue);
+  };
+
+  const handleRemovePrice = () => {
+    onFilters('priceRange', [0, 200]);
+  };
+
+  const handleRemoveRating = () => {
+    onFilters('rating', '');
+  };
+
+  return (
+    <Stack spacing={1.5} {...other}>
+      <Box sx={{ typography: 'body2' }}>
+        <strong>{results}</strong>
+        <Box component="span" sx={{ color: 'text.secondary', ml: 0.25 }}>
+          results found
+        </Box>
+      </Box>
+
+      <Stack flexGrow={1} spacing={1} direction="row" flexWrap="wrap" alignItems="center">
+        {!!filters.gender.length && (
+          <Block label="Gender:">
+            {filters.gender.map((item) => (
+              <Chip
+                key={item}
+                label={item}
+                size="small"
+                onDelete={() => handleRemoveGender(item)}
+              />
+            ))}
+          </Block>
+        )}
+
+        {filters.category !== 'all' && (
+          <Block label="Category:">
+            <Chip size="small" label={filters.category} onDelete={handleRemoveCategory} />
+          </Block>
+        )}
+
+        {!!filters.colors.length && (
+          <Block label="Colors:">
+            {filters.colors.map((item) => (
+              <Chip
+                key={item}
+                size="small"
+                label={
+                  <Box
+                    sx={{
+                      ml: -0.5,
+                      width: 18,
+                      height: 18,
+                      bgcolor: item,
+                      borderRadius: '50%',
+                      border: (theme) => `solid 1px ${alpha(theme.palette.common.white, 0.24)}`,
+                    }}
+                  />
+                }
+                onDelete={() => handleRemoveColor(item)}
+              />
+            ))}
+          </Block>
+        )}
+
+        {(filters.priceRange[0] !== 0 || filters.priceRange[1] !== 200) && (
+          <Block label="Price:">
+            <Chip
+              size="small"
+              label={`$${filters.priceRange[0]} - ${filters.priceRange[1]}`}
+              onDelete={handleRemovePrice}
+            />
+          </Block>
+        )}
+
+        {!!filters.rating && (
+          <Block label="Rating:">
+            <Chip size="small" label={filters.rating} onDelete={handleRemoveRating} />
+          </Block>
+        )}
+
+        {canReset && (
+          <Button
+            color="error"
+            onClick={onResetFilters}
+            startIcon={<Iconify icon="solar:trash-bin-trash-bold" />}
+          >
+            Clear
+          </Button>
+        )}
+      </Stack>
+    </Stack>
+  );
+}
+
+ProductFiltersResult.propTypes = {
+  canReset: PropTypes.bool,
+  filters: PropTypes.object,
+  onFilters: PropTypes.func,
+  results: PropTypes.number,
+  onResetFilters: PropTypes.func,
+};
+
+// ----------------------------------------------------------------------
+
+function Block({ label, children, sx, ...other }) {
+  return (
+    <Stack
+      component={Paper}
+      variant="outlined"
+      spacing={1}
+      direction="row"
+      sx={{
+        p: 1,
+        borderRadius: 1,
+        overflow: 'hidden',
+        borderStyle: 'dashed',
+        ...sx,
+      }}
+      {...other}
+    >
+      <Box component="span" sx={{ typography: 'subtitle2' }}>
+        {label}
+      </Box>
+
+      <Stack spacing={1} direction="row" flexWrap="wrap">
+        {children}
+      </Stack>
+    </Stack>
+  );
+}
+
+Block.propTypes = {
+  children: PropTypes.node,
+  label: PropTypes.string,
+  sx: PropTypes.object,
+};