From c3e493d6a3e1736c00c18fba16b79b7107492701 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Or=C4=99ziak?= <micorix.dev@gmail.com>
Date: Sat, 25 Mar 2023 21:50:22 +0100
Subject: [PATCH] Add ConfigSoonWrapper

---
 src/components/app/ComingSoonWrapper.tsx      | 14 ++++++
 .../filters/PublicTransportFilter.tsx         | 37 +++++++-------
 .../filters/RecruitmentPointsFilter.tsx       | 49 +++++++++++--------
 .../filters/WarsawDistrictsFilter.tsx         |  9 ++--
 4 files changed, 68 insertions(+), 41 deletions(-)
 create mode 100644 src/components/app/ComingSoonWrapper.tsx

diff --git a/src/components/app/ComingSoonWrapper.tsx b/src/components/app/ComingSoonWrapper.tsx
new file mode 100644
index 0000000..b246f10
--- /dev/null
+++ b/src/components/app/ComingSoonWrapper.tsx
@@ -0,0 +1,14 @@
+const ComingSoonWrapper = ({ children }) => (
+  <div className="border border rounded">
+    <div className="border-b p-1 bg-gray-100">{children}</div>
+    <div className="p-1">
+      <span className="bg-primaryBg px-2 py-1 rounded-3xl">Dostępne wkrótce!</span>
+      <small className="block mt-1 italic">
+        Działanie tego widżetu w wersji beta aplikacji może być chwilowo ograniczone lub może dawać
+        on błędne rezultaty.
+      </small>
+    </div>
+  </div>
+);
+
+export default ComingSoonWrapper;
diff --git a/src/components/app/MapSearchPage/filters/PublicTransportFilter.tsx b/src/components/app/MapSearchPage/filters/PublicTransportFilter.tsx
index 8cb7a17..05b663c 100644
--- a/src/components/app/MapSearchPage/filters/PublicTransportFilter.tsx
+++ b/src/components/app/MapSearchPage/filters/PublicTransportFilter.tsx
@@ -6,6 +6,7 @@ import { MdTrain } from '@react-icons/all-files/md/MdTrain';
 import { MdTram } from '@react-icons/all-files/md/MdTram';
 import { MdSubway } from '@react-icons/all-files/md/MdSubway';
 import { toggleElementInArray } from '../../../../utils/misc';
+import ComingSoonWrapper from '../../ComingSoonWrapper';
 
 const stationTypes = [
   {
@@ -42,23 +43,25 @@ const PublicTransportFilter: FC<FilterProps<string[]>> = ({ value, setValue }) =
 
   return (
     <CollapsibleFilterWrapper title="Komunikacja miejska">
-      <span className="mb-1 block">{'<'}500m od szkoły znajduje się:</span>
-      <ul>
-        {stationTypes.map(({ name, id, icon: Icon }) => (
-          <li>
-            <label className="flex items-center">
-              <input
-                type="checkbox"
-                onChange={() => handleChange(id)}
-                checked={value.includes(id)}
-                className="bg-primary focus:ring-primary rounded"
-              />
-              <Icon className="mx-1" />
-              <span className="">{name}</span>
-            </label>
-          </li>
-        ))}
-      </ul>
+      <ComingSoonWrapper>
+        <span className="mb-1 block">{'<'}500m od szkoły znajduje się:</span>
+        <ul>
+          {stationTypes.map(({ name, id, icon: Icon }) => (
+            <li>
+              <label className="flex items-center">
+                <input
+                  type="checkbox"
+                  onChange={() => handleChange(id)}
+                  checked={value.includes(id)}
+                  className="bg-primary focus:ring-primary rounded"
+                />
+                <Icon className="mx-1" />
+                <span className="">{name}</span>
+              </label>
+            </li>
+          ))}
+        </ul>
+      </ComingSoonWrapper>
     </CollapsibleFilterWrapper>
   );
 };
diff --git a/src/components/app/MapSearchPage/filters/RecruitmentPointsFilter.tsx b/src/components/app/MapSearchPage/filters/RecruitmentPointsFilter.tsx
index e5273c1..6e0269c 100644
--- a/src/components/app/MapSearchPage/filters/RecruitmentPointsFilter.tsx
+++ b/src/components/app/MapSearchPage/filters/RecruitmentPointsFilter.tsx
@@ -1,21 +1,18 @@
 import { ChangeEventHandler, FC, useEffect, useState } from 'react';
 import { FilterProps } from './types';
 import CollapsibleFilterWrapper from './CollapsibleFilterWrapper';
-import Link from 'next/link';
 import { AiOutlineWarning } from '@react-icons/all-files/ai/AiOutlineWarning';
 import { getTrackBackground, Range } from 'react-range';
 import { IRenderThumbParams, IRenderTrackParams } from 'react-range/lib/types';
+import ComingSoonWrapper from '../../ComingSoonWrapper';
 
 const RecruitmentPointsAlert = () => (
   <span
     role="alert"
     className="bg-yellow-100 border-l-4 border-yellow-600 p-1 rounded block text-sm"
   >
-    <AiOutlineWarning className="inline-block text-xl text-yellow-600" /> Progi punktowe zmieniają
-    się co roku i zależą od wielu czynników.{' '}
-    <Link href="/">
-      <a className="underline">Dowiedz się więcej</a>
-    </Link>
+    <AiOutlineWarning className="inline-block text-xl text-yellow-600" />
+    Progi punktowe zmieniają się co roku i zależą od wielu czynników.
   </span>
 );
 
@@ -68,23 +65,33 @@ const RecruitmentPointsFilter: FC<FilterProps<[number, number]>> = ({ value, set
 
   return (
     <CollapsibleFilterWrapper title="Najniższy próg punktowy">
-      <RecruitmentPointsAlert />
-      <div className="mt-2 flex items-center">
-        <input className={inputClassName} onChange={createInputChangeHandler(0)} value={range[0]} />
-        <div className="px-2 w-full">
-          <Range
-            step={1}
-            min={MIN}
-            max={MAX}
-            values={range}
-            onChange={setRange}
-            onFinalChange={handleFinalChange}
-            renderTrack={createTrackRenderer(range)}
-            renderThumb={renderThumb}
+      <ComingSoonWrapper>
+        <RecruitmentPointsAlert />
+        <div className="mt-2 flex items-center">
+          <input
+            className={inputClassName}
+            onChange={createInputChangeHandler(0)}
+            value={range[0]}
+          />
+          <div className="px-2 w-full">
+            <Range
+              step={1}
+              min={MIN}
+              max={MAX}
+              values={range}
+              onChange={setRange}
+              onFinalChange={handleFinalChange}
+              renderTrack={createTrackRenderer(range)}
+              renderThumb={renderThumb}
+            />
+          </div>
+          <input
+            className={inputClassName}
+            onChange={createInputChangeHandler(1)}
+            value={range[1]}
           />
         </div>
-        <input className={inputClassName} onChange={createInputChangeHandler(1)} value={range[1]} />
-      </div>
+      </ComingSoonWrapper>
     </CollapsibleFilterWrapper>
   );
 };
diff --git a/src/components/app/MapSearchPage/filters/WarsawDistrictsFilter.tsx b/src/components/app/MapSearchPage/filters/WarsawDistrictsFilter.tsx
index 65ef13c..4736f74 100644
--- a/src/components/app/MapSearchPage/filters/WarsawDistrictsFilter.tsx
+++ b/src/components/app/MapSearchPage/filters/WarsawDistrictsFilter.tsx
@@ -3,14 +3,17 @@ import { FilterProps } from './types';
 import WarsawDistrictsMap from '../../../../assets/app/svg/WarsawDistrictsMap';
 import styles from './styles/WarsawDistrictsFilter.module.css';
 import CollapsibleFilterWrapper from './CollapsibleFilterWrapper';
+import ComingSoonWrapper from '../../ComingSoonWrapper';
 
 const WarsawDistrictsFilter: FC<FilterProps<string[]>> = () => {
   return (
     <CollapsibleFilterWrapper title="Dzielnica">
       <div>
-        <div className="h-72">
-          <WarsawDistrictsMap className={styles.districtsMap} />
-        </div>
+        <ComingSoonWrapper>
+          <div className="h-72">
+            <WarsawDistrictsMap className={styles.districtsMap} />
+          </div>
+        </ComingSoonWrapper>
       </div>
     </CollapsibleFilterWrapper>
   );