Fix/checkout theme naming convention

Sample/lib/feature/checkout/checkout_screen.dart

@@ -58,11 +58,9 @@ class _CheckoutScreenState extends State<CheckoutScreen> {
               style: ts.TextStyle(fontSize: 24),
             ),
             //Start of Merchant content
-            const Padding(
+             Padding(
               padding: EdgeInsets.all(12.0),
-              child: Text(
-                "Some users UI elements, Some users UI elements, Some users UI elements, Some users UI elements, Some users UI elements",
-              ),
+              child: Text(AppLocalizations.of(context)!.hostAppContent),
             ),
             //End of Merchant content
             Padding(
@@ -77,13 +75,9 @@ class _CheckoutScreenState extends State<CheckoutScreen> {
             ),
             const SizedBox(height: 20),
             //Start of Merchant content
-            const Padding(
+            Padding(
               padding: EdgeInsets.all(12.0),
-              child: Text(
-                "Some users UI elements, Some users UI elements, Some users UI elements, Some users UI elements, Some users UI elements,"
-                " Some users UI elements, Some users UI elements, Some users UI elements,"
-                " Some users UI elements, Some users UI elements, Some users UI elements",
-              ),
+              child: Text(AppLocalizations.of(context)!.hostAppContent),
             ),
             //End of Merchant content
           ],

Sample/lib/feature/home/home_screen.dart

@@ -30,6 +30,7 @@ class _HomeScreenState extends State<HomeScreen> {
   late TextEditingController cardExpiryTimeController;
   late TextEditingController paymentsListItemCountController;
   late TextEditingController defaultSelectedPaymentController;
+  late TextEditingController languageController;
 
   @override
   void initState() {
@@ -44,6 +45,7 @@ class _HomeScreenState extends State<HomeScreen> {
     cardExpiryTimeController = TextEditingController(text: state.cardExpiryTime);
     paymentsListItemCountController = TextEditingController(text: state.paymentsListItemCount);
     defaultSelectedPaymentController = TextEditingController(text: state.defaultSelectedPayment);
+    languageController = TextEditingController(text: state.language);
   }
 
   @override
@@ -73,6 +75,22 @@ class _HomeScreenState extends State<HomeScreen> {
                   child: Column(
                     crossAxisAlignment: CrossAxisAlignment.stretch,
                     children: [
+                      DropdownMenu<String>(
+                        initialSelection: Platform.localeName.split("_")[0],
+                        controller: languageController,
+                        requestFocusOnTap: true,
+                        label: const Text('Language'),
+                        expandedInsets: EdgeInsets.zero,
+                        onSelected: (String? lang) {
+                          context.read<HomeScreenCubit>().onLanguageChanged(lang);
+                        },
+                        dropdownMenuEntries: ["en", "ar"].map<DropdownMenuEntry<String>>((
+                          String lang,
+                        ) {
+                          return DropdownMenuEntry<String>(value: lang, label: lang);
+                        }).toList(),
+                      ),
+                      const SizedBox(height: 8),
                       TextFormField(
                         controller: amountEditingController,
                         onChanged: (text) {
@@ -263,7 +281,8 @@ class _HomeScreenState extends State<HomeScreen> {
                           ),
                           const Text('Auto debit'),
                         ],
-                      ),Row(
+                      ),
+                      Row(
                         children: [
                           Checkbox(
                             checkColor: Colors.white,

Sample/lib/feature/home/home_screen_cubit.dart

@@ -59,6 +59,7 @@ class HomeScreenCubit extends Cubit<HomeScreenState> {
                currencyCode: currencyCode,
                phoneNumber: _customerPhone,
                customerId: customerId,
+               language: Platform.localeName.split("_")[0],
                formsOfPaymentChecked: Map.from({
                  FormsOfPayment.redirect: true,
                  FormsOfPayment.flex: true,
@@ -100,7 +101,9 @@ class HomeScreenCubit extends Cubit<HomeScreenState> {
   void getSessionId({required String merchantId, required String apiKey}) async {
     _logger.d("getSessionId, merchantId: $merchantId, apiKey: $apiKey");
     emit(state.copyWith(sessionId: null, hasSessionLoaded: false));
-    final language = Platform.localeName.split("_")[0];
+
+    final language = state.language ?? Platform.localeName.split("_")[0];
+
     final cardExpiryTime = state.cardExpiryTime?.isNotEmpty == true
         ? int.tryParse(state.cardExpiryTime!)
         : null;
@@ -319,7 +322,7 @@ class HomeScreenCubit extends Cubit<HomeScreenState> {
 
     final brandingOptionsRequest = BrandingOptionsRequest(paymentMethods: BrandingPaymentMethods());
     state.pgCodesChecked?.forEach((code, isSelected) {
-      if(isSelected) {
+      if (isSelected) {
         switch (code) {
           case PGCode.knet:
             brandingOptionsRequest.paymentMethods.knetStaging = BrandingOption(
@@ -334,13 +337,13 @@ class HomeScreenCubit extends Cubit<HomeScreenState> {
               fontWeight: 400,
             );
           case PGCode.benefit:
-           /* brandingOptionsRequest.paymentMethods.benefit = BrandingOption(
+          /* brandingOptionsRequest.paymentMethods.benefit = BrandingOption(
               text: "Branding text for Benefit",
               color: "#006400",
               fontWeight: 900,
             );*/
           case PGCode.benefitpay:
-           /* brandingOptionsRequest.paymentMethods.benefitpay = BrandingOption(
+          /* brandingOptionsRequest.paymentMethods.benefitpay = BrandingOption(
               text: "Branding text for BenefitPay",
               color: "#48D1CC",
               fontWeight: 900,
@@ -381,8 +384,8 @@ class HomeScreenCubit extends Cubit<HomeScreenState> {
               color: "#708090",
               fontWeight: 700,
             );
-         case PGCode.cs:
-           brandingOptionsRequest.paymentMethods.cs = BrandingOption(
+          case PGCode.cs:
+            brandingOptionsRequest.paymentMethods.cs = BrandingOption(
               text: "Branding text for cs",
               color: "#D2691E",
               fontWeight: 300,
@@ -399,11 +402,15 @@ class HomeScreenCubit extends Cubit<HomeScreenState> {
               color: "#2F4F4F",
               fontWeight: 300,
             );
-            default:
+          default:
         }
       }
     });
 
     return brandingOptionsRequest;
   }
+
+  void onLanguageChanged(String? lang) {
+    emit(state.copyWith(language: lang));
+  }
 }

Sample/lib/feature/home/home_screen_state.dart

@@ -15,6 +15,7 @@ final class HomeScreenState extends Equatable {
   final String? cardExpiryTime;
   final String paymentsListItemCount;
   final String? defaultSelectedPayment;
+  final String? language;
   final bool showPaymentDetails;
   final bool? noForms;
   final bool? preloadPayload;
@@ -37,6 +38,7 @@ final class HomeScreenState extends Equatable {
     this.cardExpiryTime,
     this.paymentsListItemCount = "$_default_payments_list__item_count",
     this.defaultSelectedPayment,
+    this.language,
     this.showPaymentDetails = true,
     this.preloadPayload = true,
     this.isAutoDebit = false,
@@ -60,6 +62,7 @@ final class HomeScreenState extends Equatable {
     String? cardExpiryTime,
     String? paymentsListItemCount,
     String? defaultSelectedPayment,
+    String? language,
     bool? showPaymentDetails,
     bool? noForms,
     bool? preloadPayload,
@@ -82,6 +85,7 @@ final class HomeScreenState extends Equatable {
       cardExpiryTime: cardExpiryTime ?? this.cardExpiryTime,
       paymentsListItemCount: paymentsListItemCount ?? this.paymentsListItemCount,
       defaultSelectedPayment: defaultSelectedPayment ?? this.defaultSelectedPayment,
+      language: language ?? this.language,
       showPaymentDetails: showPaymentDetails ?? this.showPaymentDetails,
       noForms: noForms ?? this.noForms,
       preloadPayload: preloadPayload ?? this.preloadPayload,
@@ -107,6 +111,7 @@ final class HomeScreenState extends Equatable {
     cardExpiryTime,
     paymentsListItemCount,
     defaultSelectedPayment,
+    language,
     sessionId,
     preloadPayload,
     isAutoDebit,

Sample/lib/feature/theme/theme_customization_screen.dart

@@ -72,7 +72,7 @@ class _ThemeCustomizationScreenState extends State<ThemeCustomizationScreen>
                         ),
                         const SizedBox(height: dividerPadding),
                         divider(),
-                        _colorOptionItem(state.theme?.sdkBackgroundColor?.color, "SDK background", (
+                        _colorOptionItem(state.theme?.backgroundColor?.color, "SDK background", (
                           color,
                         ) {
                           final newTheme = (state.theme ?? ch.CheckoutTheme()).copyWith(
@@ -97,7 +97,7 @@ class _ThemeCustomizationScreenState extends State<ThemeCustomizationScreen>
                         divider(),
                         const SizedBox(height: dividerPadding),
                         _colorOptionItem(
-                          state.theme?.selectPaymentMethodHeaderBackgroundColor?.color,
+                          state.theme?.selectPaymentItemTitleBackgroundColor?.color,
                           "Select payment method header background",
                           (color) {
                             final newTheme = (state.theme ?? ch.CheckoutTheme()).copyWith(
@@ -109,7 +109,7 @@ class _ThemeCustomizationScreenState extends State<ThemeCustomizationScreen>
                         const SizedBox(height: dividerPadding),
                         divider(),
                         const SizedBox(height: 8),
-                        _textOptionItem("Main title", state.theme?.mainTitleText, (style) {
+                        _textOptionItem("Main title", state.theme?.mainTitle, (style) {
                           final newTheme = (state.theme ?? ch.CheckoutTheme()).copyWith(
                             mainTitleText: style,
                           );
@@ -118,7 +118,7 @@ class _ThemeCustomizationScreenState extends State<ThemeCustomizationScreen>
                         const SizedBox(height: dividerPadding),
                         divider(),
                         const SizedBox(height: dividerPadding),
-                        _textOptionItem("Title", state.theme?.titleText, (style) {
+                        _textOptionItem("Title", state.theme?.title, (style) {
                           final newTheme = (state.theme ?? ch.CheckoutTheme()).copyWith(
                             titleText: style,
                           );
@@ -129,7 +129,7 @@ class _ThemeCustomizationScreenState extends State<ThemeCustomizationScreen>
                         const SizedBox(height: dividerPadding),
                         _textOptionItem(
                           "Select payment method header text",
-                          state.theme?.selectPaymentMethodHeaderText,
+                          state.theme?.selectPaymentMethodHeader,
                           (style) {
                             final newTheme = (state.theme ?? ch.CheckoutTheme()).copyWith(
                               selectPaymentMethodHeaderText: style,
@@ -140,7 +140,7 @@ class _ThemeCustomizationScreenState extends State<ThemeCustomizationScreen>
                         const SizedBox(height: dividerPadding),
                         divider(),
                         const SizedBox(height: dividerPadding),
-                        _textOptionItem("Subtitle", state.theme?.subtitleText, (style) {
+                        _textOptionItem("Subtitle", state.theme?.subtitle, (style) {
                           final newTheme = (state.theme ?? ch.CheckoutTheme()).copyWith(
                             subtitleText: style,
                           );
@@ -149,7 +149,7 @@ class _ThemeCustomizationScreenState extends State<ThemeCustomizationScreen>
                         const SizedBox(height: dividerPadding),
                         divider(),
                         const SizedBox(height: dividerPadding),
-                        _textOptionItem("Fees Title", state.theme?.feesTitleText, (style) {
+                        _textOptionItem("Fees Title", state.theme?.feesTitle, (style) {
                           final newTheme = (state.theme ?? ch.CheckoutTheme()).copyWith(
                             feesTitleText: style,
                           );
@@ -158,7 +158,7 @@ class _ThemeCustomizationScreenState extends State<ThemeCustomizationScreen>
                         const SizedBox(height: dividerPadding),
                         divider(),
                         const SizedBox(height: dividerPadding),
-                        _textOptionItem("Fees Subtitle", state.theme?.feesSubtitleText, (style) {
+                        _textOptionItem("Fees Subtitle", state.theme?.feesSubtitle, (style) {
                           final newTheme = (state.theme ?? ch.CheckoutTheme()).copyWith(
                             feesSubtitleText: style,
                           );
@@ -167,7 +167,7 @@ class _ThemeCustomizationScreenState extends State<ThemeCustomizationScreen>
                         const SizedBox(height: dividerPadding),
                         divider(),
                         const SizedBox(height: dividerPadding),
-                        _textOptionItem("Data label", state.theme?.dataLabelText, (style) {
+                        _textOptionItem("Data label", state.theme?.dataLabel, (style) {
                           final newTheme = (state.theme ?? ch.CheckoutTheme()).copyWith(
                             dataLabelText: style,
                           );
@@ -176,7 +176,7 @@ class _ThemeCustomizationScreenState extends State<ThemeCustomizationScreen>
                         const SizedBox(height: dividerPadding),
                         divider(),
                         const SizedBox(height: dividerPadding),
-                        _textOptionItem("Data value", state.theme?.dataValueText, (style) {
+                        _textOptionItem("Data value", state.theme?.dataValue, (style) {
                           final newTheme = (state.theme ?? ch.CheckoutTheme()).copyWith(
                             dataValueText: style,
                           );
@@ -185,7 +185,7 @@ class _ThemeCustomizationScreenState extends State<ThemeCustomizationScreen>
                         const SizedBox(height: dividerPadding),
                         divider(),
                         const SizedBox(height: dividerPadding),
-                        _textOptionItem("Error message", state.theme?.errorMessageText, (style) {
+                        _textOptionItem("Error message", state.theme?.errorMessage, (style) {
                           final newTheme = (state.theme ?? ch.CheckoutTheme()).copyWith(
                             errorMessageText: style,
                           );

Sample/lib/l10n/app_ar.arb

@@ -1,3 +1,4 @@
 {
-  "prepaymentFailureMessage": "لا يمكن دفع طلبك.\\nيرجى التحقق من معلومات الشراء."
+  "prepaymentFailureMessage": "لا يمكن دفع طلبك.\\nيرجى التحقق من معلومات الشراء.",
+  "hostAppContent": "بعض عناصر واجهة المستخدم، بعض عناصر واجهة المستخدم، بعض عناصر واجهة المستخدم، بعض عناصر واجهة المستخدم، بعض عناصر واجهة المستخدم، بعض عناصر واجهة المستخدم، بعض عناصر واجهة المستخدم، بعض عناصر واجهة المستخدم، بعض عناصر واجهة المستخدم، بعض عناصر واجهة المستخدم، بعض عناصر واجهة المستخدم"
 }

Sample/lib/l10n/app_en.arb

@@ -2,5 +2,9 @@
   "prepaymentFailureMessage": "Cannot pay your order.\nPlease, check purchase information",
   "@prepaymentFailureMessage": {
     "description": "This message will be showed when payment validation had been failed"
+  },
+  "hostAppContent": "Some users UI elements, Some users UI elements, Some users UI elements, Some users UI elements, Some users UI elements, Some users UI elements, Some users UI elements, Some users UI elements, Some users UI elements, Some users UI elements, Some users UI elements",
+  "@hostAppContent": {
+    "description": "This message will be showed above and below checkout widget"
   }
 }