Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Horizontal list of dispute details to the transaction page #7077

Merged
merged 18 commits into from
Sep 11, 2023

Conversation

brucealdridge
Copy link
Contributor

@brucealdridge brucealdridge commented Aug 28, 2023

Fixes #6924
Fixes #7164

Changes proposed in this Pull Request

Screenshot 2023-09-01 at 3 26 28 PM

A row layout will be added to the DisputeDetails Component showing the key attributes of the dispute. This will show at all times regardless of the status of the dispute.

  • Dispute Amount in the store currency. If the store accepts multicurrency payments and the customer paid $70.29 AUD. The amount would be shown as $45.45 USD
  • Disputed On The date the dispute was opened Reason The reason for the dispute. This includes a ClickTooltip component showing more information about the reason on click.
  • Respond By The evidence required by date.
    • Default: Shows date/time with number of days left Aug 18, 2023 11:59 PM (12 days left to respond)
    • Less than 7 days: As above but text showing days left is yellow (6 days left to respond) WP Yellow/Yellow 30 ( #DBA617 )
    • Less than 3 days: As above but text showing days left is red (2 days left to respond) WP Gutenberg/Alert Red ( ##CC1818 )
    • Less than 1 day: Same as Less than 3 days but text now reads (Last day today)

No details are shown once evidence is submitted or the response date has passed.

Screenshot 2023-09-01 at 3 26 38 PM

Testing instructions

  1. Enable feature flag by running update_option( '_wcpay_feature_dispute_on_transaction_page', '1' ); in WP Console or by modifying your database table wp_options directly.
  2. Load a Transaction Details page of an active dispute (/wp-admin/admin.php?page=wc-admin&path=%2Fpayments%2Ftransactions%2Fdetails&id=pi_abc&transaction_id=txn_abc&transaction_type=charge).
  3. See the Dispute Details.
  4. Test with differing currencies, dispute reasons and respond by dates.

  • Run npm run changelog to add a changelog file, choose patch to leave it empty if the change is not significant. You can add multiple changelog files in one PR by running this command a few times.
  • Covered with tests (or have a good reason not to test in description ☝️)
  • Tested on mobile (or does not apply)

Post merge

@botwoo
Copy link
Collaborator

botwoo commented Aug 28, 2023

Test the build

Option 1. Jetpack Beta

  • Install and activate Jetpack Beta.
  • Use this build by searching for PR number 7077 or branch name add/6924-dispute-details-attributes in your-test.site/wp-admin/admin.php?page=jetpack-beta&plugin=woocommerce-payments

Option 2. Jurassic Ninja - available for logged-in A12s

🚀 Launch a JN site with this branch 🚀

ℹ️ Install this Tampermonkey script to get more options.


Build info:

  • Latest commit: d01a689
  • Build time: 2023-09-11 03:04:07 UTC

Note: the build is updated when a new commit is pushed to this PR.

@github-actions
Copy link
Contributor

github-actions bot commented Aug 28, 2023

Size Change: +1.61 kB (0%)

Total Size: 1.41 MB

Filename Size Change
release/woocommerce-payments/dist/index-rtl.css 36 kB +412 B (+1%)
release/woocommerce-payments/dist/index.css 36 kB +414 B (+1%)
release/woocommerce-payments/dist/index.js 277 kB +852 B (0%)
release/woocommerce-payments/dist/multi-currency-switcher-block.js 59.6 kB -33 B (0%)
release/woocommerce-payments/dist/multi-currency.js 54.2 kB -30 B (0%)
ℹ️ View Unchanged
Filename Size
release/woocommerce-payments/assets/css/admin.css 1.03 kB
release/woocommerce-payments/assets/css/success.css 158 B
release/woocommerce-payments/dist/blocks-checkout-rtl.css 1.51 kB
release/woocommerce-payments/dist/blocks-checkout.css 1.51 kB
release/woocommerce-payments/dist/blocks-checkout.js 73.5 kB
release/woocommerce-payments/dist/checkout-rtl.css 440 B
release/woocommerce-payments/dist/checkout.css 441 B
release/woocommerce-payments/dist/checkout.js 28.5 kB
release/woocommerce-payments/dist/multi-currency-analytics.js 1.05 kB
release/woocommerce-payments/dist/multi-currency-rtl.css 2.87 kB
release/woocommerce-payments/dist/multi-currency.css 2.87 kB
release/woocommerce-payments/dist/order-rtl.css 741 B
release/woocommerce-payments/dist/order.css 743 B
release/woocommerce-payments/dist/order.js 40.3 kB
release/woocommerce-payments/dist/payment-gateways-rtl.css 686 B
release/woocommerce-payments/dist/payment-gateways.css 688 B
release/woocommerce-payments/dist/payment-gateways.js 37.8 kB
release/woocommerce-payments/dist/payment-request-rtl.css 146 B
release/woocommerce-payments/dist/payment-request.css 146 B
release/woocommerce-payments/dist/payment-request.js 11.6 kB
release/woocommerce-payments/dist/product-details.js 789 B
release/woocommerce-payments/dist/settings-rtl.css 8.95 kB
release/woocommerce-payments/dist/settings.css 8.96 kB
release/woocommerce-payments/dist/settings.js 231 kB
release/woocommerce-payments/dist/subscription-edit-page.js 669 B
release/woocommerce-payments/dist/subscription-product-onboarding-modal-rtl.css 519 B
release/woocommerce-payments/dist/subscription-product-onboarding-modal.css 519 B
release/woocommerce-payments/dist/subscription-product-onboarding-modal.js 20.2 kB
release/woocommerce-payments/dist/subscription-product-onboarding-toast.js 693 B
release/woocommerce-payments/dist/subscriptions-empty-state-rtl.css 117 B
release/woocommerce-payments/dist/subscriptions-empty-state.css 117 B
release/woocommerce-payments/dist/subscriptions-empty-state.js 19.3 kB
release/woocommerce-payments/dist/tos-rtl.css 230 B
release/woocommerce-payments/dist/tos.css 231 B
release/woocommerce-payments/dist/tos.js 21.8 kB
release/woocommerce-payments/dist/upe_checkout-rtl.css 440 B
release/woocommerce-payments/dist/upe_checkout.css 441 B
release/woocommerce-payments/dist/upe_checkout.js 34 kB
release/woocommerce-payments/dist/upe_split_checkout-rtl.css 440 B
release/woocommerce-payments/dist/upe_split_checkout.css 441 B
release/woocommerce-payments/dist/upe_split_checkout.js 34.6 kB
release/woocommerce-payments/dist/upe_with_deferred_intent_creation_checkout.js 36.4 kB
release/woocommerce-payments/dist/upe-blocks-checkout-rtl.css 1.51 kB
release/woocommerce-payments/dist/upe-blocks-checkout.css 1.51 kB
release/woocommerce-payments/dist/upe-blocks-checkout.js 39.5 kB
release/woocommerce-payments/dist/upe-split-blocks-checkout-rtl.css 1.51 kB
release/woocommerce-payments/dist/upe-split-blocks-checkout.css 1.51 kB
release/woocommerce-payments/dist/upe-split-blocks-checkout.js 41 kB
release/woocommerce-payments/dist/woopay-express-button-rtl.css 146 B
release/woocommerce-payments/dist/woopay-express-button.css 146 B
release/woocommerce-payments/dist/woopay-express-button.js 50.5 kB
release/woocommerce-payments/dist/woopay-rtl.css 3.85 kB
release/woocommerce-payments/dist/woopay.css 3.85 kB
release/woocommerce-payments/dist/woopay.js 71.6 kB
release/woocommerce-payments/includes/subscriptions/assets/css/plugin-page.css 633 B
release/woocommerce-payments/includes/subscriptions/assets/js/plugin-page.js 720 B
release/woocommerce-payments/vendor/automattic/jetpack-assets/build/i18n-loader.js 2.43 kB
release/woocommerce-payments/vendor/automattic/jetpack-assets/src/js/i18n-loader.js 1.01 kB
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/tracks-ajax.js 522 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/tracks-callables.js 581 B
release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/babel.config.js 160 B
release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/build/index.css 2.32 kB
release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/build/index.js 13.8 kB
release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/build/index.rtl.css 2.32 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/about.css 1.2 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/admin-order-statuses.css 403 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/admin.css 3.56 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/checkout.css 299 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/modal.css 742 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/view-subscription.css 572 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/wcs-upgrade.css 411 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/admin-pointers.js 544 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/admin.js 9.55 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/jstz.js 6.8 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/jstz.min.js 3.83 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/meta-boxes-coupon.js 544 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/meta-boxes-subscription.js 2.38 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/moment.js 22.1 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/moment.min.js 11.6 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/payment-method-restrictions.js 1.29 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/wcs-meta-boxes-order.js 502 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/frontend/payment-methods.js 355 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/frontend/single-product.js 429 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/frontend/view-subscription.js 1.38 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/frontend/wcs-cart.js 781 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/modal.js 1.1 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/wcs-upgrade.js 1.27 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/build/index.css 392 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/build/index.js 3.06 kB

compressed-size-action

@brucealdridge brucealdridge requested a review from a team September 1, 2023 04:06
const columns = [
{
title: __( 'Dispute Amount', 'woocommerce-payments' ),
content: formatCurrency( dispute.amount, dispute.currency ),
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The issue and mockups specify that this should be in the store's currency. Currently, I have this is set to the dispute currency.

IMO we should keep these amounts in the same currency and I believe changing this headline amount is out of scope.

image

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

IMO we should keep these amounts in the same currency and I believe changing this headline amount is out of scope.

I was looking at updating this as part of #6974 – I agree though, I'll open a separate issue for the headline amount.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Issue #7124 opened and slack discussion about scope here: p1693885409513359-slack-C03LA109BKM

const disputeReason = formatStringValue(
reasons[ dispute.reason ]?.display || dispute.reason
);
const disputeReasonSummary = reasons[ dispute.reason ]?.summary || [];
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Using the summary seems like the best option from the strings file without adding new content.

@brucealdridge brucealdridge marked this pull request as ready for review September 1, 2023 04:14
@shendy-a8c shendy-a8c closed this Sep 4, 2023
@shendy-a8c shendy-a8c reopened this Sep 4, 2023
@shendy-a8c
Copy link
Contributor

shendy-a8c commented Sep 4, 2023

Closed and re-opened PR to re-trigger the GH checks.
Update: GH is currently having a problem with Actions.

@Jinksi Jinksi requested a review from a team September 4, 2023 23:49
@brucealdridge brucealdridge requested a review from a team September 7, 2023 01:53
@Jinksi Jinksi self-requested a review September 7, 2023 01:59
Copy link
Member

@Jinksi Jinksi left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This PR tests well @brucealdridge 🏆

I've left some recommended code improvements but these do not block merging, IMO.

I've tested the following:

  • Various dispute reason tooltips, including General, Duplicate and some without descriptions/summaries (check_returned). ✅
  • Within 24h ✅
    image
  • Within 72h ✅
    image
  • Within 7 days ✅
    image
  • > 7 days ✅
    image
  • Renders well on mobile (iOS Safari 16.6) ✅

client/payment-details/dispute-details/style.scss Outdated Show resolved Hide resolved
content={
<div className="dispute-reason-tooltip">
<p>{ disputeReason }</p>
<Paragraphs>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

TIL: <Paragraphs /> component exists!

@Jinksi

This comment was marked as outdated.

brucealdridge and others added 4 commits September 8, 2023 14:10
Co-authored-by: Eric Jinks <3147296+Jinksi@users.noreply.github.com>
Co-authored-by: Eric Jinks <3147296+Jinksi@users.noreply.github.com>
@Jinksi

This comment was marked as resolved.

@brucealdridge brucealdridge added this pull request to the merge queue Sep 10, 2023
@github-merge-queue github-merge-queue bot removed this pull request from the merge queue due to failed status checks Sep 10, 2023
@Jinksi Jinksi linked an issue Sep 11, 2023 that may be closed by this pull request
@brucealdridge brucealdridge added this pull request to the merge queue Sep 11, 2023
Merged via the queue into develop with commit 122d739 Sep 11, 2023
@brucealdridge brucealdridge deleted the add/6924-dispute-details-attributes branch September 11, 2023 03:31
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
4 participants