From e3cb0ed13e0c282064b3bebc553677be4b54618d Mon Sep 17 00:00:00 2001
From: kunalv17 <116634168+kunalv17@users.noreply.github.com>
Date: Wed, 29 Mar 2023 15:21:08 +0530
Subject: [PATCH] feat/added toggle for pages in settings features (#576)

* feat/added toggle for pages in settings features

* style:changed pages icon
---
 apps/app/components/icons/document-icon.tsx   |  6 ++-
 .../project/single-sidebar-project.tsx        |  3 +-
 .../[projectId]/settings/features.tsx         | 39 ++++++++++++++++---
 apps/app/types/projects.d.ts                  |  5 ++-
 4 files changed, 43 insertions(+), 10 deletions(-)

diff --git a/apps/app/components/icons/document-icon.tsx b/apps/app/components/icons/document-icon.tsx
index f7c1b0062..a9c599578 100644
--- a/apps/app/components/icons/document-icon.tsx
+++ b/apps/app/components/icons/document-icon.tsx
@@ -2,7 +2,7 @@ import React from "react";
 
 import type { Props } from "./types";
 
-export const DocumentIcon: React.FC<Props> = ({ width = "24", height = "24", className }) => (
+export const DocumentIcon: React.FC<Props> = ({ width = "24", height = "24", className, color }) => (
     <svg
       width={width}
       height={height}
@@ -11,6 +11,8 @@ export const DocumentIcon: React.FC<Props> = ({ width = "24", height = "24", cla
       fill="currentColor"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <path d="M7.27051 14.792H12.7288C12.9094 14.792 13.0587 14.733 13.1768 14.6149C13.2948 14.4969 13.3538 14.3475 13.3538 14.167C13.3538 13.9864 13.2948 13.8371 13.1768 13.7191C13.0587 13.601 12.9094 13.542 12.7288 13.542H7.27051C7.08995 13.542 6.94065 13.601 6.82259 13.7191C6.70454 13.8371 6.64551 13.9864 6.64551 14.167C6.64551 14.3475 6.70454 14.4969 6.82259 14.6149C6.94065 14.733 7.08995 14.792 7.27051 14.792ZM7.27051 11.2503H12.7288C12.9094 11.2503 13.0587 11.1913 13.1768 11.0732C13.2948 10.9552 13.3538 10.8059 13.3538 10.6253C13.3538 10.4448 13.2948 10.2955 13.1768 10.1774C13.0587 10.0594 12.9094 10.0003 12.7288 10.0003H7.27051C7.08995 10.0003 6.94065 10.0594 6.82259 10.1774C6.70454 10.2955 6.64551 10.4448 6.64551 10.6253C6.64551 10.8059 6.70454 10.9552 6.82259 11.0732C6.94065 11.1913 7.08995 11.2503 7.27051 11.2503ZM4.58301 18.3337C4.24967 18.3337 3.95801 18.2087 3.70801 17.9587C3.45801 17.7087 3.33301 17.417 3.33301 17.0837V2.91699C3.33301 2.58366 3.45801 2.29199 3.70801 2.04199C3.95801 1.79199 4.24967 1.66699 4.58301 1.66699H11.583C11.7497 1.66699 11.9129 1.70171 12.0726 1.77116C12.2323 1.8406 12.3677 1.93088 12.4788 2.04199L16.2913 5.85449C16.4025 5.9656 16.4927 6.10102 16.5622 6.26074C16.6316 6.42046 16.6663 6.58366 16.6663 6.75033V17.0837C16.6663 17.417 16.5413 17.7087 16.2913 17.9587C16.0413 18.2087 15.7497 18.3337 15.4163 18.3337H4.58301ZM11.4788 6.16699V2.91699H4.58301V17.0837H15.4163V6.79199H12.1038C11.9233 6.79199 11.774 6.73296 11.6559 6.61491C11.5379 6.49685 11.4788 6.34755 11.4788 6.16699ZM4.58301 2.91699V6.79199V2.91699V17.0837V2.91699Z" />
+    <path
+      fill={color}
+      d="M7.27051 14.792H12.7288C12.9094 14.792 13.0587 14.733 13.1768 14.6149C13.2948 14.4969 13.3538 14.3475 13.3538 14.167C13.3538 13.9864 13.2948 13.8371 13.1768 13.7191C13.0587 13.601 12.9094 13.542 12.7288 13.542H7.27051C7.08995 13.542 6.94065 13.601 6.82259 13.7191C6.70454 13.8371 6.64551 13.9864 6.64551 14.167C6.64551 14.3475 6.70454 14.4969 6.82259 14.6149C6.94065 14.733 7.08995 14.792 7.27051 14.792ZM7.27051 11.2503H12.7288C12.9094 11.2503 13.0587 11.1913 13.1768 11.0732C13.2948 10.9552 13.3538 10.8059 13.3538 10.6253C13.3538 10.4448 13.2948 10.2955 13.1768 10.1774C13.0587 10.0594 12.9094 10.0003 12.7288 10.0003H7.27051C7.08995 10.0003 6.94065 10.0594 6.82259 10.1774C6.70454 10.2955 6.64551 10.4448 6.64551 10.6253C6.64551 10.8059 6.70454 10.9552 6.82259 11.0732C6.94065 11.1913 7.08995 11.2503 7.27051 11.2503ZM4.58301 18.3337C4.24967 18.3337 3.95801 18.2087 3.70801 17.9587C3.45801 17.7087 3.33301 17.417 3.33301 17.0837V2.91699C3.33301 2.58366 3.45801 2.29199 3.70801 2.04199C3.95801 1.79199 4.24967 1.66699 4.58301 1.66699H11.583C11.7497 1.66699 11.9129 1.70171 12.0726 1.77116C12.2323 1.8406 12.3677 1.93088 12.4788 2.04199L16.2913 5.85449C16.4025 5.9656 16.4927 6.10102 16.5622 6.26074C16.6316 6.42046 16.6663 6.58366 16.6663 6.75033V17.0837C16.6663 17.417 16.5413 17.7087 16.2913 17.9587C16.0413 18.2087 15.7497 18.3337 15.4163 18.3337H4.58301ZM11.4788 6.16699V2.91699H4.58301V17.0837H15.4163V6.79199H12.1038C11.9233 6.79199 11.774 6.73296 11.6559 6.61491C11.5379 6.49685 11.4788 6.34755 11.4788 6.16699ZM4.58301 2.91699V6.79199V2.91699V17.0837V2.91699Z" />
     </svg>
   );
diff --git a/apps/app/components/project/single-sidebar-project.tsx b/apps/app/components/project/single-sidebar-project.tsx
index 812fe0c96..8d25ad3ea 100644
--- a/apps/app/components/project/single-sidebar-project.tsx
+++ b/apps/app/components/project/single-sidebar-project.tsx
@@ -145,7 +145,8 @@ export const SingleSidebarProject: React.FC<Props> = ({
                 if (
                   (item.name === "Cycles" && !project.cycle_view) ||
                   (item.name === "Modules" && !project.module_view) ||
-                  (item.name === "Views" && !project.issue_views_view)
+                  (item.name === "Views" && !project.issue_views_view) ||
+                  (item.name === "Pages" && !project.page_view)
                 )
                   return;
 
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx
index 6b3cd31f5..e8a414401 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx
@@ -17,6 +17,7 @@ import { SecondaryButton } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // icons
 import { ContrastIcon, PeopleGroupIcon, ViewListIcon } from "components/icons";
+import { DocumentTextIcon } from "@heroicons/react/24/outline";
 // types
 import { IProject, UserAuth } from "types";
 import type { NextPage, GetServerSidePropsContext } from "next";
@@ -65,7 +66,6 @@ const FeaturesSettings: NextPage<UserAuth> = (props) => {
       .then((res) => {
         mutate(PROJECT_DETAILS(projectId as string));
         mutate(PROJECTS_LIST(workspaceSlug as string));
-
         setToastAlert({
           title: "Success!",
           type: "success",
@@ -96,7 +96,7 @@ const FeaturesSettings: NextPage<UserAuth> = (props) => {
         <div className="space-y-5">
           <div className="flex items-center justify-between gap-x-8 gap-y-2 rounded-[10px] border bg-white p-5">
             <div className="flex items-start gap-3">
-              <ContrastIcon color="#3f76ff" width={28} height={28} className="flex-shrink-0" />
+              <ContrastIcon color="#3F76FF" width={28} height={28} className="flex-shrink-0" />
               <div>
                 <h4 className="text-xl font-semibold">Cycles</h4>
                 <p className="text-gray-500">
@@ -125,7 +125,7 @@ const FeaturesSettings: NextPage<UserAuth> = (props) => {
           </div>
           <div className="flex items-center justify-between gap-x-8 gap-y-2 rounded-[10px] border bg-white p-5">
             <div className="flex items-start gap-3">
-              <PeopleGroupIcon color="#ff6b00" width={28} height={28} className="flex-shrink-0" />
+              <PeopleGroupIcon color="#FF6B00" width={28} height={28} className="flex-shrink-0" />
               <div>
                 <h4 className="-mt-1.5 text-xl font-semibold">Modules</h4>
                 <p className="text-gray-500">
@@ -154,11 +154,11 @@ const FeaturesSettings: NextPage<UserAuth> = (props) => {
           </div>
           <div className="flex items-center justify-between gap-x-8 gap-y-2 rounded-[10px] border bg-white p-5">
             <div className="flex items-start gap-3">
-              <ViewListIcon color="#ff6b00" width={28} height={28} className="flex-shrink-0" />
+              <ViewListIcon color="#05C3FF" width={28} height={28} className="flex-shrink-0" />
               <div>
                 <h4 className="-mt-1.5 text-xl font-semibold">Views</h4>
                 <p className="text-gray-500">
-                  Modules are enabled for all the projects in this workspace. Access it from the
+                  Views are enabled for all the projects in this workspace. Access it from the
                   navigation bar.
                 </p>
               </div>
@@ -181,6 +181,35 @@ const FeaturesSettings: NextPage<UserAuth> = (props) => {
               />
             </button>
           </div>
+          <div className="flex items-center justify-between gap-x-8 gap-y-2 rounded-[10px] border bg-white p-5">
+            <div className="flex items-start gap-3">
+              <DocumentTextIcon color="#FCBE1D" width={28} height={28} className="flex-shrink-0" />
+              <div>
+                <h4 className="text-xl font-semibold">Pages</h4>
+                <p className="text-gray-500">
+                  Pages are enabled for all the projects in this workspace. Access them from the
+                  navigation bar.
+                </p>
+              </div>
+            </div>
+            <button
+              type="button"
+              className={`relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none ${
+                projectDetails?.page_view ? "bg-green-500" : "bg-gray-200"
+              }`}
+              role="switch"
+              aria-checked={projectDetails?.page_view}
+              onClick={() => handleSubmit({ page_view: !projectDetails?.page_view })}
+            >
+              <span className="sr-only">Use cycles</span>
+              <span
+                aria-hidden="true"
+                className={`inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out ${
+                  projectDetails?.page_view ? "translate-x-5" : "translate-x-0"
+                }`}
+              />
+            </button>
+          </div>
         </div>
         <div className="flex items-center gap-2">
           <a href="https://plane.so/" target="_blank" rel="noreferrer">
diff --git a/apps/app/types/projects.d.ts b/apps/app/types/projects.d.ts
index dfd6c84fe..1ed22f201 100644
--- a/apps/app/types/projects.d.ts
+++ b/apps/app/types/projects.d.ts
@@ -12,14 +12,15 @@ export interface IProject {
   created_at: Date;
   created_by: string;
   cycle_view: boolean;
+  issue_views_view: boolean;
+  module_view: boolean;
+  page_view: boolean;
   default_assignee: IUser | string | null;
   description: string;
   icon: string;
   id: string;
   identifier: string;
   is_favorite: boolean;
-  issue_views_view: boolean;
-  module_view: boolean;
   name: string;
   network: number;
   project_lead: IUser | string | null;