[GlobalStep][Win-Chrome] Country flags fails to load on Multi-currency page.

[gglobalstep]

Bug Description:

Country flags fails to load on Multi-currency page.

Environment:

Woocommerce Version : WooCommerce 5.3
WooCommerce Payments: v2.6.0-test-1

PC:
Windows 10
Chrome(Version 90.0.4430.93)

Pre-requisites:

1. Set _wcpay_feature_customer_multi_currency option in the wp_options table to 1. Or use the following snippet: update_option( '_wcpay_feature_customer_multi_currency', '1' ); in the Code Snippet plugin.

Steps To Reproduce:

1. Create any test site using JN site.
2. Install and activate all the required plugins
3. Complete setup wizard using United States address as a store address and without selecting WC Payments on Business Details step.
4. Go to Plugins->Add New->Upload plugin.
5. Install and activate WooCommerce Payments plugin v2.6.0.
6. Go to Payments->Set up to trigger KYC flow.
7. Complete the KYC flow.
8. Go to Payment->Setting->Multi-currency.
9. Add different currencies.
10. Observe that Country flags fails to load.

Actual Result:

Country flags fails to load on Multi-currency page.

Expected Result:

Country flags should be displayed on Multi-currency page.

Screenshot:

Isolating the problem (mark completed items with an [x]):

• I have deactivated other plugins and confirmed this bug occurs when only WooCommerce plugin is active.
• This bug happens with a default WordPress theme active, or Storefront.
• I can reproduce this bug consistently using the steps above.

`

WordPress Environment

WordPress address (URL): https://vague-sea.jurassic.ninja
Site address (URL): https://vague-sea.jurassic.ninja
WC Version: 5.3.0
REST API Version: ✔ 5.3.0
WC Blocks Version: ✔ 5.3.0
Action Scheduler Version: ✔ 3.1.6
WC Admin Version: ✔ 2.2.6
Log Directory Writable: ✔
WP Version: 5.7.2
WP Multisite: –
WP Memory Limit: 256 MB
WP Debug Mode: ✔
WP Cron: ✔
Language: en_US
External object cache: –

Server Environment

Server Info: Apache/2.4.46 (Unix) OpenSSL/1.0.2g
PHP Version: 7.4.18
PHP Post Max Size: 1 GB
PHP Time Limit: 30
PHP Max Input Vars: 5000
cURL Version: 7.47.0
OpenSSL/1.0.2g

SUHOSIN Installed: –
MySQL Version: 5.7.33-0ubuntu0.16.04.1-log
Max Upload Size: 512 MB
Default Timezone is UTC: ✔
fsockopen/cURL: ✔
SoapClient: ✔
DOMDocument: ✔
GZip: ✔
Multibyte String: ✔
Remote Post: ✔
Remote Get: ✔

Database

WC Database Version: 5.3.0
WC Database Prefix: wp_
Total Database Size: 8.38MB
Database Data Size: 5.86MB
Database Index Size: 2.52MB
wp_woocommerce_sessions: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_woocommerce_api_keys: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_woocommerce_attribute_taxonomies: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_woocommerce_downloadable_product_permissions: Data: 0.02MB + Index: 0.06MB + Engine InnoDB
wp_woocommerce_order_items: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_woocommerce_order_itemmeta: Data: 0.06MB + Index: 0.03MB + Engine InnoDB
wp_woocommerce_tax_rates: Data: 0.02MB + Index: 0.06MB + Engine InnoDB
wp_woocommerce_tax_rate_locations: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_woocommerce_shipping_zones: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_woocommerce_shipping_zone_locations: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_woocommerce_shipping_zone_methods: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_woocommerce_payment_tokens: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_woocommerce_payment_tokenmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_woocommerce_log: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_actionscheduler_actions: Data: 0.06MB + Index: 0.11MB + Engine InnoDB
wp_actionscheduler_claims: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_actionscheduler_groups: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_actionscheduler_logs: Data: 0.05MB + Index: 0.03MB + Engine InnoDB
wp_ce4wp_abandoned_checkout: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_commentmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_comments: Data: 0.06MB + Index: 0.09MB + Engine InnoDB
wp_links: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_mailchimp_carts: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_mailchimp_jobs: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_mailpoet_custom_fields: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_mailpoet_dynamic_segment_filters: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_mailpoet_feature_flags: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_mailpoet_forms: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_mailpoet_log: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_mailpoet_mapping_to_external_entities: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_mailpoet_newsletters: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_mailpoet_newsletter_links: Data: 0.02MB + Index: 0.05MB + Engine InnoDB
wp_mailpoet_newsletter_option: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_mailpoet_newsletter_option_fields: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_mailpoet_newsletter_posts: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_mailpoet_newsletter_segment: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_mailpoet_newsletter_templates: Data: 2.52MB + Index: 0.00MB + Engine InnoDB
wp_mailpoet_scheduled_tasks: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_mailpoet_scheduled_task_subscribers: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_mailpoet_segments: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_mailpoet_sending_queues: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_mailpoet_settings: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_mailpoet_statistics_clicks: Data: 0.02MB + Index: 0.05MB + Engine InnoDB
wp_mailpoet_statistics_forms: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_mailpoet_statistics_newsletters: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_mailpoet_statistics_opens: Data: 0.02MB + Index: 0.08MB + Engine InnoDB
wp_mailpoet_statistics_unsubscribes: Data: 0.02MB + Index: 0.05MB + Engine InnoDB
wp_mailpoet_statistics_woocommerce_purchases: Data: 0.02MB + Index: 0.06MB + Engine InnoDB
wp_mailpoet_stats_notifications: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_mailpoet_subscribers: Data: 0.02MB + Index: 0.13MB + Engine InnoDB
wp_mailpoet_subscriber_custom_field: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_mailpoet_subscriber_ips: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_mailpoet_subscriber_segment: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_mailpoet_user_flags: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_ms_snippets: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_options: Data: 1.42MB + Index: 0.08MB + Engine InnoDB
wp_postmeta: Data: 0.23MB + Index: 0.19MB + Engine InnoDB
wp_posts: Data: 0.06MB + Index: 0.06MB + Engine InnoDB
wp_snippets: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_termmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_terms: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_term_relationships: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_term_taxonomy: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_usermeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_users: Data: 0.02MB + Index: 0.05MB + Engine InnoDB
wp_wc_admin_notes: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_wc_admin_note_actions: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_wc_category_lookup: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_wc_customer_lookup: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_wc_download_log: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_wc_order_coupon_lookup: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_wc_order_product_lookup: Data: 0.02MB + Index: 0.06MB + Engine InnoDB
wp_wc_order_stats: Data: 0.02MB + Index: 0.05MB + Engine InnoDB
wp_wc_order_tax_lookup: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_wc_product_meta_lookup: Data: 0.02MB + Index: 0.09MB + Engine InnoDB
wp_wc_reserved_stock: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_wc_tax_rate_classes: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_wc_webhooks: Data: 0.02MB + Index: 0.02MB + Engine InnoDB

Post Type Counts

attachment: 24
mailpoet_page: 1
page: 8
post: 2
product: 23
product_variation: 7
revision: 2
shop_coupon: 3
shop_order: 24
shop_order_refund: 3
shop_subscription: 4

Security

Secure connection (HTTPS): ✔
Hide errors from visitors: ✔

Active Plugins (12)

Query Monitor: by John Blackbourn – 3.7.1
Code Snippets: by Code Snippets Pro – 2.14.1
Companion Plugin: by Osk – 1.18
Creative Mail by Constant Contact: by Constant Contact – 1.3.9
Facebook for WooCommerce: by Facebook – 2.5.1
Google Ads & Marketing by Kliken: by Kliken – 1.0.7
Mailchimp for WooCommerce: by Mailchimp – 2.5.1
MailPoet 3 (New): by MailPoet – 3.62.1
WooCommerce Blocks: by Automattic – 5.3.0
WooCommerce Payments: by Automattic – 2.6.0-test-1
WooCommerce Subscriptions: by WooCommerce – 3.0.12
WooCommerce: by Automattic – 5.3.0

Inactive Plugins (2)

Akismet Anti-Spam: by Automattic – 4.1.9
Hello Dolly: by Matt Mullenweg – 1.7.2

Dropin Plugins (1)

db.php: Query Monitor Database Class

Settings

API Enabled: –
Force SSL: –
Currency: USD ($)
Currency Position: left
Thousand Separator: ,
Decimal Separator: .
Number of Decimals: 2
Taxonomies: Product Types: external (external)
grouped (grouped)
simple (simple)
subscription (subscription)
variable (variable)
variable subscription (variable-subscription)

Taxonomies: Product Visibility: exclude-from-catalog (exclude-from-catalog)
exclude-from-search (exclude-from-search)
featured (featured)
outofstock (outofstock)
rated-1 (rated-1)
rated-2 (rated-2)
rated-3 (rated-3)
rated-4 (rated-4)
rated-5 (rated-5)

Connected to WooCommerce.com: –

WC Pages

Shop base: #5 - /shop/
Cart: #6 - /cart/
Checkout: #7 - /checkout/
My account: #8 - /my-account/
Terms and conditions: ❌ Page not set

Theme

Name: Storefront
Version: 3.7.0
Author URL: https://woocommerce.com/
Child Theme: ❌ – If you are modifying WooCommerce on a parent theme that you did not build personally we recommend using a child theme. See: How to create a child theme
WooCommerce Support: ✔

Templates

Overrides: –

Subscriptions

WCS_DEBUG: ✔ No
Subscriptions Mode: ✔ Live
Subscriptions Live URL: https://vague-sea.jurassic.ninja
Subscription Statuses: wc-active: 4
WooCommerce Account Connected: ❌ No
Report Cache Enabled: ✔ Yes
Cache Update Failures: ✔ 0 failure

Store Setup

Country / State: United States (US) — California

Subscriptions by Payment Gateway

WooCommerce Payments: wc-active: 4

Payment Gateway Support

WooCommerce Payments: products
refunds
tokenization
add_payment_method
subscriptions
subscription_cancellation
subscription_suspension
subscription_reactivation
subscription_amount_changes
subscription_date_changes
subscription_payment_method_change
subscription_payment_method_change_customer
subscription_payment_method_change_admin
multiple_subscriptions

Action Scheduler

Canceled: 1
Oldest: 2021-06-08 13:03:16 +0000
Newest: 2021-06-08 13:03:16 +0000

Complete: 109
Oldest: 2021-06-08 07:31:55 +0000
Newest: 2021-06-08 13:58:52 +0000

Pending: 6
Oldest: 2021-06-09 13:23:03 +0000
Newest: 2021-08-08 13:21:47 +0000

Status report information

Generated at: 2021-06-08 15:49:42 +00:00
`

[ismaeldcom]

Looks like Windows decide to not render flags at all ("political" reasons apparently), only 2 letters instead. I think it looks a bit weird and doesn't provide the same experience for every SO. We could use images for everything instead, except for the legacy widget, that will prevent us to use a native <select> input.

How does this sound to you @LevinMedia? Would be also handy if you can share the SVG flags you mentioned before. And having something like a blank flag to use for those countries without one would be even better.

[LevinMedia]

@ismaeldcom that sounds good to me - as far as SVGs for the flags go - can we link to the SVGs that are part of wp-admin? For example, here's a link to the NZ flag:

https://s.w.org/images/core/emoji/13.0.1/svg/1f1e6-1f1fa.svg