Skip to content

Commit

Permalink
Merge pull request #39 from Tawkie/feature-whastapp-instructions-update
Browse files Browse the repository at this point in the history 
Feature whastapp instructions update
  • Loading branch information
@VincePaulin
VincePaulin authored Jul 29, 2024
2 parents 66f7c70 + ff43eda commit edab2da
Show file tree
Hide file tree
Showing 5 changed files with 122 additions and 107 deletions.
6 changes: 3 additions & 3 deletions assets/l10n/intl_en.arb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2594,9 +2594,9 @@
"whatsAppQrTitle": "Pairing with WhatsApp",
"whatsAppQrExplainOne": "On your main phone",
"whatsAppQrExplainTwo": "From WhatsApp, tap on the Enter code notification.",
"whatsAppQrExplainTree": "Unlock your main phone with your pin code or biometric authentication",
"whatsAppQrExplainFour": "The location and name of our server will be displayed, press Confirm.",
"whatsAppQrExplainFive": "Enter the 8-character code below to link your WhatsApp to Tawkie",
"whatsAppQrExplainTree": "Or else:",
"whatsAppQrExplainFour": "1. Press the settings icon at top right and select Connected devices",
"whatsAppQrExplainFive": "2. Press the Connect a device button",
"whatsAppQrExplainSix": "Or by QR Code",
"whatsAppQrExplainSeven": "On your WhatsApp click on",
"whatsAppQrExplainEight": "> Connected devices > Connect a device.",
Expand Down
6 changes: 3 additions & 3 deletions assets/l10n/intl_fr.arb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2414,9 +2414,9 @@
"whatsAppQrTitle": "Appariement avec WhatsApp",
"whatsAppQrExplainOne": "Sur votre téléphone principal",
"whatsAppQrExplainTwo": "Dans WhatsApp, appuyez sur la notification Entrer le code.",
"whatsAppQrExplainTree": "Déverrouillez votre téléphone principal avec votre code PIN ou votre authentification biométrique",
"whatsAppQrExplainFour": "L'emplacement et le nom de notre serveur seront affichés, appuyez sur Confirmer.",
"whatsAppQrExplainFive": "Saisissez le code à 8 caractères ci-dessous pour lier votre WhatsApp à Tawkie",
"whatsAppQrExplainTree": "Ou bien:",
"whatsAppQrExplainFour": "1. Appuyer sur l'icône des paramètres, en haut à droite et sélectionnez Appareils connectés",
"whatsAppQrExplainFive": "2. Appuyez sur le bouton Connecter un appareil",
"whatsAppQrExplainSix": "Ou par code QR",
"whatsAppQrExplainSeven": "Sur votre WhatsApp, cliquez sur",
"whatsAppQrExplainEight": "> Appareils connectés > Connecter un appareil.",
Expand Down
1 change: 0 additions & 1 deletion lib/pages/add_bridge/add_bridge.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -867,7 +867,6 @@ class BotController extends State<AddBridge> {
}
}

/// Check last received message for WhatsApp
/// Check last received message for WhatsApp
void _onWhatsAppMessage(
String directChat,
Expand Down
15 changes: 9 additions & 6 deletions lib/pages/add_bridge/connection_bridge_dialog.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,7 @@ Future<void> connectToWhatsApp(
qrCode: result!.qrCode!,
code: result!.code!,
botConnection: botConnection,
socialNetwork: network,
),
),
) ??
Expand Down Expand Up @@ -119,12 +120,14 @@ Future<void> connectToWhatsApp(
),
TextButton(
onPressed: () async {
await whatsAppLoginFunction(
context: context,
formKey: formKey,
phoneNumber: controller.text,
botConnection: botConnection,
);
if (controller.text.isNotEmpty) {
await whatsAppLoginFunction(
context: context,
formKey: formKey,
phoneNumber: controller.text,
botConnection: botConnection,
);
}
},
child: Text(
L10n.of(context)!.login,
Expand Down
201 changes: 107 additions & 94 deletions lib/pages/add_bridge/qr_code_connect.dart
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,22 @@
import 'package:tawkie/pages/add_bridge/add_bridge.dart';
import 'package:tawkie/pages/add_bridge/model/social_network.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:qr_flutter/qr_flutter.dart';
import 'package:flutter_gen/gen_l10n/l10n.dart';
import 'package:qr_flutter/qr_flutter.dart';
import 'package:tawkie/pages/add_bridge/add_bridge.dart';
import 'package:tawkie/pages/add_bridge/model/social_network.dart';

class QRCodeConnectPage extends StatefulWidget {
final String qrCode;
final String code;
final BotController botConnection;
final SocialNetwork socialNetwork;

const QRCodeConnectPage({
super.key,
required this.qrCode,
required this.code,
required this.botConnection,
required this.socialNetwork,
});

@override
Expand All @@ -23,44 +25,52 @@ class QRCodeConnectPage extends StatefulWidget {

class _QRCodeConnectPageState extends State<QRCodeConnectPage> {
late Future<String> responseFuture;
bool _isDialogShown = false;

@override
void initState() {
super.initState();

// To make sure the continueProcess variable is true
// (in case you've already left the page before coming back)
widget.botConnection.continueProcess = true;

responseFuture = widget.botConnection.fetchDataWhatsApp();
}

@override
void dispose() {
// To stop listening to received messages if the page is exited
widget.botConnection.stopProcess();
super.dispose();
}

void _setDialogShown() {
setState(() {
_isDialogShown = true;
});
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(L10n.of(context)!.whatsAppQrTitle),
title: Text(
"${L10n.of(context)!.connectYourSocialAccount} ${widget.socialNetwork.name}",
),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
WhatsAppQRExplanation(
QRExplanation(
network: widget.socialNetwork,
qrCode: widget.qrCode,
code: widget.code,
),
const SizedBox(height: 16),
WhatsAppQRFutureBuilder(
QRFutureBuilder(
responseFuture: responseFuture,
network: widget.socialNetwork,
isDialogShown: _isDialogShown,
setDialogShown: _setDialogShown,
),
],
),
Expand All @@ -71,49 +81,68 @@ class _QRCodeConnectPageState extends State<QRCodeConnectPage> {
}

// Connection explanation section
class WhatsAppQRExplanation extends StatelessWidget {
class QRExplanation extends StatelessWidget {
final SocialNetwork network;
final String qrCode;
final String code;
const WhatsAppQRExplanation(
{super.key, required this.qrCode, required this.code});

const QRExplanation({
super.key,
required this.network,
required this.qrCode,
required this.code,
});

@override
Widget build(BuildContext context) {
return Column(
children: [
Text(
Widget qrWidget;

List<String> qrExplains = [];

switch (network.name) {
case "WhatsApp":
qrExplains = [
L10n.of(context)!.whatsAppQrExplainOne,
style: const TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
),
const SizedBox(height: 16),
Text(
L10n.of(context)!.whatsAppQrExplainTwo,
style: const TextStyle(fontSize: 16),
),
const SizedBox(height: 8),
Text(
L10n.of(context)!.whatsAppQrExplainTree,
style: const TextStyle(fontSize: 16),
),
const SizedBox(height: 8),
Text(
L10n.of(context)!.whatsAppQrExplainFour,
style: const TextStyle(fontSize: 16),
),
const SizedBox(height: 8),
Text(
L10n.of(context)!.whatsAppQrExplainFive,
style: const TextStyle(fontSize: 16),
),
L10n.of(context)!.whatsAppQrExplainSix,
L10n.of(context)!.whatsAppQrExplainSeven,
L10n.of(context)!.whatsAppQrExplainEight,
L10n.of(context)!.whatsAppQrExplainNine,
];

qrWidget = QrImageView(
data: qrCode,
version: QrVersions.auto,
size: 300,
);
break;
default:
qrWidget = QrImageView(
data: qrCode,
version: QrVersions.auto,
size: 300,
);
break;
}

return Column(
children: [
...qrExplains.take(5).map((text) => Padding(
padding: const EdgeInsets.symmetric(vertical: 4.0),
child: Text(
text,
style: const TextStyle(fontSize: 16),
),
)),
const SizedBox(height: 8),
ElevatedButton(
onPressed: () {
Clipboard.setData(ClipboardData(text: code));

final SnackBar snackBar = SnackBar(
content: Text(
L10n.of(context)!.codeCopy,
));
final SnackBar snackBar =
SnackBar(content: Text(L10n.of(context)!.codeCopy));
ScaffoldMessenger.of(context).showSnackBar(snackBar);
},
child: Padding(
Expand All @@ -123,6 +152,8 @@ class WhatsAppQRExplanation extends StatelessWidget {
style: const TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
decoration: null,
color: Colors.blue,
),
),
),
Expand All @@ -132,47 +163,34 @@ class WhatsAppQRExplanation extends StatelessWidget {
color: Colors.grey,
height: 20,
),
Text(
L10n.of(context)!.whatsAppQrExplainSix,
style: const TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
),
const SizedBox(height: 8),
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(L10n.of(context)!.whatsAppQrExplainSeven,
style: const TextStyle(
fontSize: 16,
)),
Text(
L10n.of(context)!.whatsAppQrExplainEight,
style: const TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
...qrExplains.skip(5).map(
(text) => Padding(
padding: const EdgeInsets.symmetric(vertical: 4.0),
child: Text(text,
style: const TextStyle(fontSize: 16),
textAlign: TextAlign.center),
),
),
],
),
const SizedBox(height: 8),
Text(
L10n.of(context)!.whatsAppQrExplainTen,
style: const TextStyle(fontSize: 16),
),
const SizedBox(height: 8),
QrImageView(
data: qrCode,
version: QrVersions.auto,
size: 300,
),
qrWidget,
],
);
}
}

// FutureBuilder part listening to responses in real time
class WhatsAppQRFutureBuilder extends StatelessWidget {
class QRFutureBuilder extends StatelessWidget {
final Future<String> responseFuture;
final SocialNetwork network;
final bool isDialogShown;
final VoidCallback setDialogShown;

const WhatsAppQRFutureBuilder({
const QRFutureBuilder({
super.key,
required this.responseFuture,
required this.network,
required this.isDialogShown,
required this.setDialogShown,
});

@override
Expand All @@ -185,31 +203,25 @@ class WhatsAppQRFutureBuilder extends StatelessWidget {
} else if (snapshot.hasError) {
return Text('${L10n.of(context)!.err_} ${snapshot.error}');
} else {
return buildAlertDialog(context, snapshot.data as String);
if (!isDialogShown) {
WidgetsBinding.instance.addPostFrameCallback((_) {
if (snapshot.data == "success") {
showSuccessDialog(context, network);
} else if (snapshot.data == "loginTimedOut") {
showTimeoutDialog(context, network);
}
});
}
return Container();
}
},
);
}

// AlertDialog displayed when an error or success occurs, listening directly to the response
Widget buildAlertDialog(BuildContext context, String result) {
if (result == "success") {
Future.microtask(() {
// Call function to display success dialog box
showSuccessDialog(context);
});
} else if (result == "loginTimedOut") {
Future.microtask(() {
// Call the function to display the "Elapsed time" dialog box
showTimeoutDialog(context);
});
}

return Container();
}

// showDialog of a success message when connecting and updating socialNetwork
Future<void> showSuccessDialog(BuildContext context) async {
// showDialog of a success message when connecting and updating socialNetwork
Future<void> showSuccessDialog(
BuildContext context, SocialNetwork network) async {
setDialogShown();
await showDialog(
context: context,
builder: (BuildContext context) {
Expand All @@ -225,12 +237,11 @@ class WhatsAppQRFutureBuilder extends StatelessWidget {
onPressed: () {
// SocialNetwork network update
SocialNetworkManager.socialNetworks
.firstWhere((element) => element.name == "WhatsApp")
.firstWhere((element) => element.name == network.name)
.connected = true;

Navigator.of(context).pop();
// Goes back twice (closes current and previous pages)
Navigator.pop(context, true);
Navigator.of(context).pop();
},
child: Text(
L10n.of(context)!.ok,
Expand All @@ -242,8 +253,10 @@ class WhatsAppQRFutureBuilder extends StatelessWidget {
);
}

// showDialog of elapsed time error message
Future<void> showTimeoutDialog(BuildContext context) async {
// showDialog of elapsed time error message
Future<void> showTimeoutDialog(
BuildContext context, SocialNetwork network) async {
setDialogShown();
await showDialog(
context: context,
builder: (BuildContext context) {
Expand Down

0 comments on commit edab2da

Please sign in to comment.