fix: leo apng, price active item, texts

src/components/BreathPage/index.tsx

@@ -13,11 +13,12 @@ import routes from "@/routes";
 import parseAPNG from "apng-js";
 import Player from "apng-js/types/library/player";
 
+let apngPlayer: Player | null = null;
+
 function BreathPage(): JSX.Element {
   const { t } = useTranslation();
   const [isOpenModal, setIsOpenModal] = useState<boolean>(true);
   const [isShowPreview, setIsShowPreview] = useState<boolean>(true);
-  const [apngPlayer, setApngPlayer] = useState<Player>();
   const leoCanvasRef = useRef<HTMLCanvasElement>(null);
   const pageRef = useRef<HTMLElement>(null);
   const api = useApi();
@@ -37,7 +38,7 @@ function BreathPage(): JSX.Element {
     if (isOpenModal) return;
     const previewTimeOut = setTimeout(() => {
       setIsShowPreview(false);
-      apngPlayer?.play()
+      apngPlayer?.play();
     }, 10_000);
 
     const navigateTimeOut = setTimeout(() => {
@@ -51,7 +52,7 @@ function BreathPage(): JSX.Element {
   }, [navigate, isOpenModal]);
 
   useEffect(() => {
-    async function test() {
+    async function getApng() {
       if (!data) return;
       const response = await fetch(
         data.find((item) => item.key === "au.apng.leo")?.url || ""
@@ -63,13 +64,13 @@ function BreathPage(): JSX.Element {
         context.canvas.height = apng.height;
         context.canvas.width = apng.width;
         const _apngPlayer = await apng.getPlayer(context);
-        setApngPlayer(_apngPlayer);
+        apngPlayer = _apngPlayer;
         if (apngPlayer) {
           apngPlayer.stop();
         }
       }
     }
-    test();
+    getApng();
   }, [data]);
 
   const beginBreath = () => {
@@ -115,16 +116,14 @@ function BreathPage(): JSX.Element {
 
   return (
     <>
-      <section
+      <section className={`${styles.page} page`} ref={pageRef}>
-        className={`${styles.page} page`}
-        ref={pageRef}
-      >
         <canvas
           style={{ display: isOpenModal ? "hidden" : "block" }}
-          className={`${styles["leo-apng"]} ${!isOpenModal && isShowPreview ? styles.leo : ''}`}
+          className={`${styles["leo-apng"]} ${
+            !isOpenModal && isShowPreview ? styles.leo : ""
+          }`}
           ref={leoCanvasRef}
-        >
+        ></canvas>
-        </canvas>
         {!isOpenModal && isShowPreview && (
           <div className={styles.preview}>
             <Title

src/components/PaymentPage/index.tsx

@@ -20,6 +20,7 @@ import Loader from '../Loader'
 import secure from './secure.png'
 import routes from '@/routes'
 import './styles.css'
+import Header from '../Header'
 
 function PaymentPage(): JSX.Element {
   const { t } = useTranslation()
@@ -42,6 +43,7 @@ function PaymentPage(): JSX.Element {
 
   return (
     <>
+      <Header showCross={true} clickCross={() => navigate(routes.client.home())} />
       <UserHeader email={email} />
       <section className='page'>
         { isLoading ? <Loader /> : (

src/components/PaymentTable/styles.css

@@ -56,4 +56,5 @@
 .payment__information {
   font-size: 12px;
   line-height: 1.5;
+  text-align: center;
 }

src/components/PriceList/index.tsx

@@ -33,9 +33,9 @@ interface PriceListProps {
   click: () => void
 }
 
-function PriceList({click, activeItem}: PriceListProps): JSX.Element {
+function PriceList({click}: PriceListProps): JSX.Element {
   const dispatch = useDispatch();
-  const [activePriceItem, setActivePriceItem] = useState<number | null>(activeItem)
+  const [activePriceItem, setActivePriceItem] = useState<number | null>(null)
 
   const priceItemClick = (id: number) => {
     console.log(id);

src/components/PriceListPage/index.tsx

@@ -31,7 +31,7 @@ function PriceListPage(): JSX.Element {
         <UserHeader email={email} />
         <section className={`${styles.page} page`}>
             <Title className={styles.title} variant='h2'>{t('choose_your_own_fee')}</Title>
-            <p className={styles.slogan}>{t('should_not_get', { strongText: <strong>{t('aura.web.price_selection')}</strong> })}</p>
+            <p className={styles.slogan}>{t('aura.web.price_selection')}</p>
             <div className={styles['emails-list-container']}>
                 <EmailsList />
             </div>

src/routes.ts

@@ -118,6 +118,7 @@ export const hasNoFooter = (path: string) =>
 export const withoutHeaderRoutes = [
   routes.client.compatibility(),
   routes.client.subscription(),
+  routes.client.paymentMethod(),
 ];
 export const hasNoHeader = (path: string) =>
   !withoutHeaderRoutes.includes(path);