app.discounts.tsx

import React, { useState } from 'react'
import { json, type ActionFunction } from '@remix-run/node'
import { authenticate } from '~/shopify.server'
import { Form, useActionData, useSubmit } from '@remix-run/react'
import { Button, Card, Layout, Page, TextField, FormLayout } from '@shopify/polaris'

export const action: ActionFunction = async ({ request }) => {
  const { admin } = await authenticate.admin(request)

  const formData = await request.formData()

  const dynamicTitle = formData.get('discountTitle')
  console.log(dynamicTitle, 'dynamicTitle')

  try {
    // const discountTitle = 'youtube-example-discount'
    // const startsAt = '2022-06-21T00:00:00Z'
    // const endsAt = '2022-09-21T00:00:00Z'
    // const minimumRequirementSubtotal = 3
    // const discountAmount = 2

    const response = await admin.graphql(
      `#graphql
      mutation discountCodeBasicCreate($basicCodeDiscount: DiscountCodeBasicInput!) {
        discountCodeBasicCreate(basicCodeDiscount: $basicCodeDiscount) {
          codeDiscountNode {
            codeDiscount {
              ... on DiscountCodeBasic {
                title
                codes(first: 10) {
                  nodes {
                    code
                  }
                }
                startsAt
                endsAt
                customerSelection {
                  ... on DiscountCustomerAll {
                    allCustomers
                  }
                }
                customerGets {
                  value {
                    ... on DiscountPercentage {
                      percentage
                    }
                  }
                  items {
                    ... on AllDiscountItems {
                      allItems
                    }
                  }
                }
                appliesOncePerCustomer
              }
            }
          }
          userErrors {
            field
            code
            message
          }
        }
      }`,
      {
        variables: {
          "basicCodeDiscount": {
            "title": dynamicTitle,
            "code": "SUMMER202",
            "startsAt": "2022-06-21T00:00:00Z",
            "endsAt": "2022-09-21T00:00:00Z",
            "customerSelection": {
              "all": true
            },
            "customerGets": {
              "value": {
                "percentage": 0.2
              },
              "items": {
                "all": true
              }
            },
            "appliesOncePerCustomer": true
          }
        }
      }
    )

    if (response.ok) {
      const responseJson = await response.json()

      console.log('created discount')

      return json({
        discount: responseJson.data
      })
    }

    return null
  } catch (err) {
    console.log(err)
  }

  return null
}

const Discounts = () => {
  const [discountTitle, setDiscountTitle] = useState('')
  const [discountCode, setDiscountCode] = useState('')

  const submit = useSubmit()
  const actionData = useActionData()

  console.log('actionData', actionData)

  const generateDiscount = () => submit({}, { replace: true, method: 'POST' })

  return (
    <Page>
      <Layout>
        <Layout.Section>
          <Card>
            <Form onSubmit={generateDiscount} method="POST">
              <FormLayout>
                <TextField
                  id="discountTitle"
                  name="discountTitle"
                  label="Title"
                  autoComplete="off"
                  value={discountTitle}
                  onChange={(value) => setDiscountTitle(value)}
                />
                <TextField
                  id="discountCode"
                  name="discountCode"
                  label="Title"
                  autoComplete="off"
                  value={discountCode}
                  onChange={(value) => setDiscountCode(value)}
                />
                <Button submit>
                  Create Discount
                </Button>
              </FormLayout>
            </Form>
          </Card>
        </Layout.Section>
      </Layout>
    </Page>
  )
}

export default Discounts