chore(settings): add list of mandatory experiences (#87)

* chore(settings): add list of mandatory experiences * chore(docs): update goals
onetdev · Nov 1, 2024 · 1e90eea · 1e90eea
1 parent 8468fa5
commit 1e90eea
Show file tree

Hide file tree

Showing 10 changed files with 206 additions and 115 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -26,6 +26,7 @@
     "class",
     "cx",
     "iteratorClassName",
+    "listClassName",
     "localStyles.*"
   ],
   "yaml.schemas": {

diff --git a/README.md b/README.md
@@ -15,12 +15,13 @@ The main idea is to gather the most annoying features of modern websites in one
   - [ ] Add holiday related (Halloween, Christmass, Easter) small animated images that follow the mouse cursor
   - [ ] Push elements to navigation stack so that when the user tries to navigate back it will stay on the page
   - [ ] Fake advertisements (won free phone)
-  - [ ] Add disabled experience toggle for Auth related pages
 </details>
 
 <details>
   <summary>Completed</summary>
 
+  - [x] Add disabled mandatory experience checkboxes to settings
+  - [x] DILF advertisement and landing page
   - [x] Sticky video player that obscures page visibility
   - [x] Newsletter modal that appears when the user leaves the screen or scrolls down a bit
   - [x] Fake search page that:

diff --git a/public/locales/en/settings.json b/public/locales/en/settings.json
@@ -17,22 +17,29 @@
       "locationPermission": "Location permission"
     },
     "experienceFlags": {
+      "title": "Optional experience",
       "gifts": {
         "flaps": "Background ad flaps",
         "oneByOne": "One by one ad blocks"
       },
-      "title": "Experience",
       "contentPaywall": "Content paywall",
       "deadPixel": "Dead pixel",
       "exitPrompt": "Exit prompt",
-      "mockChat": "Mock chat",
-      "newsletterModal": "Newsletter modal",
+      "mockChat": "Bubble chat",
+      "newsletterModal": "Newsletter popup modal",
       "notifications": "Notifications",
       "pageTitleInactiveArrayPaged": "Alternative title when tab is inactive",
       "searchDelay": "Fake search delay",
       "wheelOfFortune": "Wheel of fortune",
       "stickyVideo": "Sticky video"
     },
+    "mandatoryExperienceFlags": {
+      "title": "Mandatory experience",
+      "impossibleLogin": "Impossible login",
+      "impossibleRegistration": "Impossible registration",
+      "impossiblePasswordReminder": "Impossible password reminder",
+      "unreasonableContent": "Unreasonable content"
+    },
     "runtime": {
       "title": "About this session",
       "disclaimer": "These values reset every single visit and acts as a bit of debug info.",

diff --git a/src/features/settings/components/ExperienceSettings.tsx b/src/features/settings/components/ExperienceSettings.tsx
@@ -8,111 +8,125 @@ import Button from '@/components/atoms/Button';
 import FormCheckbox from '@/components/atoms/Checkbox';
 import { useExperienceFlagsStore } from '@/state/experience_flags';
 
-const ExperienceSettings: FunctionComponent = () => {
+type ExperienceSettingsProps = {
+  className?: string;
+  listClassName?: string;
+};
+
+const ExperienceSettings: FunctionComponent<ExperienceSettingsProps> = ({
+  className = '',
+  listClassName = '',
+}) => {
   const experience = useExperienceFlagsStore();
   const { t } = useTranslation(['settings', 'common']);
 
   const onPageTitleInactiveArrayPagedChange = (value: boolean) =>
     experience.setPageTitle({ inactiveArrayPaged: value });
 
   return (
-    <SettingsBlock title={t('settings:section.experienceFlags.title')}>
-      <SettingsBlockRow
-        label={t('settings:section.experienceFlags.gifts.flaps')}>
-        <FormCheckbox
-          name="gift_flaps"
-          checked={experience.gifts.flaps}
-          onValueChange={(flaps) => experience.setGifts({ flaps })}
-        />
-      </SettingsBlockRow>
-      <SettingsBlockRow
-        label={t('settings:section.experienceFlags.gifts.oneByOne')}>
-        <FormCheckbox
-          name="gift_flaps"
-          checked={experience.gifts.oneByOne}
-          onValueChange={(oneByOne) => experience.setGifts({ oneByOne })}
-        />
-      </SettingsBlockRow>
-      <SettingsBlockRow
-        label={t('settings:section.experienceFlags.contentPaywall')}>
-        <FormCheckbox
-          name="content_paywall"
-          checked={experience.contentPaywall}
-          onValueChange={experience.setContentPaywall}
-        />
-      </SettingsBlockRow>
-      <SettingsBlockRow label={t('settings:section.experienceFlags.deadPixel')}>
-        <FormCheckbox
-          name="dead_pixel"
-          checked={experience.deadPixel}
-          onValueChange={experience.setDeadPixel}
-        />
-      </SettingsBlockRow>
-      <SettingsBlockRow
-        label={t('settings:section.experienceFlags.exitPrompt')}>
-        <FormCheckbox
-          name="exit_prompt"
-          checked={experience.exitPrompt}
-          onValueChange={experience.setExitPrompt}
-        />
-      </SettingsBlockRow>
-      <SettingsBlockRow label={t('settings:section.experienceFlags.mockChat')}>
-        <FormCheckbox
-          name="mock_chat"
-          checked={experience.mockChat}
-          onValueChange={experience.setMockChat}
-        />
-      </SettingsBlockRow>
-      <SettingsBlockRow
-        label={t('settings:section.experienceFlags.newsletterModal')}>
-        <FormCheckbox
-          name="newsletter"
-          checked={experience.newsletterModal}
-          onValueChange={experience.setNewsletterModal}
-        />
-      </SettingsBlockRow>
-      <SettingsBlockRow
-        label={t('settings:section.experienceFlags.notifications')}>
-        <FormCheckbox
-          name="notifications"
-          checked={experience.notifications}
-          onValueChange={experience.setNotifications}
-        />
-      </SettingsBlockRow>
-      <SettingsBlockRow
-        label={t(
-          'settings:section.experienceFlags.pageTitleInactiveArrayPaged',
-        )}>
-        <FormCheckbox
-          name="page_title_inactive_array_paged"
-          checked={experience.pageTitle.inactiveArrayPaged}
-          onValueChange={onPageTitleInactiveArrayPagedChange}
-        />
-      </SettingsBlockRow>
-      <SettingsBlockRow
-        label={t('settings:section.experienceFlags.searchDelay')}>
-        <FormCheckbox
-          name="search_delay"
-          checked={experience.searchDelay}
-          onValueChange={experience.setSearchDelay}
-        />
-      </SettingsBlockRow>
-      <SettingsBlockRow
-        label={t('settings:section.experienceFlags.stickyVideo')}>
-        <FormCheckbox
-          name="sticky_video"
-          checked={experience.stickyVideo}
-          onValueChange={experience.setStickyVideo}
-        />
-      </SettingsBlockRow>
-      <SettingsBlockRow
-        label={t('settings:section.experienceFlags.wheelOfFortune')}>
-        <FormCheckbox
-          name="wheel_of_fortune"
-          checked={experience.wheelOfFortune}
-          onValueChange={experience.setWheelOfFortune}
-        />
-      </SettingsBlockRow>
+    <SettingsBlock
+      title={t('settings:section.experienceFlags.title')}
+      className={className}>
+      <div className={listClassName}>
+        <SettingsBlockRow
+          label={t('settings:section.experienceFlags.gifts.flaps')}>
+          <FormCheckbox
+            name="gift_flaps"
+            checked={experience.gifts.flaps}
+            onValueChange={(flaps) => experience.setGifts({ flaps })}
+          />
+        </SettingsBlockRow>
+        <SettingsBlockRow
+          label={t('settings:section.experienceFlags.gifts.oneByOne')}>
+          <FormCheckbox
+            name="gift_flaps"
+            checked={experience.gifts.oneByOne}
+            onValueChange={(oneByOne) => experience.setGifts({ oneByOne })}
+          />
+        </SettingsBlockRow>
+        <SettingsBlockRow
+          label={t('settings:section.experienceFlags.contentPaywall')}>
+          <FormCheckbox
+            name="content_paywall"
+            checked={experience.contentPaywall}
+            onValueChange={experience.setContentPaywall}
+          />
+        </SettingsBlockRow>
+        <SettingsBlockRow
+          label={t('settings:section.experienceFlags.deadPixel')}>
+          <FormCheckbox
+            name="dead_pixel"
+            checked={experience.deadPixel}
+            onValueChange={experience.setDeadPixel}
+          />
+        </SettingsBlockRow>
+        <SettingsBlockRow
+          label={t('settings:section.experienceFlags.exitPrompt')}>
+          <FormCheckbox
+            name="exit_prompt"
+            checked={experience.exitPrompt}
+            onValueChange={experience.setExitPrompt}
+          />
+        </SettingsBlockRow>
+        <SettingsBlockRow
+          label={t('settings:section.experienceFlags.mockChat')}>
+          <FormCheckbox
+            name="mock_chat"
+            checked={experience.mockChat}
+            onValueChange={experience.setMockChat}
+          />
+        </SettingsBlockRow>
+        <SettingsBlockRow
+          label={t('settings:section.experienceFlags.newsletterModal')}>
+          <FormCheckbox
+            name="newsletter"
+            checked={experience.newsletterModal}
+            onValueChange={experience.setNewsletterModal}
+          />
+        </SettingsBlockRow>
+        <SettingsBlockRow
+          label={t('settings:section.experienceFlags.notifications')}>
+          <FormCheckbox
+            name="notifications"
+            checked={experience.notifications}
+            onValueChange={experience.setNotifications}
+          />
+        </SettingsBlockRow>
+        <SettingsBlockRow
+          label={t(
+            'settings:section.experienceFlags.pageTitleInactiveArrayPaged',
+          )}>
+          <FormCheckbox
+            name="page_title_inactive_array_paged"
+            checked={experience.pageTitle.inactiveArrayPaged}
+            onValueChange={onPageTitleInactiveArrayPagedChange}
+          />
+        </SettingsBlockRow>
+        <SettingsBlockRow
+          label={t('settings:section.experienceFlags.searchDelay')}>
+          <FormCheckbox
+            name="search_delay"
+            checked={experience.searchDelay}
+            onValueChange={experience.setSearchDelay}
+          />
+        </SettingsBlockRow>
+        <SettingsBlockRow
+          label={t('settings:section.experienceFlags.stickyVideo')}>
+          <FormCheckbox
+            name="sticky_video"
+            checked={experience.stickyVideo}
+            onValueChange={experience.setStickyVideo}
+          />
+        </SettingsBlockRow>
+        <SettingsBlockRow
+          label={t('settings:section.experienceFlags.wheelOfFortune')}>
+          <FormCheckbox
+            name="wheel_of_fortune"
+            checked={experience.wheelOfFortune}
+            onValueChange={experience.setWheelOfFortune}
+          />
+        </SettingsBlockRow>
+      </div>
       <div className="flex gap-3">
         <Button
           className="mt-6"

diff --git a/src/features/settings/components/MandatoryExperienceSettings.tsx b/src/features/settings/components/MandatoryExperienceSettings.tsx
@@ -0,0 +1,43 @@
+import { useTranslation } from 'next-i18next';
+import { FunctionComponent } from 'react';
+
+import SettingsBlock from './SettingsBlock';
+import SettingsBlockRow from './SettingsBlockRow';
+
+import FormCheckbox from '@/components/atoms/Checkbox';
+
+const MandatoryExperienceSettings: FunctionComponent = () => {
+  const { t } = useTranslation(['settings', 'common']);
+  return (
+    <SettingsBlock title={t('settings:section.mandatoryExperienceFlags.title')}>
+      <SettingsBlockRow
+        label={t(
+          'settings:section.mandatoryExperienceFlags.unreasonableContent',
+        )}>
+        <FormCheckbox name="unreasonable_content" checked={true} disabled />
+      </SettingsBlockRow>
+      <SettingsBlockRow
+        label={t('settings:section.mandatoryExperienceFlags.impossibleLogin')}>
+        <FormCheckbox name="impossible_login" checked={true} disabled />
+      </SettingsBlockRow>
+      <SettingsBlockRow
+        label={t(
+          'settings:section.mandatoryExperienceFlags.impossibleRegistration',
+        )}>
+        <FormCheckbox name="impossible_registration" checked={true} disabled />
+      </SettingsBlockRow>
+      <SettingsBlockRow
+        label={t(
+          'settings:section.mandatoryExperienceFlags.impossiblePasswordReminder',
+        )}>
+        <FormCheckbox
+          name="impossible_password_reminder"
+          checked={true}
+          disabled
+        />
+      </SettingsBlockRow>
+    </SettingsBlock>
+  );
+};
+
+export default MandatoryExperienceSettings;
diff --git a/src/features/settings/components/SettingsBlock.tsx b/src/features/settings/components/SettingsBlock.tsx
@@ -1,10 +1,18 @@
 import { FunctionComponent, PropsWithChildren } from 'react';
 
-const SettingsBlock: FunctionComponent<
-  PropsWithChildren<{ title: string }>
-> = ({ title, children }) => {
+export type SettingsBlockProps = PropsWithChildren<{
+  className?: string;
+  title: string;
+}>;
+
+const SettingsBlock: FunctionComponent<SettingsBlockProps> = ({
+  children,
+  className = '',
+  title,
+}) => {
   return (
-    <div className="rounded-md border border-on-surface bg-surface-alt p-5">
+    <div
+      className={`rounded-md border border-on-surface bg-surface-alt p-5 ${className}`}>
       <h2 className="m-0 mb-5">{title}</h2>
       <div className="flex flex-col gap-1">{children}</div>
     </div>

diff --git a/src/features/settings/components/SettingsBlockRow.tsx b/src/features/settings/components/SettingsBlockRow.tsx
@@ -1,13 +1,22 @@
 import { FunctionComponent, PropsWithChildren } from 'react';
 
-const SettingsBlockRow: FunctionComponent<
-  PropsWithChildren<{ label: string }>
-> = ({ label, children }) => {
+export type SettingsBlockRowProps = PropsWithChildren<{
+  label: string;
+  reverse?: boolean;
+}>;
+
+const SettingsBlockRow: FunctionComponent<SettingsBlockRowProps> = ({
+  label,
+  children,
+  reverse = false,
+}) => {
   return (
     <div>
-      <label className="flex items-center justify-between">
-        <span>{label}</span>
+      <label
+        data-reverse={reverse.toString()}
+        className="flex items-center gap-3 data-[reverse=true]:flex-row-reverse data-[reverse=true]:justify-between">
         {children}
+        <span>{label}</span>
       </label>
     </div>
   );

diff --git a/src/features/settings/components/UserGrantsSettings.tsx b/src/features/settings/components/UserGrantsSettings.tsx
@@ -27,11 +27,13 @@ const UserGrantsSettings: FunctionComponent = () => {
       </small>
       <br />
       <SettingsBlockRow
-        label={t('settings:section.userGrants.notificationPermission')}>
+        label={t('settings:section.userGrants.notificationPermission')}
+        reverse>
         {`${grant.permission.notification || t('common:status.notSet')}`}
       </SettingsBlockRow>
       <SettingsBlockRow
-        label={t('settings:section.userGrants.locationPermission')}>
+        label={t('settings:section.userGrants.locationPermission')}
+        reverse>
         {`${grant.permission.location || t('common:status.notSet')}`}
       </SettingsBlockRow>
     </SettingsBlock>

diff --git a/src/features/settings/index.ts b/src/features/settings/index.ts
@@ -1,4 +1,5 @@
 export { default as ExperienceSettings } from './components/ExperienceSettings';
-export { default as UserGrantsSettings } from './components/UserGrantsSettings';
 export { default as PreferencesSettings } from './components/PreferencesSettings';
 export { default as RuntimeSettings } from './components/RuntimeSettings';
+export { default as UserGrantsSettings } from './components/UserGrantsSettings';
+export { default as MandatoryExperienceSettings } from './components/MandatoryExperienceSettings';