chore: add 'Apply the discount to' section

commercelayer · Mar 1, 2024 · b3c734c · b3c734c
1 parent f2d9ccf
commit b3c734c
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 23 deletions.
diff --git a/packages/app/src/data/formConverters/promotion.ts b/packages/app/src/data/formConverters/promotion.ts
@@ -12,8 +12,7 @@ export function promotionToFormValues(promotion?: Promotion) {
     ...promotion,
     starts_at: new Date(promotion.starts_at),
     expires_at: new Date(promotion.expires_at),
-    show_sku_list: promotion.sku_list != null,
-    show_total_usage_limit: promotion.total_usage_limit != null,
+    apply_the_discount_to: promotion.sku_list != null ? 'sku_list' : 'all',
     show_priority: promotion.priority != null,
     sku_list: promotion.sku_list?.id
   }

diff --git a/packages/app/src/data/promotions/components/PromotionSkuListSelector.tsx b/packages/app/src/data/promotions/components/PromotionSkuListSelector.tsx
@@ -1,10 +1,9 @@
 import type { Promotion } from '#types'
 import {
-  HookedInputCheckbox,
+  HookedInputRadioGroup,
   HookedInputSelect,
   Section,
   Spacer,
-  Text,
   useCoreApi,
   useCoreSdkProvider,
   type InputSelectValue
@@ -18,9 +17,12 @@ export const PromotionSkuListSelector: React.FC<{
   optional?: boolean
   placeholder?: string
 }> = ({ hint, label, promotion, placeholder, optional = false }) => {
+  const fieldName = 'sku_list'
+
   if (!optional) {
     return (
-      <InternalPromotionSkuListSelector
+      <HookedInternalPromotionSkuListSelector
+        name={fieldName}
         label={label}
         hint={hint}
         promotion={promotion}
@@ -34,33 +36,44 @@ export const PromotionSkuListSelector: React.FC<{
       <Section title='Apply the discount to'>
         <Spacer top='6'>
           <Spacer top='2'>
-            <HookedInputCheckbox
-              name='show_sku_list'
-              checkedElement={
-                <Spacer bottom='6'>
-                  <InternalPromotionSkuListSelector
-                    promotion={promotion}
-                    hint={hint}
-                    placeholder={placeholder}
-                  />
-                </Spacer>
-              }
-            >
-              <Text weight='semibold'>Restrict to specific SKUs</Text>
-            </HookedInputCheckbox>
+            <HookedInputRadioGroup
+              name='apply_the_discount_to'
+              viewMode='simple'
+              options={[
+                {
+                  value: 'all',
+                  content: 'All products in the order'
+                },
+                {
+                  value: 'sku_list',
+                  content: 'Selected products',
+                  checkedElement: (
+                    <Spacer bottom='6'>
+                      <HookedInternalPromotionSkuListSelector
+                        name={fieldName}
+                        promotion={promotion}
+                        hint={hint}
+                        placeholder={placeholder}
+                      />
+                    </Spacer>
+                  )
+                }
+              ]}
+            />
           </Spacer>
         </Spacer>
       </Section>
     </Spacer>
   )
 }
 
-const InternalPromotionSkuListSelector: React.FC<{
+const HookedInternalPromotionSkuListSelector: React.FC<{
   label?: string
   hint: string
   promotion?: Promotion
   placeholder?: string
-}> = ({ hint, label, promotion, placeholder = 'Search...' }) => {
+  name: string
+}> = ({ hint, label, promotion, name, placeholder = 'Search...' }) => {
   const { sdkClient } = useCoreSdkProvider()
 
   const { data: skuLists = [] } = useCoreApi('sku_lists', 'list', [
@@ -69,7 +82,7 @@ const InternalPromotionSkuListSelector: React.FC<{
 
   return (
     <HookedInputSelect
-      name='sku_list'
+      name={name}
       label={label}
       isClearable
       hint={{
@@ -103,6 +116,9 @@ const InternalPromotionSkuListSelector: React.FC<{
   )
 }
 
+HookedInternalPromotionSkuListSelector.displayName =
+  'HookedInternalPromotionSkuListSelector'
+
 function getParams({ name }: { name: string }): QueryParamsList {
   return {
     pageSize: 25,

diff --git a/packages/app/src/pages/NewPromotionPage.tsx b/packages/app/src/pages/NewPromotionPage.tsx
@@ -33,7 +33,11 @@ function Page(props: PageProps<typeof appRoutes.newPromotion>): JSX.Element {
     >
       <PromotionForm
         promotionConfig={config}
-        defaultValues={{ currency_code: 'USD', max_quantity: 1 }}
+        defaultValues={{
+          currency_code: 'USD',
+          max_quantity: 1,
+          apply_the_discount_to: 'all'
+        }}
       />
     </PageLayout>
   )