From f317768d394875aab5c613165cd8eb2303bf4bbf Mon Sep 17 00:00:00 2001
From: Ahmad Abdolsaheb <ahmad.abdolsaheb@gmail.com>
Date: Mon, 24 Jul 2023 17:07:14 +0300
Subject: [PATCH] Revert "feat: accept modal bears AB test" (#51053)

---
 client/src/assets/icons/cup.tsx               | 60 +++++++++++++++++++
 client/src/assets/icons/heart.tsx             | 40 +++++++++++++
 .../components/Donation/donation-modal.tsx    | 21 +++++--
 3 files changed, 116 insertions(+), 5 deletions(-)
 create mode 100644 client/src/assets/icons/cup.tsx
 create mode 100644 client/src/assets/icons/heart.tsx

diff --git a/client/src/assets/icons/cup.tsx b/client/src/assets/icons/cup.tsx
new file mode 100644
index 00000000000..6d58423a0fd
--- /dev/null
+++ b/client/src/assets/icons/cup.tsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+function Cup(
+  props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
+): JSX.Element {
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <span className='sr-only'>{t('icons.gold-cup')}</span>
+      <svg
+        height={200}
+        version='1.1'
+        viewBox='0 0 172 200'
+        width={172}
+        xmlns='http://www.w3.org/2000/svg'
+        {...props}
+      >
+        <title>{t('icons.gold-cup')}</title>
+        <g fill='none' fillRule='evenodd'>
+          <g transform='translate(-14)'>
+            <g transform='translate(20)'>
+              <rect
+                fill='#ffbf00'
+                height={22}
+                id='b'
+                transform='translate(80 166.5) rotate(-90) translate(-80 -166.5)'
+                width={69}
+                x='45.5'
+                y='155.5'
+              />
+              <rect fill='#ffbf00' height={11} width={85} x={39} y={190} />
+              <rect fill='#ffbf00' height={12} width={62} x={51} y={179} />
+              <rect fill='#ffbf00' height={12} width={112} x={24} />
+              <rect fill='#ffbf00' height={98} width={95} x={33} y={11} />
+              <path
+                d='m9.929 33.949c18.201-5.245 30.238-3.4924 36.112 5.258 8.8109 13.126-11.162 53.58-34.056 67.467-15.262 9.2576-15.948-14.984-2.056-72.724z'
+                id='a'
+                stroke='#ffbf00'
+                strokeWidth={11}
+                transform='translate(24.084 69.796) scale(-1 1) translate(-24.084 -69.796)'
+              />
+              <path
+                d='m121.93 33.949c18.201-5.245 30.238-3.4924 36.112 5.258 8.8109 13.126-11.162 53.58-34.056 67.467-15.262 9.2576-15.948-14.984-2.056-72.724z'
+                stroke='#ffbf00'
+                strokeWidth={11}
+              />
+              <circle cx='80.5' cy='106.5' fill='#ffbf00' r='47.5' />
+            </g>
+          </g>
+        </g>
+      </svg>
+    </>
+  );
+}
+
+Cup.displayName = 'Cup';
+
+export default Cup;
diff --git a/client/src/assets/icons/heart.tsx b/client/src/assets/icons/heart.tsx
new file mode 100644
index 00000000000..6e5678ee2a7
--- /dev/null
+++ b/client/src/assets/icons/heart.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+function Heart(
+  props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
+): JSX.Element {
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <span className='sr-only'>{t('icons.heart')}</span>
+      <svg
+        height={184}
+        version='1.1'
+        viewBox='0 0 200 184'
+        width={200}
+        xmlns='http://www.w3.org/2000/svg'
+        {...props}
+      >
+        <g fill='none' fillRule='evenodd'>
+          <g fill='var(--love-color)'>
+            <ellipse cx='140.5' cy={59} id='a' rx='59.5' ry={59} />
+            <circle cx={59} cy={59} r={59} />
+            <rect
+              height={118}
+              transform='translate(100 100) rotate(-45) translate(-100 -100)'
+              width={118}
+              x={41}
+              y={41}
+            />
+          </g>
+        </g>
+      </svg>
+    </>
+  );
+}
+
+Heart.displayName = 'Heart';
+
+export default Heart;
diff --git a/client/src/components/Donation/donation-modal.tsx b/client/src/components/Donation/donation-modal.tsx
index e8e2c912e4b..3d4bced278d 100644
--- a/client/src/components/Donation/donation-modal.tsx
+++ b/client/src/components/Donation/donation-modal.tsx
@@ -8,6 +8,8 @@ import { goToAnchor } from 'react-scrollable-anchor';
 import { bindActionCreators, Dispatch, AnyAction } from 'redux';
 import { createSelector } from 'reselect';
 import { PaymentContext } from '../../../../config/donation-settings';
+import Cup from '../../assets/icons/cup';
+import Heart from '../../assets/icons/heart';
 import BearProgressModal from '../../assets/images/components/bear-progress-modal';
 import BearBlockCompletion from '../../assets/images/components/bear-block-completion-modal';
 
@@ -55,11 +57,20 @@ const RenderIlustration = ({
 }: {
   recentlyClaimedBlock: RecentlyClaimedBlock;
 }) => {
-  return recentlyClaimedBlock ? (
-    <BearBlockCompletion className='donation-icon' />
-  ) : (
-    <BearProgressModal className='donation-icon' />
-  );
+  const showModalBears = useFeature('show-modal-bears').on;
+  if (showModalBears) {
+    return recentlyClaimedBlock ? (
+      <BearBlockCompletion className='donation-icon' />
+    ) : (
+      <BearProgressModal className='donation-icon' />
+    );
+  } else {
+    return recentlyClaimedBlock ? (
+      <Cup className='donation-icon' />
+    ) : (
+      <Heart className='donation-icon' />
+    );
+  }
 };
 
 function getctaNumberBetween1To10() {