Merge pull request #492 from EscolaLMS/fix/SPRAW-114-payments

Fix status bar on mobile view.

src/App.tsx

@@ -10,6 +10,8 @@ import TechnicalMaintenanceScreen from "./components/_App/TechnicalMaintenanceSc
 import themes from "@escolalms/components/lib/theme";
 import routeRoutes from "@/components/Routes/routes";
 import { useFirebase } from "@/hooks/useFirebase";
+import { StatusBar } from "@capacitor/status-bar";
+import { isMobilePlatform } from "@/utils/index";
 import "react-loading-skeleton/dist/skeleton.css";
 
 const Customizer = lazy(
@@ -68,6 +70,14 @@ const App = () => {
   const { fetchSettings, settings, fetchNotifications, fetchConfig } =
     useContext(EscolaLMSContext);
 
+  useEffect(() => {
+    if (isMobilePlatform) {
+      // fix for status bar color
+      // https://stackoverflow.com/questions/76578218/how-to-change-the-colour-of-carrier-and-clock-in-ios-and-android-with-ionic/77426871#77426871
+      StatusBar.setBackgroundColor({ color: "#FFFFFF" });
+    }
+  }, []);
+
   useFirebase();
 
   useEffect(() => {

src/components/Courses/SingleCoursesTwo/CoursesDetailsSidebar/Buttons/index.tsx

@@ -46,7 +46,7 @@ const CourseAccessButton: React.FC<CourseAccessButtonProps> = ({
 }) => {
   const { t } = useTranslation();
   const { push } = useHistory();
-  const { courseAccess, fetchCourseAccess, user } =
+  const { courseAccess, fetchCourseAccess, user, fetchCourse } =
     useContext(EscolaLMSContext);
   const { attachProduct, getActiveSubscription } = useSubscriptions();
 
@@ -83,16 +83,20 @@ const CourseAccessButton: React.FC<CourseAccessButtonProps> = ({
           product: product,
         });
         // Refresh course access after successful purchase
-        fetchCourseAccess({
-          course_id: Number(course.id),
-          current_page: 1,
-          per_page: 1,
-        });
+        // We need timeout for android phones (3s is enough)
+        setTimeout(() => {
+          fetchCourse(Number(course.id));
+          fetchCourseAccess({
+            course_id: Number(course.id),
+            current_page: 1,
+            per_page: 1,
+          });
+        }, 3000);
       } catch (error) {
         revenuecatErrorHandler(error as CapacitorPaymentError);
       }
     }
-  }, [course, fetchCourseAccess]);
+  }, [course, fetchCourse, fetchCourseAccess]);
 
   const currentCourseAccess = useMemo(
     () =>

src/components/Subscriptions/Box/index.tsx

@@ -143,7 +143,7 @@ const SubscriptionBox: React.FC<Props> = ({ subscription }) => {
           product: product,
         });
         // Redirect to course page
-        window.location.reload();
+        history.push(routeRoutes.home);
       } catch (error) {
         revenuecatErrorHandler(error as CapacitorPaymentError);
       }

src/i18n.ts

@@ -176,6 +176,7 @@ const resources = {
         CourseTitle: "Course title",
         CertificateDate: "Obtained at",
         CertificateDownload: "Download certificate",
+        SuccessfullyPurchased: "You have successfully purchased the course",
       },
       Cart: {
         IWantInvoice: "I want to receive a VAT invoice with a VAT number",
@@ -923,6 +924,7 @@ const resources = {
         CourseTitle: "Tytuł kursu",
         CertificateDate: "Uzyskany w dniu",
         DownloadCertificate: "Pobierz certyfikat",
+        SuccessfullyPurchased: "Kurs został zakupiony",
       },
       Cart: {
         IWantInvoice: "Chcę otrzymać fakturę VAT z numerem NIP",