From 46a267a494d402efa28fd55eeaa9444a1f2bc26e Mon Sep 17 00:00:00 2001
From: Gabriel Luong <gabriel.luong@gmail.com>
Date: Sun, 28 Feb 2021 18:53:22 -0500
Subject: [PATCH] For #18243 - Add a credit card editor screen

---
 .../creditcards/CreditCardEditorFragment.kt   |  36 +++
 .../creditcards/CreditCardsSettingFragment.kt |  14 ++
 .../layout/fragment_credit_card_editor.xml    | 237 ++++++++++++++++++
 app/src/main/res/navigation/nav_graph.xml     |  11 +
 app/src/main/res/values/strings.xml           |  18 ++
 5 files changed, 316 insertions(+)
 create mode 100644 app/src/main/java/org/mozilla/fenix/settings/creditcards/CreditCardEditorFragment.kt
 create mode 100644 app/src/main/res/layout/fragment_credit_card_editor.xml

diff --git a/app/src/main/java/org/mozilla/fenix/settings/creditcards/CreditCardEditorFragment.kt b/app/src/main/java/org/mozilla/fenix/settings/creditcards/CreditCardEditorFragment.kt
new file mode 100644
index 000000000..c2693ce01
--- /dev/null
+++ b/app/src/main/java/org/mozilla/fenix/settings/creditcards/CreditCardEditorFragment.kt
@@ -0,0 +1,36 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+package org.mozilla.fenix.settings.creditcards
+
+import android.os.Bundle
+import android.view.View
+import androidx.fragment.app.Fragment
+import androidx.navigation.fragment.findNavController
+import kotlinx.android.synthetic.main.fragment_credit_card_editor.view.*
+import org.mozilla.fenix.R
+import org.mozilla.fenix.ext.showToolbar
+
+/**
+ * Display a credit card editor for adding and editing a credit card.
+ */
+class CreditCardEditorFragment : Fragment(R.layout.fragment_credit_card_editor) {
+
+    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
+        super.onViewCreated(view, savedInstanceState)
+
+        showToolbar(getString(R.string.credit_cards_add_card))
+
+        setupButtonClickListeners(view)
+    }
+
+    /**
+     * Setup the all button click listeners in the credit card editor.
+     */
+    private fun setupButtonClickListeners(view: View) {
+        view.cancel_button.setOnClickListener {
+            findNavController().popBackStack()
+        }
+    }
+}
diff --git a/app/src/main/java/org/mozilla/fenix/settings/creditcards/CreditCardsSettingFragment.kt b/app/src/main/java/org/mozilla/fenix/settings/creditcards/CreditCardsSettingFragment.kt
index 4c2d71163..8febafc58 100644
--- a/app/src/main/java/org/mozilla/fenix/settings/creditcards/CreditCardsSettingFragment.kt
+++ b/app/src/main/java/org/mozilla/fenix/settings/creditcards/CreditCardsSettingFragment.kt
@@ -6,9 +6,11 @@ package org.mozilla.fenix.settings.creditcards
 
 import android.os.Bundle
 import androidx.navigation.fragment.findNavController
+import androidx.preference.Preference
 import androidx.preference.PreferenceFragmentCompat
 import mozilla.components.service.fxa.SyncEngine
 import org.mozilla.fenix.R
+import org.mozilla.fenix.ext.getPreferenceKey
 import org.mozilla.fenix.ext.requireComponents
 import org.mozilla.fenix.ext.showToolbar
 import org.mozilla.fenix.settings.SyncPreferenceView
@@ -51,4 +53,16 @@ class CreditCardsSettingFragment : PreferenceFragmentCompat() {
             }
         )
     }
+
+    override fun onPreferenceTreeClick(preference: Preference): Boolean {
+        when (preference.key) {
+            getPreferenceKey(R.string.pref_key_credit_cards_add_credit_card) -> {
+                val directions =
+                    CreditCardsSettingFragmentDirections.actionCreditCardsSettingFragmentToCreditCardEditorFragment()
+                findNavController().navigate(directions)
+            }
+        }
+
+        return super.onPreferenceTreeClick(preference)
+    }
 }
diff --git a/app/src/main/res/layout/fragment_credit_card_editor.xml b/app/src/main/res/layout/fragment_credit_card_editor.xml
new file mode 100644
index 000000000..8303799ff
--- /dev/null
+++ b/app/src/main/res/layout/fragment_credit_card_editor.xml
@@ -0,0 +1,237 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:layout_width="match_parent"
+    android:layout_height="wrap_content"
+    android:layout_margin="16dp"
+    android:orientation="vertical">
+
+    <!-- Card Number -->
+    <TextView
+        android:id="@+id/card_number_title"
+        android:layout_width="wrap_content"
+        android:layout_height="16dp"
+        android:gravity="center_vertical"
+        android:paddingStart="3dp"
+        android:paddingEnd="0dp"
+        android:text="@string/credit_cards_card_number"
+        android:textColor="?primaryText"
+        android:textSize="12sp"
+        android:letterSpacing="0.05"
+        app:fontFamily="@font/metropolis_semibold" />
+
+    <com.google.android.material.textfield.TextInputLayout
+        android:id="@+id/card_number_layout"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:textColor="?primaryText"
+        app:errorEnabled="true"
+        app:hintEnabled="false">
+
+        <com.google.android.material.textfield.TextInputEditText
+            android:id="@+id/card_number_input"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:textSize="16sp"
+            android:fontFamily="sans-serif"
+            android:textColor="?primaryText"
+            android:letterSpacing="0.01"
+            android:lineSpacingExtra="8sp"
+            android:ellipsize="end"
+            android:maxLines="1"
+            android:singleLine="true"
+            android:imeOptions="flagNoExtractUi"
+            android:inputType="phone"
+            android:digits="0123456789- " />
+
+    </com.google.android.material.textfield.TextInputLayout>
+
+    <!-- Name on Card -->
+    <TextView
+        android:id="@+id/name_on_card_title"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:gravity="center_vertical"
+        android:paddingStart="3dp"
+        android:paddingEnd="0dp"
+        android:text="@string/credit_cards_name_on_card"
+        android:textColor="?primaryText"
+        android:textSize="12sp"
+        android:layout_marginTop="10dp"
+        android:letterSpacing="0.05"
+        app:fontFamily="@font/metropolis_semibold" />
+
+    <com.google.android.material.textfield.TextInputLayout
+        android:id="@+id/name_on_card_layout"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:paddingBottom="11dp"
+        android:textColor="?primaryText"
+        app:hintEnabled="false">
+
+        <com.google.android.material.textfield.TextInputEditText
+            android:id="@+id/name_on_card_input"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:ellipsize="end"
+            android:fontFamily="sans-serif"
+            android:letterSpacing="0.01"
+            android:lineSpacingExtra="8sp"
+            android:maxLines="1"
+            android:singleLine="true"
+            android:textColor="?primaryText"
+            android:textSize="16sp" />
+
+    </com.google.android.material.textfield.TextInputLayout>
+
+    <!-- Expiration Date -->
+    <TextView
+        android:id="@+id/expiration_date_title"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:gravity="center_vertical"
+        android:paddingStart="3dp"
+        android:paddingEnd="0dp"
+        android:text="@string/credit_cards_expiration_date"
+        android:textColor="?primaryText"
+        android:textSize="12sp"
+        android:layout_marginTop="10dp"
+        android:letterSpacing="0.05"
+        app:fontFamily="@font/metropolis_semibold" />
+
+    <LinearLayout
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:orientation="horizontal"
+        android:baselineAligned="false">
+
+        <LinearLayout
+            android:layout_width="0dp"
+            android:layout_height="wrap_content"
+            android:layout_weight="1"
+            android:layout_marginEnd="24dp"
+            android:orientation="vertical">
+
+            <androidx.appcompat.widget.AppCompatSpinner
+                android:id="@+id/expiry_month_drop_down"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                tools:listitem="@android:layout/simple_list_item_1" />
+
+            <View
+                android:layout_width="match_parent"
+                android:layout_height="1dp"
+                android:background="?primaryText" />
+
+        </LinearLayout>
+
+        <LinearLayout
+            android:layout_width="0dp"
+            android:layout_height="wrap_content"
+            android:layout_weight="1"
+            android:orientation="vertical">
+
+            <androidx.appcompat.widget.AppCompatSpinner
+                android:id="@+id/expiry_year_drop_down"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                tools:listitem="@android:layout/simple_list_item_1" />
+
+            <View
+                android:layout_width="match_parent"
+                android:layout_height="1dp"
+                android:background="?primaryText" />
+
+        </LinearLayout>
+    </LinearLayout>
+
+    <!-- Card Nickname -->
+    <TextView
+        android:id="@+id/card_nickname_title"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:gravity="center_vertical"
+        android:paddingStart="3dp"
+        android:paddingEnd="0dp"
+        android:text="@string/credit_cards_card_nickname"
+        android:textColor="?primaryText"
+        android:textSize="12sp"
+        android:layout_marginTop="10dp"
+        android:letterSpacing="0.05"
+        app:fontFamily="@font/metropolis_semibold" />
+
+    <com.google.android.material.textfield.TextInputLayout
+        android:id="@+id/card_nickname_layout"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:paddingBottom="11dp"
+        android:textColor="?primaryText"
+        app:errorEnabled="true"
+        app:hintEnabled="false">
+
+        <com.google.android.material.textfield.TextInputEditText
+            android:id="@+id/card_nickname_input"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:ellipsize="end"
+            android:fontFamily="sans-serif"
+            android:letterSpacing="0.01"
+            android:lineSpacingExtra="8sp"
+            android:maxLines="1"
+            android:singleLine="true"
+            android:textColor="?primaryText"
+            android:textSize="16sp" />
+
+    </com.google.android.material.textfield.TextInputLayout>
+
+    <androidx.constraintlayout.widget.ConstraintLayout
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content">
+
+        <com.google.android.material.button.MaterialButton
+            android:id="@+id/delete_button"
+            style="@style/Widget.MaterialComponents.Button.TextButton"
+            android:layout_width="wrap_content"
+            android:layout_height="0dp"
+            android:letterSpacing="0"
+            android:padding="10dp"
+            android:text="@string/credit_cards_delete_card"
+            android:textAllCaps="false"
+            android:textColor="@color/destructive_button_text_color"
+            android:visibility="gone"
+            app:fontFamily="@font/metropolis_semibold"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintBottom_toBottomOf="parent" />
+
+        <com.google.android.material.button.MaterialButton
+            android:id="@+id/cancel_button"
+            style="@style/Widget.MaterialComponents.Button.TextButton"
+            android:layout_width="wrap_content"
+            android:layout_height="0dp"
+            android:letterSpacing="0"
+            android:padding="10dp"
+            android:text="@string/cancel"
+            android:textAllCaps="false"
+            android:textColor="?primaryText"
+            android:textStyle="bold"
+            app:fontFamily="@font/metropolis_semibold"
+            app:layout_constraintBottom_toBottomOf="parent"
+            app:layout_constraintEnd_toStartOf="@id/save_button" />
+
+        <com.google.android.material.button.MaterialButton
+            android:id="@+id/save_button"
+            style="@style/NeutralButton"
+            android:layout_width="wrap_content"
+            android:paddingStart="12dp"
+            android:paddingEnd="12dp"
+            android:text="@string/save"
+            app:layout_constraintBottom_toBottomOf="parent"
+            app:layout_constraintEnd_toEndOf="parent" />
+
+    </androidx.constraintlayout.widget.ConstraintLayout>
+
+</LinearLayout>
diff --git a/app/src/main/res/navigation/nav_graph.xml b/app/src/main/res/navigation/nav_graph.xml
index 1912372ba..552306844 100644
--- a/app/src/main/res/navigation/nav_graph.xml
+++ b/app/src/main/res/navigation/nav_graph.xml
@@ -1044,6 +1044,17 @@
                 app:exitAnim="@anim/slide_out_left"
                 app:popEnterAnim="@anim/slide_in_left"
                 app:popExitAnim="@anim/slide_out_right" />
+            <action
+                android:id="@+id/action_creditCardsSettingFragment_to_creditCardEditorFragment"
+                app:destination="@id/creditCardEditorFragment"
+                app:enterAnim="@anim/slide_in_right"
+                app:exitAnim="@anim/slide_out_left"
+                app:popEnterAnim="@anim/slide_in_left"
+                app:popExitAnim="@anim/slide_out_right" />
         </fragment>
+        <fragment
+            android:id="@+id/creditCardEditorFragment"
+            android:name="org.mozilla.fenix.settings.creditcards.CreditCardEditorFragment"
+            android:label="@string/credit_cards_add_card" />
     </navigation>
 </navigation>
diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml
index 4d72c69b1..c596164c0 100644
--- a/app/src/main/res/values/strings.xml
+++ b/app/src/main/res/values/strings.xml
@@ -2,6 +2,12 @@
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
 <resources>
+    <!-- Generic Strings -->
+    <!-- A 'Cancel' string to be used for labeling any UI elements. -->
+    <string name="cancel">Cancel</string>
+    <!-- A 'Save' string to be used for labeling UI elements. -->
+    <string name="save">Save</string>
+
     <!-- App name for private browsing mode. The first parameter is the name of the app defined in app_name (for example: Fenix)-->
     <string name="app_name_private_5">Private %s</string>
     <!-- App name for private browsing mode. The first parameter is the name of the app defined in app_name (for example: Fenix)-->
@@ -1513,6 +1519,18 @@
     <string name="preferences_credit_cards_sync_cards_across_devices">Sync cards across devices</string>
     <!-- Preference option for adding a credit card -->
     <string name="preferences_credit_cards_add_credit_card">Add credit card</string>
+    <!-- Title of the "Add card" screen -->
+    <string name="credit_cards_add_card">Add card</string>
+    <!-- The header for the card number of a credit card -->
+    <string name="credit_cards_card_number">Card Number</string>
+    <!-- The header for the expiration date of a credit card -->
+    <string name="credit_cards_expiration_date">Expiration Date</string>
+    <!-- The header for the name on the credit card -->
+    <string name="credit_cards_name_on_card">Name on Card</string>
+    <!-- The header for the nickname for a credit card -->
+    <string name="credit_cards_card_nickname">Card Nickname</string>
+    <!-- The text for the "Delete card" button -->
+    <string name="credit_cards_delete_card">Delete card</string>
 
     <!-- Title of the Add search engine screen -->
     <string name="search_engine_add_custom_search_engine_title">Add search engine</string>