Add new bob pay icons

[sthembisoo]

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]

@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]

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]

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]

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]

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]

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]

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]

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]

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]

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]

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]

Hi @dannye0231,

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

[dannye0231]

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]

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]

Hi @Lydia-shan-git, do you have any feedback on the updated payment logo above?

[sthembisoo]

Hi @dannye0231, could you perhaps help with the design review step that we are left with?