Add new bob pay icons #1234

sthembisoo · 2024-10-08T12:38:39Z

Why are you adding this icons?

I'm adding/updating this icon(s) because ..

Help us identify yourself

I'm working/collaborating with the brand directly and they have provided the icons.
I'm associated with the brand and I've read all the brand icon’s guidelines.
I'm an individual and I've read all the brand icon’s guidelines.

Link to the brand guidelines: https://www.bobpay.co.za/

Checklist to add new icons

All icons have a corresponding entry in db/payment_icons.yml
I have followed the icon guidelines detailed in the CONTRIBUTING.md file
I have optimized the icon with SVGO
I am confident that all icons are clear and easy to read/understand
I have provided a link to the brand icon’s brand guidelines whenever possible.
I have attached a screenshot comparison with the example icon provided in guidelines
I recognize that if my icon is not approved by the Shopify Partners team it may not receive review nor merger.

If this pull request is not adding new icons, you can remove this checklist.

Attach a screenshot of the icon along side the example Visa icon

Tips how to create a screenshot

We have found free online SVG editor https://www.freecodeformat.com/svg-editor.php very useful to create one. Here is a sample code for you to verify that you icon appears properly along side the placeholder.

<!-- Change background color if needed to showcase your icon better -->
<style> body { background: black; } </style>

<!-- DO NOT DELETE EXAMPLE -->
<svg viewBox="0 0 38 24" xmlns="http://www.w3.org/2000/svg" role="img" width="38" height="24" aria-labelledby="pi-visa"><title id="pi-visa">Visa</title><path opacity=".07" d="M35 0H3C1.3 0 0 1.3 0 3v18c0 1.7 1.4 3 3 3h32c1.7 0 3-1.3 3-3V3c0-1.7-1.4-3-3-3z"/><path fill="#fff" d="M35 1c1.1 0 2 .9 2 2v18c0 1.1-.9 2-2 2H3c-1.1 0-2-.9-2-2V3c0-1.1.9-2 2-2h32"/><path d="M28.3 10.1H28c-.4 1-.7 1.5-1 3h1.9c-.3-1.5-.3-2.2-.6-3zm2.9 5.9h-1.7c-.1 0-.1 0-.2-.1l-.2-.9-.1-.2h-2.4c-.1 0-.2 0-.2.2l-.3.9c0 .1-.1.1-.1.1h-2.1l.2-.5L27 8.7c0-.5.3-.7.8-.7h1.5c.1 0 .2 0 .2.2l1.4 6.5c.1.4.2.7.2 1.1.1.1.1.1.1.2zm-13.4-.3l.4-1.8c.1 0 .2.1.2.1.7.3 1.4.5 2.1.4.2 0 .5-.1.7-.2.5-.2.5-.7.1-1.1-.2-.2-.5-.3-.8-.5-.4-.2-.8-.4-1.1-.7-1.2-1-.8-2.4-.1-3.1.6-.4.9-.8 1.7-.8 1.2 0 2.5 0 3.1.2h.1c-.1.6-.2 1.1-.4 1.7-.5-.2-1-.4-1.5-.4-.3 0-.6 0-.9.1-.2 0-.3.1-.4.2-.2.2-.2.5 0 .7l.5.4c.4.2.8.4 1.1.6.5.3 1 .8 1.1 1.4.2.9-.1 1.7-.9 2.3-.5.4-.7.6-1.4.6-1.4 0-2.5.1-3.4-.2-.1.2-.1.2-.2.1zm-3.5.3c.1-.7.1-.7.2-1 .5-2.2 1-4.5 1.4-6.7.1-.2.1-.3.3-.3H18c-.2 1.2-.4 2.1-.7 3.2-.3 1.5-.6 3-1 4.5 0 .2-.1.2-.3.2M5 8.2c0-.1.2-.2.3-.2h3.4c.5 0 .9.3 1 .8l.9 4.4c0 .1 0 .1.1.2 0-.1.1-.1.1-.1l2.1-5.1c-.1-.1 0-.2.1-.2h2.1c0 .1 0 .1-.1.2l-3.1 7.3c-.1.2-.1.3-.2.4-.1.1-.3 0-.5 0H9.7c-.1 0-.2 0-.2-.2L7.9 9.5c-.2-.2-.5-.5-.9-.6-.6-.3-1.7-.5-1.9-.5L5 8.2z" fill="#142688"/></svg>

<!-- TODO: insert your icon here -->
<YOUR SVG CODE>

<br>
<!-- TODO: insert your icon here -->
<YOUR SVG CODE>
</br

If the icons are intended for use by Shopify, please provide the following info:

Who are you working with at Shopify? (avoid adding personal details, provide github handle(preferred) or first name and last name)

What's the expected date of this change to deploy on Shopify?

dannye0231 · 2024-10-08T13:45:22Z

@sthembisoo can you please email me ([email protected]) with your Partner ID and App ID? I see an issue with the Bob Pay app which may get it delisted from the platform and I just want to see if this is the same app which you're trying to update.

dannye0231 · 2024-10-09T13:47:41Z

Hi @sthembisoo , can you please check your SVG file ID tags that are used? We are seeing an error when testing:

Failure:
PaymentIconTest#test_Every_payment_SVG_meets_accessibility_requirements [test/unit/payment_icon_test.rb:78]:
{:message=>"The 'bob_pay_capitec_pay' SVG file does not have the appropriate <title> value"}.
Expected: "Bob Pay Capitec Pay"
Actual: "Capitec Pay"

dannye0231 · 2024-10-10T12:58:36Z

Hi @sthembisoo , can you please check the new error that just came up?

Failure:
PaymentIconTest#test_Every_payment_SVG_meets_accessibility_requirements [test/unit/payment_icon_test.rb:81]:
{:message=>"The 'bob_pay_instant_eft' SVG file does not have the appropriate 'id' value on the <title> tag"}.
Expected: "pi-bob_pay_instant_eft"
Actual: "pi-bob-pay-instant-eft"

sthembisoo · 2024-10-14T09:09:50Z

Hi @sthembisoo , can you please check the new error that just came up?

Failure: PaymentIconTest#test_Every_payment_SVG_meets_accessibility_requirements [test/unit/payment_icon_test.rb:81]: {:message=>"The 'bob_pay_instant_eft' SVG file does not have the appropriate 'id' value on the <title> tag"}. Expected: "pi-bob_pay_instant_eft" Actual: "pi-bob-pay-instant-eft"

Hi @dannye0231

Thanks for the update, I've updated my svg files to use the correct convention for the title tag.

dannye0231 · 2024-10-15T13:06:21Z

Hi @sthembisoo , it looks there is another issue that is flagged:

PaymentIconTest#test_Every_payment_SVG_meets_accessibility_requirements [test/unit/payment_icon_test.rb:89]:
{:message=>"The 'pattern0_819_5041' ID should be pi-bob_pay_instant_eft-pattern0_819_5041 (missing 'pi-' prefix)"}.
Expected /pi-(.*)/ to match "pattern0_819_5041".

Are you able to take a look?

sthembisoo · 2024-10-15T14:51:53Z

Hi @sthembisoo , it looks there is another issue that is flagged:

PaymentIconTest#test_Every_payment_SVG_meets_accessibility_requirements [test/unit/payment_icon_test.rb:89]: {:message=>"The 'pattern0_819_5041' ID should be pi-bob_pay_instant_eft-pattern0_819_5041 (missing 'pi-' prefix)"}. Expected /pi-(.*)/ to match "pattern0_819_5041".

Are you able to take a look?

Thanks for the update @dannye0231,

I've updated my icons.

dannye0231 · 2024-10-17T20:09:36Z

Hi @sthembisoo , are you able to check the errors being logged in our test cases? I am still running into an issue with the updated SVG:

Failure:
PaymentIconTest#test_Every_payment_SVG_meets_accessibility_requirements [test/unit/payment_icon_test.rb:89]:
{:message=>"The 'pattern1_819_5041' ID should be pi-bob_pay_instant_eft-pattern1_819_5041 (missing 'pi-' prefix)"}.
Expected /pi-(.*)/ to match "pattern1_819_5041".

sthembisoo · 2024-10-22T06:20:01Z

Hi @sthembisoo , are you able to check the errors being logged in our test cases? I am still running into an issue with the updated SVG:

Failure: PaymentIconTest#test_Every_payment_SVG_meets_accessibility_requirements [test/unit/payment_icon_test.rb:89]: {:message=>"The 'pattern1_819_5041' ID should be pi-bob_pay_instant_eft-pattern1_819_5041 (missing 'pi-' prefix)"}. Expected /pi-(.*)/ to match "pattern1_819_5041".

Hi Danny,

thanks for the update. I've tried to go through the test cases to ensure best compliance, It's only the last test I couldnt go through since I have images but Ive pushed an update

sthembisoo · 2024-10-29T07:04:03Z

Hi @sthembisoo , are you able to check the errors being logged in our test cases? I am still running into an issue with the updated SVG:
Failure: PaymentIconTest#test_Every_payment_SVG_meets_accessibility_requirements [test/unit/payment_icon_test.rb:89]: {:message=>"The 'pattern1_819_5041' ID should be pi-bob_pay_instant_eft-pattern1_819_5041 (missing 'pi-' prefix)"}. Expected /pi-(.*)/ to match "pattern1_819_5041".

Hi Danny,

thanks for the update. I've tried to go through the test cases to ensure best compliance, It's only the last test I couldnt go through since I have images but Ive pushed an update

Hi @dannye0231,

I'm just following up if there's any feedback on the latest commit I did for the payment icons?

dannye0231 · 2024-10-29T15:39:25Z

Hi @sthembisoo , are you able to check the errors being logged in our test cases? I am still running into an issue with the updated SVG:
Failure: PaymentIconTest#test_Every_payment_SVG_meets_accessibility_requirements [test/unit/payment_icon_test.rb:89]: {:message=>"The 'pattern1_819_5041' ID should be pi-bob_pay_instant_eft-pattern1_819_5041 (missing 'pi-' prefix)"}. Expected /pi-(.*)/ to match "pattern1_819_5041".

Hi Danny,
thanks for the update. I've tried to go through the test cases to ensure best compliance, It's only the last test I couldnt go through since I have images but Ive pushed an update

Hi @dannye0231,

I'm just following up if there's any feedback on the latest commit I did for the payment icons?

Hi @sthembisoo , I don't see any errors showing up in our test cases. The only piece left is to have our design team review the SVG and approve it. We're aiming to have another merge run closer to the end of this week.

sthembisoo · 2024-10-30T13:22:54Z

Hi @sthembisoo , are you able to check the errors being logged in our test cases? I am still running into an issue with the updated SVG:
Failure: PaymentIconTest#test_Every_payment_SVG_meets_accessibility_requirements [test/unit/payment_icon_test.rb:89]: {:message=>"The 'pattern1_819_5041' ID should be pi-bob_pay_instant_eft-pattern1_819_5041 (missing 'pi-' prefix)"}. Expected /pi-(.*)/ to match "pattern1_819_5041".

Hi Danny,
thanks for the update. I've tried to go through the test cases to ensure best compliance, It's only the last test I couldnt go through since I have images but Ive pushed an update

Hi @dannye0231,
I'm just following up if there's any feedback on the latest commit I did for the payment icons?

Hi @sthembisoo , I don't see any errors showing up in our test cases. The only piece left is to have our design team review the SVG and approve it. We're aiming to have another merge run closer to the end of this week.

Hi @dannye0231,

Good to hear, thanks for the update.

sthembisoo · 2024-11-04T08:05:28Z

Hi @dannye0231,

has there been any feedback from the design team about the payment icons?

dannye0231 · 2024-11-04T17:34:15Z

Hi @sthembisoo , we should have the reviews completed this week

Lydia-shan-git

Make sure the entire logo is within the borders. The T is currently overlapping with the right border

sthembisoo · 2024-11-06T08:42:55Z

Make sure the entire logo is within the borders. The T is currently overlapping with the right border

Hi @Lydia-shan-git, I've updated the example screenshot. can you please have look at it again when you have capacity

sthembisoo added 3 commits October 8, 2024 14:31

Add new bob pay icons

1433f52

Use white background

b539fb8

Use white background

6a6fce3

dannye0231 requested a review from Lydia-shan-git October 9, 2024 13:47

sthembisoo and others added 4 commits October 9, 2024 16:33

Update Icon titles

7538908

resolve merge confict

75fab0c

Merge branch 'master' into bob_pay_icons

23157a0

Add capitec pay

62b2012

Update svg titles

413956a

Update Icons with pattern to include pi- prefix

a1c4e69

update all id attributes

ad892d9

Lydia-shan-git requested changes Nov 4, 2024

View reviewed changes

Update id reference

012738d

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add new bob pay icons #1234

Add new bob pay icons #1234

sthembisoo commented Oct 8, 2024 •

edited

Loading

dannye0231 commented Oct 8, 2024

dannye0231 commented Oct 9, 2024

dannye0231 commented Oct 10, 2024

sthembisoo commented Oct 14, 2024 •

edited

Loading

dannye0231 commented Oct 15, 2024

sthembisoo commented Oct 15, 2024

dannye0231 commented Oct 17, 2024

sthembisoo commented Oct 22, 2024

sthembisoo commented Oct 29, 2024

dannye0231 commented Oct 29, 2024

sthembisoo commented Oct 30, 2024

sthembisoo commented Nov 4, 2024

dannye0231 commented Nov 4, 2024

Lydia-shan-git left a comment

sthembisoo commented Nov 6, 2024

Add new bob pay icons #1234

Are you sure you want to change the base?

Add new bob pay icons #1234

Conversation

sthembisoo commented Oct 8, 2024 • edited Loading

Why are you adding this icons?

Help us identify yourself

Checklist to add new icons

Attach a screenshot of the icon along side the example Visa icon

Tips how to create a screenshot

If the icons are intended for use by Shopify, please provide the following info:

dannye0231 commented Oct 8, 2024

dannye0231 commented Oct 9, 2024

dannye0231 commented Oct 10, 2024

sthembisoo commented Oct 14, 2024 • edited Loading

dannye0231 commented Oct 15, 2024

sthembisoo commented Oct 15, 2024

dannye0231 commented Oct 17, 2024

sthembisoo commented Oct 22, 2024

sthembisoo commented Oct 29, 2024

dannye0231 commented Oct 29, 2024

sthembisoo commented Oct 30, 2024

sthembisoo commented Nov 4, 2024

dannye0231 commented Nov 4, 2024

Lydia-shan-git left a comment

Choose a reason for hiding this comment

sthembisoo commented Nov 6, 2024

sthembisoo commented Oct 8, 2024 •

edited

Loading

sthembisoo commented Oct 14, 2024 •

edited

Loading