initialize dev docs for loyalty extension #2486
Conversation
| if (loading) { | ||
| return <Text>Loading...</Text>; | ||
| } |
There was a problem hiding this comment.
What does this end up looking like in a Block extension? Does it even work? I think you may need to wrap this in a POSBlock at least, and perhaps a POSBlockRow, too?
| <POSBlockRow> | ||
| <Text variant="headingLarge" color="TextSuccess"> | ||
| {/* 5. Display the point balance */} | ||
| Point Balance:{pointBalance} |
There was a problem hiding this comment.
Is this missing a space?
| <Text variant="headingSmall">Available Discounts:</Text> | ||
| {/* 6. Display available discounts as buttons, calling applyDiscount */} | ||
| {availableDiscounts.map((tier) => ( | ||
| <POSBlockRow key={tier.pointsRequired}> |
There was a problem hiding this comment.
Did you try a List component here? Just wondering if it works and if it looks better than stacking POSBlockRows
| import type {useApi} from '@shopify/ui-extensions-react/point-of-sale'; | ||
| import {serverUrl} from './LoyaltyPointsBlock'; | ||
| export const applyDiscount = async ( | ||
| api: ReturnType<typeof useApi>, |
There was a problem hiding this comment.
What does ReturnType do here? I think UI Extensions exports the correct type somewhere. I think it's ApiForRenderExtension<Target>
| throw new Error(`Failed to deduct points: ${errorText}`); | ||
| } | ||
| // 3. Update the point balance in the state | ||
| setPointBalance((prev) => (prev !== null ? prev - pointsToDeduct : null)); |
There was a problem hiding this comment.
I think it's good practice to let the server respond with the updated total here, so the math isn't being done in two places.
| anchorLink: 'shopify-admin-api', | ||
| title: 'Fetch total points spent', | ||
| sectionContent: ` | ||
| To calculate the point balance, we will be calculating the total amount a customer has spent, then subtracting any point redemptions made. In future iterations of POS UI Extensions, you will be able to calculate total points in a more direct way. |
There was a problem hiding this comment.
| To calculate the point balance, we will be calculating the total amount a customer has spent, then subtracting any point redemptions made. In future iterations of POS UI Extensions, you will be able to calculate total points in a more direct way. | |
| To calculate the point balance, we will be calculating the total amount a customer has spent, then subtracting any point redemptions made. |
I think this is plenty. Partners can figure out better ways if they want to ;)
| 1. Authenticate the request. | ||
| 2. Format the customer ID for the Shopify Admin API. | ||
| 3. Fetch the customer's orders. | ||
| 4. Parse the response and handle any errors. | ||
| 5. Calculate the total amount spent and return the value. |
There was a problem hiding this comment.
In markdown, you can number these all as 1. and the markdown engine will number them for you. Can be useful if you ever want to add a step in the middle. You don't have to re-number them.
| 1. Authenticate the request. | |
| 2. Format the customer ID for the Shopify Admin API. | |
| 3. Fetch the customer's orders. | |
| 4. Parse the response and handle any errors. | |
| 5. Calculate the total amount spent and return the value. | |
| 1. Authenticate the request. | |
| 1. Format the customer ID for the Shopify Admin API. | |
| 1. Fetch the customer's orders. | |
| 1. Parse the response and handle any errors. | |
| 1. Calculate the total amount spent and return the value. |
| anchorLink: 'apply-discount', | ||
| title: 'Add hooks and helpers', | ||
| sectionContent: ` | ||
| Lets create a function to handle the logic of applying a discount to an order. |
There was a problem hiding this comment.
| Lets create a function to handle the logic of applying a discount to an order. | |
| Create a function to handle the logic of applying a discount to an order. |
| type: 'note', | ||
| title: 'Testing tip', | ||
| sectionContent: | ||
| "Use your browser's developer tools to monitor network requests and check for any CORS or authentication issues.", |
There was a problem hiding this comment.
You can link to the debugging page here
| { | ||
| title: 'Routes are not working?', | ||
| description: ` | ||
| Check that your routes are correctly defined. If you are using Remix, check that your routes are correctly defined in the \`routes\` directory. |
There was a problem hiding this comment.
You can link to the Remix routing docs here!
|
I noticed in the video, that the gif you provided has an RN error. We probably don't want to be surfacing any POS implementation details publicly, and it doesn't look as polished. Could we replace the gif with one recorded using an internal build, or even an app store build? |
Background
Accompanying PR
Resolves https://github.com/Shopify/pos-next-react-native/issues/42764
As part of the deprecating legacy extensions project, this PR aims to educate developers on how to create a loyalty extension following the deprecation of legacy UI Extensions. This PR will show developers create a tutorial that showcases how to build a loyalty extension using POS UI Extensions.
Solution
This PR uses generated docs to create documentation to be hosted on shopify dev docs.
The tutorial shows developers how to do the following:
LoyaltyExtensionDemo.mov
🎩
Checklist