capsap/pformz

Paddy form

This is a simple web app to improve a workflow when logging many tasks into zendesk (setting the correct tags and format, checking for duplicates, etc). Previous workflow was a very manual process and would require each ticket to be created individually within the zendesk workspace, and tags would have to be set correctly.

• Link to live site: https://pformz.vercel.app/

Description

This is a Next.JS app with a webform, which submits request to the Zendesk API to create many tickets. Previously, each ticket would have had to been created manually, and each of the tags set via a macro. This app is intended to simplify this process It works via the zendesk api

Challenges and other notes

• UI design
• Learning Next.JS

Tech

• This is a Next.js project bootstrapped with create-next-app.
  • Why Next? Just to learn something new. In hindsight, I'm a little over my head and I do not understand in depth how the app is working. I'm aware that there are client and server components, and it does some nice routing and API calls on the server to hide .env variables and avoids CORS, but still at ill ease with it all.
• Tailwind for styling
• Using Clerk for auth

Getting Started

1. Clone the repo git clone [email protected]:CapSap/pformz.git
2. Install node modules npm i
3. Bring in your zendesk api keys in .env. Get in touch if you want to contribute
4. run the dev server npm run dev
5. Open http://localhost:3000 with your browser to see the result.

You will need to add zendesk api keys to the .env file

pformz's Issues

Ecomm user can update requests with IBT + tracking

Todos

• front end dashboard to view requests
• route to handle submitting update
• [ ]

restrict who can use app

website is quite public- how to restrict users?

Better error message for user when they input a bad / not found sku

the api returns an empty array; how to use that to provide a better message to the user?

do some client side validation, to inform client when they have invalid input in the IBT text area

previously, i was using a server component and server actions to fetch data.

2 problems:

1. how to fetch the data from zendesk
2. how to keep track of the users input

easy fix is to make everything a client component, do the fetch via a route handler.
keep track of user's input via state.
maybe render some cards below to show which ibts are good or not (with a link to the ticket)

Project: label generator

user inputs a sku or supplier barcode (i forgot the name. apn?)

and a pretty a4 printable page is created.

Project todos:

• #31
  • #36
  • #37
  • #38
• #35
• #34
  • #33
  • #32

ideally; user would be able to upload excel, gets changed to appropriate data type and uploaded to databse (or maybe the database can handle excel directly?)

store user can fill out a form to make a request

• #45
• #46
• #47

create a route to update the databse

Infinite redirect loop

Error: Clerk: Infinite redirect loop detected. That usually means that we were not able to determine the auth state for this request. A list of common causes and solutions follows.

Reason 1:
Your Clerk instance keys are incorrect, or you recently changed keys (Publishable Key, Secret Key).
How to resolve:
-> Make sure you're using the correct keys from the Clerk Dashboard. If you changed keys recently, make sure to clear your browser application data and cookies.

Reason 2:
A bug that may have already been fixed in the latest version of Clerk NextJS package.
How to resolve:
-> Make sure you are using the latest version of '@clerk/nextjs' and 'next'.

on FormSubmit, do a post request to above endpoint with formdata in the body

had some trouble linking up the api route that is successfully creating tickets in zendesk with the form submit.

the trouble i was facing was that the request body from the form, when trying to read this on the server it was a ReadableStream. ( i was using a server action to hit an api route, rather than do all the work in the server action)

After lots of searching around I've realised that I didn't need to have any api route- i can do all the 'POST' request within the server action function.

BUT for the below reasons I think I want a "traditional" client component.

• i want to do some more fancy client side validation
• i want to let the user know how many tickets were created, how many were submitted
• i want to alert the user to any typos before they submit
• i want to alter the user to any duplicates (i need to do a search and a fetch before user submits form)

MVP todos for this project

just a place to try and organise progress

• create basic form that accepts input
• implement endpoint to create tickets (do post request to zendesk)
• #2
• #5
• give feedback to user when post request is successful
• #12
• add a captcha
• #8
• #15
  • #4
  • check above list against user input list
  • send unique ibts to zendesk as normal
• deploy app and add url to readme

hook up to database

create front end

bug: form out of sync with existing tickets

if a user is submitting the form multiple times, the web form (existing ticket data) will be out of date.

we'll need to trigger another get after the user submits, or prevent user from submitting form again.

allow users to leave feedback

short term, leave contact links to the github repo.

longer term: create a form to allow accountless creation of github issues

clerk auth is still in dev mode

i think i should change to production, but not sure on the implications of either.

display printable page

create route to handle form submit

style the sign in button

sign in button does not have any style changes when mouse over

Allow user to add notes for each IBT

Allow the user to leave notes when creating the ticket (rather than having to jump in zendesk afterwards). OR maybe its better this way?

IF i wanted to implement i'd need to

• create an input for each green (okay IBT)
• attatch input to the problem IBT object
• insert it in the payload that gets sent to zendesk.

add stock checker

there is an endpoint that i can build a form around

cors bug. fetch requests fail

do not allow duplicate problem IBTs to be sent to zendesk

so if the user inputs 2 x valid ibts, they will both be sent to zendesk. e.g

ask zendesk for all problem ibt numbers (all numbers within a field)

in order to prevent user from submiting a duplicate ibt no, we need to ask zen for what tickets already exist.

give better feedback to user when getting stock for new skus

when making 1 request, and then another for a differnet sku its not obvious to user that the request is successful, or if the results are new. (are the results for the current sku or old?)

So off the bat- i think having some loading state would be good. and maybe something saying results for XXX sku.

create a route to GET data from database

Allow user to search for products without sku

Some sort of search to allow user to search for product skus.

I'd need a database of product names + skus.

still use SKU to fetch the stock levels

add chakra ui

email checker

as a part of the manual order process, OF team is manually checking orders.

Wouldn't it be nice if we could paste in some email addresses, and then a service checks them.

I could split up the checks that we do; some apis check domain names only: https://check-mail.org/domain/cerato.net.au/

So what checks:

• domain name
• fraud database?
• can receive emails?

create database to store data

which database?
Requirements:

• free
• not a huge pain / time sink.
• contribute to career skills (learn something in demand)

notes:

• I've used mongo in the past and it's alright. but also may it is better to be more strict when defining the shape of data. And I didnt like the ORM that i was using. So if i choose mongo I should not use mongoose. But it was nice that mongo was serverless and very free

Brief research:
I think i want to use a sql. just to try it out.
After reading around I think I would like to try PostgreSQL. I don't want to spend any money.

Options:

• planetscale
• aws Aurora (looks complicated and expensive)
• Amazon RDS for PostgreSQL (complicated and not completely free)
• neon
• supabase
• vercel has something (uses neon under the hood)
• cockaroachDB

Project: Store requests. MVP

Keep track of this project in this issue. Overall goal is to replace the spreadsheet, and provide 208 with a csv file to do necessary work

MVP:

• #44
• store user can view past requests made
• store user can leave notes as required (make modifications to request)
• Ecomm user can get a scan file (or file that is formatted in an easy way to drop into excel
• #49
• re-usable function that can lookup skus and return a description (i want to use it in stock level checker)
• enhancement: add stock level checker function to request form

create front end form

Todos:

• form scaffolding
• form styling
• form description / instructions

how to go from excel file format to database?

user form

add authentication

improve styling of the form

draft designs: https://www.figma.com/file/2VyGH5FgTNeWv3oFX4Le9U/pformz?type=design&node-id=0-1&mode=design&t=8cvLHhVLLs5zY1Tw-0