From 4024ca7b19fd29b0d4c5ab48d9c47faf0ca316e3 Mon Sep 17 00:00:00 2001 From: yaso Date: Mon, 3 Feb 2025 11:36:03 +0200 Subject: [PATCH 1/2] add trigger for web android, web iOS, Web and installed android --- .../lib/mih_packages/about_mih/mih_about.dart | 146 ++++++++++++++++-- 1 file changed, 129 insertions(+), 17 deletions(-) diff --git a/Frontend/lib/mih_packages/about_mih/mih_about.dart b/Frontend/lib/mih_packages/about_mih/mih_about.dart index 4ac8dc11..fdebef3a 100644 --- a/Frontend/lib/mih_packages/about_mih/mih_about.dart +++ b/Frontend/lib/mih_packages/about_mih/mih_about.dart @@ -1,4 +1,6 @@ +import 'package:Mzansi_Innovation_Hub/mih_components/mih_package/mih_app_window.dart'; import 'package:Mzansi_Innovation_Hub/mih_objects/arguments.dart'; +import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import '../../mih_components/mih_inputs_and_buttons/mih_button.dart'; import '../../mih_components/mih_layout/mih_action.dart'; @@ -8,7 +10,7 @@ import '../../mih_components/mih_layout/mih_layout_builder.dart'; import '../../mih_components/mih_layout/mih_tile.dart'; import '../../main.dart'; import 'package:font_awesome_flutter/font_awesome_flutter.dart'; -// import "package:universal_html/js.dart" as js; +import "package:universal_html/js.dart" as js; import 'package:url_launcher/url_launcher.dart'; // import 'dart:io' show Platform; // import 'dart:html' as html; @@ -175,23 +177,133 @@ class _MIHAboutState extends State { } void installMihTrigger() { - launchSocialUrl( - Uri.parse( - "https://play.google.com/store/apps/details?id=za.co.mzansiinnovationhub.mih", - ), + final isWebAndroid = + kIsWeb && (defaultTargetPlatform == TargetPlatform.android); + final isWebIos = kIsWeb && (defaultTargetPlatform == TargetPlatform.iOS); + + if (isWebAndroid) { + launchSocialUrl( + Uri.parse( + "https://play.google.com/store/apps/details?id=za.co.mzansiinnovationhub.mih", + ), + ); + } else if (isWebIos) { + //Show pop up for IOS + _showIOSInstallationGuide(); + } else if (MzanziInnovationHub.of(context)!.theme.getPlatform() == + "Android") { + //Installed Android App + launchSocialUrl( + Uri.parse( + "https://play.google.com/store/apps/details?id=za.co.mzansiinnovationhub.mih", + ), + ); + } else { + //Web + js.context.callMethod("presentAddToHome"); + } + } + + void _showIOSInstallationGuide() { + double windowFontSize = 17.0; + showDialog( + context: context, + barrierDismissible: false, + builder: (context) { + return MihAppWindow( + fullscreen: false, + windowTitle: "MIH Installation Guide (iOS)", + windowTools: const [], + onWindowTapClose: () { + Navigator.of(context).pop(); + }, + windowBody: [ + Align( + alignment: Alignment.centerLeft, + child: Text( + "1. Launch MIH on Safari.", + textAlign: TextAlign.left, + style: TextStyle( + color: + MzanziInnovationHub.of(context)!.theme.secondaryColor(), + fontSize: windowFontSize, + fontWeight: FontWeight.bold, + ), + ), + ), + const SizedBox(height: 10), + Align( + alignment: Alignment.centerLeft, + child: Text( + "2. Tap the Share Button.", + textAlign: TextAlign.left, + style: TextStyle( + color: + MzanziInnovationHub.of(context)!.theme.secondaryColor(), + fontSize: windowFontSize, + fontWeight: FontWeight.bold, + ), + ), + ), + const SizedBox(height: 10), + Align( + alignment: Alignment.centerLeft, + child: Text( + "3. Scroll down and tap Add to Home Screen.", + textAlign: TextAlign.left, + style: TextStyle( + color: + MzanziInnovationHub.of(context)!.theme.secondaryColor(), + fontSize: windowFontSize, + fontWeight: FontWeight.bold, + ), + ), + ), + const SizedBox(height: 10), + Align( + alignment: Alignment.centerLeft, + child: Text( + "4. Choose a name for the shortcut (Optional).", + textAlign: TextAlign.left, + style: TextStyle( + color: + MzanziInnovationHub.of(context)!.theme.secondaryColor(), + fontSize: windowFontSize, + fontWeight: FontWeight.bold, + ), + ), + ), + const SizedBox(height: 10), + Align( + alignment: Alignment.centerLeft, + child: Text( + "5. Tap Add", + textAlign: TextAlign.left, + style: TextStyle( + color: + MzanziInnovationHub.of(context)!.theme.secondaryColor(), + fontSize: windowFontSize, + fontWeight: FontWeight.bold, + ), + ), + ), + const SizedBox(height: 15), + // SizedBox( + // width: 300, + // height: 50, + // child: MIHButton( + // onTap: () {}, + // buttonText: "Video Guide", + // buttonColor: + // MzanziInnovationHub.of(context)!.theme.secondaryColor(), + // textColor: + // MzanziInnovationHub.of(context)!.theme.primaryColor(), + // ), + // ), + ], + ); + }, ); - // if (Platform.isAndroid) { - // launchSocialUrl( - // Uri.parse( - // "https://play.google.com/store/apps/details?id=za.co.mzansiinnovationhub.mih", - // ), - // ); - // } else if (Platform.isIOS) { - // //Show Dialog - // } else { - // //Web - // // js.context.callMethod("presentAddToHome"); - // } } Widget founderBio() { From 06c161a15ac5ce4a29a13b68fe2a062adcbbee96 Mon Sep 17 00:00:00 2001 From: yaso Date: Wed, 5 Feb 2025 15:25:50 +0200 Subject: [PATCH 2/2] add link to youtube install guide for iphone when button is pressed --- .../lib/mih_packages/about_mih/mih_about.dart | 76 +++++++++++++++---- 1 file changed, 62 insertions(+), 14 deletions(-) diff --git a/Frontend/lib/mih_packages/about_mih/mih_about.dart b/Frontend/lib/mih_packages/about_mih/mih_about.dart index fdebef3a..6ea1c3b5 100644 --- a/Frontend/lib/mih_packages/about_mih/mih_about.dart +++ b/Frontend/lib/mih_packages/about_mih/mih_about.dart @@ -193,6 +193,7 @@ class _MIHAboutState extends State { } else if (MzanziInnovationHub.of(context)!.theme.getPlatform() == "Android") { //Installed Android App + // _showIOSInstallationGuide(); launchSocialUrl( Uri.parse( "https://play.google.com/store/apps/details?id=za.co.mzansiinnovationhub.mih", @@ -218,6 +219,20 @@ class _MIHAboutState extends State { Navigator.of(context).pop(); }, windowBody: [ + Align( + alignment: Alignment.centerLeft, + child: Text( + "In order to install MIH on your iPhone, please follow the below steps:- ", + textAlign: TextAlign.left, + style: TextStyle( + color: + MzanziInnovationHub.of(context)!.theme.secondaryColor(), + fontSize: windowFontSize, + fontWeight: FontWeight.bold, + ), + ), + ), + const SizedBox(height: 10), Align( alignment: Alignment.centerLeft, child: Text( @@ -249,7 +264,7 @@ class _MIHAboutState extends State { Align( alignment: Alignment.centerLeft, child: Text( - "3. Scroll down and tap Add to Home Screen.", + "3. Scroll down and tap \"Add to Home Screen\".", textAlign: TextAlign.left, style: TextStyle( color: @@ -277,7 +292,7 @@ class _MIHAboutState extends State { Align( alignment: Alignment.centerLeft, child: Text( - "5. Tap Add", + "5. Tap \"Add\".", textAlign: TextAlign.left, style: TextStyle( color: @@ -287,19 +302,52 @@ class _MIHAboutState extends State { ), ), ), + const SizedBox(height: 10), + Align( + alignment: Alignment.centerLeft, + child: Text( + "That's it! Now you can tap the MIH icon on your home screen to open it quickly.", + textAlign: TextAlign.left, + style: TextStyle( + color: + MzanziInnovationHub.of(context)!.theme.secondaryColor(), + fontSize: windowFontSize, + fontWeight: FontWeight.bold, + ), + ), + ), + const SizedBox(height: 10), + Align( + alignment: Alignment.centerLeft, + child: Text( + "If you are still having trouble, please click on the button below to view a video guide.", + textAlign: TextAlign.left, + style: TextStyle( + color: MzanziInnovationHub.of(context)!.theme.errorColor(), + fontSize: windowFontSize, + fontWeight: FontWeight.bold, + ), + ), + ), const SizedBox(height: 15), - // SizedBox( - // width: 300, - // height: 50, - // child: MIHButton( - // onTap: () {}, - // buttonText: "Video Guide", - // buttonColor: - // MzanziInnovationHub.of(context)!.theme.secondaryColor(), - // textColor: - // MzanziInnovationHub.of(context)!.theme.primaryColor(), - // ), - // ), + SizedBox( + width: 300, + height: 50, + child: MIHButton( + onTap: () { + launchSocialUrl( + Uri.parse( + "https://www.youtube.com/watch?v=KVK78IV28JY", + ), + ); + }, + buttonText: "Video Guide", + buttonColor: + MzanziInnovationHub.of(context)!.theme.secondaryColor(), + textColor: + MzanziInnovationHub.of(context)!.theme.primaryColor(), + ), + ), ], ); },