@shopify/discount-app-components provides a set of stateless discount components to help 3p app developers create AppBridge-powered discounts apps.
While we strive to keep the library updated, please note that the current version available in the Shopify admin may be different from this version. We will communicate upcoming updates as they are planned.
For more information about creating apps for the Shopify App Store, see the app development documentation.
Run the following command using npm:
npm install @shopify/discount-app-components --saveIf you prefer Yarn, use the following command instead:
yarn add @shopify/discount-app-components🛑 The project has
peerDependenciesof@shopify/app-bridge,@shopify/app-bridge-react, and@shopify/polariswhich must also be installed in your app.
-
Import the CSS for this repo and Polaris directly into your project if your asset packager supports it:
import '@shopify/discount-app-components/build/esm/styles.css'; import '@shopify/polaris/build/esm/styles.css';
Otherwise include the CSS in your HTML. We suggest copying the styles file into your own project, but you may also use it directly:
<link rel="stylesheet" href="https://unpkg.com/@shopify/discount-app-components@<your version number>/build/esm/styles.css" /> <link rel="stylesheet" href="https://unpkg.com/@shopify/polaris@<your version number>/build/esm/styles.css" />
-
This library contains a number of locale-specific components, and you will be required to pass a
localeand aianaTimezoneto the discounts AppProvider. Also, this library will require you to wrap your app in a Polaris AppProvider and an AppBridge AppProvider. A full example of an app root can be found below:import {Page, AppProvider as PolarisAppProvider} from '@shopify/polaris'; import {Provider as AppBridgeProvider} from '@shopify/app-bridge-react'; import {AppProvider} from '@shopify/discount-app-components'; // See [Polaris AppProvider documentation](https://github.com/Shopify/polaris/blob/main/polaris-react/src/components/AppProvider/README.md#using-translations) for more details on using Polaris translations import enPolarisTranslations from '@shopify/polaris/locales/en.json'; // Import polaris styles import "@shopify/polaris/build/esm/styles.css"; // Import this discount-app-components styles import "@shopify/discount-app-components/build/esm/styles.css"; export default function App() { ... return ( <AppBridgeProvider config={/* pass your app bridge config here */}> <PolarisAppProvider i18n={enPolarisTranslations}> {/* discount-app-component specific AppProvider */} <AppProvider locale="en-US" ianaTimezone="America/Los_Angeles"> <Page title="Example app"> {/* Add your discount components here */} </Page> </AppProvider> </PolarisAppProvider> </AppBridgeProvider> ); }
Note: you may need to rename the discounts AppProvider to avoid clashing with another AppProvider component:
import {AppProvider as DiscountAppComponentsProvider} from '@shopify/discount-app-components';And in your app root:
<DiscountAppComponentsProvider
locale="en-US"
ianaTimezone="America/Los_Angeles"
>
<Page title="Example app">{/* Add your discount components here */}</Page>
</DiscountAppComponentsProvider>-
In your terminal, install yalc globally.
npm i yalc -g -
In your terminal, run
yalc publish --privatefrom the discount-app-components repo -
In your terminal, open a second tab in your consuming project's directory and run
yalc add @shopify/discount-app-components. This will the dependency to your project's package.json that resembles the following:
"dependencies": {
...
"@shopify/discount-app-components": "file:.yalc/@shopify/discount-app-components",
...
}- Build your project to install the @shopify/discount-app-components's dependencies (e.g.
yarn). NOTE This may update your project's dependency lockfile, be cautious about committing changes added by importing @shopify/discount-app-components locally.
- Republish your changes from @shopify/discount-app-components with
yalc publish --private - Update the dependency in your consuming project with
yalc update @shopify/discount-app-components- Note that you may need to
rm -rf ./node_modules && rm -rf .yalc && yarnfor the changes to apply.
- Note that you may need to
If you run into an error that resembles the following:
ERROR in ./node_modules/@shopify/react-i18n/build/esm/i18n.mjs 406:68-76
Can't import the named export 'TimeUnit' from non EcmaScript module (only default export is available)
@ ./node_modules/@shopify/react-i18n/build/esm/index.mjs
@ ./node_modules/@shopify/react-i18n/index.mjs
@ ./node_modules/@shopify/discount-app-components/build/esm/components/FormattedNumberField/FormattedNumberField.js
@ ./node_modules/@shopify/discount-app-components/build/esm/index.js
@ ./src/App.js
@ ./src/index.jsYou may need to update your webpack.config.js to include a module.rules of:
{
test: /\.mjs$/,
include: /node_modules/,
type: 'javascript/auto',
}Writing changelogs and releasing should be as seamless and automated as possible. This repo uses changesets to version and release packages. To create a new version and release, follow these steps:
- Changes are made in a working branch and it is deemed that a version (patch/minor/major) bump is needed.
- On the working branch:
a. If you want to include those changes into the changelog, run
yarn changeset addand commit the generated changesets. b. If you don't want to include those changes in the changelog, you can label your pr with 🤖 Skip Changelog. - Then push the generated changesets and or changes to your working branch
- Merge working branch as you would normally, after getting reviews and CI passing
- When feature work is merged into main there is a release GitHub action that runs which generates a Version Packages pull request.
- It runs
yarn versionand incorporates the changesets into the changelog and bumps the version accordingly. (patch/minor/major) It then creates aVersion Packagespull request. - Merge the Version Packages PR.
- The release action runs
yarn release, which publishes the package to npm.
Please see our contributing guidelines for details.
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "github-actions[bot]")
![shopify-github-actions-access[bot] avatar](https://avatars.githubusercontent.com/in/221189?v=4 "shopify-github-actions-access[bot]")
![spy-v2[bot] avatar](https://avatars.githubusercontent.com/in/118817?v=4 "spy-v2[bot]")
![translation-platform[bot] avatar](https://avatars.githubusercontent.com/in/7649?v=4 "translation-platform[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent