Git Product home page Git Product logo

ftw-hourly's Introduction

Sharetribe Flex Template for Web: time-based process

CircleCI

This is a template web application for a Sharetribe Flex marketplace ready to be extended and customized. It is based on an application bootstrapped with create-react-app with some additions, namely server side rendering and a custom CSS setup.

Note: We also have two more templates available: FTW-daily and FTW-product. FTW-daily focuses on day-based booking processes. You can get it from GitHub. FTW-product focuses on product marketplace with listing stock management. You can find more information in the introduction to FTW-product Flex Docs.

This template is using time-based booking process. This repository is a fork from the original FTW-daily repository (which is using nightly booking process). So, if you have started working with the original FTW repository and you want to change to FTW-hourly, you can change the 'upstream' remote repository. You can read more about time-based process from the related Flex Docs article

Quick start

Note: this template assumes that you are using time-based transaction process with alias flex-hourly-default-process/release-1, if you are using something else, you should change the alias name from config.js and util/transaction.js

If you just want to get the app running quickly to test it out, first install Node.js and Yarn, and follow along:

git clone [email protected]:sharetribe/ftw-hourly.git             # clone this repository
cd ftw-hourly/                                                 # change to the cloned directory
yarn install                                                   # install dependencies
yarn run config                                                # add the mandatory env vars to your local config
yarn run dev                                                   # start the dev server, this will open a browser in localhost:3000

You can also follow along the Getting started with FTW tutorial and read the background article about Time-based template from the Flex Docs website.

For more information of the configuration, see the FTW Environment configuration variables reference in Flex Docs.

Note: If you want to build your own Flex marketplace on top of the template, you should fork the repository instead of cloning it. See the How to Customize FTW guide in Flex Docs.

For Windows users

We strongly recommend installing Windows Subsystem for Linux, if you are developing on Windows. These templates are made for Unix-like web services which is the most common environment type on host-services for web apps. Also, Flex Docs uses Unix-like commands in articles instead of DOS commands.

Getting started with your own customization

If you want to build your own Flex marketplace by customizing the template application, see the How to Customize FTW guide in Flex Docs.

Deploying to Heroku

Note: Remember to fork the repository before deploying the application. Connecting your own Github repository to Heroku will make manual deploys easier.

See the How to deploy FTW to production guide in Flex Docs for more information.

Deploy

Documentation

See the Flex Docs site: https://www.sharetribe.com/docs/

See also the docs/ directory for some additional internal documentation.

Get help – join Sharetribe Flex Developer Slack channel

If you have any questions about development, the best place to ask them is the Flex Developer Slack channel at https://www.sharetribe.com/flex-slack

License

This project is licensed under the terms of the Apache-2.0 license.

See LICENSE

ftw-hourly's People

Contributors

anh-dinh-jh avatar anttisalmivaara avatar basitowaisi avatar bladealslayer avatar chanthientukk9 avatar dependabot[bot] avatar ggdev avatar gnito avatar halkaise avatar hoangnguyenjourneyh avatar jannekoivistoinen avatar kpuputti avatar kusti avatar lyyder avatar maseh87 avatar milotiger avatar otterleyw avatar ovan avatar rap1ds avatar rdoh avatar rush1506 avatar schwerbelastung avatar shareoc avatar sktoiva avatar talater avatar thomasmalbaux avatar vsaarinen avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

ftw-hourly's Issues

Failed tests of `localizeAndFormatDate`

locaizeAndFormatDate formats the first hour of the day as 24:00 instead of 00:00 for en-US

To Reproduce Steps to reproduce the behavior:

  1. Run yarn test
  2. There are three failing tests:
FAIL  src/util/dates.test.js
  ● date utils › getMonthStartInTimeZone() for 2019-11-23 › should return correct start of the month

    expect(received).toEqual(expected) // deep equality

    Expected: "11/1/2019, 00:00"
    Received: "11/1/2019, 24:00"

      313 |           getMonthStartInTimeZone(date, 'Australia/Eucla')
      314 |         )
    > 315 |       ).toEqual('11/1/2019, 00:00');
          |         ^
      316 |       expect(
      317 |         localizeAndFormatDate(
      318 |           intl,

      at Object.<anonymous> (src/util/dates.test.js:315:9)

  ● date utils › nextMonthFn() for 2019-11-23 › should return correct start of the next month

    expect(received).toEqual(expected) // deep equality

    Expected: "12/1/2019, 00:00"
    Received: "12/1/2019, 24:00"

      337 |       expect(
      338 |         localizeAndFormatDate(intl, 'Australia/Eucla', nextMonthFn(date, 'Australia/Eucla'))
    > 339 |       ).toEqual('12/1/2019, 00:00');
          |         ^
      340 |       expect(
      341 |         localizeAndFormatDate(intl, 'Europe/Helsinki', nextMonthFn(date, 'Europe/Helsinki'))
      342 |       ).toEqual('12/1/2019, 00:00');

      at Object.<anonymous> (src/util/dates.test.js:339:9)

  ● date utils › prevMonthFn() for 2019-11-23 › should return correct start of the next month

    expect(received).toEqual(expected) // deep equality

    Expected: "10/1/2019, 00:00"
    Received: "10/1/2019, 24:00"

      353 |       expect(
      354 |         localizeAndFormatDate(intl, 'Australia/Eucla', prevMonthFn(date, 'Australia/Eucla'))
    > 355 |       ).toEqual('10/1/2019, 00:00');
          |         ^
      356 |       expect(
      357 |         localizeAndFormatDate(intl, 'Europe/Helsinki', prevMonthFn(date, 'Europe/Helsinki'))
      358 |       ).toEqual('10/1/2019, 00:00');

Screenshots
image

Expected behavior

locaizeAndFormatDate should format the first hour of the day as 00:00 and tests should not fail.

Additional context

The issue is due to insufficient configuration of intl.formatTime function. It does not accept hourCycle: 'h11' that is required for the expected format.

More on that here: formatjs/formatjs#1577

Support AWS deployment type

From the documentation, the only production environment supported for deployment is Heroku. Our organization only runs its applications and data infrastructure in AWS and would prefer to host there. Can the team outline hosting instructions for AWS environments? There is no preference to what AWS services would be used to host the application.

Payout details page doesn't work with Japanese bank details

Describe the bug

When entering payout details for Japanese bank accounts the submit button remains disabled even when all the details are correct.

To Reproduce

  1. In a testing account (with a test Stripe key), go to Payout Details page.
  2. Enter the following test details:
    Branch name: Akasaka
    Branch code: 000
    Bank name: Sumitomo Mitsui Banking Corporation
    Bank code: 1100
    Bank account owner name: John Doe
    Bank account number: 0001234

Expected behavior

As those are valid details in a Stripe test environment, the submit button should become enabled.

But even though Stripe successfully returns a token, the submit button remains disabled.

CleanShot 2020-05-11 at 11 33 26@2x

Additional context and possible solution

The problem seems to stem from the fact that FTW is sending unrecognized parameters to Stripe as can be seen here:

CleanShot 2020-05-11 at 12 00 17@2x

When Stripe returns those values with the token it does not remove whitespaces from them.
FTW, on the other hand, expects those values to be "cleaned" (spaces removed) as can be seen here:

inputType => values[inputType] !== cleanedString(this.state[inputType].value)

Since the result that returns from Stripe is different than expected, valuesAreUnchanged is greater than 0 (see line 156 in the link above) and the submit button remains disabled.

I was able to get around the problem by not cleaning up those two values:

const changedValues = inputsNeeded.filter(
  inputType => {
    // Stripe does not "clean up" the `bankName` and `accountOwnerName` strings
    const expected = ["bankName", "accountOwnerName"].includes(inputType) ? this.state[inputType].value : cleanedString(this.state[inputType].value);
    return values[inputType] !== expected;
  }
);

But that seems like a hack and I am not 100% confident how this will affect other countries, and whether there are other such unrecognized parameters in other countries besides these two.

Images are get duplicated at photos tab after listing update

When adding new photos to an existing listing the added photos are duplicated after form submission.

To Reproduce Steps to reproduce the behavior:

  1. Go to edit existing listing
  2. Upload new photo
  3. Click 'Save photos'
  4. See newly added photos duplicated

Additional context The problem was introduced with 0291482 and causes the imageOrder field doesn't get cleared after submission.

When changing the month in the ftw-hourly template on booking, there are no timeslot options available to select even if there is availability on those days

**In ftw-hourly template when you go to the listing page, you click on the calendar and change the month in the calendar and select a date from that changed month, you won't get to see any of the timeslots. I debugged the issue and found out that the currentMonth was resetting to the original current month not to the changed one.

To Reproduce
Steps to reproduce the behavior:

  1. Go to 'Listing Page'
  2. Click on 'Date Picker', where you get to select the booking date,
  3. Change the month.
  4. Select a date from the changed month.
  5. You will see that you won't get to see any timeslots in that particular day, even if there were.
  6. This is because the currentMonth in the state is resetting to original current month not to the changed one.
  7. This is all happening because of new onClose function passed to the date component.

Here i clicked on the calendar and changed the month to december
Screenshot 2021-11-11 at 12 44 07 PM

Here i selected the date from the month december and i didn't got any slots to select from.
As you can clearly see what the problem is, the currentmonth is resetting to old current month.

Screenshot 2021-11-11 at 12 44 21 PM

This is what IMO causes the issue.
Screenshot 2021-11-11 at 12 46 17 PM

Also all calendar days are disabled because of wrong month in the state.
Screenshot 2021-11-11 at 1 05 59 PM

Expected behavior
When you change the month, the timeslots of that changed month should have appeared so that the user can select from those as per his need.

Solution
I have also found a solution to the problem. If you allow me I may present my solution.

Currently I am using MacOS, I have faced the same issue when i was using a linux based machine.

Calendar entries are lost after changing month

Calendar entries are lost after the calendar inside FieldDateAndTimeInput is closed and it's unavailable to select date/time.

To Reproduce Steps to reproduce the behavior:

  1. Go to the listing page
  2. Click on calendar input click next month arrow and select date.
  3. Calendar is closed and no time entries are available
  4. Open calendar again and no dates are available

Expected behavior
Calendar works correctly

Screenshots If applicable, add screenshots to help explain your problem.
Screenshot 2021-08-23 at 20 20 16

Screenshot 2021-08-23 at 20 20 51

Screenshot 2021-08-23 at 20 21 01

Additional context
Only happens when changing the month. The currentMonth is reset before it's actually used inside onBookingStartDateChanged callback.

When removed onClose prop introduced in #158 everything started working correctly.

searchMode: has_any on a filter config is incorrectly encoded in the API request

Describe the bug

It is encoded incorrectly in the API request like so: pub_category=has_any%3Acar

To Reproduce Steps to reproduce the behavior:

add config: {searchMode: 'has_any'} to a SelectMultipleFilter in marketplace-custom-config

if you use the filter through the UI you will see that the first selected option appears to be ignored (i.e. results that should match this option will not be returned by the API). That's because of the encoding described above.

TypeScript Support

This repo (along with ftw-daily, and ftw-product) are excellent starting points for sharetribe apps.

However, I believe that it is critical to add TypeScript support to it, as without it it is much harder to navigate the codebase.

Would you consider investing time into making it strong typed?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.