Enhancement 429 product card

src/entities/WidgetButtonsPurchase/WidgetButtonsPurchase.module.scss

@@ -23,7 +23,8 @@
 
   svg {
     width: 25px;
-    height: 20px;
+    min-width: 25px;
+    height: 25px;
   }
 
   &__iconCart {

src/entities/WidgetButtonsPurchase/WidgetButtonsPurchase.stories.tsx

@@ -13,6 +13,7 @@ type TWidgetButtonsPurchase = {
   handleAddToCart: VoidFunction
   onEyeClick: VoidFunction
   layout: ECardView
+  wb_urls: string
 }
 
 const Template: Story<TWidgetButtonsPurchase> = args => <WidgetButtonsPurchase {...args} />

src/entities/WidgetButtonsPurchase/WidgetButtonsPurchase.tsx

@@ -3,6 +3,7 @@ import { FC } from 'react'
 
 import IconCart from '@/assets/icons/IconCart.svg'
 import IconEye from '@/assets/icons/IconEye.svg'
+import WB from '@/assets/icons/WB.svg'
 import { ECardView } from '@/shared/model/types/common'
 import { Button, ButtonSize, ButtonTheme } from '@/shared/ui/Button/Button'
 
@@ -13,6 +14,7 @@ type TWidgetButtonsPurchase = {
   handleAddToCart: VoidFunction
   onEyeClick: VoidFunction
   layout: ECardView
+  wb_urls?: string
 }
 
 /**
@@ -21,15 +23,21 @@ type TWidgetButtonsPurchase = {
  * @param {function} handleAddToCart - функция добавления товара в корзину;
  * @param {function} onEyeClick - функция открытия поп-апа с дополнительной информацией о товаре;
  * @param {string} layout - текущий вид отображения карточки товара;
+ * @param {string} wb_urls ссылка на страницу с товаром на WB
  */
 export const WidgetButtonsPurchase: FC<TWidgetButtonsPurchase> = ({
   isInCart,
   handleAddToCart,
   onEyeClick,
-  layout
+  layout,
+  wb_urls
 }) => {
   const size = layout === ECardView.COMPACT ? ButtonSize.S : ButtonSize.XS
 
+  const buyWBHandle = () => {
+    window.open(wb_urls, '_blank')
+  }
+
   return (
     <div className={styles.customButtonsContainer}>
       <Button
@@ -40,6 +48,15 @@ export const WidgetButtonsPurchase: FC<TWidgetButtonsPurchase> = ({
         <IconCart className={styles.customButton__iconCart} />
         {isInCart ? 'Перейти в корзину' : 'Купить'}
       </Button>
+      {wb_urls && (
+        <Button
+          className={classNames(styles.customButton, styles.customButton_eye)}
+          theme={ButtonTheme.OUTLINED}
+          size={size}
+          onClick={buyWBHandle}>
+          <WB />
+        </Button>
+      )}
       <Button
         className={classNames(styles.customButton, styles.customButton_eye)}
         theme={ButtonTheme.OUTLINED}

src/features/ProductItem/CardPreview/CardPreview.module.scss

@@ -61,7 +61,8 @@
 
   svg {
     width: 25px;
-    height: 20px;
+    min-width: 25px;
+    height: 25px;
   }
 }
 

src/features/ProductItem/CardPreview/CardPreview.tsx

@@ -2,6 +2,7 @@ import { type FC, lazy, useState, Suspense } from 'react'
 import { useNavigate } from 'react-router-dom'
 
 import IconCart from '@/assets/icons/IconCart.svg'
+import WB from '@/assets/icons/WB.svg'
 import { useProductInCart } from '@/entities/CartEntity/model/hooks/cartHooks'
 import { useWithFavorite } from '@/entities/Favorite/model/hooks/useWithFavorie'
 import { ProductAvailability } from '@/entities/ProductAvailability/ProductAvailability'
@@ -32,6 +33,7 @@ type TProps =
   | 'label_popular'
   | 'quantity'
   | 'id'
+  | 'wb_urls'
 
 type TCardPreviewProps = Pick<IProduct, TProps>
 
@@ -48,6 +50,7 @@ type TCardPreviewProps = Pick<IProduct, TProps>
  * @param {boolean} label_hit - лейбл Хит на товаре;
  * @param {number} quantity - количество на склаладе (если  > 0, то товар считается в наличии);
  * @param {number} id - id товара в backend;
+ * @param {string} wb_urls - ссылка на товар на wb
  */
 export const CardPreview: FC<TCardPreviewProps> = ({
   name,
@@ -60,7 +63,8 @@ export const CardPreview: FC<TCardPreviewProps> = ({
   label_popular,
   label_hit,
   quantity,
-  id
+  id,
+  wb_urls
 }) => {
   const navigate = useNavigate()
   const { isInCart, handleAddToCart } = useProductInCart(slug, id)
@@ -71,7 +75,7 @@ export const CardPreview: FC<TCardPreviewProps> = ({
   const { isLiked, handleLike } = useWithFavorite({
     id,
     category: '',
-    wb_urls: '',
+    wb_urls,
     is_deleted: false,
     wholesale: 0,
     name,
@@ -102,6 +106,10 @@ export const CardPreview: FC<TCardPreviewProps> = ({
     setIsModalOpen(!isModalOpen)
   }
 
+  const buyWBHandle = () => {
+    window.open(wb_urls, '_blank')
+  }
+
   return (
     <>
       {isModalOpen && (
@@ -141,6 +149,16 @@ export const CardPreview: FC<TCardPreviewProps> = ({
                 {isInCart ? 'Перейти в корзину' : 'Купить'}
                 <IconCart className={styles.icon} />
               </Button>
+              {wb_urls && (
+                <Button
+                  theme={ButtonTheme.PRIMARY}
+                  size={ButtonSize.S}
+                  onClick={buyWBHandle}
+                  className={styles.customButton}>
+                  Купить на
+                  <WB />
+                </Button>
+              )}
               <Button theme={ButtonTheme.SECONDARY} size={ButtonSize.S} onClick={handleQuickPurchase}>
                 Быстрый заказ
               </Button>

src/features/ProductItem/ProductItem.tsx

@@ -39,6 +39,7 @@ interface IProductCardProps extends IProduct {
  * @param {boolean} label_hit лейбл Хит на товаре;
  * @param {number} quantity количество на склаладе (если  > 0, то товар считается в наличии);
  * @param {number} id id товара в backend;
+ * @param {string} wb_urls ссылка на страницу с товаром на wb
  */
 export const ProductItem: FC<IProductCardProps> = ({
   layout,
@@ -52,7 +53,8 @@ export const ProductItem: FC<IProductCardProps> = ({
   label_popular,
   label_hit,
   quantity,
-  id
+  id,
+  wb_urls
 }) => {
   const [isInCompared, setIsInCompared] = useState<boolean>(false)
   const [isModalOpen, setIsModalOpen] = useState(false)
@@ -97,6 +99,7 @@ export const ProductItem: FC<IProductCardProps> = ({
             code={code}
             price={Number(price)}
             brand={brand}
+            wb_urls={wb_urls}
             slug={slug}
             images={images}
             quantity={Number(quantity)}
@@ -168,17 +171,20 @@ export const ProductItem: FC<IProductCardProps> = ({
               })}>
               <span className={styles['product-item__price']}>{price} ₽</span>
               {layout !== ECardView.COMPACT && (
-                <div
-                  className={classnames(styles['product-item__actions-block'], {
-                    [getStylesForCurrentLayout('product-item__actions-block', styles)[layout]]: layout
-                  })}>
-                  <WidgetButtonsPurchase
-                    isInCart={isInCart}
-                    handleAddToCart={handleAddToCart}
-                    onEyeClick={changeModalState}
-                    layout={layout}
-                  />
-                </div>
+                <>
+                  <div
+                    className={classnames(styles['product-item__actions-block'], {
+                      [getStylesForCurrentLayout('product-item__actions-block', styles)[layout]]: layout
+                    })}>
+                    <WidgetButtonsPurchase
+                      isInCart={isInCart}
+                      handleAddToCart={handleAddToCart}
+                      onEyeClick={changeModalState}
+                      layout={layout}
+                      wb_urls={wb_urls}
+                    />
+                  </div>
+                </>
               )}
             </div>
           </div>
@@ -193,6 +199,7 @@ export const ProductItem: FC<IProductCardProps> = ({
                 handleAddToCart={handleAddToCart}
                 onEyeClick={changeModalState}
                 layout={layout}
+                wb_urls={wb_urls}
               />
               <WidgetButtonsFunctions
                 isLiked={isLiked}

src/widgets/Product/Product.module.scss

@@ -115,3 +115,21 @@
     fill: var.$white;
   }
 }
+
+.customButton {
+  max-width: 200px;
+  min-height: 50px;
+  padding: 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  cursor: pointer;
+  transition: background-color 0.2s ease-in-out;
+
+  svg {
+    width: 25px;
+    min-width: 25px;
+    height: 25px;
+  }
+}

src/widgets/Product/Product.tsx

@@ -1,6 +1,7 @@
 import { type FC, useState } from 'react'
 
 import IconCart from '@/assets/icons/IconCart.svg'
+import WB from '@/assets/icons/WB.svg'
 import { useProductInCart } from '@/entities/CartEntity/model/hooks/cartHooks'
 import { useWithFavorite } from '@/entities/Favorite/model/hooks/useWithFavorie'
 import { ProductAvailability } from '@/entities/ProductAvailability/ProductAvailability'
@@ -35,6 +36,10 @@ export const Product: FC<IProductProps> = ({ product }) => {
     //TODO реализовать форму быстрого заказа
   }
 
+  const buyWBHandle = () => {
+    window.open(product.wb_urls, '_blank')
+  }
+
   return (
     <section className={styles.product}>
       <ProductImgCarousel imgList={product.images} setShowPopup={setShowPopup} />
@@ -68,6 +73,16 @@ export const Product: FC<IProductProps> = ({ product }) => {
                 {isInCart ? 'Перейти в корзину' : 'Купить'}
                 <IconCart className={styles.product__icon} />
               </Button>
+              {product.wb_urls && (
+                <Button
+                  theme={ButtonTheme.PRIMARY}
+                  size={ButtonSize.S}
+                  onClick={buyWBHandle}
+                  className={styles.customButton}>
+                  Купить на
+                  <WB />
+                </Button>
+              )}
               <Button
                 className={styles.product__btnquick}
                 theme={ButtonTheme.SECONDARY}

src/widgets/ProductsList/ProductsList.tsx

@@ -36,6 +36,7 @@ export const ProductsList: FC<TProps> = ({ items, cardView }) => {
       label_hit={item.label_hit as boolean}
       label_popular={item.label_popular as boolean}
       quantity={item.quantity as number}
+      wb_urls={item.wb_urls}
     />
   ))
 }

src/widgets/ViewedProducts/ui/ViewedProducts.tsx

@@ -42,6 +42,7 @@ const ViewedProducts: FC<IViewedProductsProps> = ({ title, hasLabel }) => {
         label_hit={item.label_hit}
         label_popular={item.label_popular}
         quantity={item.quantity}
+        wb_urls={item.wb_urls}
       />
     )
   })