Payout paginate

[jamalsoueidan]

Type

enhancement, documentation

---

Description

• Added endpoints for customer payout operations including pagination, balance fetching, individual payout fetching, and payout logs pagination.
• Introduced new models and updated response types for payout account operations.
• Implemented async data fetching using Suspense and Await in the payouts page.
• Updated OpenAPI specification with detailed information on new endpoints and models.

---

Changes walkthrough

	Relevant files
Enhancement	15 files bookingShopifyApi.ts Add Customer Payout Operations and Update Response Types  app/lib/api/bookingShopifyApi.ts Added new endpoints for customer payout operations including pagination, balance fetching, individual payout fetching, and payout logs pagination. Updated response types for payout account creation, fetching, and deletion to align with new model structures. +93/-6    customerPayout.ts Introduce Customer Payout Model                                                    app/lib/api/model/customerPayout.ts Introduced a new model CustomerPayout to represent payout details. +19/-0    customerPayoutAccountCreateBody.ts Refactor CustomerPayoutAccountCreateBody to Interface        app/lib/api/model/customerPayoutAccountCreateBody.ts Changed CustomerPayoutAccountCreateBody from type to interface for consistency. +2/-2      customerPayoutAccountCreateResponse.ts Add Customer Payout Account Create Response Model                app/lib/api/model/customerPayoutAccountCreateResponse.ts Introduced CustomerPayoutAccountCreateResponse interface for create payout account response. +4/-1      customerPayoutAccountDestroy.ts Add Customer Payout Account Destroy Model                                app/lib/api/model/customerPayoutAccountDestroy.ts Introduced CustomerPayoutAccountDestroy interface for destroy payout account response payload. +2/-2      customerPayoutAccountDestroyResponse.ts Add Customer Payout Account Destroy Response Model              app/lib/api/model/customerPayoutAccountDestroyResponse.ts Introduced CustomerPayoutAccountDestroyResponse interface for destroy payout account response. +12/-0    customerPayoutAccountGetResponse.ts Add Customer Payout Account Get Response Model                      app/lib/api/model/customerPayoutAccountGetResponse.ts Introduced CustomerPayoutAccountGetResponse interface for get payout account response. +2/-2      customerPayoutBalanceResponse.ts Add Customer Payout Balance Response Model                              app/lib/api/model/customerPayoutBalanceResponse.ts Introduced CustomerPayoutBalanceResponse interface for get payout balance response. +12/-0    customerPayoutGetResponse.ts Add Customer Payout Get Response Model                                      app/lib/api/model/customerPayoutGetResponse.ts Introduced CustomerPayoutGetResponse interface for get payout response. +12/-0    customerPayoutLogResponse.ts Add Customer Payout Log Response Model                                      app/lib/api/model/customerPayoutLogResponse.ts Introduced CustomerPayoutLogResponse interface for get payout logs response. +12/-0    customerPayoutPaginateResponse.ts Add Customer Payout Paginate Response Model                            app/lib/api/model/customerPayoutPaginateResponse.ts Introduced CustomerPayoutPaginateResponse interface for paginate payouts response. +12/-0    index.ts Export New Customer Payout Models                                                app/lib/api/model/index.ts Exported all newly added models related to customer payouts. +17/-5    usersListResponsePayload.ts Refactor Users List Response Payload                                          app/lib/api/model/usersListResponsePayload.ts Changed total to totalCount in UsersListResponsePayload for consistency. +1/-1      bookingShopifyApi.ts Add Zod Schemas for Customer Payout Operations                      app/lib/zod/bookingShopifyApi.ts Added Zod schemas for new customer payout operations. Updated existing schemas to reflect changes in the API models. +245/-18 ($locale).account.payouts._index.tsx Implement Async Data Fetching in Payouts Page                        app/routes/($locale).account.payouts._index.tsx Implemented Suspense and Await for async data fetching in the payouts page. Added new components for displaying payout account, balance, and payouts history. +138/-68
Documentation	1 files openapi.yaml Update OpenAPI Specification for Customer Payouts                openapi.yaml Updated OpenAPI specification with new endpoints for customer payouts. Added new schemas for request and response models related to payouts. +359/-52

---

✨ PR-Agent usage:
Comment /help on the PR to get a list of all available PR-Agent tools and their descriptions

[github-actions]

PR Description updated to latest commit (edb0bcd)

[github-actions]

PR Review

⏱️ Estimated effort to review [1-5]	4, due to the extensive changes across multiple files, including API updates, model definitions, and frontend logic. The PR introduces new features and modifies existing structures, requiring careful review of both the backend and frontend code, as well as understanding the overall architecture and data flow.
🧪 Relevant tests	No
🔍 Possible issues	Possible Bug: The customerPayoutPaginate function uses a hard-coded page number. This could lead to issues with pagination if not handled dynamically.
	Performance Concern: The loader function in ($locale).account.payouts._index.tsx makes multiple API calls sequentially, which could be optimized by parallelizing these requests.
🔒 Security concerns	No

Code feedback:

---

relevant file	app/routes/($locale).account.payouts._index.tsx
suggestion	Consider using Promise.all to parallelize the API calls in the loader function. This can improve the loading time of the payouts page by fetching data in parallel rather than sequentially. [important]
relevant line	const payoutAccount = getBookingShopifyApi().customerPayoutAccountGet(

---

relevant file	app/lib/api/bookingShopifyApi.ts
suggestion	Implement error handling for the new API endpoint functions (customerPayoutPaginate, customerPayoutBalance, etc.). This could involve try-catch blocks or checking the response status to ensure robustness and reliability of the payout operations. [important]
relevant line	const customerPayoutPaginate = (

---

relevant file	app/routes/($locale).account.payouts._index.tsx
suggestion	Replace the hard-coded page number '1' in the customerPayoutPaginate call with a dynamic value based on query parameters or state. This will allow for proper pagination functionality. [important]
relevant line	page: '1',

---

relevant file	app/lib/api/bookingShopifyApi.ts
suggestion	For the new endpoint functions added, consider using TypeScript generics for the queryClient function to enforce type safety on the return types, improving code reliability and maintainability. [medium]
relevant line	return queryClient({

---

---

✨ Review tool usage guide:

---

Overview:
The review tool scans the PR code changes, and generates a PR review which includes several types of feedbacks, such as possible PR issues, security threats and relevant test in the PR. More feedbacks can be added by configuring the tool.

The tool can be triggered automatically every time a new PR is opened, or can be invoked manually by commenting on any PR.

• When commenting, to edit configurations related to the review tool (pr_reviewer section), use the following template:

/review --pr_reviewer.some_config1=... --pr_reviewer.some_config2=...

• With a configuration file, use the following template:

[pr_reviewer]
some_config1=...
some_config2=...

See the review usage page for a comprehensive guide on using this tool.

[github-actions]

PR Code Suggestions

Category	Suggestions
Enhancement	Add error handling to API calls. Consider adding error handling for the API calls to improve robustness. For example, you could catch errors and log them or return a meaningful error response to the caller. app/lib/api/bookingShopifyApi.ts [328-336] -return queryClient<CustomerPayoutPaginateResponse>({ - url: `/customer/${customerId}/payouts/paginate`, - method: 'GET', - params, -}); +try { + return await queryClient<CustomerPayoutPaginateResponse>({ + url: `/customer/${customerId}/payouts/paginate`, + method: 'GET', + params, + }); +} catch (error) { + console.error('Error fetching payout paginate:', error); + throw new Error('Failed to fetch payout paginate'); +}
	Use integer validation for customer IDs. Consider using zod.number().int() for customerId in customerPayoutPaginateParams and customerPayoutBalanceParams to ensure that the ID is always an integer, which is a common practice for IDs. app/lib/zod/bookingShopifyApi.ts [1847] -customerId: zod.string(), +customerId: zod.number().int(),
	Ensure pagination parameters are positive integers. For page, limit in customerPayoutPaginateQueryParams and customerPayoutLogPaginateQueryParams, consider using zod.number().int().positive() to ensure these values are positive integers, which is more appropriate for pagination parameters. app/lib/zod/bookingShopifyApi.ts [1851-1853] -page: zod.string(), -limit: zod.string().optional(), +page: zod.number().int().positive(), +limit: zod.number().int().positive().optional(),
	Directly validate and parse dates with zod.date(). In customerPayoutPaginateResponse and customerPayoutGetResponse, consider using zod.date() instead of zod.string().datetime() for the date field to directly validate and parse the date. app/lib/zod/bookingShopifyApi.ts [1862] -date: zod.string().datetime(), +date: zod.date(),
	Improve user experience with descriptive loading indicators. Replace the generic fallback content <>asd</> in the Suspense components with more descriptive or user-friendly messages or loading indicators. app/routes/($locale).account.payouts._index.tsx [64] -<Suspense fallback={<>asd</>}> +<Suspense fallback={<div>Loading...</div>}>
	Improve clarity by specifying payoutDetails properties directly in the schema. For the CustomerPayoutAccountCreateBody and similar schemas, consider specifying more detailed properties for payoutDetails directly in the schema instead of using oneOf with references. This can improve clarity and reduce indirection, making the API documentation more straightforward for consumers. openapi.yaml [146-149] payoutDetails: - oneOf: - - $ref: '#/components/schemas/CustomerPayoutMobilePay' - - $ref: '#/components/schemas/CustomerPayoutBankAccount' + type: object + properties: + accountNumber: + type: string + sortCode: + type: string + # Additional properties specific to the payout method
	Define default values for limit and page parameters in the API specification. For the limit and page parameters in the pagination endpoints, consider defining default values directly in the OpenAPI specification. This makes the API self-documenting and clarifies the default behavior for consumers. openapi.yaml [3391-3405] - name: page in: query description: The page number - required: true + required: false schema: type: string + default: "1" - name: limit in: query - description: The limit = default to 10 + description: The limit schema: type: string + default: "10"
Best practice	Use enums for HTTP methods. To ensure type safety and better maintainability, consider using enums for HTTP methods instead of hard-coded strings. app/lib/api/bookingShopifyApi.ts [334] -method: 'GET', +method: HttpMethod.GET,
	Improve type safety for pagination parameters. For better type safety and to avoid potential runtime errors, consider changing the types of page and limit from string to number. app/lib/api/model/customerPayoutLogPaginateParams.ts [12-20] -page: string; -limit?: string; +page: number; +limit?: number;
	Use integer type for pagination-related fields to ensure whole number values. In the CustomerPayoutPaginatePayload schema, consider using a more specific type for currentPage, totalPages, and totalCount such as integer instead of number to enforce that these values must be whole numbers. openapi.yaml [1418-1425] currentPage: - type: number + type: integer totalPages: - type: number + type: integer totalCount: - type: number + type: integer
	Specify allowed values for sortOrder using an enum in the API specification. For the sortOrder parameter in pagination endpoints, consider defining an enum with the allowed values (asc, desc). This clarifies the expected values for API consumers and can prevent invalid requests. openapi.yaml [3397-3400] - name: sortOrder in: query description: The sort order either asc eller desc = default desc schema: type: string + enum: + - asc + - desc + default: "desc"
Maintainability	Simplify type names for clarity and consistency. To ensure consistency and clarity in your codebase, consider renaming CustomerPayoutAccountCreateBodyPayoutDetails to PayoutDetails and CustomerPayoutAccountType to PayoutType if these types are not used in a context outside of payout account creation. app/lib/api/model/customerPayoutAccountCreateBody.ts [11-12] -payoutDetails: CustomerPayoutAccountCreateBodyPayoutDetails; -payoutType: CustomerPayoutAccountType; +payoutDetails: PayoutDetails; +payoutType: PayoutType;
	Simplify the CustomerPayoutStatus type definition for better readability. Instead of using a complex type definition for CustomerPayoutStatus, consider simplifying it by directly exporting the enum. This approach improves readability and maintainability. app/lib/api/model/customerPayoutStatus.ts [8-9] -export type CustomerPayoutStatus = - (typeof CustomerPayoutStatus)[keyof typeof CustomerPayoutStatus]; +export enum CustomerPayoutStatus { + Pending = 'Pending', + Processed = 'Processed', + Failed = 'Failed', +}
Bug	Display the correct payout date in the table. Use the format function with the actual payout.date instead of new Date() to correctly display the date of each payout in the table. app/routes/($locale).account.payouts._index.tsx [83] -{format(new Date(), 'yyyy-MM-dd', {locale: da})} +{format(new Date(payout.date), 'yyyy-MM-dd', {locale: da})}
Documentation	Add descriptions to properties in the CustomerPayout schema for better documentation. For the CustomerPayout schema, consider adding a description for each property to improve the API documentation. Descriptions help API consumers understand the purpose and usage of each field. openapi.yaml [1345-1353] CustomerPayout: type: object properties: customerId: type: number + description: "Unique identifier for the customer." date: type: string format: date-time + description: "The date and time when the payout was initiated." amount: type: number format: double + description: "The amount of the payout."

---

✨ Improve tool usage guide:

---

Overview:
The improve tool scans the PR code changes, and automatically generates suggestions for improving the PR code. The tool can be triggered automatically every time a new PR is opened, or can be invoked manually by commenting on a PR.

• When commenting, to edit configurations related to the improve tool (pr_code_suggestions section), use the following template:

/improve --pr_code_suggestions.some_config1=... --pr_code_suggestions.some_config2=...

• With a configuration file, use the following template:

[pr_code_suggestions]
some_config1=...
some_config2=...

See the improve usage page for a comprehensive guide on using this tool.

[shopify]

Oxygen deployed a preview of your payout-paginate branch. Details:

Storefront	Status	Preview link	Deployment details	Last update (UTC)
Booking Store	✅ Successful (Logs)	Preview deployment	Inspect deployment	April 1, 2024 8:34 PM

Learn more about Hydrogen's GitHub integration.

[jamalsoueidan]

#35