Dependent on #107

API issue

We need to add wallet authentication on the API

Expected behaviour

• Connects wallet so that we can create wallets, connect tokens, etc.

Need help?

• Ask over here
• Look at the Shopify documentation
• Message Krithin Jay on Slack

API issue

MVP version: v0
CRUD type: PUT

• Accept token transfer from Linked Greenstand wallet

Expected behaviour

• Accept token transfer

Need help?

• Ask over here!
• Look at the Shopify documentation!
• Message Krithin Jay on Slack!

API issue

We need to be able to allow merchants to connect a pre-existing wallet.

Expected behaviour

• Sends requests to treetracker-wallet-api
• Successfully connects wallet
• Handles authentication (this might be a little difficult)
• Gracefully handles errors

Need help?

• Ask over here
• Look at the Shopify documentation
• Message Krithin Jay on Slack

What is the issue?

Shopify Apps require extreme security, especially when billing is involved.

One part of this is for all secrets to be stored safely and securely.

Here, we will talk about security issues.

Can someone help me tag which dependabot PRs can be merged and which should be closed?

API Documentation

We need API Documentation for newcomers to be able to easily understand the APIs, and for people who are coming back to the project after a while.

What is the issue?

If shoppers choose to do so, they should be able to create/connect a wallet where they can store their Impact Tokens.

Where should this go?

Not exactly sure yet, probably on a link from the checkout page.

Need help?

• Read the Shopify Documentation
• Ask Krithin Jay on Slack
• Post comments here

Describe the bug

There is no button to go to the next step in the extension

Additional context

We need a button that will let the user go ahead.

Need help?

• Comment down here
• Comment in the discussions
• Message Krithin Jay on Slack

Customising checkout

Description:

Merchant perspective:

As a Shopify merchant, I want to be able to add a section to my checkout page so that I can facilitate the transfer of tokens from my account to my client’s wallets. logged-in wallet admin user, I want to be able to send token to other managed wallets.

Shopper perspective:

As a shopper, I want to be able to get tokens for my purchases.

Acceptance Criteria:

• The page should inform the user of the ongoing offer on tokens.
• The page should have a checkbox that allows the shopper to opt in to the program.
• The page should have a button to be able to create a wallet for the shopper.
• Creating a wallet for the user should be as fast and efficient as possible to increase shopper conversion rates on the offer.
• The shopper should be able to choose the location of tree planters/specific tree planters that they want to support.

Implementation

This can be done using Shopify Post-purchase UI extensions.

Connecting wallet for merchants

Description: As a Shopify user, I want to be able to connect my existing wallet so that I can buy tokens (recharge) and sell them to my clients.

Acceptance Criteria:

1. There should be a connect wallet button on the wallet page
2. The button should lead to a form
3. The form should have 2 input fields: one for the wallet ID and one for the password
4. There should be a “Connect” button that is disabled until both fields are filled, and sends a request to the Greenstand servers when clicked
5. If the details are incorrect, an error message in red should show up below the inputs, explaining that the details are incorrect
6. Any other errors should be gracefully handled with an error message and guidance to “come back later” or to send a complaint to Greenstand.
7. If the user enters valid credentials, it should redirect them to the wallet page where the page should have changed to show the wallet ID, the number of tokens, and allow for tokens to be bought.
8. The page should contain a note explaining how to create a new wallet externally (without using the extension to create one).

Current release: In development.

Attached image: None.

API issue

To change the current checkout settings/details.

CRUD Type: Create/Update
Endpoint: /api/save-checkout-details

Expected behaviour

• Should update current checkout settings.
• Should return any errors.

Need help?

• Ask over here
• Look at the Shopify documentation
• Message Krithin Jay on Slack

Transferring tokens from merchant to client

User story

None.

Acceptance criteria

1. The tokens need to be transferred securely from merchant to shopper.

Update the orders page

When a shopper opts in to the Greenstand tokens offer, it should reflect through product metafields in the Shopify Admin dashboard at the Orders section.

What is the issue?

We need to follow Shopify's Layout Guidelines in order to provide the best UI/UX.

Documentation

https://shopify.dev/docs/apps/design-guidelines

Describe the bug

I can't send requests to the backend.

To Reproduce

Steps to reproduce the behavior:

1. Clone repo
2. Run app
3. Run the extension
4. Make a test purchase
5. Enter a test wallet name
6. Click 'Create wallet'
7. Check the console logs

Expected behavior

The API functions properly?

Screenshots

None.

Desktop (please complete the following information):

• OS: MacOS Sonoma
• Browser: Brave

Additional context

The API logs something saying Invalid API token. The console logs say something else.

These pages should be helpful:

• https://shopify.dev/docs/apps/selling-strategies/purchase-options/app-extensions/authenticate
• https://shopify.dev/docs/api/checkout-extensions/post-purchase/jwt-specification
• https://shopify.dev/docs/api/checkout-extensions/post-purchase/api

Need help?

• Comment down here
• Comment in the discussions
• Message Krithin Jay on Slack

We need to make sure that the code runs properly before merging pull requests.

What tests should be there?

• Run npm ci (clean-install)
• Run app to make sure there are no errors

User story

As a merchant, I want a feature built-in to the Shopify extension that allows me to purchase tokens from Greenstand so that I can sell them to my clients.

Requirements

• Be able to transfer tokens from Greenstand to merchant's wallet
• Be able to charge merchant for transaction

What is the issue?

We need a wallet page!

What is the issue?

The merchant needs to be able to create a wallet to buy tokens that are to be sold to clients.

Where should this feature go?

New page from /wallets

At the green 'Create wallet' button

Need help?

Ask here or in Slack.

Design for Homepage

We need a design for the home-page of the Shopify Extension.

Where is the homepage?

What is the issue?

We need a homepage.

User story

As a Shopify merchant, I want to be able to have a home page that introduces me to the app and provides quick navigation so that I can efficiently use the app.

Acceptance criteria

1. The home page should display the Greenstanddisplay Greenstand logo, as well as an app logo if we have one.
2. It should have text that guides the user through the app on the first time using it.
3. The home page should effectively use illustrations as part of the Shopify Illustrations Guidelines (view #13 )
4. The home page should provide quick navigation access to useful tools.

Current release: In development

Where should this go?

The area highlighted in blue is our homepage. Currently it is almost blank, and we need to add something there which will direct the merchants when they first use it. It will also be used as a kind of 'quick access' panel when the merchant has already connected a wallet.

Illustrations

Shopify has some guidelines for illustrations (view #13 for more information), but the basic rundown is this:

• They have a set color scheme
• They can only be used to add useful information or directions that help better guide the user, rather than to fill up blank space

Figma

• https://www.figma.com/file/z23awBMz3ENTCPkhHLuYXR/Polaris-Components-(Community)-(Copy)?type=design&node-id=84579%3A434&mode=design&t=Ae8wg3mDZbqXCRN4-1

Need help?

• Comment down here
• Ask in the discussions
• Message Krithin Jay on Slack

https://polaris.shopify.com/content/actionable-language#headings-and-subheadings

What is the issue?

We need to create a manager wallet account that can create/delete wallets, transfer tokens, and create trust relationships between wallets.

Security

This feature needs to be very secure, it will severely impact the security of the app as a whole.

Post-purchase extension

There are two parts to the extension:

• Create wallet page
• Wallet link page

Note: All of these designs need to use these elements
(annoying, yes but there's no other choice)

Create wallet page

Current design:

Requirements:

• There needs to be a message that tells the user that they have received a token from Greenstand and congratulations
• There needs to be a short explanation of Greenstand, and what happens to the user
• There is a message that says "Powered by Greenstand"
• There is a checkbox that says "I opt in/I agree to this program"
• There is an input to fill in the wallet name
• Errors are in red text below the input field
• There are two buttons - One in primary color that says "Create wallet" and one in secondary color that says "No thanks"

Additional information:

• Is there anything else we might need here?

Wallet link page

Current design:

Requirements:

• There needs to be a link that brings the user to the wallet
• There needs to be a button to move on

Additional information:

• I haven't added much here, is there anything else that would make it look better? (headers, images, etc.)

Accessibility and Desing

This issue will be a container issue for all other issues regarding accessibility.

What is it?

Accessibility refers to how open and free an app is to be used for people all over the world.

This can include:

• Translations for different languages
• Screen reader accessibility
• Color contrast settings
• Gesture support
• tabindex in programming

and more.

This is Shopify's official page regarding it: https://shopify.dev/docs/apps/best-practices/accessibility.
Design page: https://shopify.dev/docs/apps/design-guidelines

We need to be following this guideline when we make our pages, or at least making the key features and then adding accessibility before production.

Issues underneath this

• #12
• #13
• #5

Updating pages to reflect the sale

Update the website to inform the user about the offer.

Description

Merchant perspective:

As a Shopify merchant, I want to be able to inform my users about the offer on tokens so that I can potentially bring in more sales.

Shopper perspective:

As a shopper, I want to be able to know about any ongoing offers so that I can make an informed decision about my purchase.

Acceptance Criteria:

According to the merchant’s settings:

• The shop can contain a banner/embedded text/toast in the homepage to inform the user of the offer on tokens.
• The shop can contain a banner/embedded text/toast in the product page to inform the user of the offer.
• The shop can contain embedded text in the cart to inform the user of the offer.

API issue

Version: MVP v0

CRUD type: POST/PUT

• Transfer tokens from Linked Greenstand wallet to consumer wallet

Expected behaviour

• Tokens are transferred (might need to accept)

Need help?

• Ask here!
• Look at the Shopify documentation!
• Message Krithin Jay on Slack!

Testing

This issue will be a kind of container for all of the issues regarding security. We will be adding them here.

Features that require testing

• Creating wallet
• Connecting wallet
• Transferring tokens

Current dev URL

In the greenstand-token-extension folder, we need the API URL to make calls. However, in development, it keeps changing everytime someone runs the app, and we have to keep copy-pasting the URL into the slot.

Issue

Can someone create a file that has a function called getCurrentUrl, which gets the current url from shopify.app.toml in the root folder?

You can use external dependencies, just list them in the slot when creating a PR.

Dependent on #108

What is the issue?

In the frontend, the text needs to be translated using i18n for React.

User story

As a merchant, I want to be able to use the Greenstand Wallet Extension in any language, so that I can freely and accessibly use it.

Target languages

Current target languages:

• French
• German
• Spanish

Translation document

This is the translation document: https://docs.google.com/document/d/1Vzg-mKNldHJuWF9lXf4ttX8jgVr13TR2c7bzs8EhFBM/edit

Get help

• Documentation for react-i18n: https://react.i18next.com/
• Ask here
• Message Krithin Jay on Slack

Note

Please make sure that the translations are accurate! I suggest using a tool like DeepL for translation, or even better, if you are a native speaker.

Install DeepL: https://www.deepl.com/en/translator

What is the issue?

We need to follow Shopify's illustration guidelines.

https://polaris.shopify.com/design/illustrations

Wallet connection for shoppers

No user story yet.

Acceptance criteria

None yet.

(Just scaffolding some issues.)

API issue

To get the current checkout settings/details.

CRUD Type: Read
Endpoint: /api/get-checkout-details

Expected behaviour

• Should return current checkout settings.

Need help?

• Ask over here
• Look at the Shopify documentation
• Message Krithin Jay on Slack

API issue

We made a wallet creation page, but it needs the API to function properly

Expected behaviour

• Sends requests to treetracker-wallet-api
• Creates wallet successfully
• Handles errors gracefully

Need help?

• Ask over here
• Look at the Shopify documentation
• Message Krithin Jay on Slack