OS-189 [FE] Refactoring | Tackle remaining tech debt

src/hooks/use-scroll-to-top.ts

@@ -0,0 +1,8 @@
+const useScrollToTop = () => {
+  window.scrollTo({
+    top: 0,
+    behavior: 'smooth',
+  });
+};
+
+export default useScrollToTop;

src/modules/checkout/components/AddToCartButton/index.module.scss

@@ -59,3 +59,15 @@
 .heart {
   width: 24px;
 }
+
+.shoppingCart {
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+}
+
+.shoppingCartImg {
+  width: 20px;
+  stroke: $blackColor;
+}
+

src/modules/checkout/components/AddToCartButton/index.tsx

@@ -6,33 +6,43 @@ import styles from './index.module.scss';
 
 interface AddToCartButtonProps {
   addToBag: () => void;
-  addToFavorite: () => void;
-  isError: boolean;
+  addToFavorite?: () => void;
+  isError?: boolean;
+  isIcon?: boolean;
 }
 
 const AddToCartButton: FC<AddToCartButtonProps> = ({
   addToBag,
   addToFavorite,
   isError,
+  isIcon,
 }) => {
   const { t } = useTranslation();
 
   return (
-    <div className={styles.wrapper}>
-      <button
-        className={styles.addButton}
-        onClick={addToBag}
-        disabled={isError}
-      >
-        <ShoppingBag className={styles.shoppingBag} />
-        <span className={styles.text}>
-          {t('productDetails.addToMyShoppingBag')}
-        </span>
-      </button>
-      <button className={styles.heartButton} onClick={addToFavorite}>
-        <Heart className={styles.heart} />
-      </button>
-    </div>
+    <>
+      {isIcon ? (
+        <button className={styles.shoppingCart} onClick={addToBag}>
+          <ShoppingBag className={styles.shoppingCartImg} />
+        </button>
+      ) : (
+        <div className={styles.wrapper}>
+          <button
+            className={styles.addButton}
+            onClick={addToBag}
+            disabled={isError}
+          >
+            <ShoppingBag className={styles.shoppingBag} />
+            <span className={styles.text}>
+              {t('productDetails.addToMyShoppingBag')}
+            </span>
+          </button>
+          <button className={styles.heartButton} onClick={addToFavorite}>
+            <Heart className={styles.heart} />
+          </button>
+        </div>
+      )}
+    </>
   );
 };
 

src/modules/checkout/components/OrderCheckoutAuthorization/index.tsx

@@ -16,12 +16,9 @@ const OrderCheckoutAuthorization = () => {
     flow: 'auth-code',
   });
 
-  const appleLogin = () => {
-    //TODO add function to login with Apple
-  };
+  const appleLogin = () => {};
 
   const facebookLogin = (response: IResolveParams) => {
-    //TODO add function to login with Apple
     console.log(response);
   };
 

src/modules/core/components/Assent/index.module.scss

@@ -0,0 +1,63 @@
+@import 'styles/constants';
+
+.checkbox {
+  position: absolute;
+  z-index: -1;
+  opacity: 0;
+}
+
+.agreement {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.agreementLabel {
+  display: flex;
+  align-items: center;
+}
+
+.agreementText {
+  display: flex;
+  align-items: center;
+  user-select: none;
+  font-size: 12px;
+
+  &::before {
+    content: '';
+    width: 16px;
+    height: 16px;
+    border: 1.5px solid $blackColor;
+    border-radius: 2px;
+    margin-right: 8px;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 50% 50%;
+  }
+
+  input:checked + &::before {
+    background-color: $blackColor;
+    background-image: url('../../../../assets/svgs/Check.svg');
+  }
+  input:not(:disabled):active + &::before {
+    background-color: $blackColor;
+  }
+  input:disabled + &::before {
+    background-color: $pageBackground;
+  }
+}
+
+.assentButton {
+  padding: 18px 80px;
+  font-size: 20px;
+  color: $brilliance;
+  background-color: $blackColor;
+  border-radius: 4px;
+  transition: opacity 2s;
+
+  &:hover {
+    cursor: pointer;
+    opacity: 0.8;
+  }
+}

src/modules/core/components/Assent/index.tsx

@@ -0,0 +1,30 @@
+import React, { FC, FormEvent } from 'react';
+import styles from './index.module.scss';
+
+interface AssentProps {
+  buttonText: string;
+  rememberSelectionText: string;
+  onSubmit: (event: FormEvent<HTMLFormElement>) => void;
+}
+
+const Assent: FC<AssentProps> = ({
+  onSubmit,
+  buttonText,
+  rememberSelectionText,
+}) => {
+  return (
+    <>
+      <form className={styles.agreement} onSubmit={onSubmit}>
+        <label className={styles.agreementLabel}>
+          <input type="checkbox" name="check" className={styles.checkbox} />
+          <span className={styles.agreementText}>{rememberSelectionText}</span>
+        </label>
+        <button className={styles.assentButton} type="submit">
+          {buttonText}!
+        </button>
+      </form>
+    </>
+  );
+};
+
+export default Assent;

src/modules/core/components/CompanyInfo/index.module.scss

@@ -0,0 +1,68 @@
+@import 'styles/constants';
+
+.social {
+  margin-bottom: 32px;
+
+  @include media(tablet) {
+    text-align: center;
+    order: 2;
+    margin-bottom: 0;
+    margin-top: 17px;
+  }
+}
+
+.socialBtn {
+  width: 32px;
+  height: 32px;
+  margin-right: 16px;
+}
+
+.language {
+  font-weight: 500;
+  font-size: 14px;
+}
+
+.info {
+  @include media(tablet) {
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+.infoBox,
+.infoBtn {
+  display: flex;
+  margin-bottom: 32px;
+}
+
+.infoBox {
+  margin-bottom: 8px;
+}
+
+.img {
+  position: relative;
+  top: -6px;
+  width: 24px;
+  height: 24px;
+  margin-right: 8px;
+}
+
+.number {
+  margin-right: 8px;
+  font-weight: 500;
+  font-size: 14px;
+}
+
+.active {
+  font-size: 14px;
+  color: #00ca8d;
+}
+
+.workDays {
+  font-size: 12px;
+  color: $grayLight;
+
+  @include media(tablet) {
+    margin-bottom: 15px;
+  }
+}

src/modules/core/components/CompanyInfo/index.tsx

@@ -6,7 +6,7 @@ import TwitterImg from 'assets/svgs/Twitter';
 import PinterestImg from 'assets/svgs/Pinterest';
 import EarthImg from 'assets/svgs/Earth';
 import PhoneImg from 'assets/svgs/Phone';
-import styles from 'modules/core/containers/Footer/Footer.module.scss';
+import styles from './index.module.scss';
 
 const socialIcons = [InstagramImg, FacebookImg, TwitterImg, PinterestImg];
 

src/modules/core/components/FooterList/index.module.scss

@@ -0,0 +1,30 @@
+@import 'styles/constants';
+
+.list {
+  display: flex;
+  flex-direction: column;
+  @include media(tablet) {
+    max-height: 0;
+    visibility: hidden;
+    overflow: hidden;
+    transition: all 200ms ease-in;
+  }
+}
+
+.listOpen {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  padding-bottom: 0;
+  max-height: 220px;
+  transition: all 200ms ease;
+}
+
+.link {
+  font-size: 14px;
+  color: $textPrimary;
+}
+
+.link:not(:last-child) {
+  margin-bottom: 24px;
+}

src/modules/core/components/FooterList/index.tsx

@@ -2,7 +2,7 @@ import React, { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import Accordion from '../AccordionFooter/Accordion';
 import { menuName, listContent } from 'modules/core/containers/Footer';
-import styles from 'modules/core/containers/Footer/Footer.module.scss';
+import styles from './index.module.scss';
 
 const FooterList = ({ className }: { className: string }): JSX.Element => {
   const [listVisible, setListVisible] = useState([false, false, false]);