EP-2521 Standard Buttons instead of Radio Buttons for suggested amounts #1116

rguinee · 2024-11-19T21:54:55Z

Use Buttons instead of Radio Buttons for suggested amounts.

Adjusted the ProductConfigForm file to be buttons instead of inputs. Rearranged the amount and label controllers to suit the Figma designs. Added CSS to style the buttons and add interactivity when tapping/clicking an option.

src/app/productConfig/productConfigForm/productConfigForm.tpl.html

wrandall22 · 2024-11-27T15:38:32Z

src/app/productConfig/productConfigForm/productConfigForm.tpl.html

@@ -68,48 +68,54 @@ <h4 class="panel-title border-bottom-small" translate>
        <h4 class="panel-title border-bottom-small" translate>
          {{'GIFT_AMOUNT'}}
        </h4>
-        <div class="panel-body pt0">
+        <div class="panel-body p0">


We'll need to make sure of 2 things from stakeholders:

Should this change affect mobile only?

Should this change be tied to the new v3 config option?

j2trumpet · 2024-11-27T17:02:20Z

src/app/productConfig/productConfigForm/productConfigForm.tpl.html

-              <div class="form-group">
+            <div class="button-group">
+              <div 
+                  role="button"


Why did you move away from an actual button element?

Great question. I had started a response while at the dentist last week and that is now gone. Initially, I opted to use a div for more control of the element but I'm realizing that we'll need to declare some accessibility functionality of each element that is inherit in a button element. But, I may end up going all the way back to using input element with radio type and just styling it to match our current design. Thoughts?

I think a styled radio input would work fine, but I'm not fully read-in on this task, so I've assumed there was some reason to switch from radio inputs to buttons.

src/app/productConfig/productConfigForm/productConfigForm.tpl.html

j2trumpet · 2024-12-06T18:49:03Z

For the suggested amount inputs, the design changes (amount background gets darker and height increases) when the user clicks on it, but these changes don't happen for the custom amount until the user enters a value. Could these changes happen when the user clicks/focuses on the custom input field for the sake of consistent UX?

rguinee · 2024-12-06T19:07:42Z

Definitely!

…

On Fri, Dec 6, 2024 at 1:49 PM John Plastow II ***@***.***> wrote: For the suggested amount inputs, the design changes (amount background gets darker and height increases) when the user clicks on it, but these changes don't happen for the custom amount until the user enters a value. Could these changes happen when the user clicks/focuses on the custom input field for the sake of consistent UX? — Reply to this email directly, view it on GitHub <#1116 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BBNX2D77JUU3SHTWBCNPRU32EHWTLAVCNFSM6AAAAABSDESXMKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDKMRTHE2DOOJVGM> . You are receiving this because you authored the thread.Message ID: ***@***.***>

rguinee · 2024-12-09T20:48:26Z

For the suggested amount inputs, the design changes (amount background gets darker and height increases) when the user clicks on it, but these changes don't happen for the custom amount until the user enters a value. Could these changes happen when the user clicks/focuses on the custom input field for the sake of consistent UX?

@j2trumpet I've made this change. See here.

j2trumpet · 2024-12-09T22:38:51Z

I don't know what the ultimate goal for this PR/ticket is, but hopefully sticking with the radio inputs and just styling them differently works. @wrandall22 ?

From a UX/UI standpoint, I think we're good.

wrandall22 · 2024-12-10T13:49:20Z

Here is what I see on my phone.

wrandall22 · 2024-12-10T13:50:46Z

The main purpose is to make it easier to select these amounts on mobile devices, which is accomplished with this for sure. However, we still need to determine from stakeholders if this is going to be tied to v3 and if it will be tied specifically to mobile.

wrandall22 · 2024-12-11T16:00:11Z

Please change the target branch to EP-2517-branded-checkout-improvements since this will be tied to v3. Also, we need to add some conditionals to make sure this only happens on v3.

rguinee · 2024-12-11T16:14:02Z

Please change the target branch to EP-2517-branded-checkout-improvements since this will be tied to v3. Also, we need to add some conditionals to make sure this only happens on v3.

Updated target branch. I'll need assistance on those conditionals.

wrandall22 · 2024-12-11T16:23:30Z

You can look at https://github.com/CruGlobal/give-web/pull/1120/files for the ng-if statements as a starting point.

rguinee · 2024-12-11T16:28:43Z

Got it, thanks!

…

On Wed, Dec 11, 2024 at 11:23 AM Bill Randall ***@***.***> wrote: You can look at https://github.com/CruGlobal/give-web/pull/1120/files for the ng-if statements as a starting point. — Reply to this email directly, view it on GitHub <#1116 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BBNX2DZRQ67EPF2XMSCH5LT2FBRJTAVCNFSM6AAAAABSDESXMKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDKMZWGQ3DGMRTGI> . You are receiving this because you authored the thread.Message ID: ***@***.***>

src/app/productConfig/productConfigForm/productConfigForm.tpl.html

wrandall22 · 2024-12-16T16:20:58Z

Let's make sure to clean up this Git history so the commits from the base branch don't show up here. Also, the productConfigForm conflicts need to be resolved.

src/app/productConfig/productConfigForm/productConfigForm.tpl.html

wrandall22

It looks like there is still quite a bit of cleanup to do in the git history. What I would recommend at this point, since basically all the work is done in the first commit, is to squash everything into one commit, then do a git reset head^ to uncommit everything, then make individual commits bringing in specific changes that are logical. For this particular PR, probably 2 or 3 commits would be sufficient, something like:

Added margin to Gift Amount header (and why)
Build out custom amount buttons for branded checkout version 3
Style the new layout

wrandall22 · 2025-01-08T19:04:12Z

src/app/productConfig/productConfigForm/productConfigForm.tpl.html

+                    name="amount"
+                    class="form-control form-control-subtle"
+                    type="text"
+                    id="ca"


This line and line 178 are removed in the next commit. This is where a squash would come into play.

wrandall22 · 2025-01-08T19:06:37Z

src/app/productConfig/productConfigForm/productConfigForm.tpl.html

-          </li>
-        </ul>
-      </div><!-- // panel-body -->
-    </div><!-- // panel -->


This change is undone in the next commit, should be squashed.

wrandall22 · 2025-01-08T19:08:53Z

src/app/productConfig/productConfigForm/productConfigForm.tpl.html

-                          ng-change="$ctrl.changeStartDay($ctrl.itemConfig['RECURRING_DAY_OF_MONTH'], $ctrl.itemConfig['RECURRING_START_MONTH'])">
-                  </select>
-                </label>
+      </div>


This change (removal of comment on div) is undone in the next commit, should be squashed.

wrandall22 · 2025-01-08T19:09:37Z

src/app/productConfig/productConfigForm/productConfigForm.tpl.html

@@ -146,7 +233,9 @@ <h4 class="panel-title border-bottom-small" translate>
                </div>
              </div>
            </div>
-        </div><!-- // panel -->


This change (removal of comment on div) should be squashed.

wrandall22 · 2025-01-08T19:12:02Z

src/app/productConfig/productConfigForm/productConfigForm.tpl.html

-                  <input 
-                    name="suggestedAmount"
-                    type="radio"
-                    ng-checked="$ctrl.customInputActive"
-                  />
-                  <input
-                    name="amount"
-                    class="form-control form-control-subtle"
-                    type="text"
-                    id="ca"
-                    step="1"
-                    tabindex="-1"
-                    ng-model="$ctrl.customAmount"
-                    ng-change="$ctrl.changeCustomAmount($ctrl.customAmount)"
-                    ng-focus="$ctrl.customInputActive = true;"
-                    ng-required="$ctrl.customInputActive"
-                    placeholder="{{'OTHER_PLACEHOLDER' | translate}}" />
+                  <input name="suggestedAmount"


These changes aren't related to ng-if and should be squashed into the previous commit.

wrandall22 · 2025-01-08T19:13:46Z

src/assets/scss/_give.scss

@@ -629,6 +629,32 @@ input[type="radio"] {
 }
 /* Product Config Form Amounts End */

+.radio-method,


This seems to be the main change in this commit, so the commit message should reflect what is happening here.

wrandall22 · 2025-01-08T19:14:18Z

src/app/branded/branded-checkout.component.js

@@ -187,6 +187,6 @@ export default angular
      onOrderFailed: '&',
      language: '@',
      showCoverFees: '@',
-      useV3: '@'
+      useV3: '@',


This commit should just go away since the only change is removed in the next commit.

wrandall22 · 2025-01-08T19:15:03Z

src/app/productConfig/productConfigForm/productConfigForm.tpl.html

          </div>
+          <loading inline="true" ng-if="$ctrl.changingFrequency" class="mt-- text-center">
+            <translate>{{'CHANGING_FREQUENCY'}}</translate>
+          </loading>
        </div><!-- // panel-body -->


This looks like it should be squashed into the first or second commit.

wrandall22 · 2025-01-08T19:15:20Z

src/app/productConfig/productConfigForm/productConfigForm.tpl.html

-      </div><!-- // panel -->
+          </div><!-- // panel-body -->
+        </div><!-- // panel -->
+      </div>
    </div>


This looks like it should be squashed into the first or second commit.

wrandall22 · 2025-01-08T19:16:19Z

src/app/productConfig/productConfigForm/productConfigForm.tpl.html

      </div>
    </div>
-    <div class="panel panel-default give-modal-panel">
+    <div ng-if="$ctrl.useV3 !== 'true'" class="panel panel-default give-modal-panel">


This is unrelated to your PR, so this change should be squashed with the first commit so it will just disappear.

wrandall22

Great job!

rguinee requested a review from j2trumpet November 19, 2024 21:54

wrandall22 reviewed Nov 27, 2024

View reviewed changes

src/app/productConfig/productConfigForm/productConfigForm.tpl.html Outdated Show resolved Hide resolved

wrandall22 reviewed Nov 27, 2024

View reviewed changes

j2trumpet reviewed Nov 27, 2024

View reviewed changes

rguinee commented Dec 5, 2024

View reviewed changes

src/app/productConfig/productConfigForm/productConfigForm.tpl.html Outdated Show resolved Hide resolved

rguinee changed the base branch from master to EP-2517-branded-checkout-improvements December 11, 2024 16:13

wrandall22 reviewed Dec 13, 2024

View reviewed changes

src/app/productConfig/productConfigForm/productConfigForm.tpl.html Outdated Show resolved Hide resolved

rguinee changed the title ~~EP-2521 Standard Buttons instead of Radio Buttons for suggested amounts~~ Resolving conflicts in productConfigForm Dec 16, 2024

rguinee changed the title ~~Resolving conflicts in productConfigForm~~ Merge branch 'EP-2517-branded-checkout-improvements' into EP-2521-Radio-Button-redesign-1 Dec 16, 2024

rguinee changed the title ~~Merge branch 'EP-2517-branded-checkout-improvements' into EP-2521-Radio-Button-redesign-1~~ EP-2521 Standard Buttons instead of Radio Buttons for suggested amounts Dec 16, 2024

wrandall22 reviewed Dec 16, 2024

View reviewed changes

src/app/productConfig/productConfigForm/productConfigForm.tpl.html Outdated Show resolved Hide resolved

wrandall22 reviewed Dec 16, 2024

View reviewed changes

src/app/productConfig/productConfigForm/productConfigForm.tpl.html Outdated Show resolved Hide resolved

rguinee force-pushed the EP-2521-Radio-Button-redesign-1 branch from 60989d7 to 79fcbcb Compare January 8, 2025 17:01

wrandall22 requested changes Jan 8, 2025

View reviewed changes

rguinee closed this Jan 9, 2025

rguinee force-pushed the EP-2521-Radio-Button-redesign-1 branch from 79fcbcb to e5bb559 Compare January 9, 2025 18:09

rguinee deleted the EP-2521-Radio-Button-redesign-1 branch January 9, 2025 18:14

rguinee added 2 commits January 10, 2025 15:08

Suggested amount button design for branded checkout v3

1852e9e

Styles for suggested amount buttons for branded checkout v3

270183d

rguinee restored the EP-2521-Radio-Button-redesign-1 branch January 10, 2025 20:32

rguinee reopened this Jan 10, 2025

wrandall22 approved these changes Jan 10, 2025

View reviewed changes

rguinee merged commit 72d00e3 into EP-2517-branded-checkout-improvements Jan 15, 2025
1 check passed

rguinee deleted the EP-2521-Radio-Button-redesign-1 branch January 15, 2025 15:43

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

EP-2521 Standard Buttons instead of Radio Buttons for suggested amounts #1116

EP-2521 Standard Buttons instead of Radio Buttons for suggested amounts #1116

rguinee commented Nov 19, 2024

wrandall22 Nov 27, 2024

j2trumpet Nov 27, 2024

rguinee Dec 2, 2024

j2trumpet Dec 2, 2024

j2trumpet commented Dec 6, 2024

rguinee commented Dec 6, 2024 via email

rguinee commented Dec 9, 2024

j2trumpet commented Dec 9, 2024

wrandall22 commented Dec 10, 2024

wrandall22 commented Dec 10, 2024

wrandall22 commented Dec 11, 2024

rguinee commented Dec 11, 2024

wrandall22 commented Dec 11, 2024

rguinee commented Dec 11, 2024 via email

wrandall22 commented Dec 16, 2024

wrandall22 left a comment

wrandall22 Jan 8, 2025

wrandall22 Jan 8, 2025

wrandall22 Jan 8, 2025

wrandall22 Jan 8, 2025

wrandall22 Jan 8, 2025

wrandall22 Jan 8, 2025

wrandall22 Jan 8, 2025

wrandall22 Jan 8, 2025

wrandall22 Jan 8, 2025

wrandall22 Jan 8, 2025

wrandall22 left a comment

EP-2521 Standard Buttons instead of Radio Buttons for suggested amounts #1116

EP-2521 Standard Buttons instead of Radio Buttons for suggested amounts #1116

Conversation

rguinee commented Nov 19, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

j2trumpet commented Dec 6, 2024

rguinee commented Dec 6, 2024 via email

rguinee commented Dec 9, 2024

j2trumpet commented Dec 9, 2024

wrandall22 commented Dec 10, 2024

wrandall22 commented Dec 10, 2024

wrandall22 commented Dec 11, 2024

rguinee commented Dec 11, 2024

wrandall22 commented Dec 11, 2024

rguinee commented Dec 11, 2024 via email

wrandall22 commented Dec 16, 2024

wrandall22 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

wrandall22 left a comment

Choose a reason for hiding this comment