ADD - Ads in tier list pages (#263)

Signed-off-by: RaenonX <[email protected]>
RaenonX-DL · Aug 22, 2021 · 8ddb01a · 8ddb01a
1 parent bdb3d20
commit 8ddb01a
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 18 deletions.
diff --git a/src/components/elements/common/ads/main.tsx b/src/components/elements/common/ads/main.tsx
@@ -34,3 +34,31 @@ export const AdsUnitSearchBottom = () => (
     testId="ads-unit-search-bottom"
   />
 );
+
+export const AdsTierResultsEnd = () => (
+  <AdsUnitMatchedContent
+    slot="9965305840"
+    testId="ads-tier-results-end"
+  />
+);
+
+export const AdsUnitKeyPointTop = () => (
+  <AdsUnitDisplay
+    slot="8652224172"
+    testId="ads-unit-key-point-top"
+  />
+);
+
+export const AdsUnitKeyPointIndexEnd = () => (
+  <AdsUnitDisplay
+    slot="8260507781"
+    testId="ads-unit-key-point-index-end"
+  />
+);
+
+export const AdsUnitKeyPointInfo = () => (
+  <AdsUnitDisplay
+    slot="9366061111"
+    testId="ads-unit-key-point-info"
+  />
+);
diff --git a/src/components/pages/tier/out/elements/points.tsx b/src/components/pages/tier/out/elements/points.tsx
@@ -6,6 +6,7 @@ import {KeyPointData} from '../../../../../api-def/api';
 import {GeneralPath} from '../../../../../const/path/definitions';
 import {AppReactContext} from '../../../../../context/app/main';
 import {useI18n} from '../../../../../i18n/hook';
+import {AdsUnitKeyPointTop} from '../../../../elements/common/ads/main';
 import {IconEdit} from '../../../../elements/common/icons';
 import {pointTypeWrapperClassName} from '../../const';
 import {PointTypeIcon} from '../../icons';
@@ -32,6 +33,7 @@ export const TierKeyPoints = ({keyPointsIds, keyPointsData}: Props) => {
 
   return (
     <>
+      <AdsUnitKeyPointTop/>
       <Alert variant="info">
         {t((t) => t.game.unitTier.points.tipsOnClick)}
       </Alert>

diff --git a/src/components/pages/tier/out/main.tsx b/src/components/pages/tier/out/main.tsx
@@ -8,6 +8,7 @@ import {UnitTierData} from '../../../../api-def/api';
 import {useI18n} from '../../../../i18n/hook';
 import {scrollRefToTop} from '../../../../utils/scroll';
 import {useUnitInfo} from '../../../../utils/services/resources/unitInfo/hooks';
+import {AdsTierResultsEnd} from '../../../elements/common/ads/main';
 import {getFilteredUnitInfo} from '../../../elements/gameData/unit/filter/utils';
 import {sortFunc} from '../const';
 import {IconCompDependent} from '../icons';
@@ -68,6 +69,7 @@ export const TierListOutput = ({inputData, tierData, keyPointsData}: Props) => {
             keyPointsData={keyPointsData}
           />
       }
+      {(entryPackHasTierNote.length || entryPackNoTierNote.length) && <AdsTierResultsEnd/>}
     </div>
   );
 };
diff --git a/src/components/pages/tier/points/index/main.tsx b/src/components/pages/tier/points/index/main.tsx
@@ -6,6 +6,7 @@ import Row from 'react-bootstrap/Row';
 import {DataPath} from '../../../../../const/path/definitions';
 import {useI18n} from '../../../../../i18n/hook';
 import {makeDataUrl} from '../../../../../utils/path/make';
+import {AdsPageTop, AdsUnitKeyPointIndexEnd} from '../../../../elements/common/ads/main';
 import {Loading} from '../../../../elements/common/loading';
 import {Search} from '../../../../elements/input/search/main';
 import {useKeyPointData} from '../../hooks';
@@ -22,23 +23,28 @@ export const KeyPointIndexPage = () => {
   }
 
   return (
-    <Search
-      options={Object.entries(keyPointData).map(([id, entry]) => ({id, ...entry}))}
-      isOptionMatchSearch={(option, textLowered) => option.description.toLowerCase().includes(textLowered)}
-      renderMatchedSelection={({id, type, description}) => (
-        <Row noGutters key={description} className={styles.entry}>
-          <Col xs="auto" className={styles.typeEntry}>
-            <span className={styles.typeIcon}>{PointTypeIcon[type]}</span>&nbsp;
-            <small>{t((t) => t.game.unitTier.points.type[type])}</small>
-          </Col>
-          <Col>
-            <a href={makeDataUrl(DataPath.TIER_KEY_POINT, {id, lang})} target="_blank" rel="noreferrer">
-              {description}
-            </a>
-          </Col>
-        </Row>
-      )}
-      height="70vh"
-    />
+    <>
+      <AdsPageTop/>
+      <Search
+        options={Object.entries(keyPointData).map(([id, entry]) => ({id, ...entry}))}
+        isOptionMatchSearch={(option, textLowered) => option.description.toLowerCase().includes(textLowered)}
+        renderMatchedSelection={({id, type, description}) => (
+          <Row noGutters key={description} className={styles.entry}>
+            <Col xs="auto" className={styles.typeEntry}>
+              <span className={styles.typeIcon}>{PointTypeIcon[type]}</span>&nbsp;
+              <small>{t((t) => t.game.unitTier.points.type[type])}</small>
+            </Col>
+            <Col>
+              <a href={makeDataUrl(DataPath.TIER_KEY_POINT, {id, lang})} target="_blank" rel="noreferrer">
+                {description}
+              </a>
+            </Col>
+          </Row>
+        )}
+        height="70vh"
+      />
+      <div className="mb-3"/>
+      <AdsUnitKeyPointIndexEnd/>
+    </>
   );
 };
diff --git a/src/components/pages/tier/points/info/main.tsx b/src/components/pages/tier/points/info/main.tsx
@@ -9,6 +9,7 @@ import {useI18n} from '../../../../../i18n/hook';
 import {useNextRouter} from '../../../../../utils/router';
 import {ApiRequestSender} from '../../../../../utils/services/api/requestSender';
 import {useUnitInfo} from '../../../../../utils/services/resources/unitInfo/hooks';
+import {AdsPageTop, AdsUnitKeyPointInfo} from '../../../../elements/common/ads/main';
 import {useFetchStateProcessed} from '../../../../elements/common/fetch';
 import {Loading} from '../../../../elements/common/loading';
 import {PointTypeIcon} from '../../icons';
@@ -43,11 +44,13 @@ export const KeyPointInfoPage = () => {
 
   return (
     <>
+      <AdsPageTop/>
       <h4>
         {PointTypeIcon[entry.type]}&nbsp;
         {entry.description}
       </h4>
       <hr/>
+      <AdsUnitKeyPointInfo/>
       <h5>{t((t) => t.game.unitTier.points.info.linkedUnits)}</h5>
       <Form.Row>
         {
@@ -70,6 +73,7 @@ export const KeyPointInfoPage = () => {
             </Col>
         }
       </Form.Row>
+      <AdsUnitKeyPointInfo/>
     </>
   );
 };