shopify / discount-app-components Goto Github PK

Description

Add the applies to section in the value card.

Issue summary

• add a bit more context to the README with links out to docs

Feature request summary

It would make it easier for users of this library if they could consult the storybook as a hosted reference document on the web. This would increase visibility and make components more discoverable.

Rationale

This will increase visibility for the library and make components more discoverable.

Feature request summary

Maybe I don't get how to do that, but sometimes I have integer value, so there is no need for ".00" digits. How I can fix that ? Pls help

Rationale

Better looking from ui perspective

Issue summary

After upgrading to V4 of @shopify/app-bridge-react as per the migration docs, this library throws an error due to trying to import the now deprecated <Provider /> component in this test file.

Expected behavior

No error should be thrown.

This library should also be updated to use the latest version of @shopify/app-bridge-react

Actual behavior

The thrown error is:

[ERROR] No matching export in 
"node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@shopify/app-bridge-react/dist/index.js" for import "Provider"

node_modules/.pnpm/@[email protected]_@[email protected]_@shopify+app-bridge@3._fdrtohdej5n7wsk37q6fjgkki4/node_
modules/@shopify/discount-app-components/build/esm/components/DiscountAppComponentsTestProvider/DiscountAppComponentsTestProvider.js:3:9:
3 │ import { Provider } from '@shopify/app-bridge-react';

Steps to reproduce the problem

1. Start from the Remix app template, add the discount-app-components package
2. Update @shopify/app-bridge-react to the latest version
3. Try to run the app

Specifications

• Are you using the React components? (Y/N): Y
• discount-app-components version number: 2.1.2
• Browser: N/A
• Device: N/A
• Operating System: N/A

👋 It's been ~5 months since the last released version. Given that many developers seem to still rely on this package in production environments, it would be beneficial for the community if you could share the project's current status or future plans. This information would allow us to better plan for our projects and make informed decisions about the use of this package.

Issue summary

When changesets are picked up by the Version Packages pr, the CI does not run as expected.

Expected behavior

Version Packages PR run GH Actions automatically when new changes are committed.

Actual behavior

GH Action for Tests node doesn't run

Issue summary

Module is stuck on Polaris Version 11 when Version 12 is updated across all other @Shopify modules

e7312db

It seems that the current main branch has since fixed this issue? But it's not pushed?

bf4b1f1

Looking to get a patch pushed that supports Polaris Version 12

Polaris is now ^18.0.0 see this.

This package is preventing me from updating my app, is this planned to be updated too?

Thank you

Dear team,

Please find below details of an issue that I've just found while trying to build a new discount app.

Issue summary

The language is not localized by AppProvider. AppProvider does not localize the language. No matter which language is specified, the display will always be in English. I have specified the following
By the way, this is the same issue that was described on issue #60
That old issue mentioned that the problem was presumably caused by the way the i18nManager was loading the locales, which was specifically for Webpack. However, it should be also compatible with Vite as this is the way latest Shopify CLI scaffolds a fresh new app.

I'm using latest code and followed official documentation (check steps below)

Expected behavior

When creating a new discount, texts should be localized and shown in specified supported locale, e.g., spanish.

Actual behavior

When creating a new discount, texts are not localized and always showing english (fallback)

Steps to reproduce the problem

1. Create an app using latest Shopify CLI (3.62.0) with Remix template, as explained here
2. Follow the tutorial here (Javascript selected as language):
3. Build UI according to this doc
4. Execute npm install && npm run dev
5. Change locale on app/components/providers/DiscountProvider.jsx as code below (anything different from english, such as "es-AR" or "es")

import { AppProvider } from "@shopify/discount-app-components";
import "@shopify/discount-app-components/build/esm/styles.css";
export function DiscountProvider({ children }) {
  return (
    <AppProvider locale="es-AR" ianaTimezone="America/Buenos_Aires">
      {children}
    </AppProvider>
  );
}

6. Try to create a new discount using this new app
7. Confirm locale is still english (for components that come within this package)

Specifications

• Are you using the React components? (Y/N): Y

System:
    OS: Linux 5.15 Ubuntu 20.04.6 LTS (Focal Fossa)
    CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
    Memory: 2.34 GB / 15.47 GB
    Container: Yes
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 20.11.1 - ~/.nvm/versions/node/v20.11.1/bin/node
    npm: 10.2.4 - ~/.nvm/versions/node/v20.11.1/bin/npm
  Browsers:
    Chrome: 116.0.5845.110
    Chromium: 126.0.6478.55
  npmPackages:
    @shopify/discount-app-components: ^3.0.0 => 3.0.0 
    react: ^18.2.0 => 18.3.1 
    react-dom: ^18.2.0 => 18.3.1 

Thank you in advance!

Issue summary

Often in this codebase, import statements are written like import type {RecurringPaymentType} from '~/constants'; (for example, here). The ~/ prefix results in Typescript errors.

Expected behavior

Types should be referenced using relative paths that don't include a tilde.

Actual behavior

This results in Typescript errors like the following:

node_modules/@shopify/discount-app-components/build/ts/latest/src/components/CountriesAndRatesCard/utilities.d.ts:2:30 - error TS2307: Cannot find module '~/types' or its corresponding type declarations.

2 import type { Country } from '~/types';
                               ~~~~~~~~~

Workaround

There are two workarounds. First, you can disable type checking for the discount-app-components dependency, which is not optimal since we would not be able to verify types. The alternative is to declare an ambient module that re-exports the types:

declare module '~/types' {
	export * from '@shopify/discount-app-components/build/ts/latest/src/types';
}

Hi, our license detection automation is having trouble detecting that this package is MIT, if it works for you it would be great to update the metadata in package.json, thanks!

Feature request summary

Currently duplicate title errors can only be rendered in a banner, as MethodCard has no inline error rendering capability - a potential solution would be to add an errors prop to the component.

Rationale

Without this feature, apps are unable to follow the app design alert guidelines.

Also

Where is the best place to report bugs? The discountAutomaticAppUpdate mutation currently returns doubles of the title must be unique error :D

{
    "data": {
        "discountAutomaticAppUpdate": {
            "userErrors": [
                {
                    "field": [
                        "automaticAppDiscount",
                        "title"
                    ],
                    "message": "must be unique",
                    "__typename": "DiscountUserError"
                },
                {
                    "field": [
                        "automaticAppDiscount",
                        "title"
                    ],
                    "message": "must be unique",
                    "__typename": "DiscountUserError"
                }
            ],
            "__typename": "DiscountAutomaticAppUpdatePayload"
        }
    },
   ...
}

This is confusing because when you view and active discount you get a message under the performance section that says the discount is not active.

I think isEditing is supposed to be !isEditing on this line.

Issue summary

https://shopify.dev/docs/apps/build/discounts/discount-function-examples/order-minimum-subtotal
https://github.com/Shopify/function-examples/tree/order-discount-example/sample-apps/discounts/extensions

The Order Discount sample code is automatically upgraded to discount-app-components to 3.0, and an error is reported

10:14:45 │               remix │     app/routes/app.minimum-subtotal.$functionId.$id.jsx:29:149:
10:14:45 │               remix │       29 │ ...Card, UsageLimitsCard, onBreadcrumbAction } from "@shopify/disc...
10:14:45 │               remix │          ╵                           ~~~~~~~~~~~~~~~~~~

Feature request summary

We'd like to upgrade to Polaris 13, but this library has a peer dependency on "^12.0.0". Perhaps something like "^12.0.0 | ^13.0.0".

Rationale

This would allow us to use the latest release of Polaris with this library.

#117

Feature request summary

AppBridge resource picker does not have "CustomerSegment" resource type so I believe this issue should be resolved in @shopify/app-bridge-react first.

Rationale

This component is listed in the docs but cannot be found anywhere in the GitHub:

<CustomerEligibilityCard
  eligibility={eligibilityField}
  selectedCustomerSegments={selectedCustomerSegmentsField}
  selectedCustomers={selectedCustomersField}
  customerSegmentSelector={
    <CustomerSegmentSelector
      selectedCustomerSegments={selectedCustomerSegmentsField}
    />
  }
  customerSelector={
    <CustomerSegmentSelector selectedCustomers={selectedCustomersField} />
  }
/>

https://github.com/Shopify/discount-app-components/tree/main/src/components/CustomerEligibilityCard

We have received a translation request but there is a question blocking translation work. Your help is needed.

Click the following links to answer the questions

⚠️ Replying directly to this issue will not work! 🙅‍♀️

This issue will be automatically closed once all the questions are resolved.

• What would be placed in the placeholder?

Not your issue?

Forward the issue to someone with more context; please don't leave this pending. 🙏

Questions?

Hop in the #help-i18n-and-translation Slack channel.

Issue summary

No padding on MethodCard.

"@shopify/discount-app-components": "^1.5.0",
"@shopify/polaris": "^11.17.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",

Expected behavior

Should have appropriate padding.

Actual behavior

Method Card:

Usage Limits Card:

Specifications

• Are you using the React components? (Y/N): Y
• discount-app-components version number: 1.5.0 (happening since 1.3.0)
• Browser: Chrome
• Device: Macbook
• Operating System: Ventura

Or run npx envinfo --system --binaries --browsers --npmPackages react,react-dom,@shopify/discount-app-components to provide specifications on your environment including version numbers, browser, device, and operating system.

Paste the results here:

System:
    OS: macOS 13.0.1
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 719.01 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.17.0 - /usr/local/bin/node
    Yarn: 1.22.19 - ~/shopify/easy-discounts/node_modules/.bin/yarn
    npm: 8.1.2 - /usr/local/bin/npm
  Browsers:
    Chrome: 117.0.5938.88
    Safari: 16.1
  npmPackages:
    @shopify/discount-app-components: ^1.5.0 => 1.5.0 
    react: ^18.2.0 => 18.2.0 
    react-dom: ^18.2.0 => 18.2.0 

Issue summary

I fork and use the package to support localization languages.
When deploying to Heroku using docker with the following command
git push heroku main
I get an error during npm install.

If I install directly without forking this package, the problem does not occur.

Expected behavior

Installation is completed.

Actual behavior

Insufficient memory as shown below.

remote: Step 6/8 : RUN npm install github:maneko00/discount-app-components
remote:  ---> Running in 4b4d7094a667
remote: [email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-class-properties instead.
remote: npm WARN deprecated @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-object-rest-spread instead.
remote: The command '/bin/sh -c npm install' returned a non-zero code: 137
remote: 
remote: Verifying deploy...
remote: 
remote: !       Push rejected to deploy-test-01.
remote: 
To https://git.heroku.com/deploy-test-01.git
 ! [remote rejected] main -> main (pre-receive hook declined)
error: failed to push some refs to 'https://git.heroku.com/deploy-test-01.git'

Steps to reproduce the problem

1. Fork this project.
2. Allow npm install of the forked project.
   package.json

"dependencies": {
    "my-package": "github:user/discount-app-components"
}

3. Deploy the application to Heroku according to the article.
   https://shopify.dev/docs/apps/deployment/web

Specifications

• discount-app-components version number:v2.1.1
• Operating System:Mac OS

Issue summary

The language is not localized by AppProvider. AppProvider does not localize the language. No matter which language is specified, the display will always be in English. I have specified the following

<AppProvider locale="ja" ianaTimezone="Asia/Tokyo">

Expected behavior

I hope that the language in the component will be Japanese!

Actual behavior

Always in English

Steps to reproduce the problem

1. Proceed as per this URL
2. Set AppProvider local to ja and ianaTimezone to Asia/Tokyo

Reduced test case

The best way to get your bug fixed is to provide a reduced test case. This CodeSandbox template is a great starting point.

Specifications

• Are you using the React components? (Y/N): Y
• discount-app-components version number: 1.0.7
• Browser: Chrome
• Device: mac
• Operating System: macOS

Or run npx envinfo --system --binaries --browsers --npmPackages react,react-dom,@shopify/discount-app-components to provide specifications on your environment including version numbers, browser, device, and operating system.

Paste the results here:

Feature request summary

part of the recent release to add All for product discount functions: https://shopify.dev/docs/api/functions/reference/product-discounts/graphql/common-objects/discountapplicationstrategy?api%5Bversion%5D=unstable

Rationale

Issue summary

Migrate the discount-app-components to the new version of Polaris. https://polaris.shopify.com/new-design-language

Expected behavior

The discount-app-components uses Polaris 12 and above.

Issue summary

Following the discount app tutorial I got a hook error.

After replacing the <AppProvider> tag in Volumes/new.jsx with a <div> tag, the error stops.

Expected behavior

The hook error message should not appear.

Actual behavior

Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
    resolveDispatcher @shopify_discount-app-components.js:6448
    useMemo23 @shopify_discount-app-components.js:6495
    AppProvider @shopify_discount-app-components.js:39224
    renderWithHooks chunk-6YPNWHZK.js:11191

The above error occurred in the <AppProvider> component:
AppProvider@https://f10f-186-4-136-39.sa.ngrok.io/node_modules/.vite/deps/@shopify_discount-app-components.js?v=743b0033:39219:7
DiscountProvider@https://f10f-186-4-136-39.sa.ngrok.io/components/providers/DiscountProvider.jsx:3:33
Provider@https://f10f-186-4-136-39.sa.ngrok.io/node_modules/.vite/deps/@shopify_app-bridge-react.js?v=743b0033:3072:20
AppBridgeProvider@https://f10f-186-4-136-39.sa.ngrok.io/components/providers/AppBridgeProvider.jsx:5:34
Router@https://f10f-186-4-136-39.sa.ngrok.io/node_modules/.vite/deps/react-router-dom.js?v=743b0033:1097:7
BrowserRouter@https://f10f-186-4-136-39.sa.ngrok.io/node_modules/.vite/deps/react-router-dom.js?v=743b0033:1223:7
FocusManager@https://f10f-186-4-136-39.sa.ngrok.io/node_modules/.vite/deps/@shopify_polaris.js?v=743b0033:3568:22
PortalsManager@https://f10f-186-4-136-39.sa.ngrok.io/node_modules/.vite/deps/@shopify_polaris.js?v=743b0033:3544:24
MediaQueryProvider2@https://f10f-186-4-136-39.sa.ngrok.io/node_modules/.vite/deps/@shopify_polaris.js?v=743b0033:3499:54
div
CustomProperties@https://f10f-186-4-136-39.sa.ngrok.io/node_modules/.vite/deps/@shopify_polaris.js?v=743b0033:1285:7
AppProvider@https://f10f-186-4-136-39.sa.ngrok.io/node_modules/.vite/deps/@shopify_polaris.js?v=743b0033:3602:5
PolarisProvider@https://f10f-186-4-136-39.sa.ngrok.io/components/providers/PolarisProvider.jsx:25:32
App

Steps to reproduce the problem

1. Install https://www.npmjs.com/package/@shopify/discount-app-components 1.0.2
2. Import and wrap the frontend/App.js children with the AppProvider

Specifications

  System:
    OS: macOS 10.15.7
    CPU: (4) x64 Intel(R) Core(TM) i5-4570R CPU @ 2.70GHz
    Memory: 2.17 GB / 16.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 16.16.0 - ~/.nvm/versions/node/v16.16.0/bin/node
    Yarn: 1.22.19 - ~/Development/discount-app/node_modules/.bin/yarn
    npm: 8.11.0 - ~/.nvm/versions/node/v16.16.0/bin/npm
  Browsers:
    Chrome: 103.0.5060.134
    Firefox: 102.0.1
    Safari: 15.5
  npmPackages:
    @shopify/discount-app-components: ^1.0.2 => 1.0.2

Feature request summary

We should move to new Alpha components. Here are the console warnings that I get:

precation: <Card /> is deprecated. This component will be removed in a future major version of Polaris. Use <LegacyCard /> or <AlphaCard /> instead.
Card2 @ Card.js:36
Section.js:21 Deprecation: <Card /> is deprecated. This component will be removed in a future major version of Polaris. Use <LegacyCard /> or <AlphaCard /> instead.
Section6 @ Section.js:21
Stack.js:18 Deprecation: <Stack /> is deprecated. This component will be removed in a future major version of Polaris. Use <LegacyStack /> or <AlphaStack /> instead.
Stack3 @ Stack.js:18
Item.js:12 Deprecation: <Stack /> is deprecated. This component will be removed in a future major version of Polaris. Use <LegacyStack /> or <AlphaStack /> instead.
Item13 @ Item.js:12
Item.js:12 Deprecation: <Stack /> is deprecated. This component will be removed in a future major version of Polaris. Use <LegacyStack /> or <AlphaStack /> instead.
Item13 @ Item.js:12
Section.js:21 Deprecation: <Card /> is deprecated. This component will be removed in a future major version of Polaris. Use <LegacyCard /> or <AlphaCard /> instead.
Section6 @ Section.js:21
Stack.js:18 Deprecation: <Stack /> is deprecated. This component will be removed in a future major version of Polaris. Use <LegacyStack /> or <AlphaStack /> instead.
Stack3 @ Stack.js:18
Item.js:12 Deprecation: <Stack /> is deprecated. This component will be removed in a future major version of Polaris. Use <LegacyStack /> or <AlphaStack /> instead.
Item13 @ Item.js:12
Item.js:12 Deprecation: <Stack /> is deprecated. This component will be removed in a future major version of Polaris. Use <LegacyStack /> or <AlphaStack /> instead.

I believe this is a side effect of #48

Rationale

Current elements that are used in discount-app-components are deprecated.

Feature request summary

Shopify now allows us to combine Product discounts with Order discounts.
The CombinationCard needs to be updated to allow this combination to be selected.

Rationale

In order for custom discount UIs to fully support the underlying combination capability

Issue summary

To ensure dependencies are updated regularly we should enable dependabot.

Expected behavior

Dependabot creates PR's to update dependencies.

Feature request summary

We would like to see Polaris 10 added as a possible peer dependency for this project. E.g., in package.json:

"@shopify/polaris": "^9.7.0 || ^10.0.0",

There also appears to be a bug with the "react-dom" peerDependency. It currently has:

"react-dom": "^16.14.0 || ^17.0.0 || ^10.0.0"

I'm guessing that should be:

"react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0"

Rationale

Trying to use these components in a project using Polaris 10+ fails due to peer dependency failures.

Feature request summary

Add copy to clipboard component to SummaryCard.

Rationale

Shopify admin has a copy to clipboard component for code discounts.

Feature request summary

The library of discount cards currently seems to be missing the "Value" one that allows selecting between fixed or % discount, as well as whether the discount applies to Specific Collections or Products

Rationale

Adding this card to the library will allow developers to build more complex discount codes to support more business needs