feat: use CodeEditor on promotion rules

commercelayer · Oct 29, 2024 · d121705 · d121705
1 parent 9b85782
commit d121705
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 19 deletions.
diff --git a/apps/promotions/src/data/promotions/configs/flex_promotions.tsx b/apps/promotions/src/data/promotions/configs/flex_promotions.tsx
@@ -1,4 +1,4 @@
-import { HookedInputTextArea, Spacer } from '@commercelayer/app-elements'
+import { HookedCodeEditor, Spacer } from '@commercelayer/app-elements'
 import { z } from 'zod'
 import type { PromotionConfig } from '../config'
 import { genericPromotionOptions } from './promotions'
@@ -28,18 +28,12 @@ export default {
     Fields: () => (
       <>
         <Spacer top='6'>
-          <HookedInputTextArea
-            rows={25}
-            style={{
-              fontFamily: 'monospace',
-              fontSize: '12px',
-              lineHeight: '1.3rem'
-            }}
+          <HookedCodeEditor
             name='rules'
             label='Rules'
-            placeholder='{
-  "rules": []
-}'
+            language='json'
+            jsonSchema='order-rules'
+            height='600px'
           />
         </Spacer>
       </>

diff --git a/apps/promotions/src/pages/NewPromotionPage.tsx b/apps/promotions/src/pages/NewPromotionPage.tsx
@@ -36,7 +36,14 @@ function Page(props: PageProps<typeof appRoutes.newPromotion>): JSX.Element {
         defaultValues={{
           currency_code: 'USD',
           max_quantity: 1,
-          apply_the_discount_to: 'all'
+          apply_the_discount_to: 'all',
+          rules: JSON.stringify(
+            {
+              rules: []
+            },
+            undefined,
+            2
+          ).concat('\n')
         }}
       />
     </PageLayout>

diff --git a/apps/promotions/src/pages/PromotionDetailsPage.tsx b/apps/promotions/src/pages/PromotionDetailsPage.tsx
@@ -17,6 +17,7 @@ import {
   Badge,
   Button,
   Card,
+  CodeEditor,
   Dropdown,
   DropdownItem,
   Icon,
@@ -165,13 +166,13 @@ function Page(
         {promotion.type === 'flex_promotions' && (
           <Spacer top='14'>
             <Section title='Rules' border='none'>
-              <Text size='small'>
-                <Card overflow='visible' gap='4'>
-                  <pre style={{ overflowX: 'auto' }}>
-                    {JSON.stringify(promotion.rules, undefined, 2)}
-                  </pre>
-                </Card>
-              </Text>
+              <CodeEditor
+                readOnly
+                value={JSON.stringify(promotion.rules, undefined, 2)}
+                language='json'
+                jsonSchema='order-rules'
+                height='600px'
+              />
             </Section>
           </Spacer>
         )}