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

Show UTC label in date time column header of transactions CSV #9461

Merged
merged 13 commits into from
Sep 24, 2024

Conversation

shendy-a8c
Copy link
Contributor

@shendy-a8c shendy-a8c commented Sep 18, 2024

Fixes #8522

Fixes https://github.com/Automattic/woocommerce-payments-server/issues/2847

I had a hard time digesting the problem here so summarizing it here:

  • There are 3 timezones at play here: browser's timezone (in my case UTC+7), store's timezone (set at General > Settings > Timezone), and server's (UTC).
  • The behavior on base branch is as follow:
    • I'll use an example of a transaction I created at 2024-09-19 06:11 in my local time (UTC+7).
    • I set my store's timezone to be UTC+1.
    • On server, transaction time is stored as UTC, 2024-09-18 23:11.
    • When plugin fetches the transaction from server, it will receive the time in UTC.
    • This Javascript code shows the time in store's locale, ie in store's timezone. Read dateI18n's description. Therefore, I see the transaction time on the Transactions list page as 2024-09-19 00:11.
    • I can download CSV in 2 different ways based on the length of data.
      • If it's just one page, I will download the CSV right away. This is called 'browser' download. The times displayed in the CSV are in UTC.
      • Otherwise, the server will email me the CSV file. This is called 'endpoint' download. The times displayed in the CSV are in UTC.

Problem:

Changes proposed in this Pull Request

  • Since times in CSV are in UTC, add (UTC) to the date time column header. Apply the same for blocked transactions. This PR will add UTC for 'browser' download only because CSV from 'endpoint' download already has UTC in the Date / Time header.

Screenshot 2024-09-19 at 03 56 36

I do not add UTC to the other list pages (deposits and disputes) because they are showing dates only (without time).

Testing instructions

  • Set your blog's timezone to non-UTC. Go to wp-admin > Settings > General > Timezone.

  • npm run build:client.

  • Go to wp-admin > Payments > Transactions. Click download.

  • Go to wp-admin > Payments > Transactions > Blocked. Click download. I don't have any blocked transactions, so the download button does not appear for me.

  • Test the 2 types of download: from browser and from server.

To force it using the browser method:

const downloadType = 1 > rows.length ? 'endpoint' : 'browser';

To force it using the endpoint method:

const downloadType = 1000000 > rows.length ? 'endpoint' : 'browser';

Confirm that the date time header column is Date / Time (UTC). For CSV coming from server, if no email arrives at your inbox, check the mail logger installed in your local server WordPress.


  • 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 Sep 18, 2024

Test the build

Option 1. Jetpack Beta

  • Install and activate Jetpack Beta.
  • Use this build by searching for PR number 9461 or branch name add/8522-utc-list-page-csv 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: 0eea628
  • Build time: 2024-09-23 10:47:26 UTC

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

Copy link
Contributor

github-actions bot commented Sep 18, 2024

Size Change: +43 B (0%)

Total Size: 1.33 MB

Filename Size Change
release/woocommerce-payments/dist/index.js 302 kB +43 B (0%)
ℹ️ View Unchanged
Filename Size
release/woocommerce-payments/assets/css/admin.css 1.08 kB
release/woocommerce-payments/assets/css/admin.rtl.css 1.08 kB
release/woocommerce-payments/assets/css/success.css 173 B
release/woocommerce-payments/assets/css/success.rtl.css 173 B
release/woocommerce-payments/dist/blocks-checkout-rtl.css 2.52 kB
release/woocommerce-payments/dist/blocks-checkout.css 2.52 kB
release/woocommerce-payments/dist/blocks-checkout.js 66.5 kB
release/woocommerce-payments/dist/cart-block.js 16.2 kB
release/woocommerce-payments/dist/cart.js 5.73 kB
release/woocommerce-payments/dist/checkout-rtl.css 927 B
release/woocommerce-payments/dist/checkout.css 927 B
release/woocommerce-payments/dist/checkout.js 32.4 kB
release/woocommerce-payments/dist/express-checkout-rtl.css 230 B
release/woocommerce-payments/dist/express-checkout.css 230 B
release/woocommerce-payments/dist/express-checkout.js 14.2 kB
release/woocommerce-payments/dist/frontend-tracks.js 858 B
release/woocommerce-payments/dist/index-rtl.css 39.3 kB
release/woocommerce-payments/dist/index.css 39.2 kB
release/woocommerce-payments/dist/multi-currency-analytics.js 1.08 kB
release/woocommerce-payments/dist/multi-currency-rtl.css 3.41 kB
release/woocommerce-payments/dist/multi-currency-switcher-block.js 60.6 kB
release/woocommerce-payments/dist/multi-currency.css 3.41 kB
release/woocommerce-payments/dist/multi-currency.js 55.6 kB
release/woocommerce-payments/dist/order-rtl.css 730 B
release/woocommerce-payments/dist/order.css 730 B
release/woocommerce-payments/dist/order.js 42.7 kB
release/woocommerce-payments/dist/payment-gateways-rtl.css 1.35 kB
release/woocommerce-payments/dist/payment-gateways.css 1.35 kB
release/woocommerce-payments/dist/payment-gateways.js 39.3 kB
release/woocommerce-payments/dist/payment-request-rtl.css 230 B
release/woocommerce-payments/dist/payment-request.css 230 B
release/woocommerce-payments/dist/payment-request.js 13.6 kB
release/woocommerce-payments/dist/plugins-page-rtl.css 386 B
release/woocommerce-payments/dist/plugins-page.css 386 B
release/woocommerce-payments/dist/plugins-page.js 20.1 kB
release/woocommerce-payments/dist/product-details-rtl.css 433 B
release/woocommerce-payments/dist/product-details.css 436 B
release/woocommerce-payments/dist/product-details.js 11.5 kB
release/woocommerce-payments/dist/settings-rtl.css 11.6 kB
release/woocommerce-payments/dist/settings.css 11.5 kB
release/woocommerce-payments/dist/settings.js 224 kB
release/woocommerce-payments/dist/subscription-edit-page.js 703 B
release/woocommerce-payments/dist/subscription-product-onboarding-modal-rtl.css 524 B
release/woocommerce-payments/dist/subscription-product-onboarding-modal.css 524 B
release/woocommerce-payments/dist/subscription-product-onboarding-modal.js 20.2 kB
release/woocommerce-payments/dist/subscription-product-onboarding-toast.js 730 B
release/woocommerce-payments/dist/subscriptions-empty-state-rtl.css 120 B
release/woocommerce-payments/dist/subscriptions-empty-state.css 120 B
release/woocommerce-payments/dist/subscriptions-empty-state.js 19.3 kB
release/woocommerce-payments/dist/tokenized-payment-request-rtl.css 230 B
release/woocommerce-payments/dist/tokenized-payment-request.css 230 B
release/woocommerce-payments/dist/tokenized-payment-request.js 14.4 kB
release/woocommerce-payments/dist/tos-rtl.css 235 B
release/woocommerce-payments/dist/tos.css 235 B
release/woocommerce-payments/dist/tos.js 21.8 kB
release/woocommerce-payments/dist/woopay-direct-checkout.js 6.14 kB
release/woocommerce-payments/dist/woopay-express-button.js 24 kB
release/woocommerce-payments/dist/woopay-rtl.css 4.54 kB
release/woocommerce-payments/dist/woopay.css 4.51 kB
release/woocommerce-payments/dist/woopay.js 71.3 kB
release/woocommerce-payments/includes/subscriptions/assets/css/plugin-page.css 625 B
release/woocommerce-payments/includes/subscriptions/assets/js/plugin-page.js 814 B
release/woocommerce-payments/vendor/automattic/jetpack-assets/build/i18n-loader.js 2.46 kB
release/woocommerce-payments/vendor/automattic/jetpack-assets/build/jetpack-script-data.js 735 B
release/woocommerce-payments/vendor/automattic/jetpack-assets/build/react-jsx-runtime.js 553 B
release/woocommerce-payments/vendor/automattic/jetpack-assets/src/js/i18n-loader.js 1.02 kB
release/woocommerce-payments/vendor/automattic/jetpack-assets/src/js/script-data.js 69 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/babel.config.js 163 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/identity-crisis.css 2.45 kB
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/identity-crisis.js 14.2 kB
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/identity-crisis.rtl.css 2.45 kB
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-sso-admin-create-user.css 198 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-sso-admin-create-user.js 280 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-sso-admin-create-user.rtl.css 198 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-sso-login.css 625 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-sso-login.js 333 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-sso-login.rtl.css 626 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-sso-users.js 417 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/tracks-ajax.js 521 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/tracks-callables.js 584 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/src/sso/jetpack-sso-admin-create-user.css 215 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/src/sso/jetpack-sso-admin-create-user.js 521 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/src/sso/jetpack-sso-login.css 721 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/src/sso/jetpack-sso-login.js 412 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/src/sso/jetpack-sso-users.js 621 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/about.css 1.04 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/admin-empty-state.css 294 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/admin-order-statuses.css 408 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/admin.css 3.59 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/checkout.css 301 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/modal.css 746 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/view-subscription.css 574 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/wcs-upgrade.css 414 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/admin-pointers.js 543 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/admin.js 9.4 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/jstz.js 6.78 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/jstz.min.js 3.84 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/meta-boxes-coupon.js 545 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/meta-boxes-subscription.js 2.52 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/moment.js 22.2 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/moment.min.js 11.7 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 507 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/frontend/payment-methods.js 358 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/frontend/single-product.js 428 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 782 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/modal.js 1.09 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/wcs-upgrade.js 1.26 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/build/index.css 391 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/build/index.js 3.04 kB

compressed-size-action

@shendy-a8c shendy-a8c requested a review from a team September 18, 2024 21:05
@shendy-a8c shendy-a8c removed the request for review from a team September 18, 2024 21:17
@shendy-a8c shendy-a8c changed the title Show UTC in date time column header. WIP Show UTC in date time column header. Sep 18, 2024
@shendy-a8c shendy-a8c changed the title WIP Show UTC in date time column header. Show UTC in date time column header. Sep 20, 2024
@shendy-a8c shendy-a8c requested a review from a team September 20, 2024 07:02
@shendy-a8c shendy-a8c changed the title Show UTC in date time column header. Show UTC in date time column header of transactions CSV Sep 20, 2024
@shendy-a8c
Copy link
Contributor Author

As I am working on this PR, I found a bug. Created here: #9471.

@shendy-a8c shendy-a8c added this to the WooPayments 8.3.0 milestone Sep 20, 2024
Copy link
Contributor

@nagpai nagpai left a comment

Choose a reason for hiding this comment

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

The changes look fine and test well for the Transactions report.

I was unable to test the blocked tab, since I am unable to add transactions there.

I am approving the PR but it would be good to have one more review.

@nagpai nagpai requested a review from a team September 23, 2024 12:32
Copy link
Contributor

@haszari haszari left a comment

Choose a reason for hiding this comment

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

Approving, as this is a surgical small change that will make the CSVs more consistent and correct – the CSVs are always UTC, so should be labelled as such.

I do not add UTC to the other list pages (deposits and disputes) because they are showing dates only (without time).

We'll need follow up here, because dates can also be affected by timezone. e.g. Disputed at column shows date only but the stored value includes a time, and the date can shift in the UI depending on the WordPress (view) timezone.

In the example below, the transaction / dispute date is 24 Sept, but renders as 23 Sept for some timezones.

Screenshot 2024-09-24 at 2 27 55 PM Screenshot 2024-09-24 at 2 27 26 PM Screenshot 2024-09-24 at 2 25 50 PM

Bigger picture – we need to audit how we display dates & times

I got a little bit rabbit holed reviewing this PR and trying to understand what the correct behaviour is – i.e. what we designed.

I think we need to review the various screens with dates/times and audit if they are displayed as UTC, or localised using WordPress timezone (or something else).

Then we can either…

  • (a) Confirm the intended design and fix any discrepancies.
  • OR
  • (b) Refine the design so its consistent, and then fix discrepancies.

I don't think we can fix these bugs in isolation without confirming the intended design. Getting clarity on this might also help with the payment activity card on overview screen.

I had been assuming that we could go with (b) and use UTC everywhere, but I see there are lots of places in the UI where we adjust to WordPress timezone. As noted by @souravdebnath1986 ideally we'd show all times/dates in store timezone (this could be interpreted as WordPress site timezone).

Here are the issues & PRs I found in my research:

open issues

merged PRs / closed issues

@nagpai nagpai changed the title Show UTC in date time column header of transactions CSV Show UTC label in date time column header of transactions CSV Sep 24, 2024
@nagpai nagpai added this pull request to the merge queue Sep 24, 2024
Merged via the queue into develop with commit 4ec299c Sep 24, 2024
25 checks passed
@nagpai nagpai deleted the add/8522-utc-list-page-csv branch September 24, 2024 06:06
@nagpai
Copy link
Contributor

nagpai commented Sep 24, 2024

We'll need follow up here, because dates can also be affected by timezone. e.g. Disputed at column shows date only but the stored value includes a time, and the date can shift in the UI depending on the WordPress (view) timezone.

Created two followup issues with basic details here:

#9485
#9484

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
4 participants