discount-app-components

@shopify/discount-app-components provides a set of stateless discount components to help 3p app developers create discounts apps.

Deprecated

@shopify/discount-app-components is deprecated and no longer maintained. This repository does not accept changes or publish new releases.

Recommended alternatives

1. Polaris web components: For general UI components, use Polaris web components, which offer a maintained, accessible component set.

2. Admin UI Extensions: For building discount apps specifically, we strongly recommend using Admin UI Extensions, which provide a more integrated, future-proof approach to building discount apps.

This change aligns with our broader strategy of consolidating component libraries and providing extension-based approaches for app development.

App development

For more information about creating apps for the Shopify App Store, see the app development documentation.

---

Using the repo

Installation

Run the following command using npm:

npm install @shopify/discount-app-components --save

If you prefer Yarn, use the following command instead:

yarn add @shopify/discount-app-components

🛑 The project has peerDependencies of @shopify/app-bridge, and @shopify/polaris which must also be installed in your app.

Usage

1. 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"
   />

2. This library contains a number of locale-specific components, and you will be required to pass a locale and a ianaTimezone to the discounts AppProvider.

   import {Page, AppProvider as PolarisAppProvider} from '@shopify/polaris';
   import {AppProvider as DiscountsProvider} 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 (
         <PolarisAppProvider i18n={enPolarisTranslations}>
           {/* discount-app-component specific AppProvider */}
           <DiscountsProvider locale="en-US" ianaTimezone="America/Los_Angeles">
             <Page title="Example app">
               {/* Add your discount components here */}
             </Page>
           </DiscountsProvider>
         </PolarisAppProvider>
     );
   }

Note: you may need to rename the discounts AppProvider to avoid clashing with another AppProvider component:

Development

Testing local changes in a consuming project

0. In your terminal, install yalc globally. npm i yalc -g

1. In your terminal, run yalc publish --private from the discount-app-components repo

2. 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",
...
}

3. 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.

To make changes in @shopify/discount-app-components and update your yalc link

1. Republish your changes from @shopify/discount-app-components with yalc publish --private
2. 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 && yarn for the changes to apply.

---

Troubleshooting

Can't import the named export XYZ from non EcmaScript module (only default export is available)

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.js

You may need to update your webpack.config.js to include a module.rules of:

{
  test: /\.mjs$/,
  include: /node_modules/,
  type: 'javascript/auto',
}