From 6d4b29984ae267343826d7b8cbbc6f68404e82cd Mon Sep 17 00:00:00 2001
From: Artur Khelshtein <Khelshtein.a@yandex.ru>
Date: Tue, 26 Dec 2023 00:05:11 +0300
Subject: [PATCH] =?UTF-8?q?=D0=BF=D0=B5=D1=80=D0=B5=D0=B4=D0=B5=D0=BB?=
 =?UTF-8?q?=D0=B0=D1=82=D1=8C=20=D0=BA=D0=BE=D0=BC=D0=BF=D0=BE=D0=BD=D0=B5?=
 =?UTF-8?q?=D0=BD=D1=82=20footer=20=D0=BF=D0=BE=D0=B4=20FSD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Footer/Footer.tsx              | 85 -------------------
 src/components/Subscribe/Subscribe.tsx        |  2 +-
 src/components/header/header.tsx              | 11 ++-
 src/components/logo/Logo.tsx                  | 25 ------
 .../SubscribeForm/SubscribeForm.tsx           |  4 +-
 .../SubscribeForm/subscribeForm.module.scss   |  0
 src/mockData/coreBaseData.ts                  | 54 ++++++++++++
 src/pages/RootPage/RootPage.tsx               |  2 +-
 .../images/footer/icon-subsc.svg              |  0
 src/{assets => shared}/images/footer/io.svg   |  0
 .../images/footer/mastercard.svg              |  0
 src/{assets => shared}/images/footer/mir.svg  |  0
 src/{assets => shared}/images/footer/visa.svg |  0
 .../images/footer/webmoney.svg                |  0
 src/shared/ui/logo/Logo.tsx                   | 30 +++++++
 .../ui}/logo/logo.module.scss                 |  0
 src/widgets/Footer/Footer.tsx                 | 76 +++++++++++++++++
 .../Footer/footer.module.scss                 |  9 +-
 18 files changed, 182 insertions(+), 116 deletions(-)
 delete mode 100644 src/components/Footer/Footer.tsx
 delete mode 100644 src/components/logo/Logo.tsx
 rename src/{components => entities}/SubscribeForm/SubscribeForm.tsx (91%)
 rename src/{components => entities}/SubscribeForm/subscribeForm.module.scss (100%)
 create mode 100644 src/mockData/coreBaseData.ts
 rename src/{assets => shared}/images/footer/icon-subsc.svg (100%)
 rename src/{assets => shared}/images/footer/io.svg (100%)
 rename src/{assets => shared}/images/footer/mastercard.svg (100%)
 rename src/{assets => shared}/images/footer/mir.svg (100%)
 rename src/{assets => shared}/images/footer/visa.svg (100%)
 rename src/{assets => shared}/images/footer/webmoney.svg (100%)
 create mode 100644 src/shared/ui/logo/Logo.tsx
 rename src/{components => shared/ui}/logo/logo.module.scss (100%)
 create mode 100644 src/widgets/Footer/Footer.tsx
 rename src/{components => widgets}/Footer/footer.module.scss (96%)

diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
deleted file mode 100644
index d9c5163a..00000000
--- a/src/components/Footer/Footer.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import Logo from '../logo/Logo'
-import VisaIcon from '@/assets/images/footer/visa.svg'
-import MastercardIcon from '@/assets/images/footer/mastercard.svg'
-import MirIcon from '@/assets/images/footer/mir.svg'
-import WebmoneyIcon from '@/assets/images/footer/webmoney.svg'
-import UmoneyIcon from '@/assets/images/footer/io.svg'
-import SubscribeForm from '../SubscribeForm/SubscribeForm'
-import Link from '@/shared/ui/Link/Link'
-import styles from './footer.module.scss'
-
-function Footer() {
-  const onSubmitHandler = () => {}
-  return (
-    <footer className={styles.footer}>
-      <div className={styles.footer__container}>
-        <div className={styles.footer__middle}>
-          <div className={styles['footer__col-one']}>
-            <Logo width="114px" height="38px" />
-            <p className={styles.footer__caption}>Интернет-магазин «Maxboom.ru», 2023</p>
-          </div>
-          <div className={styles['footer__col-two']}>
-            <SubscribeForm type="footer" onSubmit={onSubmitHandler}></SubscribeForm>
-          </div>
-          <div className={styles['footer__col-three']}>
-            <p className={styles['footer__support-text']}>Поддержка</p>
-            <div className={styles.footer__wrapper}>
-              <ul className={styles.footer__nav}>
-                <li className={styles.footer__phone}>
-                  <Link to={''} className={styles.footer__link}>
-                    +7 977 848-02-28
-                  </Link>
-                </li>
-                <li className={styles.footer__item}>
-                  <Link to={''} className={styles.footer__link}>
-                    Обратный звонок
-                  </Link>
-                </li>
-              </ul>
-              <p className={styles.footer__hours}>Будни, с 10:00 до 20:00</p>
-            </div>
-          </div>
-        </div>
-        <div className={styles.footer__bottom}>
-          <div className={styles['footer__bottom-wrapper']}>
-            <p className={styles.footer__copyright}>
-              Created by{' '}
-              <Link to={''} className={styles['footer__copyright-link']}>
-                maxboom.ru
-              </Link>
-            </p>
-            <ul className={styles.footer__payments}>
-              <li className={styles['footer__payment-nav']}>
-                <Link to={''} className={styles['footer__payment-item']}>
-                  <VisaIcon className={styles['footer__payment-icon']} />
-                </Link>
-              </li>
-              <li className={styles['footer__payment-nav']}>
-                <Link to={''} className={styles['footer__payment-item']}>
-                  <MastercardIcon className={styles['footer__payment-icon']} />
-                </Link>
-              </li>
-              <li className={styles['footer__payment-nav']}>
-                <Link to={''} className={styles['footer__payment-item']}>
-                  <MirIcon className={styles['footer__payment-icon']} />
-                </Link>
-              </li>
-              <li className={styles['footer__payment-nav']}>
-                <Link to={''} className={styles['footer__payment-item']}>
-                  <WebmoneyIcon className={styles['footer__payment-icon']} />
-                </Link>
-              </li>
-              <li className={styles['footer__payment-nav']}>
-                <Link to={''} className={styles['footer__payment-item']}>
-                  <UmoneyIcon className={styles['footer__payment-icon']} />
-                </Link>
-              </li>
-            </ul>
-          </div>
-        </div>
-      </div>
-    </footer>
-  )
-}
-
-export default Footer
diff --git a/src/components/Subscribe/Subscribe.tsx b/src/components/Subscribe/Subscribe.tsx
index 6b514c39..9c91c945 100644
--- a/src/components/Subscribe/Subscribe.tsx
+++ b/src/components/Subscribe/Subscribe.tsx
@@ -1,6 +1,6 @@
 import styles from './Subscribe.module.scss'
 import imgSubs from '@/assets/images/img-subsc-small.png'
-import SubscribeForm from '../SubscribeForm/SubscribeForm'
+import SubscribeForm from '../../entities/SubscribeForm/SubscribeForm'
 
 const Subscribe = () => {
   const onSubmitHandler = () => {}
diff --git a/src/components/header/header.tsx b/src/components/header/header.tsx
index 2eaab324..31530e79 100644
--- a/src/components/header/header.tsx
+++ b/src/components/header/header.tsx
@@ -1,6 +1,7 @@
+import { coreBaseData } from '@/mockData/coreBaseData'
 import { useMemo } from 'react'
 import classNames from 'classnames'
-import Logo from '../logo/Logo'
+import Logo from '../../shared/ui/logo/Logo'
 import Search from '../search/search'
 import ArrowIcon from '@/assets/icons/arrow.svg'
 import LightningIcon from '@/assets/images/header/lightning.svg'
@@ -151,7 +152,13 @@ function Header() {
         </div>
 
         <div className={styles['header__row-two']}>
-          <Logo width="138px" height="46px" />
+          <Logo
+            image={coreBaseData.header.main_logo.image}
+            title={coreBaseData.header.main_logo.title}
+            url={coreBaseData.header.main_logo.url}
+            width="138px"
+            height="46px"
+          />
           <Search />
           <HeaderAccount {...headerAccountData} />
         </div>
diff --git a/src/components/logo/Logo.tsx b/src/components/logo/Logo.tsx
deleted file mode 100644
index b9514daf..00000000
--- a/src/components/logo/Logo.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { FC } from 'react'
-import logo from '@/assets/images/logo/maxboom.jpg'
-import styles from './logo.module.scss'
-import Link from '@/shared/ui/Link/Link'
-
-type TLogoProps = {
-  width: string
-  height: string
-}
-/**
- * @param {string} width - ширина логотипа
- * @param {string} height  - высота логотипа
- */
-
-const Logo: FC<TLogoProps> = ({ width, height }) => {
-  return (
-    <div className={`${styles.container}`}>
-      <Link to="" className={styles.link}>
-        <img src={logo} alt="maxboom" style={{ width, height }} />
-      </Link>
-    </div>
-  )
-}
-
-export default Logo
diff --git a/src/components/SubscribeForm/SubscribeForm.tsx b/src/entities/SubscribeForm/SubscribeForm.tsx
similarity index 91%
rename from src/components/SubscribeForm/SubscribeForm.tsx
rename to src/entities/SubscribeForm/SubscribeForm.tsx
index a66df0e5..7c1d222f 100644
--- a/src/components/SubscribeForm/SubscribeForm.tsx
+++ b/src/entities/SubscribeForm/SubscribeForm.tsx
@@ -36,7 +36,9 @@ const SubscribeForm: FC<TSubscribeForm> = ({ className, type, onSubmit }) => {
       {/* @TODO: Добавить компонент Label
       https://github.com/Studio-Yandex-Practicum/maxboom_frontend/issues/102 */}
       <span className={`${styles.label} ${classNameLabel}`}>Подписаться на рассылку</span>
-      <span className={`${styles.caption}`}>Мы не будем присылать вам спам. Только скидки и выгодные предложения</span>
+      <span className={`${styles.caption}`}>
+        Мы не будем присылать вам спам. Только скидки и выгодные предложения
+      </span>
       <form className={`${styles.form} ${classNameForm}`} onSubmit={onSubmit}>
         <Input name="subscribe" placeholder="Эл.почта" theme={InputTheme.DARK} customSize={InputSize.S} />
         <button className={`${styles.button}`}>
diff --git a/src/components/SubscribeForm/subscribeForm.module.scss b/src/entities/SubscribeForm/subscribeForm.module.scss
similarity index 100%
rename from src/components/SubscribeForm/subscribeForm.module.scss
rename to src/entities/SubscribeForm/subscribeForm.module.scss
diff --git a/src/mockData/coreBaseData.ts b/src/mockData/coreBaseData.ts
new file mode 100644
index 00000000..3e7ac7a0
--- /dev/null
+++ b/src/mockData/coreBaseData.ts
@@ -0,0 +1,54 @@
+export const coreBaseData = {
+  header: {
+    main_logo: {
+      image: 'https://maxboom.ru/image/catalog/Logo/IMG_5735.JPG',
+      url: '/',
+      title: 'Интернет-магазин «Maxboom.ru»'
+    },
+    support: {
+      name: 'Обрантый звонок',
+      phone_number: '+7 977 848-02-28'
+    }
+  },
+  footer: {
+    company_info: 'Интернет-магазин «Maxboom.ru»',
+    disclaimer: 'Мы не будем присылать вам спам. Только скидки и выгодные предложения',
+    support_work_time: 'Будни, с 10.00 до 20.00',
+    main_logo: {
+      image: 'https://maxboom.ru/image/catalog/Logo/IMG_5735.JPG',
+      url: '/',
+      title: 'Интернет-магазин «Maxboom.ru»'
+    },
+    additional_logos: [
+      {
+        image: 'https://maxboom.ru/image/catalog/demo-prostore/svg-icon/icon-payments-visa.svg',
+        url: '//visa.ru',
+        title: 'visa'
+      },
+      {
+        image: 'https://maxboom.ru/image/catalog/demo-prostore/svg-icon/icon-payments-mastercard.svg',
+        url: '//mastercard.ru',
+        title: 'mastercard'
+      },
+      {
+        image: 'https://maxboom.ru/image/catalog/demo-prostore/svg-icon/mir-logo-h14px.svg',
+        url: '//mironline.ru',
+        title: 'мир'
+      },
+      {
+        image: 'https://maxboom.ru/image/catalog/demo-prostore/svg-icon/icons8-webmoney-25.svg',
+        url: '//webmoney.ru',
+        title: 'webmoney'
+      },
+      {
+        image: 'https://maxboom.ru/image/catalog/demo-prostore/svg-icon/io.svg',
+        url: '//yoomoney.ru',
+        title: 'yoomoney'
+      }
+    ],
+    support: {
+      name: 'Обрантый звонок',
+      phone_number: '+7 977 848-02-28'
+    }
+  }
+}
diff --git a/src/pages/RootPage/RootPage.tsx b/src/pages/RootPage/RootPage.tsx
index 45d9302f..7f16f267 100644
--- a/src/pages/RootPage/RootPage.tsx
+++ b/src/pages/RootPage/RootPage.tsx
@@ -1,6 +1,6 @@
 import { Outlet } from 'react-router'
 import Header from '@/components/header/header'
-import Footer from '@/components/Footer/Footer'
+import Footer from '@/widgets/Footer/Footer'
 import styles from './root.module.scss'
 import Contact from '../../features/Contacts/Contacts'
 import { messengerArray } from '@/shared/model/types/messengerArray'
diff --git a/src/assets/images/footer/icon-subsc.svg b/src/shared/images/footer/icon-subsc.svg
similarity index 100%
rename from src/assets/images/footer/icon-subsc.svg
rename to src/shared/images/footer/icon-subsc.svg
diff --git a/src/assets/images/footer/io.svg b/src/shared/images/footer/io.svg
similarity index 100%
rename from src/assets/images/footer/io.svg
rename to src/shared/images/footer/io.svg
diff --git a/src/assets/images/footer/mastercard.svg b/src/shared/images/footer/mastercard.svg
similarity index 100%
rename from src/assets/images/footer/mastercard.svg
rename to src/shared/images/footer/mastercard.svg
diff --git a/src/assets/images/footer/mir.svg b/src/shared/images/footer/mir.svg
similarity index 100%
rename from src/assets/images/footer/mir.svg
rename to src/shared/images/footer/mir.svg
diff --git a/src/assets/images/footer/visa.svg b/src/shared/images/footer/visa.svg
similarity index 100%
rename from src/assets/images/footer/visa.svg
rename to src/shared/images/footer/visa.svg
diff --git a/src/assets/images/footer/webmoney.svg b/src/shared/images/footer/webmoney.svg
similarity index 100%
rename from src/assets/images/footer/webmoney.svg
rename to src/shared/images/footer/webmoney.svg
diff --git a/src/shared/ui/logo/Logo.tsx b/src/shared/ui/logo/Logo.tsx
new file mode 100644
index 00000000..858565c6
--- /dev/null
+++ b/src/shared/ui/logo/Logo.tsx
@@ -0,0 +1,30 @@
+import { FC } from 'react'
+import styles from './logo.module.scss'
+import Link from '@/shared/ui/Link/Link'
+
+type TLogoProps = {
+  image: string
+  title: string
+  url: string
+  width: string
+  height: string
+}
+/**
+ * @param {string} image - путь к логотипу на сервере
+ * @param {string} title - лейбл логотипа (и альт)
+ * @param {string} url - путь ссылки по нажатию на логотип
+ * @param {string} width - ширина логотипа
+ * @param {string} height  - высота логотипа
+ */
+
+const Logo: FC<TLogoProps> = ({ image, title, url, width, height }) => {
+  return (
+    <div className={`${styles.container}`}>
+      <Link to={url} className={styles.link}>
+        <img src={image} title={title} alt={title} style={{ width, height }} />
+      </Link>
+    </div>
+  )
+}
+
+export default Logo
diff --git a/src/components/logo/logo.module.scss b/src/shared/ui/logo/logo.module.scss
similarity index 100%
rename from src/components/logo/logo.module.scss
rename to src/shared/ui/logo/logo.module.scss
diff --git a/src/widgets/Footer/Footer.tsx b/src/widgets/Footer/Footer.tsx
new file mode 100644
index 00000000..de30f4cf
--- /dev/null
+++ b/src/widgets/Footer/Footer.tsx
@@ -0,0 +1,76 @@
+import { coreBaseData } from '@/mockData/coreBaseData'
+import Logo from '@/shared/ui/logo/Logo'
+import Link from '@/shared/ui/Link/Link'
+import SubscribeForm from '@/entities/SubscribeForm/SubscribeForm'
+import styles from './footer.module.scss'
+
+console.log(coreBaseData.footer)
+
+function Footer() {
+  const onSubmitHandler = () => {}
+  return (
+    <footer className={styles.footer}>
+      <div className={styles.footer__container}>
+        <div className={styles.footer__middle}>
+          <div className={styles['footer__col-one']}>
+            <Logo
+              image={coreBaseData.footer.main_logo.image}
+              title={coreBaseData.footer.main_logo.title}
+              url={coreBaseData.footer.main_logo.url}
+              width="114px"
+              height="38px"
+            />
+            <p className={styles.footer__caption}>{coreBaseData.footer.company_info}</p>
+          </div>
+          <div className={styles['footer__col-two']}>
+            <SubscribeForm type="footer" onSubmit={onSubmitHandler}></SubscribeForm>
+          </div>
+          <div className={styles['footer__col-three']}>
+            <p className={styles['footer__support-text']}>Поддержка</p>
+            <div className={styles.footer__wrapper}>
+              <ul className={styles.footer__nav}>
+                <li className={styles.footer__phone}>
+                  <Link to={''} className={styles.footer__link}>
+                    {coreBaseData.footer.support.phone_number}
+                  </Link>
+                </li>
+                <li className={styles.footer__item}>
+                  <Link to={''} className={styles.footer__link}>
+                    {coreBaseData.footer.support.name}
+                  </Link>
+                </li>
+              </ul>
+              <p className={styles.footer__hours}>{coreBaseData.footer.support_work_time}</p>
+            </div>
+          </div>
+        </div>
+        <div className={styles.footer__bottom}>
+          <div className={styles['footer__bottom-wrapper']}>
+            <p className={styles.footer__copyright}>
+              Created by{' '}
+              <Link to={''} className={styles['footer__copyright-link']}>
+                maxboom.ru
+              </Link>
+            </p>
+            <ul className={styles.footer__payments}>
+              {coreBaseData.footer.additional_logos.map(logo => (
+                <li className={styles['footer__payment-nav']} key={logo.title}>
+                  <Link to={logo.url} className={styles['footer__payment-item']}>
+                    <img
+                      className={styles['footer__payment-icon']}
+                      src={logo.image}
+                      title={logo.title}
+                      alt={logo.title}
+                    />
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+      </div>
+    </footer>
+  )
+}
+
+export default Footer
diff --git a/src/components/Footer/footer.module.scss b/src/widgets/Footer/footer.module.scss
similarity index 96%
rename from src/components/Footer/footer.module.scss
rename to src/widgets/Footer/footer.module.scss
index 5b90d1c4..87fa6124 100644
--- a/src/components/Footer/footer.module.scss
+++ b/src/widgets/Footer/footer.module.scss
@@ -1,4 +1,4 @@
-@use '../../shared/styles/utils/variables' as var;
+@use '/src/shared/styles/utils/variables' as var;
 
 .footer {
   background-color: var.$footer-bg;
@@ -162,12 +162,19 @@
     display: flex;
     width: 34px;
     height: 24px;
+    padding: 3px;
     justify-content: center;
     align-items: center;
     border-radius: 4px;
     background: var.$bg-no-image;
   }
 
+  &__payment-icon {
+    display: flex;
+    width: 100%;
+    height: 100%;
+  }
+
   &__payment-nav {
     margin: 0;
     padding: 0;