feat: Turn spinner into radio button for payment options (#2211)

Fixes: #2210

Author: anhanh11001

app/src/main/java/org/fossasia/openevent/general/attendees/AttendeeFragment.kt

@@ -43,7 +43,12 @@ import kotlinx.android.synthetic.main.fragment_attendee.view.offlinePayment
 import kotlinx.android.synthetic.main.fragment_attendee.view.offlinePaymentDescription
 import kotlinx.android.synthetic.main.fragment_attendee.view.month
 import kotlinx.android.synthetic.main.fragment_attendee.view.monthText
-import kotlinx.android.synthetic.main.fragment_attendee.view.paymentSelector
+import kotlinx.android.synthetic.main.fragment_attendee.view.paymentOptionsGroup
+import kotlinx.android.synthetic.main.fragment_attendee.view.paypalRadioButton
+import kotlinx.android.synthetic.main.fragment_attendee.view.stripeRadioButton
+import kotlinx.android.synthetic.main.fragment_attendee.view.onSiteRadioButton
+import kotlinx.android.synthetic.main.fragment_attendee.view.chequeRadioButton
+import kotlinx.android.synthetic.main.fragment_attendee.view.bankRadioButton
 import kotlinx.android.synthetic.main.fragment_attendee.view.paymentSelectorContainer
 import kotlinx.android.synthetic.main.fragment_attendee.view.qty
 import kotlinx.android.synthetic.main.fragment_attendee.view.register
@@ -87,7 +92,6 @@ import kotlinx.android.synthetic.main.fragment_attendee.view.signInText
 import kotlinx.android.synthetic.main.fragment_attendee.view.signInTextLayout
 import kotlinx.android.synthetic.main.fragment_attendee.view.signInLayout
 import kotlinx.android.synthetic.main.fragment_attendee.view.signOutLayout
-import kotlinx.android.synthetic.main.fragment_attendee.view.paymentTitle
 import kotlinx.android.synthetic.main.fragment_attendee.view.taxLayout
 import kotlinx.android.synthetic.main.fragment_attendee.view.taxPrice
 import kotlinx.android.synthetic.main.fragment_attendee.view.totalAmountLayout
@@ -340,7 +344,7 @@ class AttendeeFragment : Fragment(), ComplexBackPressFragment {
 
         val currentTickets = attendeeViewModel.tickets.value
         if (currentTickets != null) {
-            rootView.paymentSelector.isVisible = safeArgs.amount > 0
+            rootView.paymentSelectorContainer.isVisible = safeArgs.amount > 0
 
             ticketsRecyclerAdapter.addAll(currentTickets)
             attendeeRecyclerAdapter.addAllTickets(currentTickets)
@@ -528,59 +532,44 @@ class AttendeeFragment : Fragment(), ComplexBackPressFragment {
     }
 
     private fun setupPaymentOptions(event: Event) {
-        val paymentOptions = ArrayList<String>()
-        if (event.canPayByPaypal)
-            paymentOptions.add(getString(R.string.paypal))
-        if (event.canPayByStripe)
-            paymentOptions.add(getString(R.string.stripe))
-        if (event.canPayOnsite)
-            paymentOptions.add(getString(R.string.on_site))
-        if (event.canPayByBank)
-            paymentOptions.add(getString(R.string.bank_transfer))
-        if (event.canPayByCheque)
-            paymentOptions.add(getString(R.string.cheque))
-
-        rootView.paymentSelector.adapter = ArrayAdapter(requireContext(), android.R.layout.simple_spinner_dropdown_item,
-            paymentOptions)
-        rootView.paymentSelector.onItemSelectedListener = object : AdapterView.OnItemSelectedListener {
-            override fun onNothingSelected(p0: AdapterView<*>?) { /*Do nothing*/ }
-
-            override fun onItemSelected(p0: AdapterView<*>?, p1: View?, position: Int, p3: Long) {
-                attendeeViewModel.selectedPaymentOption = position
-                when (position) {
-                    paymentOptions.indexOf(getString(R.string.stripe)) -> {
-                        rootView.stripePayment.isVisible = true
-                        rootView.offlinePayment.isVisible = false
-                    }
-                    paymentOptions.indexOf(getString(R.string.on_site)) -> {
-                        rootView.offlinePayment.isVisible = true
-                        rootView.stripePayment.isVisible = false
-                        rootView.offlinePaymentDescription.text = event.onsiteDetails
-                    }
-                    paymentOptions.indexOf(getString(R.string.bank_transfer)) -> {
-                        rootView.offlinePayment.isVisible = true
-                        rootView.stripePayment.isVisible = false
-                        rootView.offlinePaymentDescription.text = event.bankDetails
-                    }
-                    paymentOptions.indexOf(getString(R.string.cheque)) -> {
-                        rootView.offlinePayment.isVisible = true
-                        rootView.stripePayment.isVisible = false
-                        rootView.offlinePaymentDescription.text = event.chequeDetails
-                    }
-                    else -> {
-                        rootView.stripePayment.isVisible = false
-                        rootView.offlinePayment.isVisible = false
-                    }
+        rootView.paypalRadioButton.isVisible = event.canPayByPaypal
+        rootView.stripeRadioButton.isVisible = event.canPayByStripe
+        rootView.chequeRadioButton.isVisible = event.canPayByCheque
+        rootView.bankRadioButton.isVisible = event.canPayByBank
+        rootView.onSiteRadioButton.isVisible = event.canPayOnsite
+
+        rootView.paymentOptionsGroup.setOnCheckedChangeListener { group, checkedId ->
+            when (checkedId) {
+                R.id.stripeRadioButton -> {
+                    rootView.stripePayment.isVisible = true
+                    rootView.offlinePayment.isVisible = false
+                    attendeeViewModel.selectedPaymentMode = PAYMENT_MODE_STRIPE
+                }
+                R.id.onSiteRadioButton -> {
+                    rootView.offlinePayment.isVisible = true
+                    rootView.stripePayment.isVisible = false
+                    rootView.offlinePaymentDescription.text = event.onsiteDetails
+                    attendeeViewModel.selectedPaymentMode = PAYMENT_MODE_ONSITE
+                }
+                R.id.bankRadioButton -> {
+                    rootView.offlinePayment.isVisible = true
+                    rootView.stripePayment.isVisible = false
+                    rootView.offlinePaymentDescription.text = event.bankDetails
+                    attendeeViewModel.selectedPaymentMode = PAYMENT_MODE_BANK
+                }
+                R.id.chequeRadioButton -> {
+                    rootView.offlinePayment.isVisible = true
+                    rootView.stripePayment.isVisible = false
+                    rootView.offlinePaymentDescription.text = event.chequeDetails
+                    attendeeViewModel.selectedPaymentMode = PAYMENT_MODE_CHEQUE
+                }
+                else -> {
+                    rootView.stripePayment.isVisible = false
+                    rootView.offlinePayment.isVisible = false
+                    attendeeViewModel.selectedPaymentMode = PAYMENT_MODE_PAYPAL
                 }
             }
         }
-        if (attendeeViewModel.selectedPaymentOption != -1)
-            rootView.paymentSelector.setSelection(attendeeViewModel.selectedPaymentOption)
-
-        if (paymentOptions.size == 1) {
-            rootView.paymentSelector.isVisible = false
-            rootView.paymentTitle.text = "${getString(R.string.payment)} ${paymentOptions[0]}"
-        }
     }
 
     private fun setupCardNumber() {
@@ -674,12 +663,12 @@ class AttendeeFragment : Fragment(), ComplexBackPressFragment {
     }
 
     private fun checkPaymentOptions(): Boolean =
-        when (rootView.paymentSelector.selectedItem.toString()) {
-            getString(R.string.paypal) -> {
+        when (attendeeViewModel.selectedPaymentMode) {
+            PAYMENT_MODE_PAYPAL -> {
                 rootView.attendeeScrollView.longSnackbar(getString(R.string.paypal_payment_not_available))
                 false
             }
-            getString(R.string.stripe) -> {
+            PAYMENT_MODE_STRIPE -> {
                 card = Card.create(rootView.cardNumber.text.toString(), attendeeViewModel.monthSelectedPosition,
                     rootView.year.selectedItem.toString().toInt(), rootView.cvc.text.toString())
 
@@ -690,7 +679,11 @@ class AttendeeFragment : Fragment(), ComplexBackPressFragment {
                     true
                 }
             }
-            else -> true
+            PAYMENT_MODE_CHEQUE, PAYMENT_MODE_ONSITE, PAYMENT_MODE_FREE, PAYMENT_MODE_BANK -> true
+            else -> {
+                rootView.snackbar(getString(R.string.select_payment_option_message))
+                false
+            }
         }
 
     private fun checkRequiredFields(): Boolean {
@@ -704,7 +697,7 @@ class AttendeeFragment : Fragment(), ComplexBackPressFragment {
         }
 
         var checkStripeInfo = true
-        if (safeArgs.amount != 0F && rootView.paymentSelector.selectedItem.toString() == getString(R.string.stripe)) {
+        if (safeArgs.amount != 0F && attendeeViewModel.selectedPaymentMode == PAYMENT_MODE_STRIPE) {
             checkStripeInfo = rootView.cardNumber.checkEmpty() && rootView.cvc.checkEmpty()
         }
 
@@ -750,7 +743,7 @@ class AttendeeFragment : Fragment(), ComplexBackPressFragment {
             if (attendeeViewModel.areAttendeeEmailsValid(attendees)) {
                 val country = rootView.countryPicker.selectedItem.toString()
                 val paymentOption =
-                    if (safeArgs.amount != 0F) getPaymentMode(rootView.paymentSelector.selectedItem.toString())
+                    if (safeArgs.amount != 0F) attendeeViewModel.selectedPaymentMode
                     else PAYMENT_MODE_FREE
                 val company = rootView.billingCompany.text.toString()
                 val city = rootView.billingCity.text.toString()
@@ -778,16 +771,6 @@ class AttendeeFragment : Fragment(), ComplexBackPressFragment {
             })
     }
 
-    private fun getPaymentMode(paymentSelectedItem: String): String =
-        when (paymentSelectedItem) {
-            getString(R.string.cheque) -> PAYMENT_MODE_CHEQUE
-            getString(R.string.bank_transfer) -> PAYMENT_MODE_BANK
-            getString(R.string.stripe) -> PAYMENT_MODE_STRIPE
-            getString(R.string.paypal) -> PAYMENT_MODE_PAYPAL
-            getString(R.string.on_site) -> PAYMENT_MODE_ONSITE
-            else -> PAYMENT_MODE_FREE
-        }
-
     private fun showTicketSoldOutDialog(show: Boolean) {
         if (show) {
             val builder = AlertDialog.Builder(requireContext())

app/src/main/java/org/fossasia/openevent/general/attendees/AttendeeViewModel.kt

@@ -96,7 +96,7 @@ class AttendeeViewModel(
     // Retained information
     var countryPosition: Int = -1
     var ticketIdAndQty: List<Triple<Int, Int, Float>>? = null
-    var selectedPaymentOption: Int = -1
+    var selectedPaymentMode: String = ""
     var singleTicket = false
     var monthSelectedPosition: Int = 0
     var yearSelectedPosition: Int = 0

app/src/main/res/drawable/ic_bank.xml

@@ -0,0 +1,6 @@
+<vector android:height="24dp" android:viewportHeight="40"
+    android:viewportWidth="40" android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
+    <path android:fillColor="@color/greyMore" android:pathData="M20.39,0.08l13.38,6L38.9,8.39a1.8,1.8 0,0 1,1.15 2,1.83 1.83,0 0,1 -1.93,1.48H24.6c-7.41,0 -14.81,0 -22.22,0a2.11,2.11 0,0 1,-2.3 -1.44V9.69a2.44,2.44 0,0 1,1.5 -1.46c2.64,-1.16 5.27,-2.36 7.9,-3.54L19.77,0.08Z"/>
+    <path android:fillColor="@color/greyMore" android:pathData="M0.08,37.89a2.06,2.06 0,0 1,2.24 -1.48q17.81,0 35.62,0a3,3 0,0 1,0.92 0.12,1.8 1.8,0 0,1 1.2,1.89 1.84,1.84 0,0 1,-1.68 1.63H37.9q-17.73,0 -35.46,0A2.19,2.19 0,0 1,0.08 38.67Z"/>
+    <path android:fillColor="@color/greyMore" android:pathData="M20.08,35.33L4.34,35.33a1.81,1.81 0,1 1,-0.2 -3.61c0.41,0 0.49,-0.14 0.49,-0.52q0,-7.69 0,-15.39c0,-0.37 -0.09,-0.5 -0.47,-0.49a0.86,0.86 0,0 1,-0.89 -0.85,0.9 0.9,0 0,1 0.86,-0.93 4.11,4.11 0,0 1,0.43 0h31a2.88,2.88 0,0 1,0.58 0,0.87 0.87,0 0,1 0.69,0.92 0.89,0.89 0,0 1,-0.79 0.84c-0.57,0.07 -0.57,0.07 -0.57,0.66q0,7.61 0,15.23c0,0.35 0.06,0.5 0.46,0.5a1.81,1.81 0,1 1,-0.07 3.61L20.08,35.3ZM8.28,15.33c0,0.17 0,0.29 0,0.4q0,7.79 0,15.57c0,0.31 0.09,0.4 0.4,0.4q2.34,0 4.68,0c0.32,0 0.39,-0.11 0.39,-0.41q0,-7.79 0,-15.57c0,-0.31 -0.09,-0.4 -0.4,-0.4 -1.43,0 -2.86,0 -4.29,0ZM17.37,15.33L17.37,31.67l0.17,0h5c0.3,0 0.29,-0.17 0.29,-0.38q0,-7.81 0,-15.61c0,-0.33 -0.12,-0.39 -0.41,-0.38 -1.33,0 -2.65,0 -4,0ZM26.44,31.67 L26.83,31.67c1.55,0 3.1,0 4.65,0 0.33,0 0.41,-0.11 0.41,-0.42q0,-7.77 0,-15.54c0,-0.33 -0.1,-0.42 -0.42,-0.42 -1.55,0 -3.1,0 -4.65,0l-0.38,0Z"/>
+</vector>

app/src/main/res/drawable/ic_cash.xml

@@ -0,0 +1,7 @@
+<vector android:height="24dp" android:viewportHeight="40"
+    android:viewportWidth="40" android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
+    <path android:fillColor="@color/greyMore" android:pathData="M0.08,13.75l0.47,0H40.05v20H0.62l-0.54,0ZM38.24,31.9c0,-0.2 0,-0.32 0,-0.45q0,-7.73 0,-15.47c0,-0.37 -0.11,-0.45 -0.46,-0.45H2.34l-0.45,0v0.5q0,7.65 0,15.31c0,0.52 0,0.52 0.53,0.52H38.24Z"/>
+    <path android:fillColor="@color/greyMore" android:pathData="M1.95,10.09H38.26c0,0.55 0,1.09 0,1.63 0,0.06 -0.13,0.14 -0.21,0.16a1.4,1.4 0,0 1,-0.35 0H2.46c-0.57,0 -0.57,0 -0.57,-0.57 0,-0.38 0,-0.75 0,-1.13A0.47,0.47 0,0 1,1.95 10.09Z"/>
+    <path android:fillColor="@color/greyMore" android:pathData="M36.41,6.48V8.24H3.75V6.48Z"/>
+    <path android:fillColor="@color/greyMore" android:pathData="M20.29,18.57a2.7,2.7 0,0 1,2.08 1.59l-1.16,0.66 -0.29,-0.37a1.44,1.44 0,0 0,-1.6 -0.53,1.06 1.06,0 0,0 -0.8,0.87 1,1 0,0 0,0.44 1c0.39,0.25 0.82,0.45 1.23,0.67s0.72,0.36 1.06,0.57a2.63,2.63 0,0 1,1.31 2.71,2.75 2.75,0 0,1 -1.76,2.35c-0.44,0.18 -0.57,0.4 -0.51,0.83 0,0.09 0,0.18 0,0.27 0,0.32 -0.1,0.4 -0.4,0.39 -0.81,0 -0.7,0.07 -0.68,-0.69 0,-0.43 -0.12,-0.59 -0.54,-0.7a2.9,2.9 0,0 1,-2.2 -2.67l1.26,-0.27c0.17,0.35 0.29,0.68 0.47,1a1.61,1.61 0,0 0,2 0.61,1.48 1.48,0 0,0 0.9,-1.79 1.56,1.56 0,0 0,-0.54 -0.77,11.54 11.54,0 0,0 -1.35,-0.77c-0.3,-0.16 -0.6,-0.31 -0.89,-0.48a2.28,2.28 0,0 1,-1.22 -2.23,2.19 2.19,0 0,1 1.52,-2.07 0.74,0.74 0,0 0,0.58 -0.89c0,-0.54 0,-0.54 0.54,-0.54h0.52Z"/>
+</vector>

app/src/main/res/drawable/ic_cheque.xml

@@ -0,0 +1,8 @@
+<vector android:height="24dp" android:viewportHeight="40"
+    android:viewportWidth="40" android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
+    <path android:fillColor="@color/greyMore" android:pathData="M0.08,4.22H39v0.44q0,5.76 0,11.52a0.54,0.54 0,0 1,-0.35 0.56c-0.6,0.3 -1.19,0.62 -1.86,1V8.8H2.31V25.32H30.65c-0.53,0.69 -1,1.38 -1.58,2.06a0.57,0.57 0,0 1,-0.29 0.14,1.06 1.06,0 0,1 -0.27,0H0.54l-0.47,0Z"/>
+    <path android:fillColor="@color/greyMore" android:pathData="M4.23,17.87V15.49H32v2.38Z"/>
+    <path android:fillColor="@color/greyMore" android:pathData="M31,35.93 L26.8,33.1c0.06,-0.11 0.11,-0.21 0.17,-0.3l3.2,-4.8a7,7 0,0 1,2.12 -1.81,0.36 0.36,0 0,1 0.31,0.05c0.86,0.56 1.72,1.13 2.56,1.71a0.44,0.44 0,0 1,0.14 0.37,7.62 7.62,0 0,1 -1.18,3c-1,1.39 -1.9,2.83 -2.84,4.24Z"/>
+    <path android:fillColor="@color/greyMore" android:pathData="M4.23,13.58V11.19H19.5v2.39Z"/>
+    <path android:fillColor="@color/greyMore" android:pathData="M35.92,27.58l-1.36,-0.9 0.21,-0.34 2.68,-4A0.66,0.66 0,0 1,38 22a0.76,0.76 0,0 0,0.62 -0.89,0.81 0.81,0 0,0 -0.92,-0.66 0.74,0.74 0,0 0,-0.64 0.91,0.8 0.8,0 0,1 -0.19,0.77L34.24,26l-0.24,0.34c-0.39,-0.26 -0.78,-0.5 -1.14,-0.77a0.36,0.36 0,0 1,-0.1 -0.31q0.64,-2 1.3,-4.08a0.43,0.43 0,0 1,0.19 -0.22l5.68,-3a0.49,0.49 0,0 1,0.14 0c-0.08,1 -0.16,2 -0.25,3s-0.19,2.26 -0.3,3.38a0.72,0.72 0,0 1,-0.16 0.45C38.22,25.69 37.08,26.62 35.92,27.58Z"/>
+</vector>