-
Notifications
You must be signed in to change notification settings - Fork 7
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
kevinfs510
committed
Mar 12, 2020
1 parent
e8d180e
commit a2cbdc0
Showing
7 changed files
with
539 additions
and
338 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,68 @@ | ||
| = OstWallet Redemption Config | ||
|
|
||
| == Introduction | ||
|
|
||
| App developers can configure the text shown on redemption page. | ||
|
|
||
| To configure the content, the sdk needs to be provided with https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/JSON[JSON object]. | ||
|
|
||
| == Dictionary Data Structure | ||
|
|
||
| Here is the small sample json representation of the configuration. | ||
|
|
||
| [source,json] | ||
| ---- | ||
| { | ||
| "common": { | ||
| "walletIcon": null, | ||
| "storeIcon": null | ||
| }, | ||
| "skuListScreen": { | ||
| "navHeader": null, | ||
| "header": null, | ||
| "description": null | ||
| }, | ||
| "skuDetailsScreen": { | ||
| "navHeader": null | ||
| } | ||
| } | ||
| ---- | ||
|
|
||
| In the above example: | ||
|
|
||
| * The key `common` includes options to configure the wallet icon in header and the store icon. | ||
| * The key `skuListScreen` allows to configure the navigation header and the header and description shown on the redemption store list page. | ||
| * The key `skuDetailsScreen` allows to configure the navigation header shown on the redemption store details page. | ||
|
|
||
| == Redemption Config | ||
|
|
||
| The following are the customizable options provided. | ||
| These can be set in the above config. | ||
|
|
||
| |=== | ||
| | customizable component | Config Keys | Config Type | ||
|
|
||
| | Wallet icon | ||
| | - walletIcon | ||
| | Custom icon Image to be rendered. | ||
|
|
||
| | Store icon | ||
| | - storeIcon | ||
| | Custom icon Image to be rendered. | ||
|
|
||
| | Skulist Header | ||
| | - skuListScreen.header | ||
| | String | ||
|
|
||
| | Skulist Description | ||
| | - skuListScreen.description | ||
| | String | ||
|
|
||
| | SkuDetails Screen Navigation header | ||
| | - skuDetailsScreen.navHeader | ||
| | String | ||
|
|
||
| | Skulist Screen Navigation header | ||
| | - skuListScreen.navHeader | ||
| | String | ||
| |=== |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| = OstRedemption Flow | ||
|
|
||
| == Introduction | ||
|
|
||
| OstRedemption component is a pre-built UI component available exclusively in `ost-wallet-sdk-react-native` SDK. | ||
| It consist two pages - one displaying redeemable product list and another displaying product details and redemption options. | ||
| It can be used by end-users to integrate redemption flow into their app. | ||
|
|
||
| ____ | ||
| *IMPORTANT:* This feature requires application to use https://reactnavigation.org/docs/en/getting-started.html[React Navigation] package. | ||
| ____ | ||
|
|
||
| == Usage | ||
|
|
||
| === Create Redemption Flow stack navigation | ||
|
|
||
| [source,js] | ||
| ---- | ||
| import {OstRedeemableSkus, OstRedeemableSkuDetails } from '@ostdotcom/ost-wallet-sdk-react-native'; | ||
| let redemptionStack = createStackNavigator( | ||
| { | ||
| RedeemableSkusScreen: OstRedeemableSkus, | ||
| RedeemableSkuDetails: OstRedeemableSkuDetails | ||
| } | ||
| ); | ||
| ---- | ||
|
|
||
| === Navigate to settings page | ||
|
|
||
| `ostUserId` and `ostWalletUIWorkflowCallback` are mandetory parameters that need to be passed as params to the `RedeemableSkusScreen` screen. | ||
|
|
||
| [source,js] | ||
| ---- | ||
| const ostUserId = <APPLICATION-USER-OST-USER-ID> | ||
| const delegate = new OstWalletUIWorkflowCallback(ostUserId, {}) | ||
| this.props.navigation.push("RedeemableSkusScreen", {'ostUserId': ostUserId , | ||
| 'ostWalletUIWorkflowCallback': delegate, | ||
| 'navTitle': 'My Store'}); | ||
| ---- | ||
|
|
||
| ____ | ||
| *Note* + Developer needs to create a class extends from `OstWalletUIWorkflowCallback` and write logic to get passphrase prefix from their application server. | ||
| Please refer link:OstWalletUI.md#setup-your-passphrase-prefix-delegate[this] section for documentation. | ||
| ____ | ||
|
|
||
| == UI Customization | ||
|
|
||
| Developer can customize Redemption flow by updating respective properties mentioned in image. | ||
| OstTheme config shown link:./configs/ost-sdk-theme-config.js[here] | ||
|
|
||
| image::images/redemptionFlow.png[copy-framework-file] | ||
|
|
||
| == Redemption Content | ||
|
|
||
| Developer can make various modifications in redemption flow component. | ||
| To modify contet, xref:./OstRedemptionConfig.adoc[refer here]. | ||
|
|
||
| [source,js] | ||
| ---- | ||
| import ost_sdk_redemption_config from "../../theme/ostsdk/ost-sdk-redemption-config"; | ||
| import { OstRedemableCustomConfig } from '@ostdotcom/ost-wallet-sdk-react-native'; | ||
| OstRedemableCustomConfig.setConfig(ost_sdk_redemption_config); | ||
| ---- |
Oops, something went wrong.