chore: update labels

packages/app/package.json

@@ -15,8 +15,8 @@
     "prepare": "touch ./public/config.local.js"
   },
   "dependencies": {
-    "@commercelayer/app-elements": "^1.12.3",
-    "@commercelayer/sdk": "5.28.0",
+    "@commercelayer/app-elements": "^1.12.4",
+    "@commercelayer/sdk": "5.30.0",
     "@hookform/resolvers": "^3.3.4",
     "lodash": "^4.17.21",
     "react": "^18.2.0",

packages/app/src/components/PromotionForm.tsx

@@ -40,8 +40,7 @@ export function PromotionForm({
   const [, setLocation] = useLocation()
   const methods = useForm<z.infer<typeof promotionConfig.form>>({
     defaultValues,
-    resolver: zodResolver(promotionConfig.form),
-    mode: 'onTouched'
+    resolver: zodResolver(promotionConfig.form)
   })
 
   useEffect(
@@ -93,10 +92,8 @@ export function PromotionForm({
               <HookedInputDate name='expires_at' label='Expires on' />
             </Grid>
           </Spacer>
-        </Section>
-      </Spacer>
-      <Spacer top='14'>
-        <Section title='Discount'>
+
+          {/* follows the promotion specific fields */}
           <Spacer top='6'>
             <HookedInput
               type='number'
@@ -105,7 +102,7 @@ export function PromotionForm({
               name='percentage'
               label='Percentage discount'
               hint={{
-                text: 'How much the order subtotal is discounted in percentage.'
+                text: 'The applied percentage discount.'
               }}
             />
           </Spacer>

packages/app/src/data/ruleBuilder/form/RuleBuilderForm.tsx

@@ -93,7 +93,7 @@ export function RuleBuilderForm({
             methods.formState.isSubmitting || !methods.formState.isValid
           }
         >
-          Add condition
+          Add
         </Button>
       </Spacer>
     </HookedForm>

packages/app/src/hooks/useDeleteOverlay.tsx

@@ -22,14 +22,14 @@ export function useDeleteOverlay(): OverlayHook {
     show: open,
     Overlay: ({ promotion }) => {
       return (
-        <OverlayElement>
+        <OverlayElement backgroundColor='light'>
           <PageHeading
             title={`Confirm that you want to cancel the promotion ${promotion.name}`}
             navigationButton={{
               onClick: () => {
                 close()
               },
-              label: 'Cancel',
+              label: 'Close',
               icon: 'x'
             }}
             description='This action cannot be undone, proceed with caution.'

packages/app/src/pages/EditPromotionPage.tsx

@@ -29,7 +29,7 @@ function Page(
       mode={mode}
       gap='only-top'
       navigationButton={{
-        label: 'Cancel',
+        label: 'Close',
         icon: 'x',
         onClick() {
           setLocation(

packages/app/src/pages/NewSelectTypePage.tsx

@@ -26,7 +26,7 @@ function Page(): JSX.Element {
       mode={mode}
       gap='only-top'
       navigationButton={{
-        label: 'Cancel',
+        label: 'Close',
         icon: 'x',
         onClick() {
           setLocation(appRoutes.home.makePath({}))

packages/app/src/pages/PromotionConditionsPage.tsx

@@ -36,7 +36,7 @@ function Page(
       mode={mode}
       gap='only-top'
       navigationButton={{
-        label: 'Cancel',
+        label: 'Close',
         icon: 'x',
         onClick() {
           setLocation(
@@ -88,7 +88,7 @@ function Page(
           <Spacer top='2'>
             <ButtonCard
               fullWidth
-              iconLabel='Add condition'
+              iconLabel='New condition'
               onClick={() => {
                 setLocation(
                   appRoutes.newPromotionCondition.makePath({