From a222f19c70dc34eb858b3875d1b1fed9e6dce3fa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maciej=20W=C3=B3jcik?= <wojcik91@gmail.com>
Date: Wed, 23 Aug 2023 09:27:40 +0200
Subject: [PATCH] add asterisk to mark optional VPN step

---
 .../components/EnrollmentSideBar/EnrollmentSideBar.tsx     | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/web/src/pages/enrollment/components/EnrollmentSideBar/EnrollmentSideBar.tsx b/web/src/pages/enrollment/components/EnrollmentSideBar/EnrollmentSideBar.tsx
index 3fa90d7..e563839 100644
--- a/web/src/pages/enrollment/components/EnrollmentSideBar/EnrollmentSideBar.tsx
+++ b/web/src/pages/enrollment/components/EnrollmentSideBar/EnrollmentSideBar.tsx
@@ -13,16 +13,19 @@ import { TimeLeft } from '../TimeLeft/TimeLeft';
 export const EnrollmentSideBar = () => {
   const { LL } = useI18nContext();
 
+  const vpnOptional = useEnrollmentStore((state) => state.vpnOptional);
+
   const steps = useMemo((): LocalizedString[] => {
     const steps = LL.pages.enrollment.sideBar.steps;
+    const vpnStep = vpnOptional ? `${steps.vpn()}*` : steps.vpn();
     return [
       steps.welcome(),
       steps.verification(),
       steps.password(),
-      steps.vpn(),
+      vpnStep as LocalizedString,
       steps.finish(),
     ];
-  }, [LL.pages.enrollment.sideBar.steps]);
+  }, [LL.pages.enrollment.sideBar.steps, vpnOptional]);
 
   return (
     <div id="enrollment-side-bar">